chore(template): product variant + seo optimization

Signed-off-by: Frederik Bußmann <frederik@bussmann.io>

Author: freb97

template/app/app.config.ts

@@ -1,5 +1,7 @@
 export default defineAppConfig({
     shopify: {
+        shopName: 'Nuxt Shopify Demo Store',
+
         collection: {
             perPage: 12,
         },

template/app/app.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import * as locales from '@nuxt/ui/locale'
 
+const { shopify: { shopName } } = useAppConfig()
 const { language } = useLocalization()
 const { id, init, get } = useCart()
 
@@ -12,7 +13,20 @@ useHead({
         lang,
         dir,
     },
-    title: 'Nuxt Shopify Demo Store',
+
+    title: shopName,
+
+    meta: [
+        { property: 'og:image', content: 'https://shopify.nuxtjs.org/logo-readme.jpg' },
+        { property: 'og:image:type', content: 'image/jpeg' },
+        { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'twitter:image', content: 'https://shopify.nuxtjs.org/logo-readme.jpg' },
+        { name: 'twitter:image:src', content: 'https://shopify.nuxtjs.org/logo-readme.jpg' },
+        { property: 'og:image:width', content: '1200' },
+        { name: 'twitter:image:width', content: '1200' },
+        { property: 'og:image:height', content: '600' },
+        { name: 'twitter:image:height', content: '600' },
+    ],
 })
 
 watch(id, value => !value ? init().then(get) : get(), { immediate: true })

template/app/components/Header.vue

@@ -25,6 +25,7 @@ const { data: items } = await useStorefrontData('main-menu', `#graphql
                 : item.url ?? undefined,
     })) ?? [],
     cache: 'long',
+    watch: [language, country],
 })
 </script>
 

template/app/components/cart/Choose.vue

@@ -46,18 +46,20 @@ const open = ref(false)
 
         <template #body>
             <div
-                v-if="product && selectedVariant"
+                v-if="props.product && selectedVariant"
                 class="lg:grid lg:grid-cols-12"
             >
                 <ProductGallery
                     :selected-variant="selectedVariant"
-                    :product="product"
+                    :product="props.product"
                     class="lg:col-span-6"
                 />
 
                 <ProductConfigurator
                     v-model="selectedVariant"
+                    :product="props.product"
                     class="lg:col-start-8 lg:col-span-5"
+                    @submit="open = false"
                 />
             </div>
         </template>

template/app/components/collection/Products.vue

@@ -3,6 +3,7 @@ const props = defineProps<{
     handle: string
 }>()
 
+const { shopify: { shopName } } = useAppConfig()
 const { params } = useCollection()
 const { locale } = useI18n()
 const router = useRouter()
@@ -57,7 +58,7 @@ const { data: collection, status } = await useStorefrontData(key, `#graphql
 })
 
 useSeoMeta({
-    title: `${collection.value?.title} | Nuxt Shopify Demo Store`,
+    title: `${collection.value?.title} | ${shopName}`,
     description: collection.value?.description,
 })
 

template/app/components/product/Configurator.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import type { ProductVariantFieldsFragment } from '#shopify/storefront'
+import type { ProductFieldsFragment, ProductVariantFieldsFragment } from '#shopify/storefront'
 import type { FormSubmitEvent } from '#ui/types'
 
+const props = defineProps<{
+    product?: ProductFieldsFragment
+}>()
+
 const selectedVariant = defineModel<ProductVariantFieldsFragment>()
 
+const emit = defineEmits<{
+    submit: [FormSubmitEvent<typeof state>]
+}>()
+
 const { language, country } = useLocalization()
 const { locale } = useI18n()
 const { add } = useCart()
@@ -15,7 +23,7 @@ const state = reactive({
     selectedOptions: selectedVariant.value?.selectedOptions,
 })
 
-const { data: product } = await useStorefrontData(`product-options-${locale.value}-${handle.value}`, `#graphql
+const { data } = 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) {
@@ -47,14 +55,20 @@ const { data: product } = await useStorefrontData(`product-options-${locale.valu
 
 const loading = ref(false)
 
-watch(() => product.value?.selectedOrFirstAvailableVariant, variant => selectedVariant.value = variant ?? undefined)
+const product = computed(() => data.value ?? props.product)
+
+watch(() => data.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)
+    await add(selectedVariant.value.id, event.data.quantity).finally(() => {
+        loading.value = false
+
+        emit('submit', event)
+    })
 }
 </script>
 

template/app/components/product/Gallery.vue

@@ -11,8 +11,18 @@ const carousel = useTemplateRef('carousel')
 
 const images = computed(() => flattenConnection(props.product.images))
 
-const sliderImages = computed(() => (props.selectedVariant?.image ? [props.selectedVariant.image] : [])
-    .concat(flattenConnection(props.product?.images)))
+const sliderImages = computed(() => {
+    if (props.selectedVariant?.image) {
+        const variantImage = props.selectedVariant.image
+
+        return [
+            variantImage,
+            ...images.value.filter(image => image.url !== variantImage.url),
+        ]
+    }
+
+    return images.value
+})
 
 watch(() => props.selectedVariant, () => carousel.value?.emblaApi?.scrollTo(0))
 </script>

template/app/error.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
     error: NuxtError
 }>()
 
+const { shopify: { shopName } } = useAppConfig()
 const { language } = useLocalization()
 const { id, init, get } = useCart()
 const localePath = useLocalePath()
@@ -19,7 +20,7 @@ useHead({
         lang,
         dir,
     },
-    title: 'Nuxt Shopify Demo Store',
+    title: shopName,
 })
 
 watch(id, value => !value ? init().then(get) : get(), { immediate: true })

template/app/pages/blog/[handle]/[article].vue

@@ -5,14 +5,15 @@ definePageMeta({
         && typeof route.params.article === 'string',
 })
 
+const { shopify: { shopName } } = useAppConfig()
 const localePath = useLocalePath()
 const { locale } = useI18n()
 const route = useRoute()
 
 const handle = computed(() => route.params.handle as string)
 const article = computed(() => route.params.article as string)
 
-const { data: blog } = await useStorefrontData(`article-${locale.value}-${handle.value}`, `#graphql
+const { data: blog, error } = await useStorefrontData(`article-${locale.value}-${handle.value}`, `#graphql
     query FetchBlogArticle($handle: String!, $article: String!) {
         blog(handle: $handle) {
             title
@@ -32,6 +33,19 @@ const { data: blog } = await useStorefrontData(`article-${locale.value}-${handle
 })
 
 const articleData = computed(() => blog.value?.articleByHandle)
+
+if (!articleData.value || error.value) {
+    throw createError({
+        status: 404,
+        statusText: `${$t('error.notFound')}: ${route.fullPath}`,
+        message: error.value?.message || $t('error.article'),
+    })
+}
+
+useSeoMeta({
+    title: `${articleData.value?.seo?.title ?? articleData.value?.title} | ${shopName}`,
+    description: articleData.value?.seo?.description ?? $t('seo.description'),
+})
 </script>
 
 <template>

template/app/pages/blog/[handle]/index.vue

@@ -3,13 +3,14 @@ definePageMeta({
     validate: route => typeof route.params.handle === 'string',
 })
 
+const { shopify: { shopName } } = useAppConfig()
 const localePath = useLocalePath()
 const { locale } = useI18n()
 const route = useRoute()
 
 const handle = computed(() => route.params.handle as string)
 
-const { data: blog } = await useStorefrontData(`blog-${locale.value}-${handle.value}`, `#graphql
+const { data: blog, error } = await useStorefrontData(`blog-${locale.value}-${handle.value}`, `#graphql
     query FetchBlog($handle: String) {
         blog(handle: $handle) {
             ...BlogFields
@@ -23,6 +24,19 @@ const { data: blog } = await useStorefrontData(`blog-${locale.value}-${handle.va
     transform: data => data?.blog,
     cache: 'long',
 })
+
+if (!blog.value || error.value) {
+    throw createError({
+        status: 404,
+        statusText: `${$t('error.notFound')}: ${route.fullPath}`,
+        message: error.value?.message || $t('error.blog'),
+    })
+}
+
+useSeoMeta({
+    title: `${blog.value?.seo?.title ?? blog.value?.title} | ${shopName}`,
+    description: blog.value?.seo?.description ?? $t('seo.description'),
+})
 </script>
 
 <template>