Question

我试图将Zurb Foundation 5系列滑块组件与WooCommerce关联，特别是在单个产品页面上。 WooCommerce在“添加到购物车”按钮的左侧有一个数量输入。这是我到目前为止的HTML：

 <label id="sliderLabel">Quantity</label>
    <div class="range-slider round" role="slider" tabindex="0" aria-labelledby="sliderLabel" data-slider data-options="display_selector: .input-text.qty.text, .pencil-qty-discount .qty-pencil; start: 500; end: 10000; step: 50; initial: 500;">
        <span class="range-slider-handle" role="slider" tabindex="0"></span>
        <span class="range-slider-active-segment"></span>
        <input type="hidden">
    </div>
    <p class="pencil-qty-discount"><span class="qty-pencil"></span> pencils at <span class="qty-rate"></span> a pencil.<br>At <span class="qty-rate"></span> cents a pencil, the total is $<span class="qty-total"></span> You save $<span class="qty-saved"></span> over minimum quantity pricing.</p>

这里是jQuery：

$('.single-product .range-slider[data-slider]').on('change.fndtn.slider', function() {
var numpencils = $('.single-product .range-slider').attr('data-slider');
var pencilRate = .19;
if (numpencils <= 2499) {
    $('.pencil-qty-discount .qty-rate').text('.19');
    pencilRate = .19;
}
if (numpencils >= 2500) {
    $('.pencil-qty-discount .qty-rate').text('.18');
    pencilRate = .18;
}
if (numpencils >= 5000) {
    $('.pencil-qty-discount .qty-rate').text('.17');
    pencilRate = .17;
}
if (numpencils >= 7000) {
    $('.pencil-qty-discount .qty-rate').text('.16');
    pencilRate = .16;
}
if (numpencils >= 9000) {
    $('.pencil-qty-discount .qty-rate').text('.15');
    pencilRate = .15;
}
var pencilTotal = (numpencils * pencilRate);
var pencilOrigTotal = (numpencils * .19);
var pencilValueDif = pencilOrigTotal - pencilTotal;

$('.pencil-qty-discount .qty-total').text(pencilTotal.toFixed(2));
$('.pencil-qty-discount .qty-saved').text(pencilValueDif.toFixed(2));
});

这很好用，除非有人直接调整WooCommerce提供的输入框，它不会更新范围滑块或我在下面段落中的计算。也许我设置了变量，因此限制太多了？

基础5范围滑块麻烦与WooCommerce

0 个答案: