Untitled
unknown
plain_text
a month ago
5.1 kB
0
Indexable
Never
{% comment %} Renders a list of product's price (regular, sale, unit) Accompanies product forms and meant to be updated dynamically Accepts: - variant: {Object} Variant Liquid object (optional) - product: {Object} Product Liquid object (optional) Usage: {% include 'product-price', variant: current_variant, product: product %} {% endcomment %} {% if variant.title %} {% assign compare_at_price = variant.compare_at_price %} {% assign price = variant.price %} {% assign available = variant.available %} {% else %} {% assign compare_at_price = 1999 %} {% assign price = 1999 %} {% assign available = true %} {% endif %} {% assign price_dollars = price | divided_by: 100 %} {% assign price_cents = price | modulo: 100 %} {% if price_cents == 0 %} {% assign money_price = "$" | append: price_dollars %} {% else %} {% assign money_price = price | money %} {% endif %} {% assign compare_at_price_dollars = compare_at_price | divided_by: 100 %} {% assign compare_at_price_cents = compare_at_price | modulo: 100 %} {% if compare_at_price_cents == 0 %} {% assign compare_at_price_formatted = "$" | append: compare_at_price_dollars %} {% else %} {% assign compare_at_price_formatted = compare_at_price | money %} {% endif %} <div id="product-price" class="price {% if available == false %} price--sold-out {% endif %} {% if compare_at_price > price %} price--on-sale {% endif %} {% if variant.unit_price_measurement %} price--unit-available {% endif %}" data-price > {% comment %} Explanation of description list: - div.price__regular: Displayed when there are no variants on sale - div.price__sale: Displayed when a variant is a sale - div.price__unit: Displayed when the first variant has a unit price - div.price__availability: Displayed when the product is sold out {% endcomment %} <div class="price__pricing-group"> <dl class="price__regular"> <dt> <span class="visually-hidden visually-hidden--inline">{{ 'products.general.regular_price' | t }}</span> </dt> <dd> <span class="price-item price-item--regular" data-regular-price> {{ money_price }} </span> </dd> </dl> <dl class="price__sale"> <dt> <span class="visually-hidden visually-hidden--inline">{{ 'products.general.sale_price' | t }}</span> </dt> <dd> <span class="price-item price-item--sale" data-sale-price> {{ money_price }} </span> </dd> <dt> <span class="visually-hidden visually-hidden--inline">{{ 'products.general.regular_price' | t }}</span> </dt> <dd> <span class="price-item price-item--regular" data-regular-price> {{ compare_at_price_formatted }} </span> </dd> </dl> <div class="price__badges"> <span class="price__badge price__badge--sale" aria-hidden="true"> <span>{{ 'products.general.sale' | t }}</span> </span> <span class="price__badge price__badge--sold-out"> <span>{{ 'products.product.sold_out' | t }}</span> </span> </div> </div> <dl class="price__unit"> <dt> <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span> </dt> <dd class="price-unit-price"> {% capture unit_price_separator %} <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span> {% endcapture %} {% capture unit_price_base_unit %} <span data-unit-price-base-unit> {% if variant.unit_price_measurement %} {% if variant.unit_price_measurement.reference_value != 1 %} {{ variant.unit_price_measurement.reference_value }} {% endif %} {{ variant.unit_price_measurement.reference_unit }} {% endif %} </span> {% endcapture %} <span data-unit-price>{{ variant.unit_price | money }}</span>{{ unit_price_separator }}{{ unit_price_base_unit }} </dd> </dl> </div> <script> document.addEventListener('DOMContentLoaded', function () { function formatPriceWithoutTrailingZeros(priceElement) { if (priceElement) { var priceText = priceElement.innerHTML.trim(); if (priceText.endsWith('.00')) { priceElement.innerHTML = priceText.slice(0, -3); } } } function updateAllPrices() { var regularPriceElements = document.querySelectorAll('.price-item--regular'); var salePriceElements = document.querySelectorAll('.price-item--sale'); regularPriceElements.forEach(formatPriceWithoutTrailingZeros); salePriceElements.forEach(formatPriceWithoutTrailingZeros); } updateAllPrices(); // Observe changes to the variant price elements var priceContainer = document.getElementById('product-price'); if (priceContainer) { var observer = new MutationObserver(updateAllPrices); observer.observe(priceContainer, { childList: true, subtree: true }); } }); </script>
Leave a Comment