@osimart/create-storefront 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,208 @@
+<script setup>
+import { useRenderContext } from "#osi/composables/useRenderContext";
+import { ALL_SLUG, useClassificationCatalog } from "#osi/composables/useClassificationPage";
+
+/**
+ * Category AND collection listing — one page for both.
+ *
+ *   /categories/<slug>     a category
+ *   /collections/<slug>    a collection        (alias of this route)
+ *   /collections/all       every product       (also /categories/all)
+ *
+ * Same shape as every theme-driven route: ask the backend which template serves
+ * the path, publish the payload, render its sections. The listing itself is the
+ * MAIN_CLASSIFICATION section, so its look is edited in the dashboard like any
+ * other section.
+ *
+ * Like Shopify's main-collection section, the page must always have one: if the
+ * CLASSIFICATION template doesn't contain a MAIN_CLASSIFICATION (an older theme,
+ * or no template at all), a default one is put at the top so the page still
+ * works. A 404 only happens when the category/collection itself doesn't exist.
+ *
+ * Static `categories/` wins over the dynamic `[category]/[product]` route, so
+ * `/categories/shoes` lands here, not on the product page.
+ */
+definePageMeta({
+  name: "classification",
+  alias: ["/collections/:slug"],
+});
+
+const MAIN = "MAIN_CLASSIFICATION";
+const defaultMain = () => ({ key: "main-classification", type: MAIN, settings: {}, blocks: [] });
+
+const route = useRoute();
+const { render, store } = useStorefront();
+const { setRenderContext } = useRenderContext();
+const catalog = useClassificationCatalog();
+const { mediaUrl } = useMediaUrl();
+const origin = useRequestURL().origin;
+
+const slug = String(route.params.slug ?? "");
+const kind = slug === ALL_SLUG ? "ALL" : route.path.startsWith("/collections") ? "COLLECTION" : "CATEGORY";
+
+const renderData = useAsyncData(`render:${route.path}`, () => render(route.path));
+
+const [{ data, error }] = await Promise.all([renderData, catalog.ready]);
+
+const row = computed(() => (kind === "ALL" ? null : catalog.find(kind, slug)));
+const isNotFound = (e) => e?.status === 404 || e?.statusCode === 404;
+
+/**
+ * render() answers an unknown path with the NOT_FOUND template (status 200),
+ * not an error. That payload is not this page — using it rendered the 404
+ * sections on /categories/all. Only a CLASSIFICATION payload counts.
+ */
+const templateName = (payload) => {
+  const t = payload?.template;
+  return String((t && typeof t === "object" ? t.name : t) ?? "").toUpperCase();
+};
+const resolved = computed(() => {
+  if (!data.value) return null;
+  const name = templateName(data.value);
+  // No name in the payload at all: trust it. Any other named template: not ours.
+  return !name || name === "CLASSIFICATION" ? data.value : null;
+});
+
+/**
+ * The CLASSIFICATION template's sections, borrowed from a real listing.
+ *
+ * Every category and collection page renders the same CLASSIFICATION
+ * template — only the resource differs. So when the backend can't route this
+ * path (typically /categories/all on a resolve_path() that doesn't know "all"
+ * yet), rendering any real category returns exactly the sections the merchant
+ * designed. Without this, the fallback was a bare MAIN_CLASSIFICATION with
+ * no settings, which is why /categories/all ignored every edit made in the
+ * dashboard while sub-category pages followed them.
+ *
+ * Only runs when the path itself didn't resolve; one extra request, cached
+ * per donor path.
+ */
+const donorSlug = computed(() => {
+  if (resolved.value || !(kind === "ALL" || row.value)) return null;
+  const useCollections = kind === "COLLECTION" || (kind === "ALL" && route.path.startsWith("/collections"));
+  const pool = useCollections
+    ? catalog.collections.data.value ?? []
+    : catalog.tree.value.roots ?? [];
+  const pick = pool.find((r) => (r.slugified_name || r.slug) && (r.slugified_name || r.slug) !== slug);
+  const donor = pick?.slugified_name || pick?.slug;
+  return donor ? `/${useCollections ? "collections" : "categories"}/${donor}` : null;
+});
+
+const donor = donorSlug.value
+  ? await useAsyncData(`render:${donorSlug.value}`, () => render(donorSlug.value))
+  : { data: ref(null) };
+
+const donorSections = computed(() => {
+  const value = donor.data.value;
+  if (!value) return null;
+  const name = templateName(value);
+  return !name || name === "CLASSIFICATION" ? value.sections ?? [] : null;
+});
+
+const withMain = (sections) =>
+  sections.some((section) => section.type === MAIN) ? sections : [defaultMain(), ...sections];
+
+/**
+ * The payload the page actually renders.
+ *
+ *   CLASSIFICATION payload         -> its sections, MAIN_CLASSIFICATION ensured
+ *   not resolved, "all" / item     -> the template's sections via a real
+ *                                     listing (above), else a default section
+ *   not resolved, unknown slug     -> real 404
+ */
+const payload = computed(() => {
+  if (resolved.value) {
+    return {
+      ...resolved.value,
+      resource: resolved.value.resource ?? (row.value ? { type: kind, ...row.value } : { type: kind }),
+      sections: withMain(resolved.value.sections ?? []),
+    };
+  }
+  if (kind === "ALL" || row.value) {
+    return {
+      template: "CLASSIFICATION",
+      resource: row.value
+        ? { type: kind, id: row.value.id, name: row.value.name, slug }
+        : { type: "ALL", name: "All products", slug: ALL_SLUG },
+      sections: withMain(donorSections.value ?? []),
+      seo: {},
+    };
+  }
+  return null;
+});
+
+if (!payload.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: kind === "COLLECTION" ? "Collection not found" : "Category not found",
+    fatal: true,
+  });
+}
+
+// Anything other than a 404 (backend down, 500) still renders the default
+// page from the catalog rather than a blank screen — but it's logged.
+if (import.meta.dev && !resolved.value) {
+  if (error.value && !isNotFound(error.value)) {
+    console.warn("[classification] render failed, using the default layout:", error.value);
+  } else {
+    console.warn(
+      `[classification] render() did not resolve ${route.path} to CLASSIFICATION; ` +
+        (donorSections.value
+          ? `using the template's sections from ${donorSlug.value}. `
+          : "using the default layout. ") +
+        "Add match_all_products() to resolve_path() to fix this at the source."
+    );
+  }
+}
+
+setRenderContext(payload.value);
+watch(payload, (value) => setRenderContext(value));
+
+/* ------------------------------------------------------------------- SEO */
+
+const seo = computed(() => payload.value?.seo ?? {});
+const name = computed(
+  () => payload.value?.resource?.name || row.value?.name || (kind === "ALL" ? "All products" : "")
+);
+const description = computed(
+  () =>
+    seo.value.description ||
+    String(row.value?.description ?? "").replace(/<[^>]*>?/gm, "").trim().slice(0, 300) ||
+    undefined
+);
+const image = computed(
+  () => seo.value.image || mediaUrl(row.value?.main_image ?? row.value?.image ?? null) || undefined
+);
+const title = computed(
+  () => seo.value.title_full ?? seo.value.title ?? [name.value, store.value?.name].filter(Boolean).join(" | ")
+);
+
+useHead({
+  title,
+  titleTemplate: (value) => value ?? "",
+  meta: () => [
+    { name: "description", content: description.value },
+    { property: "og:type", content: "website" },
+    { property: "og:title", content: name.value || undefined },
+    { property: "og:description", content: description.value },
+    { property: "og:image", content: image.value },
+    { name: "twitter:card", content: "summary_large_image" },
+    { name: "twitter:title", content: name.value || undefined },
+    { name: "twitter:image", content: image.value },
+    { name: "robots", content: seo.value.no_index ? "noindex, nofollow" : "index, follow" },
+  ],
+  link: () => [
+    {
+      rel: "canonical",
+      // Filters, sort and page are views of the same listing.
+      href: `${origin}${seo.value.canonical_path || route.path}`,
+    },
+  ],
+});
+</script>
+
+<template>
+  <div>
+    <SectionRenderer :sections="payload.sections" />
+  </div>
+</template>