I built a WooCommerce configurator on my landingpage, but unfortuantely it doesn’t work. Console shows problem with JS code because of .hasclass() which I just don’t get – can anyone help me?

Thanks a lot!

HTML:

<div id="amounts">
  <button type="button" class="amount-button dreiriegel" value="6,50€" name="7,47€">
    <h2>3 Natural Energy-Riegel</h2>
  </button>
  <button type="button" class="amount-button zwoelfriegel" id="selected" value="23,88€" name="29,88">
    <h2>12 Natural Energy-Riegel</h2>
    <span>Du sparst xyz</span>
  </button>
  <button type="button" class="amount-button vierundzwanzigriegel" value="44,90€" name="59,76€">
    <h2>24 Natural Energy-Riegel</h2>
    <span>Du sparst yz</span>
  </button>
</div>

<div id="offer-price"></div>
<div id="normal-price"></div>

<div id="input_div">
  <input type="button" value="-" id="moins" onclick="minus()">
  <div value="1" id="count">1</div>
  <input type="button" value="+" id="plus" onclick="plus()">
</div>

<form id=„bestell-button" action=„/cart/?add-to-cart=294&variation_id=299&quantity=1&attribute_pa_variante=12-riegel“ method="POST">
  <input type="submit" value="Jetzt bestellen ">
</form>

CSS:

#selected {
  background-color: green;
}

.amount-button {
  width: 100%;
}

.amount-button:hover {
  cursor: pointer;
}

.amount-button:hover {
  background: #DDD;
}

JavaScript:

jQuery(document).ready(function() {
  var selected_oprice = jQuery('#selected').val();
  jQuery('#offer-price').html(selected_oprice);
  var selected_nprice = jQuery('#selected').attr("name");
  jQuery('#normal-price').html(selected_nprice);
});

jQuery(function($) {
  $('.amount-button').click(function() {
    $('.amount-button').not(this).removeAttr('id', 'selected');
    $(this).attr('id', 'selected');
    var selected_oprice = jQuery('#selected').val();
    jQuery('#offer-price').html(selected_oprice);
    var selected_nprice = jQuery('#selected').attr("name");
    jQuery('#normal-price').html(selected_nprice);
  });
});

var count = 1;
var countEl = document.getElementById("count");

function plus() {
  count++;
  countEl.value = count;
  countEl.innerHTML = count;
}

function minus() {
  if (count > 1) {
    count--;
    countEl.value = count;
    countEl.innerHTML = count;
  }
}

function getVariation() {

  var dieses = jQuery(this);

  if (dieses.hasClass(„dreiriegel“)) {
    return 297;
  } else if (dieses.hasClass(„zwoelfriegel“)) {
    return 299;
  } else if (dieses.hasClass(„vierundzwanzigriegel“)) {
    return 300;
  }
}

function getAttribute() {

  var jenes = jQuery(this);

  if (jenes.hasClass(„dreiriegel“)) {
    return 3 - riegel;
  } else if (jenes.hasClass(„zwoelfriegel“)) {
    return 12 - riegel;
  } else if (jenes.hasClass(„vierundzwanzigriegel“)) {
    return 24 - riegel;
  }
}

function getLink() {
  var href = window.location;
  var amount = document.getElementById(„#count“).value;
  var attribute = jQuery(„#selected“).getVariation();
  var variante = jQuery(„#selected“).getAttribute();

  href = href + “cart / ? add - to - cart = 294 & variation_id = “+variante + "&quantity=" + amount + “ & attribute_pa_variante = „+attribute;

  return href;
}

Read more here: Product configurator doesn’t work -.-


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: