chore: minor updates

app/components/cart/cart-line.vue

@@ -13,7 +13,7 @@ const cartStore = useCartStore();
 const merchandise = computed(() => props.line.merchandise);
 const variantId = computed(() => formatVariantId(props.line.merchandise.id));
 
-// Filter out default option name/value
+// Filter default option name/value
 const selectedOptions = computed(() => {
   return merchandise.value.selectedOptions.filter(
     (option) => option.name !== 'Title' && option.value !== 'Default Title'

app/components/common/price-display.vue

@@ -3,7 +3,7 @@ import type { MoneyFragment } from '@@/types/shopify';
 
 // Props
 const props = defineProps<{
-  price: MoneyFragment | null | undefined;
+  price?: MoneyFragment | null;
   compareAtPriceRange?: MoneyFragment;
 }>();
 

app/components/common/shopify-image.vue

@@ -3,20 +3,22 @@ import type { ImageFragment } from '@@/types/shopify';
 
 // Props
 const props = defineProps<{
-  image: ImageFragment | null | undefined;
+  image?: ImageFragment | null;
   alt: string;
 }>();
 
 // Computed
-// eslint-disable-next-line vue/return-in-computed-property
 const srcset = computed(() => {
-  if (props.image?.url.includes('cdn.shopify.com')) {
-    const sizes = [400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000];
+  const imageUrl = props.image?.url;
 
+  if (imageUrl?.includes('cdn.shopify.com')) {
+    const sizes = [400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000];
     return sizes
-      .map((width) => `${formatSizeUrl(props.image?.url, width)} ${width}w`)
+      .map((width) => `${formatSizeUrl(imageUrl, width)} ${width}w`)
       .join(', ');
   }
+
+  return undefined;
 });
 </script>
 
@@ -27,7 +29,7 @@ const srcset = computed(() => {
       :srcset="srcset"
       :alt="image?.altText ?? alt"
       class="absolute size-full inset-0 object-cover"
-      loading="eager"
+      loading="lazy"
       decoding="async"
       fetchpriority="high"
     >

app/components/common/shopify-video.vue

@@ -3,7 +3,7 @@ import type { VideoFragment } from '@@/types/shopify';
 
 // Props
 const props = defineProps<{
-  video: VideoFragment | null | undefined;
+  video?: VideoFragment | null;
 }>();
 </script>
 

app/components/product/options/product-size-options.vue

@@ -37,7 +37,7 @@ const selectSizeOption = (size: string) => {
 <template>
   <div v-if="isSizeOption" class="flex flex-col gap-2">
     <div class="flex items-center justify-between">
-      <span>Select Size</span>
+      <span>Size</span>
       <button class="flex items-center justify-center gap-1.5 normal-case hover:text-gray-500">
         <Icon name="ph:ruler" class="h-5 w-5 shrink-0" />
         Size Guide

app/pages/collections/[handle].vue

@@ -21,7 +21,7 @@ const sortValues = computed(() => getCollectionSortValuesFromUrl(sortParam.value
 const filterParam = computed(() => route.query);
 const filterValues = computed(() => getFilterValuesFromUrl(filterParam.value));
 
-// Get active filter options from the URL
+// Get active filters from URL
 const activeFilterOptions = computed(() => {
   const filters: { name: string; value: string }[] = [];
   const excludedParams = ['q', 'limit'];

app/pages/search.vue

@@ -21,7 +21,7 @@ const sortValues = computed(() => getSearchSortValuesFromUrl(sortParam.value));
 const filterParam = computed(() => route.query);
 const filterValues = computed(() => getFilterValuesFromUrl(filterParam.value));
 
-// Get active filter options from the URL
+// Get active filters from URL
 const activeFilterOptions = computed(() => {
   const filters: { name: string; value: string }[] = [];
   const excludedParams = ['q', 'limit'];