[Venture theme] How to show sale price on cart page

Simonmag
New Member
1 0 0

Hello,

I'm trying to show sale price on my cart page. Currently i find something very similar here :
https://community.shopify.com/c/Shopify-Design/How-to-show-the-sale-price-discount-on-cart-page/m-p/...

So i was trying to ajust to make it works with my shop, i'm using Venture theme and it's look to work like it should :

Capture.PNG

So except some CSS to match to what i realy want, in apparence all is working fine. As you can see, if i got 2 products, my sale price is calculated, the final product price too, the saving, subtotal, and total.
What i'm in trouble with, it's the script behind to make it works without reload the page. So i was looking for the script, and i was trying to call some variable (i guess) to match with what i done, but in vain.

 

What i found is this both script at the end of cart_template.liquid :

<script id="CartProductTemplate" type="text/template">
    {% raw %}
      {{#items}}
      <tr class="cart__row responsive-table__row">
        <td class="cart__cell--image text-center">
          <a href="{{ url }}" class="cart__image">
            <img src="{{ img }}" alt="{{ name }}">
          </a>
        </td>
        <td>
          <a href="{{ url }}" class="h5">
            {{{ name }}}
          </a>
          {{#if variation}}
            <p>{{variation}}</p>
          {{/if}}
          {{#if sellingPlanAllocation}}
            <p>{{sellingPlanAllocation.selling_plan.name}}</p>
          {{/if}}
          {{#properties}}
            {{#each this}}
              {{#if this}}
                <p>{{@key}}: {{this}}</p>
              {{/if}}
            {{/each}}
          {{/properties}}

          <p>
            <a href="{% endraw %}{{ routes.cart_change_url }}{% raw %}?line={{ line }}&amp;quantity=0">{% endraw %}{{ 'cart.general.remove' | t }}{% raw %}</a>
          </p>
        </td>
        <td class="cart__cell--quantity">
          <label for="Updates_{{ key }}" class="cart__quantity-label medium-up--hide">
            {% endraw %}{{ 'cart.label.quantity' | t }}{% raw %}</label>
          <input type="number" name="updates[]" id="Updates_{{ key }}" value="{{ itemQty }}" min="0" data-line="{{ line }}" aria-label="{% endraw %}{{ 'cart.label.quantity' | t }}{% raw %}">
        </td>
        <td class="cart__cell--total">
          {{#if discountsApplied}}
            <span class="visually-hidden">{% endraw %}{{ 'products.product.regular_price' | t }}{% raw %}</span>
            <del class="cart__item-total">{{{originalLinePrice}}}</del>
            <span class="visually-hidden">{% endraw %}{{ 'products.product.sale_price' | t }}{% raw %}</span>
            <span class="cart__item-total">{{{linePrice}}}</span>
          {{else}}
            <span class="cart__item-total">{{{originalLinePrice}}}</span>
          {{/if}}
          {{#if discountsApplied}}
            <ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
              {{#each discounts}}
                <li class="order-discount__item">
                  {% endraw %}{%- include 'icon-saletag' -%}{% raw %}{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
                </li>
              {{/each}}
            </ul>
          {{/if}}
          {{#if unitPrice}}
            <span class="visually-hidden">{% endraw %}{{ 'products.product.unit_price_label' | t }}{% raw %}</span>
            <span class="product-unit-price">
              {% endraw %}
                {%- capture unit_price_separator -%}
                  <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
                {%- endcapture -%}
              {% raw %}

              <span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
            </span>
          {{/if}}
        </td>
      </tr>
      {{/items}}
    {% endraw %}
  </script>

  <script id="CartFooterTemplate" type="text/template">
    {% raw %}
      {{#if cartDiscountsApplied}}
        <div id="cartDiscountTotal" class="order-discount-cart-wrapper">
          {{#each cartDiscounts}}
            <span class="order-discount order-discount--title order-discount--cart">
              {% endraw %}{%- include 'icon-saletag' -%}<span class="visually-hidden">{{ 'customer.order.discount' | t }}{% raw %}:</span>{{ this.title }}
            </span>
            <span class="order-discount order-discount--cart"><strong>-{{{ this.formattedAmount }}}</strong></span>
          {{/each}}
        </div>
      {{/if}}
      <p class="h3 cart__subtotal" id="CartSubtotal">{{{totalPrice}}}</p>
    {% endraw %}
  </script>

 

But after some try, i don't know what variable call, if i have to assign them again at the begin of the script, if i made mistakes when i call them with the wrong amount of "{".

What i add before is :

 <p>
                    <a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0">{{ 'cart.general.remove' | t }}</a>
                  </p>
                </td>
                <td class="cart__price-wrapper text-right">
{%- if item.original_price != item.final_price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s>{{ item.original_price | money }}</s>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="order-discount">{{ item.final_price | money }}</span>
{%- elsif item.variant.compare_at_price > item.original_price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s>{{ item.variant.compare_at_price | money }}</s>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="order-discount">{%- include 'icon-saletag' -%}{{ item.original_price | money }}</span>
{%- else -%}
{{ item.original_price | money }}
{%- endif -%} 
</td>                  
<ul class="order-discount order-discount--list order-discount--title order-discount--cart" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount_allocation in item.line_level_discount_allocations -%}
<li class="order-discount__item">
{%- include 'icon-saletag' -%}{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
</li>
{%- endfor -%}
</ul>    
                
                <td class="cart__cell--quantity">
                  <label for="Updates_{{ item.key }}" class="cart__quantity-label medium-up--hide">{{ 'cart.label.quantity' | t }}</label>
                  <input type="number" name="updates[]" id="Updates_{{ item.key }}" class="cart__quantity" value="{{ item.quantity }}" min="0" data-line="{{ forloop.index }}" aria-label="{{ 'cart.label.quantity' | t }}">
                </td>             
 
                
                
<td class="text-right">
{%- assign itemCompareAtPrice = item.variant.compare_at_price -%}
{%- if itemCompareAtPrice == nil -%}
{%- assign itemCompareAtPrice = item.original_price -%}
{%- endif -%}
{%- assign totalLineCompareAtPrice = itemCompareAtPrice | times: item.quantity -%}
{%- assign totalCompareAtPrice = totalCompareAtPrice |  plus: totalLineCompareAtPrice -%}
{%- if item.original_line_price != item.final_line_price -%}
{%- assign totalLineSavings = item.original_line_price | minus: item.final_line_price -%}
{%- assign totalSavings = totalSavings | plus: totalLineSavings -%}
  
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s>{{ item.original_line_price | money }}</s>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="order-discount">{{ item.final_line_price | money }}</span>
  
{%- elsif item.variant.compare_at_price > item.original_price -%}
{%- assign totalLineOriginalPrice = item.original_price | times: item.quantity -%}
{%- assign totalLineSavings = totalLineCompareAtPrice | minus: totalLineOriginalPrice -%}
{%- assign totalSavings = totalSavings | plus: totalLineSavings -%}
  
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s>{{ totalLineCompareAtPrice | money }}</s>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>

<span class="order-discount">{%- include 'icon-saletag' -%}{{ item.original_line_price | money }}</span>

{%- else -%}
{{ item.original_line_price | money }}
{%- endif -%}                   
                  
                  
                  
              
                  {% comment %}
                  
                  {%- if item.original_line_price != item.final_line_price -%}
                    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>Db270
                    <del class="cart__item-total">{{ item.original_line_price | money }}</del>
                    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
                    <span class="cart__item-total">{{ item.final_line_price | money }}</span>
                  {%- else -%}
                    <span class="cart__item-total">{{ item.original_line_price | money }}</span>
                  {%- endif -%}
                  {%- if item.unit_price_measurement -%}
                    {% include 'product-unit-price', product_variant: item %}
                  {%- endif -%}

                  {%- if item.line_level_discount_allocations != blank -%}
                    <ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{{ 'customer.order.discount' | t }}">
                      {%- for discount_allocation in item.line_level_discount_allocations -%}
                        <li class="order-discount__item">
                          {%- include 'icon-saletag' -%}{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- endif -%}
                
                {% endcomment %}

Between my comment is the old code who's showing original price item.

 

Have you any idea how i could solve this ?
I'm not familiar with js/liquid, i'm only using HTML/CSS

 

Thanks you for any help ! 

0 Likes