Related products displaying wrong price

Aviva
Shopify Partner
8 0 3

Hi all,

Currently the related products/'customers also viewed' section is displaying the wrong price on the related products. Depending on what the item you are curently viewing is, the related products will all have the same price as that product.

See example: (scroll down to see 'customers also bought') http://www.jet-setter.ca/collections/rolling-luggage/products/load-warrior-wheeled-duffel-28?variant...

 

Here is the code for related-products.liquid

Thanks for any help or suggestions!

{% comment %}ly_global_begin{% endcomment %}{% include 'ly-global' %}{% comment %}ly_global_end{% endcomment %}
<!-- Solution brought to you by Caroline Schnapp -->
<!-- See this: https://docs.shopify.com/support/your-store/products/can-i-recommend-related-products#finding-a-rele... -->

{% comment %}
  Number of related items per row,
  and number of rows.
{% endcomment %}

{% assign number_of_related_products_per_row = 4 %}
{% assign number_of_rows = 1 %}

{% comment %}
  Heading.
  Leave blank if you don't need one.
{% endcomment %}

{% assign heading = 'Customers Also Bought' %}
{% assign headingfrench = 'Clients ont aussi acheté' %}

{% comment %}
  Set either or both to true, if you want
  to limit yourself to items with same vendor, and/or type.
{% endcomment %}

{% assign same_vendor = false %}
{% assign same_type = false %}

{% comment %}
  Collections to ignore.
  Never pick related items from those.
{% endcomment %}

{% assign exclusions = 'frontpage,all' | split: ',' %}

{% comment %}
  Looking for a relevant collection.
{% endcomment %}

{% if product.metafields.c_f['Related Products'] %}
  {% assign collection = collections[product.metafields.c_f['Related Products']] %}
{% endif %}

{% assign found_a_collection = false %}
{% if collection and collection.all_products_count > 1 %}
  {% unless exclusions contains collection.handle %}
    {% assign found_a_collection = true %}
  {% endunless %}
{% endif %}
{% unless found_a_collection %}
  {% for c in product.collections %}
    {% unless exclusions contains c.handle or c.all_products_count < 2 %}
      {% assign found_a_collection = true %}
      {% assign collection = c %}
      {% break %}
    {% endunless %}
  {% endfor %}
{% endunless %}

{% comment %}
  If we have a relevant collection.
{% endcomment %}

{% if found_a_collection %}

  {% assign counter = 0 %}
  {% assign break_at = number_of_rows | times: number_of_related_products_per_row %}
  {% assign current_product = product %}

  {% case number_of_related_products_per_row %}
    {% when 1 %}
      {% assign grid_item_width = '' %}
    {% when 2 %}
      {% assign grid_item_width = 'large--one-half medium--one-half' %}
    {% when 3 %}
      {% assign grid_item_width = 'large--one-third medium--one-half' %}
    {% when 4 %}
      {% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
    {% when 5 %}
      {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
    {% when 6 %}
      {% assign grid_item_width = 'large--one-sixth medium--one-third small--one-half' %}
    {% else %}
      {% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
  {% endcase %}

  {% capture related_items %}
    {% for product in collection.products %}
      {% unless product.handle == current_product.handle %}
         {% unless same_vendor and current_product.vendor != product.vendor %}
           {% unless same_type and current_product.type != product.type %}
             {% include 'product-grid-item' %}
             {% assign counter = counter | plus: 1 %}
             {% if counter == break_at %}
               {% break %}
             {% endif %}
           {% endunless %}
        {% endunless %}
      {% endunless %}
    {% endfor %}
  {% endcapture %}

  {% assign related_items = related_items | trim %}

  {% unless related_items == blank %}

  {% unless heading == blank %}
  <header class="section-header">
    <h2 class="section-header__title related-items-header english text-center">{{ heading }}</h2>
    <h2 class="section-header__title related-items-header french text-center" style="display: none;">{{ headingfrench }}</h2>
  </header>
  {% endunless %}
  <div class="grid-uniform">
    {{ related_items }}
  </div>

  {% endunless %}

{% endif %}

 

0 Likes
Mircea_Piturca
Shopify Partner
1459 39 284

It looks ok, the related_items contain the 'product-grid-item' snippet.

Can by any chance a Javascript to replace the prices? Do you have a product with multiple variants at different prices to test out?

Finally—Add variant descriptions to your products
0 Likes
Alex135
Astronaut
1890 1 448

It doesn't appear that Javascript is a factor here.  If you check the HTML source code, you'll find that the prices for the related products are already incorrect before any Javascript is executed.  (By the way, for each related product, you will find two sets of prices.  The first set is incorrect and is shown above the "Add to compare" checkbox.  The second set of prices is correct and is found in the Quick View.)

It would be helpful to see the code in Snippets/product-grid-item.liquid.

0 Likes
Aviva
Shopify Partner
8 0 3

Hi Alex,

Here is the product-grid-item.liquid file:

{% comment %}ly_global_begin{% endcomment %}{% include 'ly-global' %}{% comment %}ly_global_end{% endcomment %}
<!-- /snippets/product-grid-item.liquid -->

{% comment %}
  Set the default grid_item_width if no variable is set
{% endcomment %}
{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-quarter medium--one-half small--one-half' %}
{% endunless %}

{% comment %}
  Check if the product is on sale and set a variable to be used below.
{% endcomment %}
{% assign on_sale = false %}
{% if bold_compare_at_price > bold_price %}
  {% assign on_sale = true %}
{% endif %}

{% comment %}
  Check if the product is sold out and set a variable to be used below.
{% endcomment %}
{% assign sold_out = true %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}

<div class="grid__item {{ grid_item_width }} collection__item">

  <div class="collection__image">
    <a class="quickview btn" href="#id{{ product.id }}"><ly-as-921351>Quick View</ly-as-921351></a>
    <a href="{{ product.url | within: collection }}" class="grid__image">
      <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
  </div>

  <div class="collection-swatches">
    {% for option in product.options %}
      {% include 'swatch' with option %}
    {% endfor %}
  </div>

  <p class="collection-product-title small--hide">
    <a href="{{ product.url | within: collection }}">{% comment %}ly_code_replace_for_[ product.title ]_begin{% endcomment %}{% include 'ly-title' with product %}{% assign 1ec4980e6d722078e4fefd99df89a877 = ly_translation %}{{ 1ec4980e6d722078e4fefd99df89a877 }}{% comment %}ly_code_replace_end{% endcomment %}</a>
  </p>

  <p class="collection-product-title medium--hide large--hide">
    <a href="{{ product.url | within: collection }}">{% comment %}ly_code_replace_for_[ product.title | truncate: 35 ]_begin{% endcomment %}{% include 'ly-title' with product %}{% assign 1ec4980e6d722078e4fefd99df89a877 = ly_translation %}{{ 1ec4980e6d722078e4fefd99df89a877 | truncate: 35 }}{% comment %}ly_code_replace_end{% endcomment %}</a>
  </p>
  
  {% if product.vendor != 'vendor-unknown' %}
  <p class="collection-product-vendor">
  <ly-as-836339>By</ly-as-836339> <a href="/collections/{% comment %}ly_code_replace_for_[ product.vendor | replace: ' ' , '-' | remove: '.' ]_begin{% endcomment %}{% include 'ly-vendor' with product %}{% assign ebff111c0b2b09344e0aed933ec9186f = ly_translation %}{{ ebff111c0b2b09344e0aed933ec9186f | replace: ' ' , '-' | remove: '.' }}{% comment %}ly_code_replace_end{% endcomment %}">{% comment %}ly_code_replace_for_[ product.vendor ]_begin{% endcomment %}{% include 'ly-vendor' with product %}{% assign ebff111c0b2b09344e0aed933ec9186f = ly_translation %}{{ ebff111c0b2b09344e0aed933ec9186f }}{% comment %}ly_code_replace_end{% endcomment %}</a>
  </p>
  {% endif %}

  <p class="collection-product-price {% if on_sale %}collection-product-on-sale{% endif %}">
    {% comment %}
      You can show a leading 'from' or 'up to' by checking 'bold_price_varies'
      if your variants have different prices.
    {% endcomment %}
    {% if on_sale %}
      {% if bold_price_varies %}
        {% assign sale_price = bold_price | money %}
        {% comment %}ly_i18n_replace_for_[ 'products.product.on_sale_from_html' | t: price: sale_price ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.product.on_sale_from_html' | t: price: sale_price }}{% endcapture %}{% include 'ly-static-string' with '836341' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% assign replacement = sale_price  %}{% assign ly_template = ly_template | replace: '[[price]]', replacement %}{% if escape_content %}{{ ly_template}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}
      {% else %}
        {{ bold_price | money }}
      {% endif %}
    {% else %}
      {% if bold_price_varies %}
        {% assign price = bold_price | money %}
        {% comment %}ly_i18n_replace_for_[ 'products.general.from_text_html' | t: price: price ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.general.from_text_html' | t: price: price }}{% endcapture %}{% include 'ly-static-string' with '836343' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% assign replacement = price  %}{% assign ly_template = ly_template | replace: '[[price]]', replacement %}{% if escape_content %}{{ ly_template}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}
      {% else %}
        {{ bold_price | money }}
      {% endif %}
    {% endif %}
    {% if sold_out %}
      <strong>{% comment %}ly_i18n_replace_for_[ 'products.product.sold_out' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.product.sold_out' | t }}{% endcapture %}{% include 'ly-static-string' with '836344' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}</strong>
    {% endif %}
    {% if on_sale %}
      <span class="visually-hidden">{% comment %}ly_i18n_replace_for_[ 'products.general.regular_price' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.general.regular_price' | t }}{% endcapture %}{% include 'ly-static-string' with '836345' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}</span>
      <s class="collection-sale-price">{{ bold_compare_at_price | money }}</s>
    {% endif %}
  </p>

  <div class="compare-button-wrap english">
    <input type="checkbox" name="add-to-compare" class="add-to-compare-btn" id="add-to-compare" value="<ly-as-843600>Add To Compare</ly-as-843600>" style="margin-left:2px;" phandle="{{ product.handle }}" onclick="clickcall(&quot;{{ product.handle }}&quot;);"><ly-as-843600>Add To Compare</ly-as-843600>
  </div>

  <div style="display:none;" id="id{{ product.id }}" class="quickview_popup">
    <div class="grid">
      <form action="/cart/add" method="post" style="text-align:center;">

        <div class="grid__item large--one-half">
          <a href="{{ product.url | within: collection }}" class="grid__image">
            <img src="{{ product.featured_image.src | img_url: 'original' }}" alt="{{ product.featured_image.alt | escape }}">
          </a>
        </div>

        <div class="grid__item large--one-half text-left">

          <h3>
            {% comment %}ly_code_replace_for_[ product.title ]_begin{% endcomment %}{% include 'ly-title' with product %}{% assign 1ec4980e6d722078e4fefd99df89a877 = ly_translation %}{{ 1ec4980e6d722078e4fefd99df89a877 }}{% comment %}ly_code_replace_end{% endcomment %}
          </h3>

          <p class="quickview_price" style="color: #f96c48;">
            {% comment %}
              You can show a leading 'from' or 'up to' by checking 'bold_price_varies'
              if your variants have different prices.
            {% endcomment %}
            {% if on_sale %}
              {% if bold_price_varies %}
                {% assign sale_price = product.price | money %}
                {% comment %}ly_i18n_replace_for_[ 'products.product.on_sale_from_html' | t: price: sale_price ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.product.on_sale_from_html' | t: price: sale_price }}{% endcapture %}{% include 'ly-static-string' with '836341' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% assign replacement = sale_price  %}{% assign ly_template = ly_template | replace: '[[price]]', replacement %}{% if escape_content %}{{ ly_template}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}
              {% else %}
                {{ product.price | money }}
              {% endif %}
            {% else %}
              {% if bold_price_varies %}
                {% assign price = product.price | money %}
                {% comment %}ly_i18n_replace_for_[ 'products.general.from_text_html' | t: price: price ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.general.from_text_html' | t: price: price }}{% endcapture %}{% include 'ly-static-string' with '836343' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% assign replacement = price  %}{% assign ly_template = ly_template | replace: '[[price]]', replacement %}{% if escape_content %}{{ ly_template}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}
              {% else %}
                {{ product.price | money }}
              {% endif %}
            {% endif %}
            {% if sold_out %}
              <strong>{% comment %}ly_i18n_replace_for_[ 'products.product.sold_out' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.product.sold_out' | t }}{% endcapture %}{% include 'ly-static-string' with '836344' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}</strong>
            {% endif %}
            {% if on_sale %}
              <span class="visually-hidden">{% comment %}ly_i18n_replace_for_[ 'products.general.regular_price' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.general.regular_price' | t }}{% endcapture %}{% include 'ly-static-string' with '836345' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}</span>
              <s class="collection-sale-price" style="color: #000;">{{ bold_compare_at_price | money }}</s>
            {% endif %}
          </p>

          <div class="compare-button-wrap english">
            <input type="checkbox" name="add-to-compare" class="add-to-compare-btn" id="add-to-compare" value="<ly-as-843600>Add To Compare</ly-as-843600>" style="margin-left:2px;" phandle="{{ product.handle }}" onclick="clickcall(&quot;{{ product.handle }}&quot;);"><ly-as-843600>Add To Compare</ly-as-843600>
          </div>
          
          {% for variant in product.variants %}
              {% if variant.title contains 'Default' %} 
                  <style> 
                  #id{{ product.id }} .quickview_select{ display: none !important; }
                  #id{{ product.id }} .color-selector{ display: none !important; } 
                  </style> 
              {% endif %}          
          {% endfor %}

          <label class="color-selector english"><ly-as-921352>Color</ly-as-921352></label>
          <label class="color-selector french" style="display:none;"><ly-as-921353>Couleur</ly-as-921353></label>
          <select name="id" class="quickview_select">
          {% for variant in product.variants %}
            {% if variant.available %}      
              <option value="{{ variant.id }}">{% comment %}ly_code_replace_for_[ variant.title ]_begin{% endcomment %}{% include 'ly-title' with variant %}{% assign 953396a48c576f620217088685e35bf0 = ly_translation %}{{ 953396a48c576f620217088685e35bf0 }}{% comment %}ly_code_replace_end{% endcomment %} - {{ variant.price | money }}</option>
            {% else %}
            <option disabled="disabled">{% comment %}ly_code_replace_for_[ variant.title ]_begin{% endcomment %}{% include 'ly-title' with variant %}{% assign 953396a48c576f620217088685e35bf0 = ly_translation %}{{ 953396a48c576f620217088685e35bf0 }}{% comment %}ly_code_replace_end{% endcomment %} - Sold Out</option>
            {% endif %}
          {% endfor %}
          </select>

          <label for="Quantity" class="quantity-selector">{% comment %}ly_i18n_replace_for_[ 'products.product.quantity' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.product.quantity' | t }}{% endcapture %}{% include 'ly-static-string' with '921358' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}</label>
          <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">

          <input class="quickview_submit btn" type="submit" value="<ly-as-921357>Add To Cart</ly-as-921357>" />

          <div class="description">{% comment %}ly_code_replace_for_[ product.description | split: '<!-- split -->' | first ]_begin{% endcomment %}{% include 'ly-description' with product %}{% assign b594fce3ce084dbf0425ef6ec245926d = ly_translation %}{{ b594fce3ce084dbf0425ef6ec245926d | split: '<!-- split -->' | first | truncate: 140 }}{% comment %}ly_code_replace_end{% endcomment %}
            <a href="{{ product.url }}" class="english"> <ly-as-921355>Read More</ly-as-921355> </a>
            <a href="{{ product.url }}" class="french" style="display: none;"> <ly-as-921356>En savoir plus</ly-as-921356> </a>
          </div>

        </div>
      </form>
    </div>
  </div>
</div>

 

0 Likes
Mircea_Piturca
Shopify Partner
1459 39 284

Yeap, checked the network response and the pries come like this.

product-grid-item may pick up a variabile and use it for the price.

Finally—Add variant descriptions to your products
0 Likes
Alex135
Astronaut
1890 1 448

There are two Liquid variables that are not initially defined in product-grid-item.liquid: bold_price and bold_compare_at_price.  So it looks like they use the same values for each listed product in the Related Products section.  I don't know if these are part of the theme, or if they are part of an app.  Are you using any apps that affect displayed prices?  Regardless, be sure to back up your theme before making any changes.

Try adding the marked lines into related-products.liquid.

           {% unless same_type and current_product.type != product.type %}
>>>          {% assign bold_price = product.price_min %}
>>>          {% assign bold_compare_at_price = product.compare_at_price_min %}
             {% include 'product-grid-item' %}
             {% assign counter = counter | plus: 1 %}
             {% if counter == break_at %}
               {% break %}
             {% endif %}
           {% endunless %}

I hope this helps.

0 Likes
Jason
Shopify Expert
10037 119 1872

^ Those variables are 100% related to Bold apps (likely Quantity Breaks).

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Brennan_Gallowa
Tourist
9 0 1

I have the exact same problem, with the addition of the menu showing the exact same price!  Any solutions to this?

0 Likes
roomccrudden
New Member
3 0 0

Hey Aviva, 

Having the same issue on my site. Did you manage to find a fix? 

Thanks.

0 Likes