Liquid, JavaScript, themes, sales channels
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 :
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 }}&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"> {{ 'general.accessibility.unit_price_separator' | t }} </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 }}&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 !
User | RANK |
---|---|
21 | |
21 | |
8 | |
7 | |
6 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023