Can't remove item from cart

Support
#1

Hello,
I can’t remove item from the cart by clicking on the trash button.
This is my cart template:

<div id="snipcart" data-config-modal-style="side" data-api-key="MyKey" hidden>
	<item-line>
		<li class="snipcart__item__line snipcart__box">
			<div class="snipcart__item__line__product">
				<div class="snipcart__item__line__header">
					<item-image alt=""> </item-image><div class="ItemLine">
						<h2 class="snipcart__item__line__header__title">
							<span class="ItemQty">{{ item.quantity }} x</span> 
							<b>{{ item.name }}<br> 
								<span class="Gramm">{{ item.customFields.find(field => field.name === \'Weight\').value }}g</span>
								<span class="Gramm">{{ item.customFields.find(field => field.name === \'Capacity\').value }}oz</span>
							</b>
						</h2>
						<div :class="item.customFields.find(field => field.name === \'Conditionnement\').value"></div>
						<item-quantity class="snipcart__item__line__quantity" v-if="!adding">{{ $localize("item.quantity_short") }}: {{ item.quantity }}</item-quantity>
						<div class="snipcart__item__line__header__actions">
							<remove-item-action class="snipcart__button--icon">
								<icon name="trash" class="icon--red"  alt="item.remove_item"></icon>
							</remove-item-action>
						</div>
					</div>
				</div>
				<div class="InfoItem">{{ item.customFields.find(field => field.name === \'Label\').value }}</div>
			</div>
		</li>
	</item-line>
</div>

When i look at the console, i have errors. Three times the same:

TypeError: Cannot read properties of undefined (reading 'value')
    at a.eval (eval at $u (snipcart.js:16:93332), <anonymous>:3:1267)
    at a.e.renderRootOverridable (snipcart.js:36:87652)
    at a.e.render (snipcart.js:36:86310)
    at a.On.t._render (snipcart.js:16:23870)
    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 a.Cr.$mount (snipcart.js:16:71271)
    at a.Cr.$mount (snipcart.js:16:95196)

Capture d’écran 2022-04-21 à 09.22.21
Capture d’écran 2022-04-21 à 09.22.211182×920 214 KB

I’m working on local machine.

Thank you for your support.

#2

Hey @Fletcher, which version of the cart are you using?

#3

I am using 3.3.3 version and call it like that:

<script async src="https://cdn.snipcart.com/themes/v3.3.3/default/snipcart.js"></script>

It seems like the problem came from my cart template:

<div id="snipcart" data-config-modal-style="side" data-api-key="MyAPIkey" hidden>
	<item-line>
		<li class="snipcart__item__line snipcart__box">
			<div class="snipcart__item__line__product">
				<div class="snipcart__item__line__header">
					<item-image alt=""> </item-image><div class="ItemLine">
						<h2 class="snipcart__item__line__header__title">
							<span class="ItemQty">{{ item.quantity }} x</span> 
							<b>{{ item.name }}<br> 
								<span class="Gramm">{{ item.customFields.find(field => field.name === \'Weight\').value }}g</span>
								<span class="Gramm">{{ item.customFields.find(field => field.name === \'Capacity\').value }}oz</span>
							</b>
						</h2>
						<div :class="item.customFields.find(field => field.name === \'Conditionnement\').value"></div>
						<item-quantity class="snipcart__item__line__quantity" v-if="!adding">{{ $localize("item.quantity_short") }}: {{ item.quantity }}</item-quantity>
						<div class="snipcart__item__line__header__actions">
							<remove-item-action class="snipcart__button--icon">
								<icon name="trash" class="icon--red"  alt="item.remove_item"></icon>
							</remove-item-action>
						</div>
					</div>
				</div>
				<div class="InfoItem">{{ item.customFields.find(field => field.name === \'Label\').value }}</div>
			</div>
		</li>
	</item-line>
</div>

If i comment the lines:

<span class="Gramm">{{ item.customFields.find(field => field.name === \'Weight\').value }}g</span>

<span class="Gramm">{{ item.customFields.find(field => field.name === \'Capacity\').value }}oz</span>

<div class="InfoItem">{{ item.customFields.find(field => field.name === \'Label\').value }}</div>

The console doesn’t displays errors anymore but the remove item button still doesn’t works. I think the errors are due to wrong syntax.

Can you help me to understand my mistake and write it correctly ?

#4

Hi,
Console error messages magically disappeared. However, the button to remove items from the basket does not work. Is there anyone who can help me?

#5

Hi @Fletcher

I believe your issue might come from the .find used. If there is no item.customFields in an item, it may break the component. Can you try checking if item.customFields is not null and seeing if it helps?

Thanks.