How to resolve cart drawer issues on the dawn theme?

Outdated · ‎08-23-2022

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.

KetanKumar · ‎08-23-2022

@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. Partnership of your ☕️ Coffee Tips and my code can bring miracles.
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 · ‎08-24-2022

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

<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>

<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>