All things Shopify and commerce
Hello,
I have a problem with deleting a product with "Remove" button. It is not appearing on cart drawer. I provided screenshots an codes.
this is main-cart.liquid
<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 %}
this is cart-drawer.liquid
{%- if settings.cart_type == 'drawer' -%}
<div id="CartDrawer" class="drawer drawer--right">
<form id="CartDrawerForm" action="{{ routes.cart_url }}" method="post" novalidate class="drawer__contents">
<div class="drawer__fixed-header" >
<div class="drawer__header appear-animation appear-delay-1">
<div class="h3 drawer__title">{{ 'cart.general.title' | t }}</div>
<div class="drawer__close">
<button type="button" class="drawer__close-button js-drawer-close">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
</button>
</div>
</div>
</div>
<div class="drawer__inner">
<div class="order-value-booster-side-cart" style="font-weight: 500; font-family: 'Poppins';"></div>
<div class="drawer__scrollable">
<div data-products class="appear-animation appear-delay-2"></div>
{% if settings.cart_notes_enable %}
<div class="appear-animation appear-delay-3">
<label for="CartNoteDrawer">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full cart-notes" id="CartNoteDrawer">{{ cart.note }}</textarea>
</div>
{% endif %}
</div>
<div class="drawer__footer appear-animation appear-delay-4">
<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 class="ajaxcart__subtotal">{{ 'cart.general.subtotal' | t }}</div>
<div data-subtotal>{{ cart.total_price | money }}</div>
</div>
<div class="cart__checkout-wrapper">
<button type="submit" name="checkout" style="padding: 15px 18px; font-size: 1.5rem; font-weight: 700;" 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 additional-checkout-buttons--vertical">{{ 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>
{% if settings.cart_terms_conditions_enable %}
<div class="cart__item-row cart__terms">
<input type="checkbox" id="CartTermsDrawer" class="cart__terms-checkbox">
<label for="CartTermsDrawer">
{% 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>
</div>
<div class="drawer__cart-empty appear-animation appear-delay-2" >
<div class="drawer__scrollable" style="text-align: center; background: white;" >
{{ 'cart.general.empty' | t }}
<p> </p>
<button type="submit" name="continue" >
<a class="btn cart__checkout" href="/collections/leather-handmade-wallets" style="background:#05564B; padding: 15px 18px; font-size: 0.98rem; font-weight:700;">CONTINUE SHOPPING<span class="cell-l--s">></span></a>
</button>
<a href="{{ routes.root_url }}" class="ht drawer__title"{% if section.settings.align_logo == 'left' %} site-header__logo{% endif %}">
{% capture image_size %}{{ section.settings.logo_max_width | escape }}{% endcapture %}
<img src="{{ 'Belucian-Icon-Black.svg' | asset_url }}"
alt="{{ shop.name }}"
style="width: 15%; padding-top: 205px">
</a>
</div>
</div>
</form>
</div>
{%- endif -%}
this is cart-items.liquid
<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>
{% comment %}} <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> {% endcomment %}}
</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>
And this code make remove button on cart page.
<div class="cart__remove">
<a href="{{ routes.cart_change_url }}?id={{ product.key }}&quantity=0" class="text-link">
{{ 'cart.general.remove' | t }}
</div>
Hi BELU1,
I looked at the code you attached and from what I understand there is no straightforward fix for this. The products gets added to the card drawer with JavaScript and therefore would require a developer to make this change for you.
cart-drawer.liquid
<div data-products class="appear-animation appear-delay-2"></div>
Good point. I did that it deletes but sends me to cart page, but without deleted product.
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