I want to show product prices in a different formats for specific collections for example
Like the above red Box type
This is product price Liquid
From {% if product.selected_or_first_available_variant.price > 0 %}{% if settings.currency_enable %}{{ product.selected_or_first_available_variant.price | money_with_currency }}{% else %}{{ product.selected_or_first_available_variant.price | money }}/sqm{% endif %}{% else %}{{ 'products.product.free' | t }}{% endif %}{% if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %} {% if settings.currency_enable %}{{ product.selected_or_first_available_variant.compare_at_price | money_with_currency }}{% else %}{{ product.selected_or_first_available_variant.compare_at_price | money }}{% endif %}{% endif %}
{{ 'products.product.savings' | t }} {% if settings.currency_enable %}{{ product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price | money_with_currency }}{% else %}{{ product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price | money_without_trailing_zeros }}{% endif %}
This Js Code
function ProductSelectCallback(container) {
var sectionId = container.getAttribute(‘data-section-id’);
var fI = container.getAttribute(‘data-image’);
var fIa = container.getAttribute(‘data-image-aspect’);
var pJ = JSON.parse(document.getElementById(‘ProductJson-’ + sectionId).innerHTML);
var pS = ‘product-select-’ + sectionId;
var pP = document.getElementById(‘price-’ + sectionId);
var pSs = document.getElementById(‘savings-’ + sectionId);
var pC = document.getElementById(‘compare-’ + sectionId);
var pA = document.getElementById(‘add-to-cart-’ + sectionId);
var pSk = document.getElementById(‘error_’ + sectionId);
var pQ = document.getElementById(‘updates_’ + sectionId);
var pI = document.getElementById(‘inventory-’ + sectionId);
if (pI) {
var pIC = parseInt(document.getElementById(‘inventory-’ + sectionId).getAttribute(‘data-inv’));
}
var pSKU = document.getElementById(‘sku-’ + sectionId);
var pO = document.getElementById(‘offer-’ + sectionId);
var pL = document.getElementById(‘product-logistics-’ + sectionId);
if (pL) {
var pSr = pL.querySelector(‘.separator_2’);
var pV = pL.querySelector(‘.vendor’);
}
var selectCallback = function(variant, selector) {
var pID = document.getElementById(‘product-select-’ + sectionId);
var pIA = parseInt(pID.options[pID.selectedIndex].getAttribute(‘data-inv’));
var pII = pID.options[pID.selectedIndex].getAttribute(‘data-inc’);
var pIID = pID.options[pID.selectedIndex].getAttribute(‘data-inc_date’);
var free = theme.language.products_product_free;
if(variant){
var cap = Shopify.formatMoney(variant.compare_at_price,theme.moneyFormat);
var dif = Shopify.formatMoney(variant.compare_at_price - variant.price,theme.moneyFormat).replace(/((,00)|(.00))$/g, ‘’);
var price = Shopify.formatMoney(variant.price,theme.moneyFormat,);
}
if (variant && variant.available == true) {
if (pP) {
if(variant.compare_at_price > variant.price){
if(variant.price == ‘0’) {
pP.innerHTML = free + ’ ’ + cap + ‘’;
pC.innerHTML = dif;
pSs.classList.remove(‘hidden’);
} else {
pP.innerHTML = price + ’ ’ + cap + ‘’;
pC.innerHTML = dif;
pSs.classList.remove(‘hidden’);
}
} else if(variant.price == ‘0’) {
pP.innerHTML = free;
pSs.classList.add(‘hidden’);
} else if(pJ == ‘’) {
pP.innerHTML = price +‘/sqm + VAT’;
pSs.classList.add(‘hidden’);
} else {
pP.innerHTML = price +‘/sqm’;
pSs.classList.add(‘hidden’);
}
}
pA.innerText = theme.language.products_product_add_to_cart;
pA.classList.remove(‘disabled’,‘outline’);
pA.removeAttribute(‘disabled’)
if (pSk) {
pSk.style.display = ‘none’;
}
if (pQ) {
pQ.value = 1;
}
}