Collection page custom price display

burnotz
New Member
1 0 0
  • Theme: Venue
  • Goal #1: Show the second variant's price colored (i.e. blue) on a collection page when this second variant is on sale
  • # of variants: I have two sizes for my desk mats. The maximum variant number for a product is 2 but some products only have the small size and not the large. (But there isn't any product that only has the large).
  • URL: https://www.lxndscxpe.ca/en/collections/boutique 

------------------------------

Hello everyone!

Up to now, I managed to customize the product-price.liquid file to display the price of both variants on my collection page (see the picture below):

Screenshot - Collection page (boutique).png

As you can see, when the first variant is on sale, it displays a colored price. I would like to do the same for the second variant. Here's my modified code for product-price.liquid:

<!-- snippet/product-price.liquid -->
{% if product.title %}
    {%- assign compare_at_price = product.compare_at_price -%}
	
    {%- assign price = product.price -%}
    {%- assign price_max = product.price_max -%}
    {%- assign price_varies = product.price_varies -%}
    {%- assign available = product.available -%}
{% else %}
    {%- assign compare_at_price = 1999 -%}
    {%- assign price = 1999 -%}
    {%- assign price_varies = false -%}
    {%- assign available = true -%}
{% endif %}

{%- assign money_price = price | money -%}
{%- assign money_price_max = price_max | money -%}

{% if available %}

	{% if product.variants.size > 1 %}
	
      {% if compare_at_price > price %}
          <span class="product__price-price product__price-price--sale">{% if price_varies %}{% endif %}<span class="money">{{ money_price }}</span></span> | {{ product.price_max | money }}

      {% else %}
          {{ product.price_min | money }} | {{ product.price_max | money }}

      {% endif %}
	
	{% else %}
	
      {% if compare_at_price > price %}
          <span class="product__price-price product__price-price--sale">{% if price_varies %}{% endif %}<span class="money">{{ money_price }}</span></span> | {{ product.price_max | money }}

      {% else %}
          {{ product.price_min | money }}

      {% endif %}

	{% endif %}
	

{% endif %}
{% unless available %}
    <span class="product__price-price product__price-price--sold">{{ 'products.product.sold_out' | t }}</span>
{% endunless %}

 

The issue I am facing now is that I don't know how to get the compared at price for the second variant in order to manipulate it.  I know that one of the problem with my code is that I am using price_min and price_max instead of referring to the exact variant's #1 or #2 price (thus this code wouldn't work if I had to show 3 variants). 

 

I thank you in advance for your precious time,

Bruno

 

 

0 Likes