Created
July 11, 2024 09:17
-
-
Save liamgriffin/02cc09efb093c5cbc5b35714ea77400a to your computer and use it in GitHub Desktop.
Modification of Dawns price.liquid snippet to display the price on collection pages as the lowest available variants price
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% comment %} | |
Renders a list of product's price (regular, sale) | |
Accepts: | |
- product: {Object} Product Liquid object (optional) | |
- use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional) | |
- show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional) | |
- price_class: {String} Adds a price class to the price element (optional) | |
- show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional) | |
Usage: | |
{% render 'price', product: product %} | |
{% endcomment %} | |
{%- liquid | |
if use_variant | |
assign target = product.selected_or_first_available_variant | |
else | |
assign target = product | |
endif | |
assign compare_at_price = target.compare_at_price | |
assign price = target.price | default: 1999 | |
assign price_min = product.price_min | |
assign price_max = product.price_max | |
assign available = target.available | default: false | |
assign money_price = price | money | |
assign money_price_min = price_min | money | |
assign money_price_max = price_max | money | |
if settings.currency_code_enabled | |
assign money_price = price | money_with_currency | |
assign money_price_min = price_min | money_with_currency | |
assign money_price_max = price_max | money_with_currency | |
endif | |
if target == product and product.price_varies | |
assign money_price = 'products.product.price.from_price_html' | t: price: money_price | |
endif | |
-%} | |
{% comment %}The assign tags below are modified from the original Dawn to filter in-stock variants and determine the minimum price {% endcomment %} | |
{%- assign available_variants = product.variants | where: "available", true -%} | |
{%- if available_variants.size > 0 -%} | |
{%- assign available_min_price = available_variants | map: "price" | sort | first -%} | |
{%- if settings.currency_code_enabled -%} | |
{%- assign available_money_price_min = available_min_price | money_with_currency -%} | |
{%- else -%} | |
{%- assign available_money_price_min = available_min_price | money -%} | |
{%- endif -%} | |
{%- if product.variants.size > 1 -%} | |
{%- assign money_price_min_with_prefix = 'products.product.price.from_price_html' | t: price: available_money_price_min -%} | |
{%- else -%} | |
{%- assign money_price_min_with_prefix = available_money_price_min -%} | |
{%- endif -%} | |
{%- else -%} | |
{%- assign available_money_price_min = money_price_min -%} | |
{%- if product.variants.size > 1 -%} | |
{%- assign money_price_min_with_prefix = 'products.product.price.from_price_html' | t: price: available_money_price_min -%} | |
{%- else -%} | |
{%- assign money_price_min_with_prefix = available_money_price_min -%} | |
{%- endif -%} | |
{%- endif -%} | |
{% comment %} Updated the price display logic to ensure price of lowest available variant is displayed {% endcomment %} | |
{%- unless target == nil -%} | |
<div | |
class=" | |
price | |
{%- if price_class %} {{ price_class }}{% endif -%} | |
{%- if available == false %} price--sold-out{% endif -%} | |
{%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%} | |
{%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%} | |
{%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%} | |
{%- if show_badges %} price--show-badge{% endif -%} | |
" | |
> | |
<div class="price__container"> | |
{%- 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 | |
{%- endcomment -%} | |
<div class="price__regular"> | |
{%- if product.quantity_price_breaks_configured? -%} | |
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span> | |
<span class="price-item price-item--regular"> | |
{{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min_with_prefix, maximum: money_price_max -}} | |
</span> | |
{%- else -%} | |
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span> | |
<span class="price-item price-item--regular"> | |
{{ money_price_min_with_prefix }} | |
</span> | |
{%- endif -%} | |
</div> | |
<div class="price__sale"> | |
{%- unless product.price_varies == false and product.compare_at_price_varies %} | |
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span> | |
<span> | |
<s class="price-item price-item--regular"> | |
{% if settings.currency_code_enabled %} | |
{{ compare_at_price | money_with_currency }} | |
{% else %} | |
{{ compare_at_price | money }} | |
{% endif %} | |
</s> | |
</span> | |
{%- endunless -%} | |
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span> | |
<span class="price-item price-item--sale price-item--last"> | |
{{ money_price }} | |
</span> | |
</div> | |
<small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}"> | |
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span> | |
<span class="price-item price-item--last"> | |
<span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span> | |
<span aria-hidden="true">/</span> | |
<span class="visually-hidden"> {{ 'accessibility.unit_price_separator' | t }} </span> | |
<span> | |
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%} | |
{{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}} | |
{%- endif -%} | |
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }} | |
</span> | |
</span> | |
</small> | |
</div> | |
{%- if show_badges -%} | |
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}"> | |
{{ 'products.product.on_sale' | t }} | |
</span> | |
<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}"> | |
{{ 'products.product.sold_out' | t }} | |
</span> | |
{%- endif -%} | |
</div> | |
{% endunless %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment