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>
Good point. I did that it deletes but sends me to cart page, but without deleted product.
Community Blog Articles
A guide to Shopify POS Launch and Operations success
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024
Community Connect: Recap March 24’
We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024
Shopify Store Design: Expert Advice from Stephen’s World
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024