How to add a quantity adjustment component (+ / -) to increase/decrease

Hello @Clyde, thats tricky 🙂 but not impossible. We will dig into it.

I've been somewhat able to do this (increase quantity) but now run into another issue.

The cart total and cart quantity have not been updated. I have to refresh the page to reflect the most updated quantity.

I see the total carts are stored under "items". Where in Alphine.js can I update the cart's actual quantity?

I'm trying to update them pragmatically..

Can you send me the read only link so i can check how you made it?

there is a getCart function at the mini cart element. Maybe you can call this when clicking on the quantity button

Hi Jonas,

Let me clean it up so I can share it. The gist is I get the variant ID (via Alpine.js) and use Shopify AJAX API to increase the quantity.

Do you have a simple example of how I can trigger the getCart function within a button? Would I do this using Alpine js?

Hi @Clyde maybe we schedule a call to check how you need it. Because with alpine js it should be not that hard. How is your timeline on this project?

Hi Jonas,

The timeline should end of November so I got time. And yes, a call would be great!

When would work best for you?

Wrote you a DM 🙂

Hi clyde, this works:
<div li-if="product.available == true" class="div-block">
<div x-show="products.find(product => product.id === selected_product_id)" x-on:click="$dispatch('decreasecartitem', { product: selected_product_id, quantity: (products.find(product => product.id === selected_product_id)

{}).quantity, action: 'decrease' })">-</div>
<div x-text="(products.find(product => product.id === selected_product_id)

{}).quantity">1</div>
<div li-element="add-to-cart" @click="addToCart(false)" :disabled="!addToCartButton">+</div>
</div>
important is, that the attribute li-element="mini-cart" needs to be on a wrapping element. like the page wrapper on every site. I havent yet found the way to access the data in the other store
https://dm7h2sbboggilg80-84024623398.shopifypreview.com/
https://preview.webflow.com/preview/clyde-test?utm_medium=preview_link&utm_source=designer&utm_content=clyde-test&preview=2e903db79948c9938579805d4b825151&workflow=preview

with x-show="products.find(product => product.id === selected_product_id) you can check if the product is inside the card and based on this showing/hiding diffrent elements

Thank you, Jonas!

Regarding this:



Is it correct that there's a function called: increasecartitem

Will this work?



The reason I'm asking is the add-to-cart (+) has a delay while using the decreasecaritem (-`) function doesn't have it ...

You can see the difference here: https://dev-nb.myshopify.com/

Also, it would be great to see what other functions that are available 😄

UPDATE: Yes, increasecartitem works!