@osimart/create-storefront 1.0.7 → 1.0.9

package/app/app.vue

@@ -1,239 +1,15 @@
 <script setup>
-// Global on purpose: every button and field in the storefront reads it.
-import "#osi/assets/css/osi-controls.css";
-import { parseIds } from "#osi/utils/analytics";
-
-const { load, dir, store, error } = useStorefront();
-// Captured before the first await (the request event needs Nuxt's context).
-const requestEvent = import.meta.server ? useRequestEvent() : null;
-const { tokens, rootClasses, fontLinks } = useThemeTokens();
-const { start: startBuilderPreview, stop: stopBuilderPreview } = useBuilderPreview();
-
-const { error: fetchError } = await useAsyncData("storefront", () => load());
-const shown = computed(() => error.value ?? fetchError.value ?? null);
-
-const unavailableStatus = computed(() => {
-  const e = shown.value;
-  if (!e) return null;
-  const status = Number(e.status ?? e.statusCode) || 0;
-  return status >= 400 && status < 500 ? status : 503;
-});
-if (requestEvent && unavailableStatus.value) {
-  setResponseStatus(requestEvent, unavailableStatus.value);
-}
-
-const publicConfig = useRuntimeConfig().public;
-const osimartUrl = String(publicConfig.osimartUrl || "https://osimart.com").replace(/\/+$/, "");
-const signupUrl = publicConfig.osimartSignupUrl || `${osimartUrl}/`;
-
-const isDev = import.meta.dev;
-
-onMounted(() => {
-  if (!import.meta.client) return;
-  let isFramed = false;
-  try {
-    isFramed = window.parent !== window || window.self !== window.top;
-  } catch {
-    isFramed = true;
-  }
-  const route = useRoute();
-  if (
-    isFramed ||
-    route?.path?.includes("__builder-preview") ||
-    route?.query?.osi_preview !== undefined ||
-    route?.query?.preview !== undefined
-  ) {
-    startBuilderPreview();
-  }
-});
-
-onBeforeUnmount(() => {
-  stopBuilderPreview();
-});
-
-// Favicon, title format, default description / share image, custom CSS.
-useThemeSeo();
-
-useHead({
-  title: computed(() => (shown.value ? "Store unavailable" : undefined)),
-  meta: computed(() => (shown.value ? [{ name: "robots", content: "noindex" }] : [])),
-  htmlAttrs: computed(() => ({ dir: dir.value })),
-  noscript: computed(() =>
-    parseIds(store.value?.meta_pixel_id, "pixel").map((id) => ({
-      tagPosition: "bodyOpen",
-      innerHTML: `<img height="1" width="1" style="display:none" alt="" src="https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1" />`,
-    })),
-  ),
-  bodyAttrs: computed(() =>
-    shown.value
-      ? { class: "osi-unavailable-body" }
-      : {
-          style: tokens.value,
-          class: rootClasses.value.filter((c) => /^osi-(btns|inputs|labels)/.test(c)),
-        }
-  ),
-    // A getter, not a snapshot: a font picked in the editor (or a theme that
-  // loads later) must add its stylesheet.
-  link: computed(() => [
-    ...fontLinks.value,
-    {
-      rel: "stylesheet",
-      href: "/css/output.css",
-    },
-  ]),
-})
+/**
+ * The storefront app: StorefrontShell (store bootstrap, theme, head, the
+ * store-unavailable screen) around the layout and the routed page.
+ * error.vue uses the same shell for the 404 page.
+ */
 </script>
 
 <template>
-  <main v-if="shown" class="osi-unavailable" dir="ltr">
-    <a :href="osimartUrl" class="osi-unavailable-back">
-      <span aria-hidden="true">&larr;</span>
-      Osimart
-    </a>
-    <h1 class="osi-unavailable-title">This store is currently unavailable.</h1>
-    <a :href="signupUrl" class="osi-unavailable-cta">Start a free trial</a>
-
-    <pre v-if="isDev" class="osi-fatal-detail">{{ shown.status ? `HTTP ${shown.status} — ` : "" }}{{ shown.message }}<template v-if="shown.data">
-{{ shown.data }}</template></pre>
-  </main>
-
-  <div v-else class="osi-root" :class="rootClasses" :style="tokens" :dir="dir">
-   <NuxtLoadingIndicator
-    color="var(--osi-primary-color)"
-    error-color="#dc2626"
-    :height="3"
-  />
+  <StorefrontShell>
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
-    <div id="osi-teleport-root" />
-  </div>
-</template>
-
-<style>
-body {
-  font-family: var(--osi-font-body);
-  font-size: var(--osi-body-size);
-  color: var(--osi-text, #121212);
-}
-
-.osi-root {
-  font-family: var(--osi-font-body);
-  font-size: var(--osi-body-size);
-  color: var(--osi-text, #121212);
-  background: var(--osi-bg, #ffffff);
-}
-/* Section padding: useSectionShell writes desktop and phone values as
-   variables; these pick the one that applies. */
-.osi-section {
-  --osi-sec-pt-now: var(--osi-sec-pt);
-  --osi-sec-pb-now: var(--osi-sec-pb);
-  --osi-sec-pl-now: var(--osi-sec-pl);
-  --osi-sec-pr-now: var(--osi-sec-pr);
-}
-@media (max-width: 749px) {
-  .osi-section {
-    --osi-sec-pt-now: var(--osi-sec-pt-m, var(--osi-sec-pt));
-    --osi-sec-pb-now: var(--osi-sec-pb-m, var(--osi-sec-pb));
-    --osi-sec-pl-now: var(--osi-sec-pl-m, var(--osi-sec-pl));
-    --osi-sec-pr-now: var(--osi-sec-pr-m, var(--osi-sec-pr));
-  }
-}
-.osi-root h1,
-.osi-root h2,
-.osi-root h3,
-.osi-root h4,
-.osi-root h5,
-.osi-root h6 {
-  font-family: var(--osi-font-heading);
-}
-
-/* The old utility classes (login, account, checkout, cart… ) carry fixed
-   families from output.css; point them at the theme's fonts. `body` in front
-   beats the single-class utility and still reaches teleported drawers,
-   which sit outside .osi-root. */
-body .font-body,
-body .font-poppins,
-body .font-thoren {
-  font-family: var(--osi-font-body);
-}
-body .font-heading {
-  font-family: var(--osi-font-heading);
-}
-/* ---- Store unavailable (Shopify-style) — no theme tokens on purpose. */
-body.osi-unavailable-body {
-  margin: 0;
-  background: #20336b;
-}
-.osi-unavailable {
-  min-height: 100vh;
-  min-height: 100dvh;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: clamp(5rem, 18vh, 10.5rem) 1.5rem 4rem;
-  background: #20336b;
-  color: #fff;
-  text-align: center;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-}
-.osi-unavailable a {
-  color: inherit;
-  text-decoration: none;
-}
-.osi-unavailable-back {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.6rem;
-  font-size: 1.25rem;
-  line-height: 1;
-  opacity: 0.95;
-  transition: opacity 0.15s ease;
-}
-.osi-unavailable-back:hover {
-  opacity: 0.7;
-}
-.osi-unavailable-title {
-  margin: 2.25rem 0 0;
-  max-width: 18ch;
-  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
-  font-weight: 400;
-  line-height: 1.05;
-  letter-spacing: -0.035em;
-  text-wrap: balance;
-}
-@media (min-width: 900px) {
-  .osi-unavailable-title {
-    max-width: none;
-  }
-}
-.osi-unavailable-cta {
-  margin-top: 1.75rem;
-  padding-bottom: 0.15rem;
-  font-size: 1.375rem;
-  line-height: 1.3;
-  border-bottom: 2px solid currentColor;
-  transition: opacity 0.15s ease;
-}
-.osi-unavailable-cta:hover {
-  opacity: 0.75;
-}
-.osi-unavailable :focus-visible {
-  outline: 2px solid #fff;
-  outline-offset: 4px;
-  border-radius: 2px;
-}
-.osi-fatal-detail {
-  display: inline-block;
-  margin-top: 3rem;
-  padding: 0.75rem 1rem;
-  text-align: start;
-  background: #fef2f2;
-  color: #991b1b;
-  border-radius: 6px;
-  font-size: 12px;
-  white-space: pre-wrap;
-}
-</style>
+  </StorefrontShell>
+</template>

package/app/components/NotFoundPage.vue

@@ -0,0 +1,155 @@
+<script setup>
+/**
+ * The 404 page — Shopify's 404 template: the theme's NOT_FOUND template,
+ * built in the editor like any page (its "404 page" section, MAIN_NOT_FOUND,
+ * plus whatever the merchant added: products, collections, a banner…).
+ *
+ * Drawn by error.vue for every 404 thrown by a page (unknown product,
+ * category, page) and by pages/[...slug].vue for paths no route matches —
+ * inside the store's layout, so the shopper keeps the header and footer.
+ *
+ * The template is fetched as `render("/404")`: a path nothing routes, which
+ * the backend answers with the NOT_FOUND template. A backend that sends it
+ * with a 404 status is fine too (apiService puts the body on `error.data`).
+ * No usable template (an empty one, a theme without the section's component,
+ * backend down): a built-in message, so the page is never blank.
+ */
+import { resolveSection } from "#osi/theme/registry";
+import { useRenderContext } from "#osi/composables/useRenderContext";
+
+// Captured before the first await (needs Nuxt's context).
+const requestEvent = import.meta.server ? useRequestEvent() : null;
+const { render, store } = useStorefront();
+const { setRenderContext } = useRenderContext();
+
+const NOT_FOUND_PATH = "/404";
+
+const templateName = (payload) => {
+  const t = payload?.template;
+  return String((t && typeof t === "object" ? t.name : t) ?? "").toUpperCase();
+};
+
+const { data } = await useAsyncData(`render:${NOT_FOUND_PATH}`, async () => {
+  try {
+    return await render(NOT_FOUND_PATH);
+  } catch (e) {
+    if (e?.data?.sections) return e.data;
+    // Kept for the dev note below: why there's no template to draw.
+    return { __failed: { status: e?.status ?? e?.statusCode ?? null, message: e?.message ?? String(e) } };
+  }
+});
+
+// Only the NOT_FOUND template counts (a store with a page at /404 doesn't).
+const payload = computed(() => {
+  const p = data.value;
+  if (!p || p.__failed) return null;
+  const name = templateName(p);
+  return !name || name === "NOT_FOUND" ? p : null;
+});
+
+const sections = computed(() =>
+  (payload.value?.sections ?? []).filter((s) => !s.disabled && resolveSection(s.type))
+);
+
+/**
+ * Dev only: why the built-in message shows instead of the theme's 404 page.
+ * Each case is one thing to fix — backend routing, an empty template, or a
+ * theme that has no component for the section yet.
+ */
+const isDev = import.meta.dev;
+const devNote = computed(() => {
+  if (!isDev || sections.value.length) return "";
+  const p = data.value;
+  if (!p) return `render("${NOT_FOUND_PATH}") returned nothing.`;
+  if (p.__failed) {
+    return `render("${NOT_FOUND_PATH}") failed${p.__failed.status ? ` (HTTP ${p.__failed.status})` : ""}: ` +
+      `${p.__failed.message}. The backend has to answer ${NOT_FOUND_PATH} with the NOT_FOUND template.`;
+  }
+  const name = templateName(p);
+  if (name && name !== "NOT_FOUND") {
+    return `render("${NOT_FOUND_PATH}") answered with the ${name} template, not NOT_FOUND — ` +
+      `resolve_path() must send unknown paths (and ${NOT_FOUND_PATH}) to NOT_FOUND.`;
+  }
+  const all = p.sections ?? [];
+  if (!all.length) return "The NOT_FOUND template has no sections. Open \"404 page\" in the editor once — it adds the 404 section.";
+  const live = all.filter((s) => !s.disabled);
+  if (!live.length) return "Every section of the NOT_FOUND template is hidden.";
+  const missing = [...new Set(live.map((s) => s.type))].filter((t) => !resolveSection(t));
+  return `No theme component for: ${missing.join(", ")}. Add app/sections/<Name>Section.vue ` +
+    `(MAIN_NOT_FOUND → MainNotFoundSection.vue) and restart \`nuxt dev\` — the section map is built at start.`;
+});
+
+if (payload.value) setRenderContext(payload.value);
+
+// The shopper sees a page; search engines and the browser see a 404.
+if (requestEvent) setResponseStatus(requestEvent, 404);
+
+const title = computed(() => {
+  const seo = payload.value?.seo ?? {};
+  return seo.title_full ?? seo.title ?? ["Page not found", store.value?.name].filter(Boolean).join(" | ");
+});
+
+useHead({
+  title,
+  titleTemplate: (value) => value ?? "",
+  meta: [{ name: "robots", content: "noindex" }],
+});
+</script>
+
+<template>
+  <div class="osi-not-found">
+    <SectionRenderer v-if="sections.length" :sections="sections" />
+
+    <section v-else class="osi-404-fallback">
+      <p class="osi-404-code">404</p>
+      <h1 class="osi-404-title">Page not found</h1>
+      <p class="osi-404-text">The page you were looking for doesn't exist or has moved.</p>
+      <NuxtLink to="/categories/all" class="osi-btn osi-404-btn">Continue shopping</NuxtLink>
+      <pre v-if="devNote" class="osi-404-dev">{{ devNote }}</pre>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.osi-404-fallback {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  max-width: 36rem;
+  margin: 0 auto;
+  padding: clamp(4rem, 12vh, 7rem) 1.25rem;
+  text-align: center;
+  color: var(--osi-text, inherit);
+}
+.osi-404-code {
+  margin: 0;
+  font-size: 0.875rem;
+  letter-spacing: 0.12em;
+  opacity: 0.6;
+}
+.osi-404-title {
+  margin: 0;
+  font-family: var(--osi-font-heading);
+  font-size: clamp(2rem, 5vw, 3rem);
+  line-height: 1.1;
+}
+.osi-404-text {
+  margin: 0;
+  opacity: 0.75;
+}
+.osi-404-btn {
+  margin-top: 0.75rem;
+}
+.osi-404-dev {
+  max-width: 100%;
+  margin-top: 1.5rem;
+  padding: 0.75rem 1rem;
+  text-align: start;
+  font-size: 12px;
+  white-space: pre-wrap;
+  background: #fef2f2;
+  color: #991b1b;
+  border-radius: 6px;
+}
+</style>

package/app/components/StorefrontShell.vue

@@ -0,0 +1,252 @@
+<script setup>
+/**
+ * Everything around a storefront page: the store's bootstrap, theme tokens,
+ * fonts, head tags, the builder-preview bridge — and the store-unavailable
+ * screen when there's no store to draw.
+ *
+ * Shared by app.vue (every page) and error.vue (the 404 page and errors), so a
+ * missing page still gets the store's header, footer, colours and fonts.
+ * Only this file loads the store: app.vue and error.vue just wrap their page.
+ */
+// Global on purpose: every button and field in the storefront reads it.
+import "#osi/assets/css/osi-controls.css";
+import { parseIds } from "#osi/utils/analytics";
+
+const { load, dir, store, error } = useStorefront();
+// Captured before the first await (the request event needs Nuxt's context).
+const requestEvent = import.meta.server ? useRequestEvent() : null;
+const { tokens, rootClasses, fontLinks } = useThemeTokens();
+const { start: startBuilderPreview, stop: stopBuilderPreview } = useBuilderPreview();
+
+const { error: fetchError } = await useAsyncData("storefront", () => load());
+const shown = computed(() => error.value ?? fetchError.value ?? null);
+
+/**
+ * Store unavailable (unknown address, switched off, backend down): a page of
+ * its own, like Shopify's — no theme, no header / footer around it. The
+ * response carries a real status: the backend's 4xx, else 503.
+ */
+const unavailableStatus = computed(() => {
+  const e = shown.value;
+  if (!e) return null;
+  const status = Number(e.status ?? e.statusCode) || 0;
+  return status >= 400 && status < 500 ? status : 503;
+});
+if (requestEvent && unavailableStatus.value) {
+  setResponseStatus(requestEvent, unavailableStatus.value);
+}
+
+const publicConfig = useRuntimeConfig().public;
+const osimartUrl = String(publicConfig.osimartUrl || "https://osimart.com").replace(/\/+$/, "");
+const signupUrl = publicConfig.osimartSignupUrl || `${osimartUrl}/`;
+
+const isDev = import.meta.dev;
+
+onMounted(() => {
+  if (!import.meta.client) return;
+  let isFramed = false;
+  try {
+    isFramed = window.parent !== window || window.self !== window.top;
+  } catch {
+    isFramed = true;
+  }
+  const route = useRoute();
+  if (
+    isFramed ||
+    route?.path?.includes("__builder-preview") ||
+    route?.query?.osi_preview !== undefined ||
+    route?.query?.preview !== undefined
+  ) {
+    startBuilderPreview();
+  }
+});
+
+onBeforeUnmount(() => {
+  stopBuilderPreview();
+});
+
+// Favicon, title format, default description / share image, custom CSS.
+useThemeSeo();
+
+useHead({
+  title: computed(() => (shown.value ? "Store unavailable" : undefined)),
+  meta: computed(() => (shown.value ? [{ name: "robots", content: "noindex" }] : [])),
+  htmlAttrs: computed(() => ({ dir: dir.value })),
+  noscript: computed(() =>
+    parseIds(store.value?.meta_pixel_id, "pixel").map((id) => ({
+      tagPosition: "bodyOpen",
+      innerHTML: `<img height="1" width="1" style="display:none" alt="" src="https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1" />`,
+    })),
+  ),
+  bodyAttrs: computed(() =>
+    shown.value
+      ? { class: "osi-unavailable-body" }
+      : {
+          style: tokens.value,
+          class: rootClasses.value.filter((c) => /^osi-(btns|inputs|labels)/.test(c)),
+        }
+  ),
+    // A getter, not a snapshot: a font picked in the editor (or a theme that
+  // loads later) must add its stylesheet.
+  link: computed(() => [
+    ...fontLinks.value,
+    {
+      rel: "stylesheet",
+      href: "/css/output.css",
+    },
+  ]),
+})
+</script>
+
+<template>
+  <main v-if="shown" class="osi-unavailable" dir="ltr">
+    <a :href="osimartUrl" class="osi-unavailable-back">
+      <span aria-hidden="true">←</span>
+      Osimart
+    </a>
+    <h1 class="osi-unavailable-title">This store is currently unavailable.</h1>
+    <a :href="signupUrl" class="osi-unavailable-cta">Start a free trial</a>
+
+    <pre v-if="isDev" class="osi-fatal-detail">{{ shown.status ? `HTTP ${shown.status} — ` : "" }}{{ shown.message }}<template v-if="shown.data">
+{{ shown.data }}</template></pre>
+  </main>
+
+  <div v-else class="osi-root" :class="rootClasses" :style="tokens" :dir="dir">
+   <NuxtLoadingIndicator
+    color="var(--osi-primary-color)"
+    error-color="#dc2626"
+    :height="3"
+  />
+    <!-- The page: app.vue's NuxtLayout + NuxtPage, or error.vue's 404 / error. -->
+    <slot />
+    <div id="osi-teleport-root" />
+  </div>
+</template>
+
+<style>
+body {
+  font-family: var(--osi-font-body);
+  font-size: var(--osi-body-size);
+  color: var(--osi-text, #121212);
+}
+
+.osi-root {
+  font-family: var(--osi-font-body);
+  font-size: var(--osi-body-size);
+  color: var(--osi-text, #121212);
+  background: var(--osi-bg, #ffffff);
+}
+/* Section padding: useSectionShell writes desktop and phone values as
+   variables; these pick the one that applies. */
+.osi-section {
+  --osi-sec-pt-now: var(--osi-sec-pt);
+  --osi-sec-pb-now: var(--osi-sec-pb);
+  --osi-sec-pl-now: var(--osi-sec-pl);
+  --osi-sec-pr-now: var(--osi-sec-pr);
+}
+@media (max-width: 749px) {
+  .osi-section {
+    --osi-sec-pt-now: var(--osi-sec-pt-m, var(--osi-sec-pt));
+    --osi-sec-pb-now: var(--osi-sec-pb-m, var(--osi-sec-pb));
+    --osi-sec-pl-now: var(--osi-sec-pl-m, var(--osi-sec-pl));
+    --osi-sec-pr-now: var(--osi-sec-pr-m, var(--osi-sec-pr));
+  }
+}
+.osi-root h1,
+.osi-root h2,
+.osi-root h3,
+.osi-root h4,
+.osi-root h5,
+.osi-root h6 {
+  font-family: var(--osi-font-heading);
+}
+
+/* The old utility classes (login, account, checkout, cart… ) carry fixed
+   families from output.css; point them at the theme's fonts. `body` in front
+   beats the single-class utility and still reaches teleported drawers,
+   which sit outside .osi-root. */
+body .font-body,
+body .font-poppins,
+body .font-thoren {
+  font-family: var(--osi-font-body);
+}
+body .font-heading {
+  font-family: var(--osi-font-heading);
+}
+body.osi-unavailable-body {
+  margin: 0;
+  background: #20336b;
+}
+.osi-unavailable {
+  min-height: 100vh;
+  min-height: 100dvh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: clamp(5rem, 18vh, 10.5rem) 1.5rem 4rem;
+  background: #20336b;
+  color: #fff;
+  text-align: center;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+.osi-unavailable a {
+  color: inherit;
+  text-decoration: none;
+}
+.osi-unavailable-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 18px;
+  line-height: 1;
+  opacity: 0.95;
+  transition: opacity 0.15s ease;
+}
+.osi-unavailable-back:hover {
+  opacity: 0.7;
+}
+.osi-unavailable-title {
+  margin: 2.25rem 0 0;
+  max-width: 18ch;
+  
+  font-size: clamp(44px, 4.15vw, 64px);
+  font-weight: 400;
+  line-height: 1.05;
+  letter-spacing: -0.035em;
+  text-wrap: balance;
+}
+@media (min-width: 900px) {
+  .osi-unavailable-title {
+    max-width: none;
+  }
+}
+.osi-unavailable-cta {
+  margin-top: 1.75rem;
+  padding-bottom: 0.15rem;
+  font-size: 20px;
+  line-height: 1.3;
+  border-bottom: 2px solid currentColor;
+  transition: opacity 0.15s ease;
+}
+.osi-unavailable-cta:hover {
+  opacity: 0.75;
+}
+.osi-unavailable :focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 4px;
+  border-radius: 2px;
+}
+.osi-fatal-detail {
+  display: inline-block;
+  margin-top: 3rem;
+  padding: 0.75rem 1rem;
+  text-align: start;
+  background: #fef2f2;
+  color: #252121;
+  border-radius: 6px;
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+</style>

package/app/composables/useClassificationPage.js

@@ -140,6 +140,47 @@ const SORTS = {
 
 const asArray = (v) => (Array.isArray(v) ? v : v == null || v === "" ? [] : [v]);
 
+/**
+ * Filter groups for the catalog's own lists — category, collection, brand —
+ * next to the variant filters (size, colour…). Each is a toggle on the
+ * toolbar block (FILTER_BY_*), off until turned on, and is never offered on a page of its own kind:
+ * a collection page filters by category and brand, a category page by
+ * collection and brand; "All products" and search get all three.
+ *
+ *   query   what the storefront URL carries (?brand=3&category=5)
+ *   api     the products API parameter it becomes (repeated for several)
+ *   prefix  how its values are told apart from variant values in the UI
+ */
+const LIST_FILTERS = [
+  { key: "category", kind: "CATEGORY", query: "category", api: "categories",
+    setting: "FILTER_BY_CATEGORY", label: "FILTER_CATEGORY_LABEL", fallback: "Category" },
+  { key: "collection", kind: "COLLECTION", query: "collection", api: "collections",
+    setting: "FILTER_BY_COLLECTION", label: "FILTER_COLLECTION_LABEL", fallback: "Collection" },
+  { key: "brand", kind: "BRAND", query: "brand", api: "brand",
+    setting: "FILTER_BY_BRAND", label: "FILTER_BRAND_LABEL", fallback: "Brand" },
+];
+const LIST_FILTER_BY_KEY = Object.fromEntries(LIST_FILTERS.map((d) => [d.key, d]));
+
+/** "brand:3" -> { def, id: "3" }; a plain variant value id -> null. */
+function splitValue(value) {
+  const at = String(value).indexOf(":");
+  if (at < 0) return null;
+  const def = LIST_FILTER_BY_KEY[String(value).slice(0, at)];
+  return def ? { def, id: String(value).slice(at + 1) } : null;
+}
+
+/** Categories arrive nested (children); the filter lists them all. */
+function flattenRows(rows, out = []) {
+  for (const row of rows ?? []) {
+    if (!row) continue;
+    out.push(row);
+    flattenRows(row.children, out);
+  }
+  return out;
+}
+
+const rowCount = (row) => row?.product_count ?? row?.products_count ?? row?.count ?? null;
+
 /**
  * @param {() => object} section  the MAIN_CLASSIFICATION section (getter)
  */
@@ -356,7 +397,15 @@ export function useClassificationPage(section) {
   });
 
   const ordering = computed(() => String(route.query.ordering ?? ""));
-  const selectedValues = computed(() => asArray(route.query.value).map(String));
+  /**
+   * Everything selected, as one list of ids: variant values as they are, the
+   * category / collection / brand picks prefixed ("brand:3"). The filter UI
+   * only ever sees this list; setValues() splits it back into the URL.
+   */
+  const selectedValues = computed(() => [
+    ...asArray(route.query.value).map(String),
+    ...LIST_FILTERS.flatMap((def) => asArray(route.query[def.query]).map((id) => `${def.key}:${id}`)),
+  ]);
   const perPage = computed(() => Math.max(1, Number(s.value.PRODUCTS_PER_PAGE) || 12));
   const pagination = computed(() => String(s.value.PAGINATION || "INFINITE").toUpperCase());
   const page = computed(() =>
@@ -369,12 +418,49 @@ export function useClassificationPage(section) {
     { default: () => [], server: false, lazy: true }
   );
 
+  // Brands for the brand filter. Only fetched when it's offered.
+  const brandFilterOn = computed(() => s.value.FILTER_BY_BRAND === true && kind.value !== "BRAND");
+  const brandsData = useAsyncData(
+    "osi-catalog:brands",
+    () =>
+      brandFilterOn.value
+        ? apiService(`${baseUrl.value}store/apis/brands/`, { method: "GET" }).then(rowsOf).catch(() => [])
+        : Promise.resolve([]),
+    { default: () => [], server: false, lazy: true, watch: [brandFilterOn] }
+  );
+
+  const listRows = {
+    category: () => flattenRows(catalog.categories.data.value),
+    collection: () => catalog.collections.data.value ?? [],
+    brand: () => brandsData.data.value ?? [],
+  };
+
+  /** Category / collection / brand groups, as variant-filter-shaped groups. */
+  const listFilters = computed(() =>
+    LIST_FILTERS.filter((def) => def.kind !== kind.value && s.value[def.setting] === true)
+      .map((def) => ({
+        id: `osi-${def.key}`,
+        name: t(s.value[def.label]) || def.fallback,
+        isColor: false,
+        values: listRows[def.key]()
+          .filter((row) => row?.id != null && rowCount(row) !== 0)
+          .map((row) => ({
+            id: `${def.key}:${row.id}`,
+            name: row.name ?? row.title ?? String(row.id),
+            color: null,
+            image: null,
+          })),
+      }))
+      .filter((f) => f.values.length)
+  );
+
   const filters = computed(() => {
     const hidden = String(s.value.FILTER_HIDE ?? "")
       .split(",")
       .map((x) => x.trim().toLowerCase())
       .filter(Boolean);
-    return (filtersData.data.value ?? [])
+    const lists = listFilters.value.filter((f) => !hidden.includes(String(f.name).toLowerCase()));
+    const variants = (filtersData.data.value ?? [])
       .filter((f) => f?.values?.length)
       .filter((f) => !hidden.includes(String(f.name ?? "").toLowerCase()))
       .map((f) => ({
@@ -388,6 +474,7 @@ export function useClassificationPage(section) {
           image: v.image?.path ? mediaUrl(v.image) : null,
         })),
       }));
+    return [...lists, ...variants];
   });
 
   const activeFilters = computed(() => {
@@ -409,7 +496,14 @@ export function useClassificationPage(section) {
     return pushQuery({ ordering: value || undefined, page: undefined });
   }
   function setValues(ids) {
-    return pushQuery({ value: [...new Set(ids.map(String))], page: undefined });
+    const variant = [];
+    const lists = Object.fromEntries(LIST_FILTERS.map((def) => [def.query, []]));
+    for (const id of new Set(ids.map(String))) {
+      const hit = splitValue(id);
+      if (hit) lists[hit.def.query].push(hit.id);
+      else variant.push(id);
+    }
+    return pushQuery({ value: variant, ...lists, page: undefined });
   }
   function toggleValue(id) {
     const set = new Set(selectedValues.value);
@@ -418,7 +512,8 @@ export function useClassificationPage(section) {
     return setValues([...set]);
   }
   function clearFilters() {
-    return pushQuery({ value: undefined, ordering: undefined, page: undefined });
+    const lists = Object.fromEntries(LIST_FILTERS.map((def) => [def.query, undefined]));
+    return pushQuery({ value: undefined, ...lists, ordering: undefined, page: undefined });
   }
   function goToPage(n) {
     return pushQuery({ page: n > 1 ? n : undefined });
@@ -436,7 +531,13 @@ export function useClassificationPage(section) {
     sp.set("page_size", perPage.value);
     const order = ordering.value || defaultOrdering.value;
     if (order) sp.set("ordering", order);
-    for (const v of selectedValues.value) sp.append("variant_values", v);
+    for (const v of selectedValues.value) {
+      const hit = splitValue(v);
+      if (!hit) sp.append("variant_values", v);
+      // The page's own kind is already its filter (a stray ?category= on a
+      // category page would widen it, not narrow it).
+      else if (hit.def.kind !== kind.value) sp.append(hit.def.api, hit.id);
+    }
     return apiService(`${baseUrl.value}store/apis/products/?${sp.toString()}`, { method: "GET" });
   }
 

package/app/composables/useProductDetail.js

@@ -62,30 +62,29 @@ export function parsePriceRange(value) {
 
 /* ------------------------------------------------------------- the source */
 
-/**
- * The full product for the current route.
- *
- * Two calls, because the list endpoint is the only one that takes a slug and
- * the detail endpoint is the only one that returns variants and the full
- * gallery. Merged rather than replaced — the list row carries fields
- * (categories, price_range) the detail response doesn't always repeat.
- */
-async function loadProduct(slug) {
-  const list = await ProductServices.getProductId(slug);
-  const summary = list?.results?.[0];
+async function loadProduct(idOrSlug) {
+  let product = null;
+  try {
+    product = await ProductServices.getProductDetail(encodeURIComponent(String(idOrSlug)));
+  } catch (err) {
+    // A real failure (5xx, network) is a 500, not "not found".
+    if (err?.status !== 404) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: "Couldn't load this product",
+        fatal: true,
+      });
+    }
+  }
 
-  if (!summary?.id) {
+  if (!product?.id) {
     throw createError({
       statusCode: 404,
       statusMessage: "Product not found",
       fatal: true,
     });
   }
-
-  // A failure here must not 404 a product that exists — the summary alone is
-  // enough to render a card-level page.
-  const detail = await ProductServices.getProductDetail(summary.id).catch(() => null);
-  return detail?.id ? { ...summary, ...detail } : summary;
+  return product;
 }
 
 /**

package/app/composables/useTextStyles.js

@@ -31,7 +31,7 @@
  * @param {object} [options.defaults]  size / weight / font / transform
  * @returns {ComputedRef<object>}
  */
-const FONT_WEIGHTS = { REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+const FONT_WEIGHTS = { LIGHT: 300, REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
 const FONT_FAMILIES = { HEADING: "var(--osi-font-heading)", BODY: "var(--osi-font-body)" };
 const TEXT_TRANSFORMS = {
   NONE: "none",

package/app/error.vue

@@ -0,0 +1,88 @@
+<script setup>
+/**
+ * Nuxt's error page, inside the store's shell and layout.
+ *
+ *   404  the theme's 404 page (NotFoundPage): a missing product, category or
+ *        page — anything a page throws a 404 for — keeps the header and
+ *        footer, like Shopify.
+ *   else a short "something went wrong" with a way back.
+ *
+ * Following any link clears the error (Nuxt does that on navigation).
+ */
+const props = defineProps({
+  error: { type: Object, default: null },
+});
+
+const status = computed(() => Number(props.error?.statusCode ?? props.error?.status) || 500);
+const notFound = computed(() => status.value === 404);
+const isDev = import.meta.dev;
+
+useHead({
+  title: computed(() => (notFound.value ? undefined : "Something went wrong")),
+});
+
+function goHome() {
+  clearError({ redirect: "/" });
+}
+</script>
+
+<template>
+  <StorefrontShell>
+    <NuxtLayout>
+      <NotFoundPage v-if="notFound" />
+
+      <section v-else class="osi-error">
+        <p class="osi-error-code">{{ status }}</p>
+        <h1 class="osi-error-title">Something went wrong</h1>
+        <p class="osi-error-text">We couldn't load this page. Please try again in a moment.</p>
+        <button type="button" class="osi-btn osi-error-btn" @click="goHome">Back to the homepage</button>
+        <pre v-if="isDev && error" class="osi-error-detail">{{ error.message }}</pre>
+      </section>
+    </NuxtLayout>
+  </StorefrontShell>
+</template>
+
+<style scoped>
+.osi-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  max-width: 36rem;
+  margin: 0 auto;
+  padding: clamp(4rem, 12vh, 7rem) 1.25rem;
+  text-align: center;
+  color: var(--osi-text, inherit);
+}
+.osi-error-code {
+  margin: 0;
+  font-size: 0.875rem;
+  letter-spacing: 0.12em;
+  opacity: 0.6;
+}
+.osi-error-title {
+  margin: 0;
+  font-family: var(--osi-font-heading);
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  line-height: 1.15;
+}
+.osi-error-text {
+  margin: 0;
+  opacity: 0.75;
+}
+.osi-error-btn {
+  margin-top: 0.75rem;
+}
+.osi-error-detail {
+  max-width: 100%;
+  margin-top: 1.5rem;
+  padding: 0.75rem 1rem;
+  overflow: auto;
+  text-align: start;
+  font-size: 12px;
+  white-space: pre-wrap;
+  background: #fef2f2;
+  color: #991b1b;
+  border-radius: 6px;
+}
+</style>

package/app/logic/sections/MainNotFoundSection.js

@@ -0,0 +1,15 @@
+import { ClassificationPart } from "#components";
+
+/**
+ * MAIN_NOT_FOUND — the 404 page's section ("404 page").
+ *
+ * The same block-built section as Rich text (MediaContentSection +
+ * ContentNode), stacked and centred, plus the search page's Search box block
+ * (drawn by ClassificationPart; submitting goes to /search?q=).
+ */
+export default function useLogic() {
+  const ROOT_DEFAULTS = { DIRECTION: "VERTICAL", ALIGNMENT: "CENTER", POSITION: "CENTER", GAP: 16 };
+  const CUSTOM = { SEARCH_INPUT: ClassificationPart };
+
+  return { ROOT_DEFAULTS, CUSTOM };
+}

package/app/pages/[...slug].vue

@@ -0,0 +1,13 @@
+<script setup>
+/**
+ * Any path no other route matches (/whatever, /a/b/c): the theme's 404 page,
+ * in the store's layout, with a 404 status. Missing products, categories and
+ * pages throw a 404 from their own route and land on the same page through
+ * error.vue.
+ */
+definePageMeta({ name: "not-found" });
+</script>
+
+<template>
+  <NotFoundPage />
+</template>

package/app/services/ProductServices.js

@@ -6,7 +6,7 @@ import { apiService, getBaseUrl } from "./ApiServices";
 const getProductDetail = async (id, baseUrl) => {
   try {
     baseUrl = baseUrl || getBaseUrl();
-    const responseData = await apiService(`${baseUrl}store/apis/products/${id}`, {
+    const responseData = await apiService(`${baseUrl}store/apis/products/${id}/`, {
       method: 'GET',
       credentials: "include",
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimart/create-storefront",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Osimart storefront platform — logic, platform pages and CLI; extended by every theme repo",
   "type": "module",
   "main": "./nuxt.config.ts",