Как обновить цену на Ajax на основе выбора диапазона для моих переменных? - PullRequest
Новая
       7

Как обновить цену на Ajax на основе выбора диапазона для моих переменных?

0 голосов
/ 06 апреля 2020

У меня есть этот продукт, который имеет очень много переменных, и я пытаюсь представить их как ползунки диапазона вместо выбора, используя метод здесь: https://jqueryui.com/slider/#hotelrooms

Вы можете см. мое затруднительное положение здесь: http://rt2.flywheelsites.com/produkt/smavarereol/

Проблема, с которой я сталкиваюсь, заключается в том, что, пока она работает и правильный товар добавляется в корзину, у меня возникают проблемы обновление цены на каждом шаге ползунка Range. Могу ли я что-нибудь добавить, чтобы он проснулся и обновился? Когда я использую Select (который я сделал видимым для этого примера), они обновляются просто отлично, но не так сильно с помощью ползунка диапазона.

Идеи?

Ниже мои JS, для одного из входов диапазона они все такие

Что-нибудь можете сказать? Я немного растерялся на данный момент, так как не совсем разбираюсь в своих Ajax навыках того, как набрать sh обновленный выбор диапазона до Ajax, чтобы обновить цену. 

jQuery(document).ready(function($) {
  var select = $("#pa_antall-seksjoner-i-lengden");
  var slider = $("<div id='slider1'></div>").insertAfter(select).slider({
    min: 1,
    max: 11,
    range: "min",
    value: select[0].selectedIndex + 1,
    slide: function(event, ui) {
      select[0].selectedIndex = ui.value - 1;
    }
  });
  $("#pa_antall-seksjoner-i-lengden").on("change", function() {
    slider.slider("value", this.selectedIndex + 1);
  });
});

jQuery(document).ready(function($) {
  var select = $("#pa_seksjonslengde");
  var slider = $("<div id='slider2'></div>").insertAfter(select).slider({
    min: 1,
    max: 3,
    range: "min",
    value: select[0].selectedIndex + 1,
    slide: function(event, ui) {
      select[0].selectedIndex = ui.value - 1;
    }
  });
  $("#pa_seksjonslengde").on("change", function() {
    slider.slider("value", this.selectedIndex + 1);
  });
});

jQuery(document).ready(function($) {
  var select = $("#pa_dybde");
  var slider = $("<div id='slider3'></div>").insertAfter(select).slider({
    min: 1,
    max: 5,
    range: "min",
    value: select[0].selectedIndex + 1,
    slide: function(event, ui) {
      select[0].selectedIndex = ui.value - 1;
    }
  });
  $("#pa_dybde").on("change", function() {
    slider.slider("value", this.selectedIndex + 1);
  });
});

jQuery(document).ready(function($) {
  var select = $("#pa_belastning-pr-hylle");
  var slider = $("<div id='slider4'></div>").insertAfter(select).slider({
    min: 1,
    max: 3,
    range: "min",
    value: select[0].selectedIndex + 1,
    slide: function(event, ui) {
      select[0].selectedIndex = ui.value - 1;
    }
  });
  $("#pa_belastning-pr-hylle").on("change", function() {
    slider.slider("value", this.selectedIndex + 1);
  });
});


jQuery(document).ready(function($) {
  var select = $("#pa_hoyde");
  var slider = $("<div id='slider5'></div>").insertAfter(select).slider({
    min: 1,
    max: 4,
    range: "min",
    value: select[0].selectedIndex + 1,
    slide: function(event, ui) {
      select[0].selectedIndex = ui.value - 1;
    }
  });
  $("#pa_hoyde").on("change", function() {
    slider.slider("value", this.selectedIndex + 1);
  });
});

jQuery(document).ready(function($) {
  var select = $("#pa_antall-hyller-i-hoyden");
  var slider = $("<div id='slider6'></div>").insertAfter(select).slider({
    min: 1,
    max: 5,
    range: "min",
    value: select[0].selectedIndex + 1,
    slide: function(event, ui) {
      select[0].selectedIndex = ui.value - 1;
    }
  });
  $("#pa_antall-hyller-i-hoyden").on("change", function() {
    slider.slider("value", this.selectedIndex + 1);
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table class="variations" cellspacing="0">
  <tbody>
    <tr>
      <td class="label"><label for="pa_antall-seksjoner-i-lengden">Antall seksjoner i lengden</label></td>
      <td class="value">
        <select id="pa_antall-seksjoner-i-lengden" class="" name="attribute_pa_antall-seksjoner-i-lengden" data-attribute_name="attribute_pa_antall-seksjoner-i-lengden" data-show_option_none="yes">
          <option value="">Velg ett alternativ</option>
          <option value="1-stk">1 stk</option>
          <option value="2-stk">2 stk</option>
          <option value="3-stk">3 stk</option>
          <option value="4-stk">4 stk</option>
          <option value="5-stk">5 stk</option>
          <option value="6-stk">6 stk</option>
          <option value="7-stk">7 stk</option>
          <option value="8-stk">8 stk</option>
          <option value="9-stk">9 stk</option>
          <option value="10-stk">10 stk</option>
        </select>

      </td>
    </tr>
    <tr>
      <td class="label"><label for="pa_seksjonslengde">Seksjonslengde</label></td>
      <td class="value">
        <select id="pa_seksjonslengde" class="" name="attribute_pa_seksjonslengde" data-attribute_name="attribute_pa_seksjonslengde" data-show_option_none="yes">
          <option value="">Velg ett alternativ</option>
          <option value="1000mm">1000mm</option>
          <option value="1300mm">1300mm</option>
        </select>

      </td>
    </tr>
    <tr>
      <td class="label"><label for="pa_hoyde">Høyde</label></td>
      <td class="value">
        <select id="pa_hoyde" class="" name="attribute_pa_hoyde" data-attribute_name="attribute_pa_hoyde" data-show_option_none="yes">
          <option value="">Velg ett alternativ</option>
          <option value="2000mm">2000mm</option>
          <option value="2500mm">2500mm</option>
          <option value="3000mm">3000mm</option>
        </select>

      </td>
    </tr>
    <tr>
      <td class="label"><label for="pa_dybde">Dybde</label></td>
      <td class="value">
        <select id="pa_dybde" class="" name="attribute_pa_dybde" data-attribute_name="attribute_pa_dybde" data-show_option_none="yes">
          <option value="">Velg ett alternativ</option>
          <option value="300mm">300mm</option>
          <option value="400mm">400mm</option>
          <option value="500mm">500mm</option>
          <option value="600mm">600mm</option>
          <option value="800mm">800mm</option>
        </select>

      </td>
    </tr>
    <tr>
      <td class="label"><label for="pa_antall-hyller-i-hoyden">Antall hyller i høyden</label></td>
      <td class="value">
        <select id="pa_antall-hyller-i-hoyden" class="" name="attribute_pa_antall-hyller-i-hoyden" data-attribute_name="attribute_pa_antall-hyller-i-hoyden" data-show_option_none="yes">
          <option value="">Velg ett alternativ</option>
          <option value="4-hyller">4 hyller</option>
          <option value="5-hyller">5 hyller</option>
          <option value="6-hyller">6 hyller</option>
          <option value="7-hyller">7 hyller</option>
        </select>

      </td>
    </tr>
    <tr>
      <td class="label"><label for="pa_belastning-pr-hylle">Belastning pr hylle</label></td>
      <td class="value">
        <select id="pa_belastning-pr-hylle" class="" name="attribute_pa_belastning-pr-hylle" data-attribute_name="attribute_pa_belastning-pr-hylle" data-show_option_none="yes">
          <option value="">Velg ett alternativ</option>
          <option value="100kg">100kg</option>
          <option value="200kg">200kg</option>
        </select>


    </tr>
  </tbody>
</table>
<div class="single_variation_wrap">
		<div class="woocommerce-variation single_variation" style="display: block;">
<div class="woocommerce-variation-description"></div>
<div class="woocommerce-variation-price"><span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">kr</span>XXXX ,-</span></span></div>
<div class="woocommerce-variation-availability"></div>
</div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">

	<div class="quantity">
			<label class="screen-reader-text" for="quantity_5e8ae5b2dbbce">Småvarereol antall</label>
	<input type="number" id="quantity_5e8ae5b2dbbce" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Antall" size="4" placeholder="" inputmode="numeric">
		</div>

<button type="submit" class="single_add_to_cart_button button alt">Kjøp</button>


<input type="hidden" name="add-to-cart" value="3615">
<input type="hidden" name="product_id" value="3615">
<input type="hidden" name="variation_id" class="variation_id" value="4373">
</div>
	</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...