feat: site updates, variant initialization to use watchers instead of…

… `onMounted`

app/components/product/product-details.vue

@@ -17,7 +17,7 @@ const renderNode = (node: any): string => {
   // Handle links
   if (node.type === 'link') {
     const childContent = node.children?.map(renderNode).join('') || '';
-    return `<a href="${node.url}" class="underline decoration-dotted decoration-1 underline-offset-[3px] hover:text-gray-500">${childContent}</a>`;
+    return `<a href="${node.url}" class="normal-case underline decoration-dotted decoration-1 underline-offset-[3px] hover:text-gray-500">${childContent}</a>`;
   }
 
   // Handle paragraphs

app/components/product/product-form.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
 // Route data
 const route = useRoute();
 const router = useRouter();
+const variantId = computed(() => route.query.variant as string);
 
 // Stores
 const appStore = useAppStore();
@@ -33,33 +34,42 @@ const addToCartText = computed(() => {
   return 'Sold Out';
 });
 
-onMounted(() => {
-  const variantId = route.query.variant as string;
+// Helpers
+const getInitialVariant = () => {
+  if (variants.value.length === 1) return variants.value[0];
+
+  if (variantId.value) {
+    return variants.value.find(
+      (variant) => formatVariantId(variant.id) === variantId.value
+    );
+  }
+
+  return undefined;
+};
+
+const setInitialVariant = () => {
+  const initialVariant = getInitialVariant();
   const sizeOptionNames = ['Size', 'Length'];
 
-  // If only one variant exists, set it as the current variant
-  if (variants.value.length === 1) return (currentVariant.value = variants.value[0]);
+  if (initialVariant) {
+    currentVariant.value = initialVariant;
 
-  // If a variant ID is provided in the URL
-  if (variantId) {
-    const urlVariant = variants.value.find(
-      (variant) => formatVariantId(variant.id) === variantId
+    // Set selected size if applicable
+    const sizeOption = initialVariant.selectedOptions.find((option) =>
+      sizeOptionNames.includes(option.name)
     );
 
-    // If the URL variant is found, set the selected size
-    if (urlVariant) {
-      const sizeOption = urlVariant.selectedOptions.find((option) =>
-        sizeOptionNames.includes(option.name)
-      );
+    if (sizeOption) {
+      selectedSize.value = sizeOption.value;
+    }
 
-      if (sizeOption) {
-        selectedSize.value = sizeOption.value;
-      }
+    // Update URL for single variant products
+    if (variants.value.length === 1) {
+      updateUrlParams(initialVariant);
     }
   }
-});
+};
 
-// Update URL variantId
 const updateUrlParams = (variant: ProductVariantFragment | undefined) => {
   const query = { ...route.query };
 
@@ -102,9 +112,17 @@ const addToCart = async () => {
 };
 
 // Watchers
+watch(
+  () => props.product,
+  () => {
+    setInitialVariant();
+  },
+  { immediate: true }
+);
+
 watch(selectedSize, (size) => {
   const sizeOptionNames = ['Size', 'Length'];
-  return currentVariant.value = variants.value.find((variant) =>
+  currentVariant.value = variants.value.find((variant) =>
     variant.selectedOptions.every(({ name, value }) =>
       sizeOptionNames.includes(name) ? value === size : true
     )

app/pages/collections/[handle].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CollectionQueryVariables } from '@@/types/shopify';
+import type { CollectionQueryVariables, ProductFragment } from '@@/types/shopify';
 
 // Route data
 const route = useRoute();
@@ -21,6 +21,7 @@ const sortValues = computed(() => getCollectionSortValuesFromUrl(sortParam.value
 const filterParam = computed(() => route.query);
 const filterValues = computed(() => getFilterValuesFromUrl(filterParam.value));
 
+// Helpers
 const activeFilterOptions = computed(() => {
   const filters: { name: string; value: string }[] = [];
 
@@ -65,13 +66,13 @@ const filterVars = computed<CollectionQueryVariables>(() => ({
 const { data: filterData } = await useAsyncData(
   `collection-filter-${handle.value}`,
   () => shopify.collection.get(filterVars.value),
-  { watch: [filterVars], lazy: true }
+  { watch: [filterVars], lazy: true, deep: false }
 );
 
 // Computed data
 const collection = computed(() => collectionData?.value);
-const filterProducts = computed(() => flattenConnection(filterData.value?.products));
-const products = computed(() => flattenConnection(collection.value?.products));
+const filterProducts = computed(() => flattenConnection(filterData.value?.products) as ProductFragment[]);
+const products = computed(() => flattenConnection(collection.value?.products) as ProductFragment[]);
 
 // Actions
 const removeActiveFilterOption = (filterName: string, filterValue: string) => {

app/pages/products/[handle].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ProductQueryVariables } from '@@/types/shopify';
+import type { ProductQueryVariables, ProductFragment } from '@@/types/shopify';
 
 // Route data
 const route = useRoute();
@@ -38,7 +38,7 @@ const productRecommendations = computed(() => recommendationData.value?.slice(0,
 // Matching color references (if any)
 const matchingColors = computed(() => {
   const references = product.value?.matching_colors?.references;
-  return references ? flattenConnection(references) : [];
+  return references ? flattenConnection(references) as ProductFragment[] : [];
 });
 
 // State

app/pages/search.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SearchProductsQueryVariables } from '@@/types/shopify';
+import type { SearchProductsQueryVariables, ProductFragment } from '@@/types/shopify';
 
 // Route data
 const route = useRoute();
@@ -21,6 +21,7 @@ const sortValues = computed(() => getSearchSortValuesFromUrl(sortParam.value));
 const filterParam = computed(() => route.query);
 const filterValues = computed(() => getFilterValuesFromUrl(filterParam.value));
 
+// Helpers
 const activeFilterOptions = computed(() => {
   const filters: { name: string; value: string }[] = [];
 
@@ -65,13 +66,13 @@ const filterVars = computed<SearchProductsQueryVariables>(() => ({
 const { data: filterData } = await useAsyncData(
   `search-filter-${searchTerm.value}`,
   () => shopify.search.products(filterVars.value),
-  { watch: [filterVars], lazy: true }
+  { watch: [filterVars], lazy: true, deep: false }
 );
 
 // Computed data
 const search = computed(() => searchData?.value);
-const filterProducts = computed(() => flattenConnection(filterData.value));
-const products = computed(() => flattenConnection(search.value));
+const filterProducts = computed(() => flattenConnection(filterData.value) as ProductFragment[]);
+const products = computed(() => flattenConnection(search.value) as ProductFragment[]);
 
 // Actions
 const removeActiveFilterOption = (filterName: string, filterValue: string) => {