chore(template): update product page

freb97 · freb97 · commit 860dbd9aa9e2 · 2026-03-12T23:09:48.000+01:00
Signed-off-by: Frederik Bußmann &lt;frederik@bussmann.io&gt;
diff --git a/template/app/components/cart/Choose.vue b/template/app/components/cart/Choose.vue
@@ -5,30 +5,9 @@ const props = defineProps<{
     product: ProductFieldsFragment
 }>()
 
-const { data, error } = await useStorefrontData(`product-${locale.value}-${handle.value}`, `#graphql
-    query FetchProduct($handle: String, $language: LanguageCode, $country: CountryCode) 
-    @inContext(language: $language, country: $country) {
-        product(handle: $handle) {
-            ...ProductFields
-        }
-        productRecommendations(productHandle: $handle) {
-            ...ProductFields
-        }
-    }
-    ${IMAGE_FRAGMENT}
-    ${PRICE_FRAGMENT}
-    ${PRODUCT_FRAGMENT}
-`, {
-    variables: computed(() => productInputSchema.parse({
-        handle: handle.value,
-        language: language.value,
-        country: country.value,
-    })),
-})
+const selectedVariant = ref(props.product?.selectedOrFirstAvailableVariant)
 
 const open = ref(false)
-
-const variant = ref(props.product.selectedOrFirstAvailableVariant!)
 </script>
 
 <template>
@@ -66,15 +45,18 @@ const variant = ref(props.product.selectedOrFirstAvailableVariant!)
         />
 
         <template #body>
-            <div class="lg:grid lg:grid-cols-12">
+            <div
+                v-if="product && selectedVariant"
+                class="lg:grid lg:grid-cols-12"
+            >
                 <ProductGallery
-                    :product="props.product"
-                    :selected-variant="variant ?? undefined"
+                    :selected-variant="selectedVariant"
+                    :product="product"
                     class="lg:col-span-6"
                 />
 
                 <ProductConfigurator
-                    v-model="variant"
+                    v-model="selectedVariant"
                     class="lg:col-start-8 lg:col-span-5"
                 />
             </div>
diff --git a/template/app/components/collection/Products.vue b/template/app/components/collection/Products.vue
@@ -26,6 +26,7 @@ const { data: collection, status } = await useStorefrontData(key, `#graphql
     @inContext(language: $language, country: $country) {
         collection(handle: $handle) {
             ...CollectionFields
+
             products(
                 after: $after,
                 before: $before,
diff --git a/template/app/components/product/Configurator.vue b/template/app/components/product/Configurator.vue
@@ -1,30 +1,68 @@
 <script setup lang="ts">
-import type { ProductFieldsFragment, ProductVariantFieldsFragment } from '#shopify/storefront'
-
-const props = defineProps<{
-    product: ProductFieldsFragment
-}>()
+import type { ProductVariantFieldsFragment } from '#shopify/storefront'
+import type { FormSubmitEvent } from '#ui/types'
 
 const selectedVariant = defineModel<ProductVariantFieldsFragment>()
 
+const { language, country } = useLocalization()
+const { locale } = useI18n()
+const { add } = useCart()
+
+const handle = computed(() => selectedVariant.value?.product.handle)
+
 const state = reactive({
-    selectedOptions: props.product.selectedOrFirstAvailableVariant?.selectedOptions || [],
     quantity: 1,
+    selectedOptions: selectedVariant.value?.selectedOptions,
+})
+
+const { data: product } = await useStorefrontData(`product-options-${locale.value}-${handle.value}`, `#graphql
+    query FetchProductOptions($handle: String, $language: LanguageCode, $country: CountryCode, $selectedOptions: [SelectedOptionInput!]) 
+    @inContext(language: $language, country: $country) {
+        product(handle: $handle) {
+            options(first: 250) {
+                ...ProductOptionFields
+            }
+
+            selectedOrFirstAvailableVariant(selectedOptions: $selectedOptions) {
+                ...ProductVariantFields
+            }
+        }
+    }
+    ${IMAGE_FRAGMENT}
+    ${PRICE_FRAGMENT}
+    ${PRODUCT_VARIANT_FRAGMENT}
+    ${PRODUCT_OPTION_FRAGMENT}
+`, {
+    variables: computed(() => productInputSchema.parse({
+        handle: handle.value,
+        language: language.value,
+        country: country.value,
+        selectedOptions: state.selectedOptions,
+    })),
+    transform: value => value.product,
+    watch: [() => state.selectedOptions],
+    cache: 'long',
+    lazy: true,
 })
 
-const onChange = () => selectedVariant.value = flattenConnection(props.product.variants)
-    .find(variant => variant.selectedOptions.every(option =>
-        state.selectedOptions.every(selectedOption =>
-            selectedOption.name === option.name && selectedOption.value === option.value,
-        ),
-    ))
+const loading = ref(false)
+
+watch(() => product.value?.selectedOrFirstAvailableVariant, variant => selectedVariant.value = variant ?? undefined)
+
+const onSubmit = async (event: FormSubmitEvent<typeof state>) => {
+    if (!selectedVariant.value) return
+
+    loading.value = true
+
+    await add(selectedVariant.value.id, event.data.quantity).then(() => loading.value = false)
+}
 </script>
 
 <template>
     <div>
         <div class="flex-col lg:flex pb-6 lg:pb-8">
             <h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900 mb-4">
-                {{ props.product?.title }}
+                {{ selectedVariant?.product?.title }}
             </h1>
 
             <ProductPrice
@@ -36,13 +74,15 @@ const onChange = () => selectedVariant.value = flattenConnection(props.product.v
 
         <USeparator class="mb-6 lg:mb-8" />
 
-        <UForm>
+        <UForm
+            v-if="product"
+            :state="state"
+            @submit="onSubmit"
+        >
             <ProductOptionGroup
-                v-if="product?.options"
                 v-model="state.selectedOptions"
                 :options="product.options"
                 class="order-1 lg:order-2 mb-6 lg:mb-8"
-                @update:model-value="onChange"
             />
 
             <div class="flex justify-between items-center">
@@ -65,8 +105,9 @@ const onChange = () => selectedVariant.value = flattenConnection(props.product.v
                     type="submit"
                     size="xl"
                     variant="subtle"
-                    :trailing-icon="'i-lucide-shopping-bag'"
-                    :ui="{ trailingIcon: 'size-5' }"
+                    :disabled="!selectedVariant || loading"
+                    :trailing-icon="loading ? 'i-lucide-loader-circle' : 'i-lucide-shopping-bag'"
+                    :ui="{ trailingIcon: loading ? 'animate-spin size-5' : 'size-5' }"
                     :label="$t('product.add')"
                 />
             </div>
diff --git a/template/app/components/product/option/Group.vue b/template/app/components/product/option/Group.vue
@@ -25,35 +25,26 @@ const isColorSwatchOption = (option?: typeof props.options[number]) =>
 
 const isImageSwatchOption = (option?: typeof props.options[number]) =>
     !!option?.optionValues?.every(value => value.swatch?.image?.previewImage?.url)
+
+const getFilterComponent = (option: typeof props.options[number]) => {
+    if (isColorSwatchOption(option)) return resolveComponent('ProductOptionSwatchColor')
+    if (isImageSwatchOption(option)) return resolveComponent('ProductOptionSwatchImage')
+
+    return resolveComponent('ProductOptionSwatchText')
+}
 </script>
 
 <template>
-    <div
-        v-for="option in props.options"
-        :key="option.id"
-    >
+    <div>
         <UFormField
-            v-if="option.optionValues.length > 1"
+            v-for="option in props.options.filter(option => option.optionValues.length > 1)"
+            :key="option.id"
             :label="option.name"
             :name="option.name"
             class="mb-6 lg:mb-8"
         >
-            <ProductOptionSwatchColor
-                v-if="isColorSwatchOption(option)"
-                v-model="state[option.name]"
-                :option="option"
-                @update:model-value="onChange"
-            />
-
-            <ProductOptionSwatchImage
-                v-else-if="isImageSwatchOption(option)"
-                v-model="state[option.name]"
-                :option="option"
-                @update:model-value="onChange"
-            />
-
-            <ProductOptionSwatchText
-                v-else
+            <component
+                :is="getFilterComponent(option)"
                 v-model="state[option.name]"
                 :option="option"
                 @update:model-value="onChange"
diff --git a/template/app/composables/product.ts b/template/app/composables/product.ts
@@ -0,0 +1,2 @@
+export const useProduct = () => {
+}
diff --git a/template/app/pages/collection/[handle].vue b/template/app/pages/collection/[handle].vue
@@ -40,6 +40,11 @@ if (!collection.value || error.value) {
         fatal: true,
     })
 }
+
+useSeoMeta({
+    title: `${collection.value?.title} | Nuxt Shopify Demo Store`,
+    description: collection.value?.description,
+})
 </script>
 
 <template>
diff --git a/template/app/pages/product/[handle].vue b/template/app/pages/product/[handle].vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { SelectedOption } from '#shopify/storefront'
-
 definePageMeta({
     validate: route => typeof route.params.handle === 'string',
 })
 
 const { language, country } = useLocalization()
 const localePath = useLocalePath()
 const { locale } = useI18n()
+const router = useRouter()
 const route = useRoute()
 
 const handle = computed(() => route.params.handle as string)
@@ -18,6 +17,7 @@ const { data, error } = await useStorefrontData(`product-${locale.value}-${handl
         product(handle: $handle) {
             ...ProductFields
         }
+
         productRecommendations(productHandle: $handle) {
             ...ProductFields
         }
@@ -31,6 +31,7 @@ const { data, error } = await useStorefrontData(`product-${locale.value}-${handl
         language: language.value,
         country: country.value,
     })),
+    cache: 'long',
 })
 
 if (!data.value?.product || error.value) {
@@ -44,9 +45,7 @@ if (!data.value?.product || error.value) {
 const product = computed(() => data.value?.product)
 const recommendations = computed(() => data.value?.productRecommendations)
 
-const selectedOptions = ref<SelectedOption[]>([])
-
-const selectedVariant = computed(() => flattenConnection(data.value?.product?.variants)
+const selectedVariant = ref(flattenConnection(data.value?.product?.variants)
     .find(variant => variant.id.replace('gid://shopify/ProductVariant/', '') === route.query.variantId)
     ?? product.value?.selectedOrFirstAvailableVariant)
 
@@ -55,7 +54,14 @@ useSeoMeta({
     description: product.value?.description,
 })
 
-watch(selectedOptions, value => console.log(value))
+watch(selectedVariant, (variant) => {
+    if (variant) {
+        router.push({
+            path: localePath(`/product/${variant.product.handle}`),
+            query: { variantId: variant.id.replace('gid://shopify/ProductVariant/', '') },
+        })
+    }
+})
 </script>
 
 <template>
@@ -69,21 +75,21 @@ watch(selectedOptions, value => console.log(value))
         />
 
         <div
-            v-if="product"
+            v-if="product && selectedVariant"
             class="mb-12 lg:grid lg:grid-cols-12 lg:mb-16"
         >
             <ProductGallery
                 ref="carousel"
+                :selected-variant="selectedVariant"
                 :product="product"
-                :selected-variant="selectedVariant ?? undefined"
                 class="lg:col-span-6"
                 thumbnails
             />
 
             <div class="lg:col-span-4 lg:col-start-8">
                 <div class="lg:sticky lg:top-[calc(var(--ui-header-height)+3rem)]">
                     <ProductConfigurator
-                        :handle="handle"
+                        v-model="selectedVariant"
                         class="mb-12 lg:mb-16"
                     />
 
diff --git a/template/graphql/fragments/product.ts b/template/graphql/fragments/product.ts
@@ -7,7 +7,6 @@ export const PRODUCT_VARIANT_FRAGMENT = `#graphql
             name
             value
         }
-        sku
         price {
             ...PriceFields
         }
@@ -16,6 +15,7 @@ export const PRODUCT_VARIANT_FRAGMENT = `#graphql
         }
         product {
             handle
+            title
         }
     }
 `
@@ -63,6 +63,7 @@ export const PRODUCT_FRAGMENT = `#graphql
         handle
         title
         description
+        vendor
         featuredImage {
             ...ImageFields
         }
@@ -73,9 +74,6 @@ export const PRODUCT_FRAGMENT = `#graphql
                 }
             }
         }
-        options(first: 250) {
-            ...ProductOptionFields
-        }
         priceRange {
             minVariantPrice {
                 ...PriceFields
@@ -84,19 +82,13 @@ export const PRODUCT_FRAGMENT = `#graphql
                 ...PriceFields
             }
         }
-        productType
-        tags
-        descriptionHtml
-        availableForSale
-        vendor
-        selectedOrFirstAvailableVariant {
-            ...ProductVariantFields
-        }
         variants(first: 250) {
             ...ProductVariantConnectionFields
         }
+        selectedOrFirstAvailableVariant {
+            ...ProductVariantFields
+        }
     }
-    ${PRODUCT_OPTION_FRAGMENT}
     ${PRODUCT_VARIANT_CONNECTION_FRAGMENT}
 `
 

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export const useProduct = () => {`
	`2`	`+}`
Original file line number	Diff line number	Diff line change
@@ -7,7 +7,6 @@ export const PRODUCT_VARIANT_FRAGMENT = `#graphql
`7`	`7`	`name`
`8`	`8`	`value`
`9`	`9`	`}`
`10`		`- sku`
`11`	`10`	`price {`
`12`	`11`	`...PriceFields`
`13`	`12`	`}`
@@ -16,6 +15,7 @@ export const PRODUCT_VARIANT_FRAGMENT = `#graphql
`16`	`15`	`}`
`17`	`16`	`product {`
`18`	`17`	`handle`
	`18`	`+ title`
`19`	`19`	`}`
`20`	`20`	`}`
`21`	`21`	`
@@ -63,6 +63,7 @@ export const PRODUCT_FRAGMENT = `#graphql
`63`	`63`	`handle`
`64`	`64`	`title`
`65`	`65`	`description`
	`66`	`+ vendor`
`66`	`67`	`featuredImage {`
`67`	`68`	`...ImageFields`
`68`	`69`	`}`
@@ -73,9 +74,6 @@ export const PRODUCT_FRAGMENT = `#graphql
`73`	`74`	`}`
`74`	`75`	`}`
`75`	`76`	`}`
`76`		`- options(first: 250) {`
`77`		`- ...ProductOptionFields`
`78`		`- }`
`79`	`77`	`priceRange {`
`80`	`78`	`minVariantPrice {`
`81`	`79`	`...PriceFields`
@@ -84,19 +82,13 @@ export const PRODUCT_FRAGMENT = `#graphql
`84`	`82`	`...PriceFields`
`85`	`83`	`}`
`86`	`84`	`}`
`87`		`- productType`
`88`		`- tags`
`89`		`- descriptionHtml`
`90`		`- availableForSale`
`91`		`- vendor`
`92`		`- selectedOrFirstAvailableVariant {`
`93`		`- ...ProductVariantFields`
`94`		`- }`
`95`	`85`	`variants(first: 250) {`
`96`	`86`	`...ProductVariantConnectionFields`
`97`	`87`	`}`
	`88`	`+ selectedOrFirstAvailableVariant {`
	`89`	`+ ...ProductVariantFields`
	`90`	`+ }`
`98`	`91`	`}`
`99`		`- ${PRODUCT_OPTION_FRAGMENT}`
`100`	`92`	`${PRODUCT_VARIANT_CONNECTION_FRAGMENT}`
`101`	`93`	`
`102`	`94`