When attempting to customize cart component (Default theme reference – Snipcart Documentation) using the default template inside the cart tag results in stack size error:
snipcart.js:16 RangeError: Maximum call stack size exceeded
at On.t._render (snipcart.js:16:23918)
at a.r (snipcart.js:16:27961)
at or.get (snipcart.js:16:30821)
at new or (snipcart.js:16:30739)
at zn (snipcart.js:16:27975)
at Cr.$mount (snipcart.js:16:71271)
at Cr.$mount (snipcart.js:16:95196)
at init (snipcart.js:16:20684)
at h (snipcart.js:16:44370)
at d (snipcart.js:16:43999)
It seems that cart component doesn’t actually include everything that the default template in the documentation implies but when you are customizing cart component you are actually customizing only part of the template that’s nested inside the provided default template?
<section class="snipcart-cart__content">
<item-list
item-template="item-line"
class="snipcart-item-list--no-shadow"
:show-description="!isSideCart"
>
<template
v-slot:footer
v-if="isSideCart && hasActiveDiscountsTriggerableByCode"
>
<li class="snipcart-item-line snipcart-item-line--cart-edit">
<div class="snipcart-item-line__container">
<discount-box class="snipcart-cart__discount-box"></discount-box>
</div>
</li>
</template>
</item-list>
<div class="snipcart-cart__footer">
<div class="snipcart-cart__footer-col cart__footer-discount-box snipcart-cart__actions">
<discount-box
v-if="!isSideCart && hasActiveDiscountsTriggerableByCode"
class="snipcart-cart__discount-box"
></discount-box>
</div>
<div class="snipcart-cart__footer-col">
<summary-fees
class="snipcart-cart-summary-fees--reverse"
:summary-data="summaryFeesProvider"
>
{{ $localize('cart.shipping_taxes_calculated_at_checkout')}}
</summary-fees>
<footer v-if="!editingCart || isSideCart" class="snipcart-cart__footer-buttons">
<flash-message
type="error"
v-if="errors != null"
:title="$localize('errors.order_validation.custom_fields_validation.title')"
>
{{$localize('errors.order_validation.custom_fields_validation.description')}}
</flash-message>
<button-primary
label="actions.checkout"
icon="continue-arrow"
:state="checkoutDisabled ? 'disabled' : undefined"
@click="checkout"
></button-primary>
</footer>
<div class="snipcart-cart__featured-payment-methods-container">
<featured-payment-methods v-if="!editingCart"></featured-payment-methods>
</div>
</div>
</div>
</section>
Using the above template to override cart component doesn’t result in max stack size error.
PS: The project I’m testing this on has the modal side cart enabled if that matters.