Shopify Liquid: Как да се покаже само сравнение по цена за вариант на продукт, ако сравнението по цена съществува?

Опитвам се да покажа сравнението по цена за някои варианти на продукта, но не мога да разбера как да го покажа само когато има сравнение по цена за варианта, което е по-голямо от нула. Показва сравнение на цени от $0,00.

Той използва javascript за динамично актуализиране на цената. Ето този код:

<script type="text/javascript">
<!--
// mootools callback for multi variants dropdown selector
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
$('purchase').removeClass('disabled'); // remove unavailable class from add-to-cart button
$('purchase').disabled = false;           // reenable add-to-cart button
$('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}");  // update price field
$('compare-price').innerHTML = Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}");  // update compare at price
} else {
// variant doesn't exist
$('purchase').addClass('disabled');      // set add-to-cart button to unavailable class
$('purchase').disabled = true;              // disable add-to-cart button      
$('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
}
};

// initialize multi selector for product
window.addEvent('domready', function() {
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback }); 
});
-->
</script>

Скриптът работи добре, когато имам необработен <div id="compare-price"></div>. Динамичното сравнение на цена за всеки вариант се добавя към този div. Но когато няма сравнение на цена, това все още добавя $0,00.

Как да скрия div, когато няма сравнение на цена за варианта? Опитвам се да направя нещо подобно:

{% if product.variant.compare_at_price %}
    <div id="compare-price"></div>
{% endif %}

Някой знае ли как се прави това?


javascript shopify liquid mootools
person Lee McAlilly    schedule 21.08.2012    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Добре, това е, което трябва да работя. Може да не е най-елегантното решение, но работи:

<script type="text/javascript">
<!--
// mootools callback for multi variants dropdown selector
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
$('purchase').removeClass('disabled'); // remove unavailable class from add-to-cart button
$('purchase').disabled = false;           // reenable add-to-cart button
$('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}");  // update price field
if(variant.compare_at_price > 0.0) {
$('compare-price').innerHTML = Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}");  // update compare at price
} else {
$('compare-price').innerHTML = "";
}
} else {
// variant doesn't exist
$('purchase').addClass('disabled');      // set add-to-cart button to unavailable class
$('purchase').disabled = true;              // disable add-to-cart button      
$('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
}
};

// initialize multi selector for product
window.addEvent('domready', function() {
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback }); 
});
-->
</script>
person Lee McAlilly    schedule 22.08.2012

arrow_upward
0
arrow_downward

Защо просто не проверите сравнението по цена в обратното извикване? Предаден ви е вариантът, следователно можете да проверите цените... и да се справите с тях по подходящ начин.

if(variant.compare_at_price > 0.0) {
    $('compare-price').show().innerHTML = Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}");
} else {
    $('compare-price').hide();
}
person David Lazar    schedule 21.08.2012
comment
Това има смисъл, но не работи. Някой във форума на shopify показва как трябва да работи в jQuery тук, но изглежда, че горният код е много подобен на този: forums.shopify.com/categories/2/posts/110187 - person Lee McAlilly; 22.08.2012