FROM CACHE - en_header
Shopify Scripts
Personalized checkout and custom promotions with Shopify Scripts
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
- Shopify Community
- :
- Shopify Discussion
- :
- Shopify Scripts
- :
- Cart Item Quantity Update / Removal won't work
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Cart Item Quantity Update / Removal won't work
Cart Item Quantity Update / Removal won't work
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-15-2023
11:45 PM
Website: https://whspr.us/
Hello! I was working on a custom theme on Shopify, based on Dawn. The issue occurs with the custom Cart element I've tried to develop, whenever I try to update the quantity on the cart item list, or try to remove the item from the cart list, it won't work. I'm assuming I've missed a script to implement, or wrote the order in HTML wrong etc., if someone could take a look into it, it would be great! Thanks.
<div class="sb-start-cart">
<h1>Your cart</h1>
{% if cart == empty %}
<span>Currently empty.</span>
{% endif %}
{% if cart != empty %}
<cart-drawer-items
>
<form
action="{{ routes.cart_url }}"
id="CartDrawer-Form"
class="cart__contents cart-drawer__form"
method="post"
>
<div id="CartDrawer-CartItems" class="drawer__contents js-contents">
{%- if cart != empty -%}
<div class="drawer__cart-items-wrapper">
<table class="cart-items" role="table">
<thead role="rowgroup">
<tr role="row">
<th id="CartDrawer-ColumnProductImage" role="columnheader">
<span class="visually-hidden">{{ 'sections.cart.headings.image' | t }}</span>
</th>
<th
id="CartDrawer-ColumnProduct"
class="caption-with-letter-spacing"
scope="col"
role="columnheader"
>
{{ 'sections.cart.headings.product' | t }}
</th>
<th
id="CartDrawer-ColumnTotal"
class="right caption-with-letter-spacing"
scope="col"
role="columnheader"
>
{{ 'sections.cart.headings.total' | t }}
</th>
<th id="CartDrawer-ColumnQuantity" role="columnheader">
<span class="visually-hidden">{{ 'sections.cart.headings.quantity' | t }}</span>
</th>
</tr>
</thead>
<tbody role="rowgroup">
{%- for item in cart.items -%}
<tr id="CartDrawer-Item-{{ item.index | plus: 1 }}" class="cart-item" role="row">
<td class="cart-item__media" role="cell" headers="CartDrawer-ColumnProductImage">
{% if item.image %}
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
<a href="{{ item.url }}" class="cart-item__link" tabindex="-1" aria-hidden="true"> </a>
<img
class="cart-item__image"
src="{{ item.image | image_url: width: 300 }}"
alt="{{ item.image.alt | escape }}"
loading="lazy"
width="150"
height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
>
{% endif %}
</td>
<td class="cart-item__details" role="cell" headers="CartDrawer-ColumnProduct">
{%- if settings.show_vendor -%}
<p class="caption-with-letter-spacing light">{{ item.product.vendor }}</p>
{%- endif -%}
<a href="{{ item.url }}" class="cart-item__name h4 break">
{{- item.product.title | escape -}}
</a>
{%- if item.original_price != item.final_price -%}
<div class="cart-item__discounted-prices">
<span class="visually-hidden">
{{ 'products.product.price.regular_price' | t }}
</span>
<s class="cart-item__old-price product-option">
{{- item.original_price | money -}}
</s>
<span class="visually-hidden">
{{ 'products.product.price.sale_price' | t }}
</span>
<strong class="cart-item__final-price product-option">
{{ item.final_price | money }}
</strong>
</div>
{%- else -%}
<div class="product-option">
{{ item.original_price | money }}
</div>
{%- endif -%}
{%- if item.product.has_only_default_variant == false
or item.properties.size != 0
or item.selling_plan_allocation != null
-%}
<dl>
{%- if item.product.has_only_default_variant == false -%}
{%- for option in item.options_with_values -%}
<div class="product-option">
<dt>{{ option.name }}:</dt>
<dd>
{{ option.value -}}
{%- unless forloop.last %}, {% endunless %}
</dd>
</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="product-option">
<dt>{{ property.first }}:</dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a
href="{{ property.last }}"
class="link"
target="_blank"
aria-describedby="a11y-new-window-message"
>
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}
</dl>
<p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
{%- endif -%}
<ul
class="discounts list-unstyled"
role="list"
aria-label="{{ 'customer.order.discount' | t }}"
>
{%- for discount in item.discounts -%}
<li class="discounts__discount">
{%- render 'icon-discount' -%}
{{ discount.title }}
</li>
{%- endfor -%}
</ul>
</td>
<td class="cart-item__totals right" role="cell" headers="CartDrawer-ColumnTotal">
<div class="loading-overlay hidden">
<div class="loading-overlay__spinner">
<svg
aria-hidden="true"
focusable="false"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<div class="cart-item__price-wrapper">
{%- if item.original_line_price != item.final_line_price -%}
<div class="cart-item__discounted-prices">
<span class="visually-hidden">
{{ 'products.product.price.regular_price' | t }}
</span>
<s class="cart-item__old-price price price--end">
{{ item.original_line_price | money }}
</s>
<span class="visually-hidden">
{{ 'products.product.price.sale_price' | t }}
</span>
<span class="price price--end">
{{ item.final_line_price | money }}
</span>
</div>
{%- else -%}
<span class="price price--end">
{{ item.original_line_price | money }}
</span>
{%- endif -%}
{%- if item.variant.available and item.unit_price_measurement -%}
<div class="unit-price caption">
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
{{ item.variant.unit_price | money }}
<span aria-hidden="true">/</span>
<span class="visually-hidden"
> {{ 'accessibility.unit_price_separator' | t }} </span
>
{%- if item.variant.unit_price_measurement.reference_value != 1 -%}
{{- item.variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.variant.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}
</div>
</td>
<td class="cart-item__quantity" role="cell" headers="CartDrawer-ColumnQuantity">
<div class="cart-item__quantity-wrapper">
<quantity-input class="quantity cart-quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">
{{- 'products.product.quantity.decrease' | t: product: item.product.title | escape -}}
</span>
{% render 'icon-minus' %}
</button>
<input
class="quantity__input"
type="number"
data-quantity-variant-id="{{ item.variant.id }}"
name="updates[]"
value="{{ item.quantity }}"
{% # theme-check-disable %}
data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
min="{{ item.variant.quantity_rule.min }}"
{% if item.variant.quantity_rule.max != null %}
max="{{ item.variant.quantity_rule.max }}"
{% endif %}
step="{{ item.variant.quantity_rule.increment }}"
{% # theme-check-enable %}
aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
id="Drawer-quantity-{{ item.index | plus: 1 }}"
data-index="{{ item.index | plus: 1 }}"
>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">
{{- 'products.product.quantity.increase' | t: product: item.product.title | escape -}}
</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
<cart-remove-button
id="CartDrawer-Remove-{{ item.index | plus: 1 }}"
data-index="{{ item.index | plus: 1 }}"
>
<button
type="button"
class="button button--tertiary"
aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
>
{% render 'icon-remove' %}
</button>
</cart-remove-button>
</div>
<div
id="CartDrawer-LineItemError-{{ item.index | plus: 1 }}"
class="cart-item__error"
role="alert"
>
<small class="cart-item__error-text"></small>
<svg
aria-hidden="true"
focusable="false"
class="icon icon-error"
viewBox="0 0 13 13"
>
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
</div>
</td>
</tr>
{%- endfor -%}
</tbody>
</table>
</div>
{%- endif -%}
<p id="CartDrawer-LiveRegionText" class="visually-hidden" role="status"></p>
<p id="CartDrawer-LineItemStatus" class="visually-hidden" aria-hidden="true" role="status">
{{ 'accessibility.loading' | t }}
</p>
</div>
<div id="CartDrawer-CartErrors" role="alert"></div>
</form>
</cart-drawer-items>
{% endif %}
</div>[ This is the snippet of the cart section part, I've also included "cart.js" at the top of the liquid file. ]
Labels:
- Labels:
-
Line Item Scripts
-
Liquid
Replies 0 (0)
Community Blog Articles
The 9 Questions You Need To Answer When Starting a B2B Store
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
Get ready for peak holiday selling season 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
Highlights | Top Contributors August '24
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024