How to resolve cart drawer issues on the dawn theme?

Outdated
Tourist
5 0 2

Is there a valid way to fix the cart drawer on the dawn theme cause mine is not working at all I even tried a brand new installation and I'm super far down the project that I cant go back:

 

 

The problem I'm facing is that is does not update the Quantity / Price / Removed Items unless you refresh which only works at certain times.

Would really appreciate if someone can share their code or something that can fix this I have tried the ajax thing its just a huge process and also a external lib called goCart.js which is just a hassle to setup with dawn atleast. 

Replies 4 (4)

KetanKumar
Shopify Partner
36890 3640 11983

@Outdated 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Outdated
Tourist
5 0 2

I cant really share the url cause of the NDA constraints but here is the code for it.
```


<script src='{{ "cart.js" | asset_url }}' defer='defer'></script>
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
<style>
.drawer {
visibility: hidden;
}
</style>

<cart-drawer class='drawer{% if cart == empty %} is-empty{% endif %}' id='main-cart-items'>
<div id='CartDrawer' class='cart-drawer'>
<div id='CartDrawer-Overlay' class='cart-drawer__overlay'></div>
<div
class='drawer__inner'
role='dialog'
aria-modal='true'
aria-label='{{ 'sections.cart.title' | t }}'
tabindex='-1'
>
{%- if cart == empty -%}
<div class='drawer__inner-empty'>
<div class='cart-drawer__warnings center{% if settings.cart_drawer_collection != blank %} cart-drawer__warnings--has-collection{% endif %}'>
<div class='cart-drawer__empty-content'>
<h2 class='cart__empty-text h4'>{{ 'sections.cart.empty' | t }}</h2>
<div class='naiyo-flex naiyo-flex-col naiyo-justify-center naiyo-items-center naiyo-gap-4'>
<button
class='drawer__close'
type='button'
onclick="this.closest('cart-drawer').close()"
aria-label='{{ 'accessibility.close' | t }}'
>
{% render 'icon-close' %}
</button>
<a href='{{ routes.all_products_collection_url }}' class='button naiyo-button-flip'>
{{ 'general.continue_shopping' | t }}
</a>
</div>
</div>
</div>
{%- if settings.cart_drawer_collection != blank -%}
<div class='cart-drawer__collection'>
{%
render 'card-collection',
card_collection: settings.cart_drawer_collection,
columns: 1
%}
</div>
{%- endif -%}
</div>
{%- endif -%}
<div class='drawer__header !naiyo-px-8'>
<h2 class='drawer__heading'>
{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
<span class='visually-hidden'>{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
<div class='cart-count-bubble'>
{%- if cart.item_count < 100 -%}
<span aria-hidden='true'>{{ cart.item_count }}</span>
{%- endif -%}
<span class='visually-hidden'>
{{- 'sections.header.cart_count' | t: count: cart.item_count -}}
</span>
</div>
{%- endif -%}
</h2>
<button
class='drawer__close'
type='button'
onclick="this.closest('cart-drawer').close()"
aria-label='{{ 'accessibility.close' | t }}'
>
{% render 'icon-close' %}
</button>
</div>
<cart-drawer-items
{% if cart == empty %}
class=' is-empty'
{% endif %}
>
<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'>
<tbody role='rowgroup'>
{%- for item in cart.items -%}
<tr
class='cart-item'
id='CartItem-{{ item.index | plus: 1 }}'
>
<td class='cart-item__media'>
{% if item.image %}
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
<a
href='{{ item.url }}'
class='cart-item__link'
aria-hidden='true'
tabindex='-1'
>
</a>
<div class='cart-item__image-container gradient global-media-settings'>
<img
src='{{ item.image | image_url: width: 300 }}'
class='cart-item__image'
alt='{{ item.image.alt | escape }}'
loading='lazy'
width='150'
height='{{ 150 | divided_by: item.image.aspect_ratio | ceil }}'
>
</div>
{% endif %}
</td>

<td class='cart-item__details'>
<div class='hidden loading-overlay'>
<div class='loading-overlay__spinner'>
<svg
aria-hidden='true'
focusable='false'
role='presentation'
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>
{%- if settings.show_vendor -%}
<p class='caption-with-letter-spacing'>
{{ 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 h4'>
{{- item.original_price | money -}}
</s>
<span class='visually-hidden'>
{{ 'products.product.price.sale_price' | t }}
</span>
<strong class='cart-item__final-price product-option h4'>
{{ item.final_price | money }}
</strong>
</div>
{%- else -%}
<div class='product-option h4'>
{{ item.original_price | money }}
</div>
{%- endif -%}

{%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
<dl>
{%- if item.product.has_only_default_variant == false -%}
{%- for option in item.options_with_values -%}
<div class='product-option h4'>
<dt>{{ option.name }}:</dt>
<dd>{{ option.value }}</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 h4'>
<dt>{{ property.first }}:</dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a
href='{{ property.last }}'
class='link'
target='_blank'
>
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}
</dl>

<p class='product-option h4'>
{{ 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__quantity' role='cell' headers='CartDrawer-ColumnQuantity'>
<div class='cart-item__quantity-wrapper'>
<quantity-input class='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'
name='updates[]'
value='{{ item.quantity }}'
min='0'
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
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'
role='presentation'
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>
<div class='drawer__footer !naiyo-px-8'>
{%- if settings.show_cart_note -%}
<details id='Details-CartDrawer'>
<summary>
<span class='summary__title'>
{{ 'sections.cart.note' | t }}
{% render 'icon-caret' %}
</span>
</summary>
<cart-note class='cart__note field'>
<label class='visually-hidden' for='CartDrawer-Note'>
{{- 'sections.cart.note' | t -}}
</label>
<textarea
id='CartDrawer-Note'
class='text-area text-area--resize-vertical field__input'
name='note'
placeholder='{{ 'sections.cart.note' | t }}'
>{{ cart.note }}</textarea>
</cart-note>
</details>
{%- endif -%}

<div class='cart-drawer__footer' {{ block.shopify_attributes }}>
<div class='hidden loading-overlay'>
<div class='loading-overlay__spinner'>
<svg
aria-hidden='true'
focusable='false'
role='presentation'
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>
{%- if cart.cart_level_discount_applications.size > 0 -%}
<ul
class='discounts list-unstyled'
role='list'
aria-label='{{ 'customer.order.discount' | t }}'
>
{%- for discount in cart.cart_level_discount_applications -%}
<li class='discounts__discount discounts__discount--end'>
{%- render 'icon-discount' -%}
{{ discount.title }}
(-{{ discount.total_allocated_amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>

<small class='tax-note caption-large rte h4'>
{%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif cart.taxes_included -%}
{{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
</small>
</div>

<!-- CTAs -->

<div class='cart__ctas' {{ block.shopify_attributes }}>
<noscript>
<button
type='submit'
class='cart__update-button button button--secondary'
form='CartDrawer-Form'
>
{{ 'sections.cart.update' | t }}
</button>
</noscript>

<button
type='submit'
id='CartDrawer-Checkout'
class='cart__checkout-button button !naiyo-text-xl naiyo-button-flip !naiyo-font-bold'
name='checkout'
form='CartDrawer-Form'
{% if cart == empty %}
disabled
{% endif %}
>
{{ cart.total_price | money_with_currency }} —
{{ 'sections.cart.checkout' | t }}
</button>
</div>
</div>
</cart-drawer-items>
</div>
</div>


<script src='{{ "cart.js" | asset_url }}' defer='defer'></script>
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
<style>
.drawer {
visibility: hidden;
}
</style>

<cart-drawer class='drawer{% if cart == empty %} is-empty{% endif %}' id='main-cart-items'>
<div id='CartDrawer' class='cart-drawer'>
<div id='CartDrawer-Overlay' class='cart-drawer__overlay'></div>
<div
class='drawer__inner'
role='dialog'
aria-modal='true'
aria-label='{{ 'sections.cart.title' | t }}'
tabindex='-1'
>
{%- if cart == empty -%}
<div class='drawer__inner-empty'>
<div class='cart-drawer__warnings center{% if settings.cart_drawer_collection != blank %} cart-drawer__warnings--has-collection{% endif %}'>
<div class='cart-drawer__empty-content'>
<h2 class='cart__empty-text h4'>{{ 'sections.cart.empty' | t }}</h2>
<div class='naiyo-flex naiyo-flex-col naiyo-justify-center naiyo-items-center naiyo-gap-4'>
<button
class='drawer__close'
type='button'
onclick="this.closest('cart-drawer').close()"
aria-label='{{ 'accessibility.close' | t }}'
>
{% render 'icon-close' %}
</button>
<a href='{{ routes.all_products_collection_url }}' class='button naiyo-button-flip'>
{{ 'general.continue_shopping' | t }}
</a>
</div>
</div>
</div>
{%- if settings.cart_drawer_collection != blank -%}
<div class='cart-drawer__collection'>
{%
render 'card-collection',
card_collection: settings.cart_drawer_collection,
columns: 1
%}
</div>
{%- endif -%}
</div>
{%- endif -%}
<div class='drawer__header !naiyo-px-8'>
<h2 class='drawer__heading'>
{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
<span class='visually-hidden'>{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
<div class='cart-count-bubble'>
{%- if cart.item_count < 100 -%}
<span aria-hidden='true'>{{ cart.item_count }}</span>
{%- endif -%}
<span class='visually-hidden'>
{{- 'sections.header.cart_count' | t: count: cart.item_count -}}
</span>
</div>
{%- endif -%}
</h2>
<button
class='drawer__close'
type='button'
onclick="this.closest('cart-drawer').close()"
aria-label='{{ 'accessibility.close' | t }}'
>
{% render 'icon-close' %}
</button>
</div>
<cart-drawer-items
{% if cart == empty %}
class=' is-empty'
{% endif %}
>
<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'>
<tbody role='rowgroup'>
{%- for item in cart.items -%}
<tr
class='cart-item'
id='CartItem-{{ item.index | plus: 1 }}'
>
<td class='cart-item__media'>
{% if item.image %}
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
<a
href='{{ item.url }}'
class='cart-item__link'
aria-hidden='true'
tabindex='-1'
>
</a>
<div class='cart-item__image-container gradient global-media-settings'>
<img
src='{{ item.image | image_url: width: 300 }}'
class='cart-item__image'
alt='{{ item.image.alt | escape }}'
loading='lazy'
width='150'
height='{{ 150 | divided_by: item.image.aspect_ratio | ceil }}'
>
</div>
{% endif %}
</td>

<td class='cart-item__details'>
<div class='hidden loading-overlay'>
<div class='loading-overlay__spinner'>
<svg
aria-hidden='true'
focusable='false'
role='presentation'
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>
{%- if settings.show_vendor -%}
<p class='caption-with-letter-spacing'>
{{ 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 h4'>
{{- item.original_price | money -}}
</s>
<span class='visually-hidden'>
{{ 'products.product.price.sale_price' | t }}
</span>
<strong class='cart-item__final-price product-option h4'>
{{ item.final_price | money }}
</strong>
</div>
{%- else -%}
<div class='product-option h4'>
{{ item.original_price | money }}
</div>
{%- endif -%}

{%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
<dl>
{%- if item.product.has_only_default_variant == false -%}
{%- for option in item.options_with_values -%}
<div class='product-option h4'>
<dt>{{ option.name }}:</dt>
<dd>{{ option.value }}</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 h4'>
<dt>{{ property.first }}:</dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a
href='{{ property.last }}'
class='link'
target='_blank'
>
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}
</dl>

<p class='product-option h4'>
{{ 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__quantity' role='cell' headers='CartDrawer-ColumnQuantity'>
<div class='cart-item__quantity-wrapper'>
<quantity-input class='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'
name='updates[]'
value='{{ item.quantity }}'
min='0'
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
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'
role='presentation'
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>
<div class='drawer__footer !naiyo-px-8'>
{%- if settings.show_cart_note -%}
<details id='Details-CartDrawer'>
<summary>
<span class='summary__title'>
{{ 'sections.cart.note' | t }}
{% render 'icon-caret' %}
</span>
</summary>
<cart-note class='cart__note field'>
<label class='visually-hidden' for='CartDrawer-Note'>
{{- 'sections.cart.note' | t -}}
</label>
<textarea
id='CartDrawer-Note'
class='text-area text-area--resize-vertical field__input'
name='note'
placeholder='{{ 'sections.cart.note' | t }}'
>{{ cart.note }}</textarea>
</cart-note>
</details>
{%- endif -%}

<div class='cart-drawer__footer' {{ block.shopify_attributes }}>
<div class='hidden loading-overlay'>
<div class='loading-overlay__spinner'>
<svg
aria-hidden='true'
focusable='false'
role='presentation'
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>
{%- if cart.cart_level_discount_applications.size > 0 -%}
<ul
class='discounts list-unstyled'
role='list'
aria-label='{{ 'customer.order.discount' | t }}'
>
{%- for discount in cart.cart_level_discount_applications -%}
<li class='discounts__discount discounts__discount--end'>
{%- render 'icon-discount' -%}
{{ discount.title }}
(-{{ discount.total_allocated_amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>

<small class='tax-note caption-large rte h4'>
{%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif cart.taxes_included -%}
{{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
</small>
</div>

<!-- CTAs -->

<div class='cart__ctas' {{ block.shopify_attributes }}>
<noscript>
<button
type='submit'
class='cart__update-button button button--secondary'
form='CartDrawer-Form'
>
{{ 'sections.cart.update' | t }}
</button>
</noscript>

<button
type='submit'
id='CartDrawer-Checkout'
class='cart__checkout-button button !naiyo-text-xl naiyo-button-flip !naiyo-font-bold'
name='checkout'
form='CartDrawer-Form'
{% if cart == empty %}
disabled
{% endif %}
>
{{ cart.total_price | money_with_currency }} —
{{ 'sections.cart.checkout' | t }}
</button>
</div>
</div>
</cart-drawer-items>
</div>
</div>
</cart-drawer>
```


</cart-drawer>



Outdated
Tourist
5 0 2

So I cant really share the url but here is the code for the drawer

<script src='{{ "cart.js" | asset_url }}' defer='defer'></script>
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
<style>
  .drawer {
    visibility: hidden;
  }
</style>

<cart-drawer class='drawer{% if cart == empty %} is-empty{% endif %}' id='main-cart-items'>
  <div id='CartDrawer' class='cart-drawer'>
    <div id='CartDrawer-Overlay' class='cart-drawer__overlay'></div>
    <div
      class='drawer__inner'
      role='dialog'
      aria-modal='true'
      aria-label='{{ 'sections.cart.title' | t }}'
      tabindex='-1'
    >
      {%- if cart == empty -%}
        <div class='drawer__inner-empty'>
          <div class='cart-drawer__warnings center{% if settings.cart_drawer_collection != blank %} cart-drawer__warnings--has-collection{% endif %}'>
            <div class='cart-drawer__empty-content'>
              <h2 class='cart__empty-text h4'>{{ 'sections.cart.empty' | t }}</h2>
              <div class='naiyo-flex naiyo-flex-col naiyo-justify-center naiyo-items-center naiyo-gap-4'>
                <button
                  class='drawer__close'
                  type='button'
                  onclick="this.closest('cart-drawer').close()"
                  aria-label='{{ 'accessibility.close' | t }}'
                >
                  {% render 'icon-close' %}
                </button>
                <a href='{{ routes.all_products_collection_url }}' class='button naiyo-button-flip'>
                  {{ 'general.continue_shopping' | t }}
                </a>
              </div>
            </div>
          </div>
          {%- if settings.cart_drawer_collection != blank -%}
            <div class='cart-drawer__collection'>
              {%
                render 'card-collection',
                card_collection: settings.cart_drawer_collection,
                columns: 1
              %}
            </div>
          {%- endif -%}
        </div>
      {%- endif -%}
      <div class='drawer__header !naiyo-px-8'>
        <h2 class='drawer__heading'>
          {%- liquid
            if cart == empty
              render 'icon-cart-empty'
            else
              render 'icon-cart'
            endif
          -%}
          <span class='visually-hidden'>{{ 'templates.cart.cart' | t }}</span>
          {%- if cart != empty -%}
            <div class='cart-count-bubble'>
              {%- if cart.item_count < 100 -%}
                <span aria-hidden='true'>{{ cart.item_count }}</span>
              {%- endif -%}
              <span class='visually-hidden'>
                {{- 'sections.header.cart_count' | t: count: cart.item_count -}}
              </span>
            </div>
          {%- endif -%}
        </h2>
        <button
          class='drawer__close'
          type='button'
          onclick="this.closest('cart-drawer').close()"
          aria-label='{{ 'accessibility.close' | t }}'
        >
          {% render 'icon-close' %}
        </button>
      </div>
      <cart-drawer-items
        {% if cart == empty %}
          class=' is-empty'
        {% endif %}
      >
        <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'>
                  <tbody role='rowgroup'>
                    {%- for item in cart.items -%}
                      <tr
                        class='cart-item'
                        id='CartItem-{{ item.index | plus: 1 }}'
                      >
                        <td class='cart-item__media'>
                          {% if item.image %}
                            {% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
                            <a
                              href='{{ item.url }}'
                              class='cart-item__link'
                              aria-hidden='true'
                              tabindex='-1'
                            >
                            </a>
                            <div class='cart-item__image-container gradient global-media-settings'>
                              <img
                                src='{{ item.image | image_url: width: 300 }}'
                                class='cart-item__image'
                                alt='{{ item.image.alt | escape }}'
                                loading='lazy'
                                width='150'
                                height='{{ 150 | divided_by: item.image.aspect_ratio | ceil }}'
                              >
                            </div>
                          {% endif %}
                        </td>

                        <td class='cart-item__details'>
                          <div class='hidden loading-overlay'>
                            <div class='loading-overlay__spinner'>
                              <svg
                                aria-hidden='true'
                                focusable='false'
                                role='presentation'
                                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>
                          {%- if settings.show_vendor -%}
                            <p class='caption-with-letter-spacing'>
                              {{ 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 h4'>
                                {{- item.original_price | money -}}
                              </s>
                              <span class='visually-hidden'>
                                {{ 'products.product.price.sale_price' | t }}
                              </span>
                              <strong class='cart-item__final-price product-option h4'>
                                {{ item.final_price | money }}
                              </strong>
                            </div>
                          {%- else -%}
                            <div class='product-option h4'>
                              {{ item.original_price | money }}
                            </div>
                          {%- endif -%}

                          {%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
                            <dl>
                              {%- if item.product.has_only_default_variant == false -%}
                                {%- for option in item.options_with_values -%}
                                  <div class='product-option h4'>
                                    <dt>{{ option.name }}:</dt>
                                    <dd>{{ option.value }}</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 h4'>
                                    <dt>{{ property.first }}:</dt>
                                    <dd>
                                      {%- if property.last contains '/uploads/' -%}
                                        <a
                                          href='{{ property.last }}'
                                          class='link'
                                          target='_blank'
                                        >
                                          {{ property.last | split: '/' | last }}
                                        </a>
                                      {%- else -%}
                                        {{ property.last }}
                                      {%- endif -%}
                                    </dd>
                                  </div>
                                {%- endif -%}
                              {%- endfor -%}
                            </dl>

                            <p class='product-option h4'>
                              {{ 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__quantity' role='cell' headers='CartDrawer-ColumnQuantity'>
                          <div class='cart-item__quantity-wrapper'>
                            <quantity-input class='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'
                                name='updates[]'
                                value='{{ item.quantity }}'
                                min='0'
                                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
                                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'
                              role='presentation'
                              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>
        <div class='drawer__footer !naiyo-px-8'>
          {%- if settings.show_cart_note -%}
            <details id='Details-CartDrawer'>
              <summary>
                <span class='summary__title'>
                  {{ 'sections.cart.note' | t }}
                  {% render 'icon-caret' %}
                </span>
              </summary>
              <cart-note class='cart__note field'>
                <label class='visually-hidden' for='CartDrawer-Note'>
                  {{- 'sections.cart.note' | t -}}
                </label>
                <textarea
                  id='CartDrawer-Note'
                  class='text-area text-area--resize-vertical field__input'
                  name='note'
                  placeholder='{{ 'sections.cart.note' | t }}'
                >{{ cart.note }}</textarea>
              </cart-note>
            </details>
          {%- endif -%}

          <div class='cart-drawer__footer' {{ block.shopify_attributes }}>
            <div class='hidden loading-overlay'>
              <div class='loading-overlay__spinner'>
                <svg
                  aria-hidden='true'
                  focusable='false'
                  role='presentation'
                  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>
              {%- if cart.cart_level_discount_applications.size > 0 -%}
                <ul
                  class='discounts list-unstyled'
                  role='list'
                  aria-label='{{ 'customer.order.discount' | t }}'
                >
                  {%- for discount in cart.cart_level_discount_applications -%}
                    <li class='discounts__discount discounts__discount--end'>
                      {%- render 'icon-discount' -%}
                      {{ discount.title }}
                      (-{{ discount.total_allocated_amount | money }})
                    </li>
                  {%- endfor -%}
                </ul>
              {%- endif -%}
            </div>

            <small class='tax-note caption-large rte h4'>
              {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
                {{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- elsif cart.taxes_included -%}
                {{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
              {%- elsif shop.shipping_policy.body != blank -%}
                {{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
              {%- else -%}
                {{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
              {%- endif -%}
            </small>
          </div>

          <!-- CTAs -->

          <div class='cart__ctas' {{ block.shopify_attributes }}>
            <noscript>
              <button
                type='submit'
                class='cart__update-button button button--secondary'
                form='CartDrawer-Form'
              >
                {{ 'sections.cart.update' | t }}
              </button>
            </noscript>

            <button
              type='submit'
              id='CartDrawer-Checkout'
              class='cart__checkout-button button !naiyo-text-xl naiyo-button-flip  !naiyo-font-bold'
              name='checkout'
              form='CartDrawer-Form'
              {% if cart == empty %}
                disabled
              {% endif %}
            >
              {{ cart.total_price | money_with_currency }} —
              {{ 'sections.cart.checkout' | t }}
            </button>
          </div>
        </div>
      </cart-drawer-items>
    </div>
  </div>
</cart-drawer>

KabirDev
Shopify Partner
248 61 67

Discover how to set up a drawer cart in 2024 with my easy-to-follow video at https://youtu.be/5SefePWS5as?si=ZkZjTyypCklAHidn

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com