All things Shopify and commerce
Hello,
We need a help with remove button in a cart drawer. To delete a product row. Theme: Impulse.
This will not help cause it is for emptying all the items. I need
For every item on the cart
Probably, you missunderstood me I need a button to remove an item row. Here is an example.
<cart-remove-button id="CartDrawer-Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
<button class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
Remove
</button>
</cart-remove-button>
<div class="cart__item" data-key="{{ product.key }}">
{%- assign img_url = product | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div class="cart__image">
<a href="{{ product.url }}" style="height: 0; padding-bottom: {{ 100 | divided_by: product.image.aspect_ratio }}%;">
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540]"
data-aspectratio="{{ product.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.product.title | escape }}">
<noscript>
<img class="lazyloaded"
src="{{ product | img_url: '400x' }}"
alt="{{ product.product.title | escape }}">
</noscript>
</a>
</div>
<div class="cart__item-details">
<div id="main">
<div class="cart__item-title">
<a href="{{ product.url }}" class="cart__item-name">
{{ product.product.title }}
</a>
<cart-remove-button id="CartDrawer-Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
<button class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
Remove
</button>
</cart-remove-button>
</div>
{%- unless product.product.has_only_default_variant -%}
<div class="cart__item--variants">
{%- for option in product.options_with_values -%}
<div><span>{{ option.name }}:</span> {{ option.value }}</div>
{%- endfor -%}
</div>
{%- endunless -%}
{%- if product.selling_plan_allocation != empty -%}
<div class="cart__item--variants">
{{ product.selling_plan_allocation.selling_plan.name }}
</div>
{%- endif -%}
{%- assign property_size = product.properties | size -%}
{% if property_size > 0 %}
{% for p in product.properties %}
{%- assign first_character_in_key = p.first | truncate: 1, '' -%}
{% unless p.last == blank or first_character_in_key == '_' %}
<div>
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
</div>
{% endunless %}
{% endfor %}
{% endif %}
</div>
<div class="cart__item-sub">
<div>
<div class="js-qty__wrapper">
<label for="cart_updates_{{ product.key }}" class="hidden-label">{{ 'cart.label.quantity' | t }}</label>
<input type="text"
id="cart_updates_{{ product.key }}"
name="updates[]"
class="js-qty__num"
value="{{ product.quantity }}"
min="0"
pattern="[0-9]*"
data-id="{{ product.key }}">
<button type="button"
class="js-qty__adjust js-qty__adjust--minus"
aria-label="{{ 'cart.general.reduce_quantity' | t }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" viewBox="0 0 20 20"><path fill="#444" d="M17.543 11.029H2.1A1.032 1.032 0 0 1 1.071 10c0-.566.463-1.029 1.029-1.029h15.443c.566 0 1.029.463 1.029 1.029 0 .566-.463 1.029-1.029 1.029z"/></svg>
<span class="icon__fallback-text" aria-hidden="true">−</span>
</button>
<button type="button"
class="js-qty__adjust js-qty__adjust--plus"
aria-label="{{ 'cart.general.increase_quantity' | t }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 20 20"><path fill="#444" d="M17.409 8.929h-6.695V2.258c0-.566-.506-1.029-1.071-1.029s-1.071.463-1.071 1.029v6.671H1.967C1.401 8.929.938 9.435.938 10s.463 1.071 1.029 1.071h6.605V17.7c0 .566.506 1.029 1.071 1.029s1.071-.463 1.071-1.029v-6.629h6.695c.566 0 1.029-.506 1.029-1.071s-.463-1.071-1.029-1.071z"/></svg>
<span class="icon__fallback-text" aria-hidden="true">+</span>
</button>
</div>
<div class="cart__remove">
<a href="{{ routes.cart_change_url }}?id={{ product.key }}&quantity=0" class="text-link">
{{ 'cart.general.remove' | t }}
</div>
</div>
<div class="cart__item-price-col text-right">
{% if product.original_price != product.final_price %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<small class="cart__price cart__price--strikethrough">
{{ product.original_price | money }}
</small>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="cart__price cart__discount">
{{ product.final_price | money }}
</span>
{% else %}
<span class="cart__price">
{{ product.original_price | money }}
</span>
{% endif %}
{%- if product.line_level_discount_allocations != blank -%}
{%- for discount_allocation in product.line_level_discount_allocations -%}
<small class="cart__discount">{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})</small>
{%- endfor -%}
{%- endif -%}
{%- if product.unit_price_measurement -%}
{%- capture unit_price_base_unit -%}
<span class="unit-price-base">
{%- if product.unit_price_measurement -%}
{%- if product.unit_price_measurement.reference_value != 1 -%}
{{ product.unit_price_measurement.reference_value }}
{%- endif -%}
{{ product.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<div class="product__unit-price">{{ product.unit_price | money }}/{{ unit_price_base_unit }}</div>
{%- endif -%}
</div>
</div>
</div>
</div>
It fits good but after clicking a remove button I am getting an error and it does not delete.
IT fits good but I am getting an error after clicking on it
<div class="cart__item" data-key="{{ product.key }}">
{%- assign img_url = product | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div class="cart__image">
<a href="{{ product.url }}" style="height: 0; padding-bottom: {{ 100 | divided_by: product.image.aspect_ratio }}%;">
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540]"
data-aspectratio="{{ product.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.product.title | escape }}">
<noscript>
<img class="lazyloaded"
src="{{ product | img_url: '400x' }}"
alt="{{ product.product.title | escape }}">
</noscript>
</a>
</div>
<div class="cart__item-details">
<div id="main">
<div class="cart__item-title">
<a href="{{ product.url }}" class="cart__item-name">
{{ product.product.title }}
</a>
<cart-remove-button id="CartDrawer-Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
<button class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
Remove
</button>
</cart-remove-button>
</div>
{%- unless product.product.has_only_default_variant -%}
<div class="cart__item--variants">
{%- for option in product.options_with_values -%}
<div><span>{{ option.name }}:</span> {{ option.value }}</div>
{%- endfor -%}
</div>
{%- endunless -%}
{%- if product.selling_plan_allocation != empty -%}
<div class="cart__item--variants">
{{ product.selling_plan_allocation.selling_plan.name }}
</div>
{%- endif -%}
{%- assign property_size = product.properties | size -%}
{% if property_size > 0 %}
{% for p in product.properties %}
{%- assign first_character_in_key = p.first | truncate: 1, '' -%}
{% unless p.last == blank or first_character_in_key == '_' %}
<div>
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
</div>
{% endunless %}
{% endfor %}
{% endif %}
</div>
<div class="cart__item-sub">
<div>
<div class="js-qty__wrapper">
<label for="cart_updates_{{ product.key }}" class="hidden-label">{{ 'cart.label.quantity' | t }}</label>
<input type="text"
id="cart_updates_{{ product.key }}"
name="updates[]"
class="js-qty__num"
value="{{ product.quantity }}"
min="0"
pattern="[0-9]*"
data-id="{{ product.key }}">
<button type="button"
class="js-qty__adjust js-qty__adjust--minus"
aria-label="{{ 'cart.general.reduce_quantity' | t }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" viewBox="0 0 20 20"><path fill="#444" d="M17.543 11.029H2.1A1.032 1.032 0 0 1 1.071 10c0-.566.463-1.029 1.029-1.029h15.443c.566 0 1.029.463 1.029 1.029 0 .566-.463 1.029-1.029 1.029z"/></svg>
<span class="icon__fallback-text" aria-hidden="true">−</span>
</button>
<button type="button"
class="js-qty__adjust js-qty__adjust--plus"
aria-label="{{ 'cart.general.increase_quantity' | t }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 20 20"><path fill="#444" d="M17.409 8.929h-6.695V2.258c0-.566-.506-1.029-1.071-1.029s-1.071.463-1.071 1.029v6.671H1.967C1.401 8.929.938 9.435.938 10s.463 1.071 1.029 1.071h6.605V17.7c0 .566.506 1.029 1.071 1.029s1.071-.463 1.071-1.029v-6.629h6.695c.566 0 1.029-.506 1.029-1.071s-.463-1.071-1.029-1.071z"/></svg>
<span class="icon__fallback-text" aria-hidden="true">+</span>
</button>
</div>
<div class="cart__remove">
<a href="{{ routes.cart_change_url }}?id={{ product.key }}&quantity=0" class="text-link">
{{ 'cart.general.remove' | t }}
</div>
</div>
<div class="cart__item-price-col text-right">
{% if product.original_price != product.final_price %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<small class="cart__price cart__price--strikethrough">
{{ product.original_price | money }}
</small>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="cart__price cart__discount">
{{ product.final_price | money }}
</span>
{% else %}
<span class="cart__price">
{{ product.original_price | money }}
</span>
{% endif %}
{%- if product.line_level_discount_allocations != blank -%}
{%- for discount_allocation in product.line_level_discount_allocations -%}
<small class="cart__discount">{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})</small>
{%- endfor -%}
{%- endif -%}
{%- if product.unit_price_measurement -%}
{%- capture unit_price_base_unit -%}
<span class="unit-price-base">
{%- if product.unit_price_measurement -%}
{%- if product.unit_price_measurement.reference_value != 1 -%}
{{ product.unit_price_measurement.reference_value }}
{%- endif -%}
{{ product.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<div class="product__unit-price">{{ product.unit_price | money }}/{{ unit_price_base_unit }}</div>
{%- endif -%}
</div>
</div>
</div>
</div>
You will also have code for the normal cart page (not drawer). Could you paste the code for that. We Can use the logic from that page to your drawer.
<div class="page-width page-content">
{%- render 'breadcrumbs' -%}
<header class="section-header text-center{% if cart.item_count == 0 %} section-header--404{% endif %}">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
<div class="rte text-spacing">
{%- if cart.item_count == 0 -%}
<p>{{ 'cart.general.empty' | t }}</p>
{%- endif -%}
<p>{{ 'cart.general.continue_browsing_html' | t: url: routes.all_products_collection_url }}</p>
</div>
</header>
{%- if cart.item_count > 0 -%}
<form action="{{ routes.cart_url }}" method="post" novalidate data-location="page" id="CartPageForm">
<div class="cart__page">
<div data-products class="cart__page-col">
{% for item in cart.items %}
{%- render 'cart-item', product: item -%}
{%- endfor -%}
</div>
<div class="cart__page-col">
{% if settings.cart_notes_enable %}
<div>
<label for="CartNote">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full cart-notes" id="CartNote">{{ cart.note }}</textarea>
</div>
{% endif %}
<div data-discounts>
{% if cart.cart_level_discount_applications != blank %}
<div class="cart__discounts cart__item-sub cart__item-row">
<div>{{ 'cart.general.discounts' | t }}</div>
<div class="text-right">
{% for cart_discount in cart.cart_level_discount_applications %}
<div class="cart__discount">
{{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
<div class="cart__item-sub cart__item-row">
<div>{{ 'cart.general.subtotal' | t }}</div>
<div data-subtotal>{{ cart.total_price | money }}</div>
</div>
{% if settings.cart_terms_conditions_enable %}
<div class="cart__item-row cart__terms">
<input type="checkbox" id="CartTerms" class="cart__terms-checkbox">
<label for="CartTerms">
{% if settings.cart_terms_conditions_page != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</div>
{% endif %}
<div class="cart__item-row cart__checkout-wrapper">
<button type="submit" name="checkout" data-terms-required="{{ settings.cart_terms_conditions_enable }}" class="btn cart__checkout">
{{ 'cart.general.checkout' | t }}
</button>
{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
<div class="cart__item-row text-center">
<small>
{{ 'cart.general.shipping_at_checkout' | t }}<br />
</small>
</div>
</div>
</div>
</form>
{%- endif -%}
</div>
{% schema %}
{
"name": "t:sections.main-cart.name"
}
{% endschema %}
Can you try the following code to remove it, please?
<a href="/cart/change?line={{ forloop.index }}&quantity=0" rel="{{ item.id }}">Remove Item</a>
If I put it instead of previous code. I am getting error
By using this code down below. After I click remove on cart drawer it sends me to cart page and from there I can delete an item.
<cart-remove-button id="CartDrawer-Remove-{{ item.index | plus: 1 }}" data-index="{{ item.index | plus: 1 }}">
<button class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
REMOVE
</button>
</cart-remove-button>
It's a workaround. Sorry couldn't help you with an easier solution.
It seems that this code is removing an item row in cart page. It is strange that there is no button on cart drawer.
<div class="cart__remove">
<a href="{{ routes.cart_change_url }}?id={{ product.key }}&quantity=0" class="text-link">
{{ 'cart.general.remove' | t }}
</div>
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024