Supply Theme Add To Cart to see Price MAP

New Member
13 0 0

I've seen a few posts on this but they appear outdated or are not specific to the theme I am using.

 

Can anyone help me modify the code to hide the price for a product tagged with "MAP" on the collection and product page and replace the text "ADD TO CART" on the button with "SEE PRICE". I would also like to include a line which says "Why don't we show the price?" that when you hover over it shows an explanation.

 

I appreciate any help. Thanks!

0 Likes
New Member
13 0 0

@Jason just flagging this to your attention as I think you have knowledge on this. Reply at your convenience. I appreciate your thoughts.

0 Likes
New Member
13 0 0

I followed the instructions found here: https://community.shopify.com/c/Shopify-Design/How-to-show-Add-to-cart-to-see-price/m-p/277124 by adding the following (in red) in the product-grid-item.liquid:

 

 <p>{{ product.title }}</p>
{% if product.tags contains "MAP" %}
<p><strong><font color="black">Add to cart for price</font></strong></p>
{% else %}
<div class="product-item--price">
<span class="h1 medium--left">
{% if on_sale %}
<span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
{% else %}
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% endif %}
{% include 'price' with product.price %}
{% if on_sale and section.settings.product_show_compare_at_price %}
<small>
<s>
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% include 'price' with product.compare_at_price %}
</s>
</small>
{% endif %}
{% endif %}

 

It worked but it messed up my grid. See: https://ssebarcodestore.com/collections/barcode-scanners?view=grid

 

Does anyone have any thoughts on how to correct the grid formatting?

0 Likes
New Member
13 0 0

Fixed the grid formatting. Moved the {%endif%} down and it fixed it.

 

    <p>{{ product.title }}</p>
    {% if product.tags contains "MAP" %}
  <p><strong><font color="black">Add to cart for price</font></strong></p>
{% else %}
    <div class="product-item--price">
      <span class="h1 medium--left">
        {% if on_sale %}
          <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
        {% endif %}
        {% include 'price' with product.price %}
        {% if on_sale and section.settings.product_show_compare_at_price %}
          <small>
            <s>
              <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
              {% include 'price' with product.compare_at_price %}
            </s>
          </small>
--> was here. see below
        {% endif %}
      </span>
      {%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
        {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
      {%- endif -%}
    </div>
    {% if on_sale and section.settings.product_show_saved_amount %}
      <div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
        {% assign compare_price = product.compare_at_price %}
        {% assign product_price = product.price %}
        {% include 'price-sale' %}
      </div>
    {% endif %}
{% endif %}
 
Now I need to figure out how to do this with the list view. Any thoughts?
0 Likes
New Member
13 0 0

I figured out how to do it for the list view. Changes to product-list-item.liquid in red:

 

{% unless image_size %}
  {%- assign image_size = '600x600' -%}
{% endunless %}
 
{% unless current_collection %}
  {% assign current_collection = collection %}
{% endunless %}
 
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}
 
{% assign sold_out = true %}
{% if product.available  %}
  {% assign sold_out = false %}
{% endif %}
 
<div class="grid-item{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ product.url | within: current_collection }}" class="product-grid-item product-list-item">
    <div class="grid">
      <div class="grid-item large--one-fifth medium--one-third">
        <div class="product-list-image">
          {% if sold_out %}
            <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
          {% endif %}
          {% if product.featured_image %}
          {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          <div class="lazyload__image-wrapper" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%;">
            <img id="{{ img_id }}"
                class="lazyload js"
                data-src="{{ img_url }}"
                data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ product.featured_image.alt | escape }}">
 
          </div>
          <noscript>
          <img src="{{ product.featured_image | img_url: '580x' }}"
              srcset="{{ product.featured_image | img_url: '580x' }} 1x, {{ product.featured_image | img_url: '580x', scale: 2 }} 2x"
              alt="{{ product.featured_image.alt }}" style="opacity:1;">
            </noscript>
          {% else %}
            {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
            {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
        </div>
      </div>
      <div class="grid-item large--three-fifths medium--two-thirds">
        <p class="h6">{{ product.title }}</p>            
        <div class="rte">
          <p>{{ product.content | strip_html | truncatewords: 30 }}</p>
        </div>
      </div>
      <div class="grid-item large--one-fifth medium--two-thirds">
        <div class="text-center">
          <div class="product-item--price">         
            <p class="h1 medium-down--left">
    {% if product.tags contains "MAP" %}
  <p><strong><font color="black">Add to cart for price</font></strong></p>
{% else %}                       
              {% if on_sale %}
                <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
              {% else %}
                <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
              {% endif %} 
              {% include 'price' with product.price %}
              {% if on_sale and section.settings.product_show_compare_at_price %}
                <small>
                  <s>
                    <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
                    {% include 'price' with product.compare_at_price %}
                  </s>
                </small>
            {% endif %}
              {% endif %}
            </p>
            {%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
              {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
            {%- endif -%}          
          </div>
          {% if on_sale and section.settings.product_show_saved_amount %}
            <div class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
              {% assign compare_price = product.compare_at_price %}
              {% assign product_price = product.price %}
              {% include 'price-sale' %}
            </div>
          {% endif %} 
          {% if section.settings.product_reviews_enable %}
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          {% endif %}         
        </div>
      </div>
    </div>
  </a>
</div>
 
Now I have to figure out how to replace the "ADD TO CART" button on the product page to "SEE PRICE" for products tagged with "MAP"
 
Any thoughts?
 
0 Likes