chore(template): update filters

freb97 · freb97 · commit 91945c077b2c · 2026-03-10T13:30:50.000+01:00
Signed-off-by: Frederik Bußmann &lt;frederik@bussmann.io&gt;
diff --git a/template/app/components/cart/Add.vue b/template/app/components/cart/Add.vue
diff --git a/template/app/components/cart/Choose.vue b/template/app/components/cart/Choose.vue
diff --git a/template/app/components/cart/LineItem.vue b/template/app/components/cart/LineItem.vue
@@ -61,7 +61,7 @@ watch(state, state => update(props.line.id, state.quantity))
                     </UFormField>
                 </UForm>
 
-                <Price
+                <ProductPrice
                     :price="variant.price"
                     class="font-semibold leading-8"
                 />
diff --git a/template/app/components/cart/Modal.vue b/template/app/components/cart/Modal.vue
@@ -65,7 +65,7 @@ watch(() => route.path, () => open.value = false)
                 <div class="flex items-center gap-2">
                     <p class="font-medium inline-block">
                         {{ t('cart.subtotal') }}:
-                        <Price :price="total" />
+                        <ProductPrice :price="total" />
                     </p>
 
                     <Icon
diff --git a/template/app/components/collection/Products.vue b/template/app/components/collection/Products.vue
@@ -25,8 +25,7 @@ const { data: collection, status } = await useStorefrontData(key, `#graphql
     )
     @inContext(language: $language, country: $country) {
         collection(handle: $handle) {
-            title,
-            description,
+            ...CollectionFields
             products(
                 after: $after,
                 before: $before,
@@ -43,6 +42,7 @@ const { data: collection, status } = await useStorefrontData(key, `#graphql
     }
     ${PRODUCT_CONNECTION_FRAGMENT}
     ${PRODUCT_FILTERS_FRAGMENT}
+    ${COLLECTION_FRAGMENT}
     ${IMAGE_FRAGMENT}
     ${PRICE_FRAGMENT}
 `, {
@@ -64,13 +64,6 @@ const filters = computed(() => collection.value?.products.filters)
 const pageInfo = computed(() => collection.value?.products.pageInfo)
 const products = computed(() => flattenConnection(collection.value?.products))
 
-const toTop = () => {
-    window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-    })
-}
-
 const loadPrevious = async () => {
     route.query.after = null
     route.query.before = pageInfo.value?.startCursor ?? null
@@ -82,8 +75,6 @@ const loadPrevious = async () => {
         first: undefined,
         last: 12,
     } })
-
-    toTop()
 }
 
 const loadNext = async () => {
@@ -94,16 +85,15 @@ const loadNext = async () => {
         first: 12,
         last: undefined,
     } })
-
-    toTop()
 }
 
 watch(locale, () => {
     route.query.first = null
     route.query.last = null
-
-    toTop()
 })
+
+watch(() => collection.value?.products.pageInfo, async () => await nextTick().then(() =>
+    window.scrollTo({ top: 0, behavior: 'smooth' })), { deep: true })
 </script>
 
 <template>
@@ -154,37 +144,37 @@ watch(locale, () => {
                     {{ $t('pagination.next') }}
                 </UButton>
             </div>
-        </div>
 
-        <div
-            v-if="status === 'pending'"
-            class="flex justify-center pt-8"
-        >
-            {{ $t('collection.products.loading') }}
-        </div>
+            <div
+                v-if="status === 'pending'"
+                class="flex justify-center pt-8"
+            >
+                {{ $t('collection.products.loading') }}
+            </div>
 
-        <div
-            v-else-if="!products || products.length === 0"
-            class="flex flex-col justify-center items-center col-span-full text-center"
-        >
-            <div class="flex items-center pb-2 gap-2">
-                <UIcon
-                    name="i-lucide-triangle-alert"
-                    class="text-dimmed size-6"
-                />
+            <div
+                v-else-if="!products || products.length === 0"
+                class="flex flex-col justify-center items-center col-span-full text-center"
+            >
+                <div class="flex items-center pb-2 gap-2">
+                    <UIcon
+                        name="i-lucide-triangle-alert"
+                        class="text-dimmed size-6"
+                    />
 
-                <p class="text-xl text-dimmed">
-                    {{ $t('collection.products.notFound') }}
-                </p>
-            </div>
+                    <p class="text-xl text-dimmed">
+                        {{ $t('collection.products.notFound') }}
+                    </p>
+                </div>
 
-            <UButton
-                variant="subtle"
-                color="primary"
-                class="mt-4"
-                :label="$t('filters.clear')"
-                @click="router.push({ query: {} })"
-            />
+                <UButton
+                    variant="subtle"
+                    color="primary"
+                    class="mt-4"
+                    :label="$t('filters.clear')"
+                    @click="router.push({ query: {} })"
+                />
+            </div>
         </div>
     </div>
 </template>
diff --git a/template/app/components/filter/Bar.vue b/template/app/components/filter/Bar.vue
@@ -49,7 +49,7 @@ const resetFilters = async () => {
     <div class="lg:mt-14 lg:me-16">
         <div class="lg:sticky lg:top-24">
             <div class="flex justify-between items-center mb-4">
-                <p class="text-xl font-bold">
+                <p class="leading-8 text-xl font-bold">
                     {{ $t('filters.title') }}
                 </p>
 
diff --git a/template/app/components/filter/type/List.vue b/template/app/components/filter/type/List.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { ProductFilterFieldsFragment, ProductFilter } from '#shopify/storefront'
+import type { Filter, ProductFilter } from '#shopify/storefront'
 
 const props = defineProps<{
-    filter: ProductFilterFieldsFragment['filters'][number]
+    filter: Filter
 }>()
 
 const key = computed(() => Object.keys(JSON.parse(props.filter.values.at(0)?.input ?? '{}')).at(0) as keyof ProductFilter)
 const items = computed(() => props.filter.values.map(v => v.label))
 
-const { get, set } = useFilter(key.value)
+const { get, set } = useFilters(key.value)
 
 const componentToFilter = (value: string[]) =>
     props.filter.values.filter(v => value.includes(v.label)).map(v => JSON.parse(v.input) as ProductFilter)
diff --git a/template/app/components/filter/type/PriceRange.vue b/template/app/components/filter/type/PriceRange.vue
@@ -1,22 +1,24 @@
 <script setup lang="ts">
-import type { ProductFilterFieldsFragment, ProductFilter } from '#shopify/storefront'
+import type { Filter, ProductFilter } from '#shopify/storefront'
 
 import { z } from 'zod'
 
 type FilterValue = { min?: number, max?: number }
 
 const props = defineProps<{
-    filter: ProductFilterFieldsFragment['filters'][number]
+    filter: Filter
 }>()
 
-const { get, set } = useFilter('price')
+const { get, set } = useFilters('price')
 const { t } = useI18n()
 
 const input = computed(() => JSON.parse(props.filter.values.at(0)?.input ?? '{}')?.price as FilterValue)
 
-const componentToFilter = (value: FilterValue) => [{ price: value } as ProductFilter]
+const componentToFilter = (value: FilterValue) =>
+    [{ price: value } as ProductFilter]
 
-const filterToComponent = (filter: ProductFilter[]) => filter.map(f => f.price).filter(p => p !== undefined).at(0) as FilterValue ?? input.value
+const filterToComponent = (filter: ProductFilter[]) =>
+    filter.map(f => f.price).filter(p => p !== undefined).at(0) as FilterValue ?? input.value
 
 const schema = z.object({
     min: z.number().min(0).optional(),
diff --git a/template/app/components/product/Card.vue b/template/app/components/product/Card.vue
@@ -64,19 +64,19 @@ const variant = ref(variants.value[0])
                     {{ props.product.title }}
                 </p>
 
-                <Price
+                <ProductPrice
                     v-if="variant"
                     :price="variant.price"
                     class="grow text-right"
                 />
             </NuxtLink>
 
-            <ProductChoose
+            <CartChoose
                 v-if="variants.length > 1"
                 :product="props.product"
             />
 
-            <ProductAdd
+            <CartAdd
                 v-else
                 :product="props.product"
             />
diff --git a/template/app/components/product/Price.vue b/template/app/components/product/Price.vue
diff --git a/template/app/composables/filters.ts b/template/app/composables/filters.ts
@@ -1,68 +1,25 @@
 import type { ProductFilter } from '#shopify/storefront'
 
-export const useFilters = () => {
-    const route = useRoute()
-
-    const filters = computed(() => Object.entries(route.query).filter(([key]) =>
-        key.startsWith('filter.')).reduce((filters, [key, value]) => {
-        if (key.startsWith('filter.')) {
-            const filterKey = key.split('.').at(-1) ?? key
-
-            if (Array.isArray(value)) {
-                value.forEach(v => filters.push({ [filterKey]: String(v) }))
-            }
-            else {
-                filters.push({ [filterKey]: JSON.parse(String(value)) })
-            }
-        }
-
-        return filters
-    }, [] as ProductFilter[]))
-
-    return { filters }
-}
-
-export const useFilter = (name: keyof ProductFilter) => {
+export const useFilters = (name?: keyof ProductFilter) => {
     const router = useRouter()
     const route = useRoute()
 
-    const get = (): ProductFilter[] => {
-        const queryValue = route.query[`filter.${name}`]
-
-        if (!queryValue) return []
-
-        if (Array.isArray(queryValue)) {
-            return queryValue
-                .filter(value => value !== null)
-                .map(value => ({ [name]: JSON.parse(value as string) }))
-        }
-        else {
-            const parsed = JSON.parse(queryValue)
-            return [{ [name]: parsed }]
-        }
-    }
-
-    const set = debounce((value: ProductFilter[]) => {
-        let query = { ...route.query }
-
-        delete query.before
-        delete query.after
-        delete query.first
-        delete query.last
+    const filters = computed(() => queryToFilters(route.query))
 
-        if (value.length === 0) {
-            const { [`filter.${name}`]: _, ...restQuery } = query
-            query = restQuery
-        }
-        else if (value.length === 1) {
-            query[`filter.${name}`] = JSON.stringify(value[0]?.[name])
-        }
-        else {
-            query[`filter.${name}`] = value.map(filter => String(filter[name]))
-        }
+    const get = () => queryToFilters(route.query)
+        .filter(filter => name ? !!filter[name] : true) ?? []
 
-        return router.push({ query })
-    }, 300)
+    const set = debounce((value: ProductFilter[]) => router.push({
+        query: {
+            ...route.query,
+            ...(name ? { [`filter.${name}`]: undefined } : {}),
+            before: undefined,
+            after: undefined,
+            first: undefined,
+            last: undefined,
+            ...filtersToQuery(value),
+        },
+    }), 200)
 
-    return { get, set }
+    return { filters, get, set }
 }
diff --git a/template/app/pages/collection/[handle].vue b/template/app/pages/collection/[handle].vue
@@ -19,10 +19,11 @@ const { data: collection } = await useStorefrontData(key, `#graphql
     )
     @inContext(language: $language, country: $country) {
         collection(handle: $handle) {
-            title,
-            description,
+            ...CollectionFields
         }
     }
+    ${COLLECTION_FRAGMENT}
+    ${IMAGE_FRAGMENT}
 `, {
     variables: computed(() => collectionInputSchema.parse({
         handle: handle.value,
diff --git a/template/app/utils/debounce.ts b/template/app/utils/debounce.ts
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export const debounce = (callback: (...args: any[]) => void, wait: number) => {
+export const debounce = <T extends (...args: any[]) => void>(callback: T, wait: number) => {
     let timeoutId: number | null = null
 
-    return (...args: any[]) => {
+    return (...args: Parameters<T>) => {
         window.clearTimeout(timeoutId!)
 
         timeoutId = window.setTimeout(() => {
diff --git a/template/app/utils/filters.ts b/template/app/utils/filters.ts
@@ -0,0 +1,44 @@
+import type { ProductFilter } from '#shopify/storefront'
+import type { LocationQuery } from 'vue-router'
+
+export const queryToFilters = (query: LocationQuery) => {
+    const filters = Object.entries(query).filter(([key]) => key.startsWith('filter.'))
+
+    return filters.reduce((filters, [key, value]) => {
+        const filterKey = key.split('.').at(-1) ?? key
+
+        if (Array.isArray(value)) {
+            value.forEach(v => filters.push({
+                [filterKey]: v === 'true' || v === 'false' ? JSON.parse(v) : v,
+            }))
+        }
+        else {
+            filters.push({
+                [filterKey]: JSON.parse(String(value)),
+            })
+        }
+
+        return filters
+    }, [] as ProductFilter[])
+}
+
+export const filtersToQuery = (filters: ProductFilter[]) => {
+    let query: Record<string, string | string[]> = {}
+
+    filters.forEach((filter) => {
+        const name = Object.keys(filter).at(0) as keyof ProductFilter
+
+        if (filters.length === 0) {
+            const { [`filter.${name}`]: _, ...restQuery } = query
+            query = restQuery
+        }
+        else if (filters.length === 1) {
+            query[`filter.${name}`] = JSON.stringify(filters[0]?.[name])
+        }
+        else {
+            query[`filter.${name}`] = filters.map(f => String(f[name]))
+        }
+    })
+
+    return query
+}
diff --git a/template/nuxt.config.ts b/template/nuxt.config.ts
