chore(template): update cart behaviour

Signed-off-by: Frederik Bußmann <[email protected]>

Author: freb97

.github/renovate.json

@@ -8,5 +8,8 @@
     "automerge": true,
     "autodiscover": true,
     "rangeStrategy": "bump",
-    "commitMessagePrefix": "chore:"
+    "commitMessagePrefix": "chore:",
+    "lockFileMaintenance": {
+        "enabled": true
+    }
 }

README.md

@@ -4,7 +4,6 @@
 
 [![Github Actions][github-actions-src]][github-actions-href]
 [![NPM version][npm-version-src]][npm-version-href]
-[![NPM downloads][npm-downloads-src]][npm-downloads-href]
 [![NPM last update][npm-last-update-src]][npm-last-update-href]
 [![License][license-src]][license-href]
 
@@ -390,9 +389,6 @@ Published under the [MIT License](https://github.com/nuxt-modules/shopify/tree/m
 [npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/shopify/latest.svg?style=flat&colorA=18181B&colorB=31C553
 [npm-version-href]: https://npmjs.com/package/@nuxtjs/shopify
 
-[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/shopify.svg?style=flat&colorA=18181B&colorB=31C553
-[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/shopify
-
 [npm-last-update-src]: https://img.shields.io/npm/last-update/%40nuxtjs%2Fshopify.svg?style=flat&colorA=18181B&colorB=31C553
 [npm-last-update-href]: https://npmjs.com/package/@nuxtjs/shopify
 

template/app/components/common/AddToCart.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ButtonProps } from '#ui/types'
+
+const props = defineProps<ButtonProps & {
+    variantId: string
+    quantity?: number
+}>()
+
+const { add } = useCart()
+const { t } = useI18n()
+
+const loading = ref(false)
+
+const addToCart = async (variantId: string, quantity = 1) => {
+    loading.value = true
+
+    add(variantId, quantity).then(() => loading.value = false)
+}
+</script>
+
+<template>
+    <UButton
+        v-bind="props"
+        :label="t('product.addToCart')"
+        :ui="{
+            trailingIcon: props.ui?.trailingIcon + (loading ? ' animate-spin' : ''),
+        }"
+        :disabled="props.disabled || loading"
+        :trailing-icon="loading ? 'i-lucide-loader-circle' : 'i-lucide-shopping-cart'"
+        @click="addToCart(props.variantId, props.quantity)"
+    />
+</template>

template/app/components/content/Product.vue

@@ -4,8 +4,6 @@ const props = defineProps<{
 }>()
 
 const { country, language } = useLocalization()
-const { add } = useCart()
-const { t } = useI18n()
 
 const { data: product } = await useStorefrontData(`product-${props.handle}`, `#graphql
     query FetchProduct($handle: String, $language: LanguageCode, $country: CountryCode) 
@@ -79,14 +77,13 @@ const state = reactive({
                         />
                     </UFormField>
 
-                    <UButton
+                    <AddToCart
                         v-if="state.selectedVariant"
-                        :label="t('product.addToCart')"
-                        trailing-icon="i-lucide-shopping-cart"
-                        size="xl"
+                        :variant-id="state.selectedVariant.id"
+                        :quantity="state.quantity"
                         :ui="{ trailingIcon: 'size-5' }"
                         :disabled="!state.selectedVariant.availableForSale"
-                        @click="add(state.selectedVariant.id, state.quantity)"
+                        size="xl"
                     />
                 </div>
             </div>

template/app/components/product/Card.vue

@@ -8,8 +8,6 @@ const props = defineProps<{
 }>()
 
 const localePath = useLocalePath()
-const { add } = useCart()
-const { t } = useI18n()
 
 const url = computed(() => localePath(`/product/${props.product.handle}`))
 const variant = computed(() => props.product.variants.edges[0]?.node)
@@ -68,13 +66,12 @@ const state = reactive<z.infer<typeof schema>>({
                     />
                 </UFormField>
 
-                <UButton
+                <AddToCart
                     v-if="variant"
-                    trailing-icon="i-lucide-shopping-cart"
-                    :label="t('product.addToCart')"
+                    :variant-id="variant.id"
+                    :quantity="state.quantity"
                     :disabled="!variant.availableForSale"
                     :ui="{ trailingIcon: 'size-4' }"
-                    @click="add(variant.id, state.quantity)"
                 />
             </div>
         </UForm>

template/app/composables/cart.ts

@@ -9,6 +9,7 @@ export const useCart = () => {
     const cart = useState<CartFieldsFragment | undefined>('shopify-cart', () => undefined)
     const loading = useState('shopify-cart-loading', () => ref(false))
     const open = useState('shopify-cart-open', () => ref(false))
+
     const id = useCookie<string>('shopify-cart-id', undefined)
 
     const lines = computed(() => flattenConnection(cart.value?.lines))
@@ -18,6 +19,17 @@ export const useCart = () => {
 
     const setLoading = async (value: boolean) => loading.value = value
 
+    const getAvatar = (variantId: string, lines?: CartFieldsFragment['lines']) => {
+        const line = lines?.edges?.find(line => line.node.merchandise.id === variantId)
+
+        return line?.node.merchandise.image
+            ? {
+                    src: line.node.merchandise.image.url + '?width=88&height=88',
+                    alt: line.node.merchandise.image.altText || undefined,
+                }
+            : undefined
+    }
+
     const init = () => setLoading(true).then(() => storefront.request(`#graphql
         mutation CreateCart($language: LanguageCode, $country: CountryCode)
         @inContext(language: $language, country: $country) {
@@ -99,10 +111,12 @@ export const useCart = () => {
 
         if (!open.value) toast.add({
             title: t('cart.toast.add'),
+            avatar: getAvatar(variantId, data?.cartLinesAdd?.cart?.lines),
             actions: [
                 { label: t('cart.toast.view'), onClick: () => { open.value = true } },
             ],
             color: 'success',
+            ui: { avatar: 'rounded-sm size-14' },
         })
     }).catch(() => toast.add({
         title: t('cart.toast.error.add'),
@@ -144,10 +158,12 @@ export const useCart = () => {
 
         if (!open.value) toast.add({
             title: t('cart.toast.update'),
+            avatar: getAvatar(variantId, data?.cartLinesUpdate?.cart?.lines),
             actions: [
                 { label: t('cart.toast.view'), onClick: () => { open.value = true } },
             ],
             color: 'success',
+            ui: { avatar: 'rounded-sm size-14' },
         })
     }).catch(() => toast.add({
         title: t('cart.toast.error.update'),