Hi everyone,
I have two questions regarding my Shopify Symmetry theme.
Question 1:
In the cart drawer, each product currently displays the old price (crossed out) and the current discounted price (in red). However, when I update the quantity, the prices behind the product remain the same.
For example, if the quantity is 1, it shows $200 (old price) and $64.95 (discounted price). But when I change the quantity to 2, it still displays $200 and $64.95, whereas I want it to update to $400 and $129.90 accordingly.
How can I achieve this? I’ve already tried using ChatGPT, but I couldn't get it to work. I have attached my cart-drawer.liquid, cart-item.liquid, and cart-drawer.js files as Word documents.
Question 2:
Currently, the cart drawer shows the total price. However, I would like to:
- Display the total old price (before the discount) crossed out to the left of the total price.
- Show the total amount saved to the right of the total price.
How can I implement this?
Looking forward to your help!
Kind regards,
Lars
Link website: www.thefurrypawprint.com
Cart drawer liquid:
{%- unless template.name == 'cart' or settings.cart_type == 'page' -%}
{%- capture announcement -%}
{% if section.settings.show_announcement %}
{%- liquid
if section.settings.announcement_enable_box
assign box_color_brightness = section.settings.announcement_box_color | color_brightness
if box_color_brightness > 128
assign box_color_saturation = section.settings.announcement_box_color | color_extract: 'saturation'
if box_color_saturation > 0
assign text_col = section.settings.announcement_box_color | color_darken: 60 | color_saturate: 30 | color_to_rgb | split: '(' | last | split: ')' | first
else
assign text_col = section.settings.announcement_box_color | color_darken: 60 | color_to_rgb | split: '(' | last | split: ')' | first
endif
else
assign text_col = '255,255,255'
endif
endif
-%}
<div class="{% if section.settings.announcement_icon != blank or section.settings.announcement_custom_icon != blank %} with-icon{% endif %}{% if section.settings.announcement_enable_box %} text-box text-box--wide{% endif %}" {% if section.settings.announcement_enable_box %}style="--box-color: {{ section.settings.announcement_box_color }}; --box-text-color: {{ text_col }}"{% endif %}>
{%- if section.settings.announcement_icon == blank and section.settings.announcement_custom_icon == blank -%}
{{- section.settings.announcement_text -}}
{%- else -%}
{% if section.settings.announcement_custom_icon == blank %}
{% render 'icon', icon: section.settings.announcement_icon, size: section.settings.announcement_icon_size %}
{% else %}
<span class="icon icon--image icon--{{ section.settings.announcement_icon_size }}">
{%- liquid
if section.settings.announcement_icon_size == 'large'
assign icon_sizes = '38px'
assign icon_widths = '38, 76'
else
assign icon_sizes = '16px'
assign icon_widths = '16, 32'
endif
render 'image', image: section.settings.announcement_custom_icon, sizes: icon_sizes, widths: icon_widths
-%}
</span>
{% endif %}
<span class="with-icon__beside">{{ section.settings.announcement_text }}</span>
{%- endif -%}
</div>
{% endif %}
{%- endcapture -%}
<script src="{{ 'cart-drawer.js' | asset_url }}" defer></script>
{%- if section.settings.show_order_note -%}
<script src="{{ 'cart-note.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<cart-drawer class="drawer fixed top-0 right-0 flex flex-col w-full has-motion js-cart-drawer" role="dialog" tabindex="-1" aria-labelledby="CartDrawerModal-Title" aria-modal="true" aria-hidden="true" data-name="cart-drawer" data-section-id="{{ section.id }}">
<cart-form data-section-id="{{ section.id }}" class="cart-drawer" data-ajax-update="true">
<div class="cart-drawer__content{% if cart.items == empty %} cart-drawer__content--hidden{% endif %}" data-merge-attributes="content-container">
<div class="cart-drawer__content-upper">
<header class="cart-drawer__header cart-drawer__content-item">
<div id="CartDrawerModal-Title" class="cart-drawer__title h4 heading-font" data-merge="header-title">
{{ 'cart.general.title' | t }}
{% if cart.items != empty %}
<span class="cart-drawer__title-count">{{ cart.item_count }}</span>
{% endif %}
</div>
<button type="button" class="drawer__close-btn js-close-drawer">
<span class="visually-hidden">{{ 'accessibility.close' | t }}</span>
{% render 'icon-close' %}
</button>Cart item liquid:
{%- comment -%}
Parameters:
- item {LineItem} - Cart line item.
- forloop {forloop} - Cart line item for-loop iterator object.
- drawer {boolean} [optional] - Is this line item in a drawer? (Default is false)
- animate {boolean} [optional] - Apply page load animation to this item. (Default is false)
Example usage:
{% render 'cart-item', item: line_item, forloop: forloop, drawer: true, animate: true %}
{%- endcomment -%}
{%- liquid
if drawer
assign image_loading = 'manual'
else
assign image_loading = 'lazy'
endif
-%}
<div class="cart-item product-{{ item.product.handle }}"{% if animate %}{%- render 'animation-attrs', attrs: 'data-cc-animate', always: true -%}{% endif %}>
<div class="cart-item__column cart-item__image">
<a href="{{ item.url }}">
{%- render 'image', image: item.image, sizes: '100px', widths: '100, 200', loading: image_loading -%}
</a>
</div>
<div class="cart-item__not-image">
<div class="cart-item__column cart-item__description">
<div class="lightly-spaced-row">
<div class="cart-item__title">
<a class="text-current" href="{{ item.url }}">{{ item.product.title | escape_once }}</a>
</div>
<div class="small-text">
{%- liquid
assign show_variants = false
if item.product.variants.size > 1
assign show_variants = true
elsif settings.cart_item_show_single_variant and item.product.has_only_default_variant == false
assign show_variants = true
endif
-%}
{%- if show_variants -%}
{%- for option in item.product.options -%}
<div class="cart-item__variant">
<span class="cart-item__variant-label">{{ option | escape_once }}:</span>
<span class="cart-item__variant-value">{{ item.variant.options[forloop.index0] | escape_once }}</span>
</div>
{%- endfor -%}
{%- endif -%}
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{% if property.last != blank and property_first_char != '_' %}
<div class="line-item-property">
<span class="line-item-property__label">{{ property.first | escape_once }}:</span>
<span class="line-item-property__value">
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
{%- else -%}
{{- property.last | escape_once -}}
{%- endif -%}
</span>
</div>
{% endif %}
{%- endfor -%}
Cart drawer JS:
/* global SideDrawer */
class CartDrawer extends SideDrawer {
connectedCallback() {
this.bindEvents();
}
bindEvents() {
this.openDrawerViaEventHandler = this.handleDrawerOpenViaEvent.bind(this);
this.closeDrawerViaEventHandler = this.close.bind(this, null);
document.addEventListener('dispatch:cart-drawer:open', this.openDrawerViaEventHandler);
document.addEventListener('dispatch:cart-drawer:close', this.closeDrawerViaEventHandler);
document.addEventListener('dispatch:cart-drawer:refresh', this.cartRefreshHandler);
this.addEventListener('on:cart-drawer:before-open', () => {
theme.manuallyLoadImages(this);
this.querySelectorAll('cc-cart-cross-sell').forEach((el) => el.init());
});
this.addEventListener('on:cart:after-merge', () => {
theme.manuallyLoadImages(this);
this.querySelectorAll('cc-cart-cross-sell').forEach((el) => el.init());
});
}
disconnectedCallback() {
document.removeEventListener('dispatch:cart-drawer:refresh', this.cartRefreshHandler);
document.removeEventListener('dispatch:cart-drawer:open', this.openDrawerViaEventHandler);
document.removeEventListener('dispatch:cart-drawer:close', this.closeDrawerViaEventHandler);
}
/**
* Handle when the drawer is opened via an event
* @param {object} evt - Event object.
*/
handleDrawerOpenViaEvent(evt) {
this.open(evt.detail ? evt.detail.opener : null);
}
/**
* Trigger refresh of contents
*/
cartRefreshHandler() {
this.querySelector('cart-form').refresh();
}
/**
* Update section's cart-form element with new contents
* @param {string} html - Whole-section HTML.
*/
updateFromCartChange(html) {
this.querySelector('cart-form').refreshFromHtml(html);
}
}
window.customElements.define('cart-drawer', CartDrawer);
