Displaying "From $xx.xx to $xx.xx" with Debut theme

[Barry_Drodge]

I have managed to change the code in the snippets/product-price.liquid file to display the "from to" price as I desire.

It works really well on the collection pages.

When I get to a product page instead of getting the price for the first variant I get the "From $xx.xx to $xx.xx" displayed until you specifically select a variant from the dropdown.

Does anyone know of a way to only get the "From $xx.xx to $xx.xx" to display on collection pages or to not display on product pages?

The original code is:

      <span class="price-item price-item--regular" data-regular-price>
        {% if available %}
          {% if compare_at_price > price %}
            {{ compare_at_price | money }}
          {% else %}
            {{ money_price }}
          {% endif %}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>

The new code I use is 

      <span class="price-item price-item--regular" data-regular-price>
        {% if available %}
            {% if product.price_varies %}
               {% if product.compare_at_price > price  %}
                  {{ product.compare_at_price_min | money }} to {{ product.compare_at_price_max | money  }}
                {{ price--on-sale}}
               {% else %}
                 From {{ product.price_min | money }} to {{ product.price_max | money }}
               {%- endif -%}
            {% else %}
              {{ money_price }}
          {%- endif -%}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>

[Barry_Drodge · Accepted solution]

thanks for the pointer PaulNewton.

I changed the code to read as follows by adding the following to my if string 

template.name == "collection"

IT now works as expected

Updated code is shown below in case anyone else has a similar problem.

      <span class="price-item price-item--regular" data-regular-price>
        {% if available %}
          {{ page_type }}
            {% if product.price_varies and template.name == "collection" %}
               {% if product.compare_at_price > price  %}
                  {{ product.compare_at_price_min | money }} to {{ product.compare_at_price_max | money  }}
               {% else %}
                 From {{ product.price_min | money }} to {{ product.price_max | money }}
               {%- endif -%}
            {% else %}
              {{ money_price }}
          {%- endif -%}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>

[PaulNewton]

Hi @Barry_Drodge 👋 good work so far,

Use templates template.name, or request.page_type, to conditionally hide or show something for collection or product pages.

https://shopify.dev/docs/api/liquid/objects/template#template-name 

https://shopify.dev/docs/api/liquid/objects/request#request-page_type 

If selling internationally see the locales docs for interpolation and the translate filter:

https://shopify.dev/docs/storefronts/themes/architecture/locales/storefront-locale-files#interpolati... 

https://shopify.dev/docs/api/liquid/filters/translate 

In some cases you can check for a collection object or product object itself as the condition, but most the time in collection templates a product object is probably in the context, and in a product template a collection might have been set as well.

[Barry_Drodge · Accepted solution]

thanks for the pointer PaulNewton.

I changed the code to read as follows by adding the following to my if string 

template.name == "collection"

IT now works as expected

Updated code is shown below in case anyone else has a similar problem.

      <span class="price-item price-item--regular" data-regular-price>
        {% if available %}
          {{ page_type }}
            {% if product.price_varies and template.name == "collection" %}
               {% if product.compare_at_price > price  %}
                  {{ product.compare_at_price_min | money }} to {{ product.compare_at_price_max | money  }}
               {% else %}
                 From {{ product.price_min | money }} to {{ product.price_max | money }}
               {%- endif -%}
            {% else %}
              {{ money_price }}
          {%- endif -%}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>

[Barry_Drodge · Accepted solution]

I found a bug in the code.  when a single item was on sale the price was not displayed correctly.

Use this new code instead:

    <dd>
      <span class="price-item price-item--regular" data-regular-price>
        {% if available %}
            {% if product.price_varies and template.name == "collection" %}
               {% if product.compare_at_price > price  %}
                  From {{ product.compare_at_price_min | money }} to {{ product.compare_at_price_max | money  }}
               {% else %}
                 From {{ product.price_min | money }} to {{ product.price_max | money }}
            {%- endif -%}
            {% else %}
               {% if product.compare_at_price > price  %}
                 {{ product.compare_at_price | money }}
            {% else %}
                 {{ money_price }}
               {%- endif -%}
          {%- endif -%}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>
    </dd>
  </div>
  <div class="price__sale">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--sale" data-sale-price>
            {% if product.price_varies and template.name == "collection" %}
            From {{ product.price_min | money }} to {{ product.price_max | money }}
              {%  else %}
                   {{ money_price }}
          {% endif %}      
      </span>
      <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
    </dd>