@shopware/cms-base-layer 3.1.0 → 4.1.0

package/app/composables/useListingFilters.ts

@@ -0,0 +1,189 @@
+import { computed } from "vue";
+import type { ComputedRef } from "vue";
+import type { LocationQueryRaw } from "vue-router";
+
+import {
+  firstQueryValue,
+  getVisibleListingFilters,
+  toNumber,
+  useCategoryListing,
+  useProductSearchListing,
+  useRoute,
+  useRouter,
+  useSelectedListingFilters,
+} from "#imports";
+import type { Schemas } from "#shopware";
+
+/** Shared by the sidebar and horizontal filter components. */
+export function useListingFilters(isProductSearch: boolean) {
+  const route = useRoute();
+  const router = useRouter();
+
+  const { getCurrentSortingOrder, getInitialFilters, getSortingOrders } =
+    isProductSearch ? useProductSearchListing() : useCategoryListing();
+
+  const selectedFilters = useSelectedListingFilters();
+
+  // Only the filters this listing can apply; the category filter is search-only.
+  const visibleFilters = computed(() =>
+    getVisibleListingFilters(getInitialFilters.value, { isProductSearch }),
+  );
+
+  const showResetFiltersButton = computed<boolean>(
+    () =>
+      selectedFilters.manufacturer.size !== 0 ||
+      selectedFilters.properties.size !== 0 ||
+      (isProductSearch && selectedFilters.categories.size !== 0) ||
+      !!selectedFilters["max-price"] ||
+      !!selectedFilters["min-price"] ||
+      !!selectedFilters.rating ||
+      !!selectedFilters["shipping-free"],
+  );
+
+  const searchCriteriaForRequest: ComputedRef<
+    Schemas["ProductListingCriteria"]
+  > = computed(() => ({
+    manufacturer: [...(selectedFilters.manufacturer as Set<string>)]?.join("|"),
+    properties: [...(selectedFilters.properties as Set<string>)]?.join("|"),
+    "min-price": selectedFilters["min-price"] as number,
+    "max-price": selectedFilters["max-price"] as number,
+    order: getCurrentSortingOrder.value as string,
+    "shipping-free": selectedFilters["shipping-free"] as boolean,
+    rating: selectedFilters.rating as number,
+    search: isProductSearch ? (firstQueryValue(route.query.search) ?? "") : "",
+    limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
+  }));
+
+  const executeSearch = async () => {
+    try {
+      const criteria = searchCriteriaForRequest.value;
+      const query: Record<string, unknown> = {};
+
+      if (criteria.manufacturer) query.manufacturer = criteria.manufacturer;
+      if (criteria.properties) query.properties = criteria.properties;
+      if (isProductSearch && selectedFilters.categories.size > 0)
+        query.categories = [
+          ...(selectedFilters.categories as Set<string>),
+        ].join("|");
+      if (criteria["min-price"]) query["min-price"] = criteria["min-price"];
+      if (criteria["max-price"]) query["max-price"] = criteria["max-price"];
+      if (criteria.rating) query.rating = criteria.rating;
+      if (criteria["shipping-free"])
+        query["shipping-free"] = criteria["shipping-free"];
+      if (criteria.order) query.order = criteria.order;
+      // Keep the search term so filtering does not reset the query.
+      if (isProductSearch && route.query.search)
+        query.search = route.query.search;
+      // Preserve the page size, which rebuilding the query would drop.
+      if (route.query.limit) query.limit = route.query.limit;
+
+      // URL first: gating it on the request lost the filter when the call
+      // failed. The listing refetches from the URL, so this is the whole job.
+      await router.push({ query: query as LocationQueryRaw });
+    } catch (error) {
+      console.error("Search execution failed:", error);
+    }
+  };
+
+  const handleFilterChange = async (event: {
+    code: string;
+    value: string | number | boolean;
+  }) => {
+    try {
+      const { code, value } = event;
+
+      if (
+        code === "manufacturer" ||
+        code === "properties" ||
+        code === "categories"
+      ) {
+        const filterSet = selectedFilters[code];
+        const stringValue = String(value);
+        if (filterSet.has(stringValue)) filterSet.delete(stringValue);
+        else filterSet.add(stringValue);
+      } else if (code === "min-price" || code === "max-price") {
+        selectedFilters[code] =
+          typeof value === "number" ? value : Number(value);
+      } else if (code === "rating") {
+        selectedFilters.rating = Number(value);
+      } else if (code === "shipping-free") {
+        selectedFilters["shipping-free"] = Boolean(value);
+      }
+
+      await executeSearch();
+    } catch (error) {
+      console.error("Filter update failed:", error);
+    }
+  };
+
+  const clearFilters = () => {
+    (selectedFilters.manufacturer as Set<string>).clear();
+    (selectedFilters.properties as Set<string>).clear();
+    (selectedFilters.categories as Set<string>).clear();
+    selectedFilters["min-price"] = undefined;
+    selectedFilters["max-price"] = undefined;
+    selectedFilters.rating = undefined;
+    selectedFilters["shipping-free"] = undefined;
+  };
+
+  async function invokeCleanFilters() {
+    try {
+      clearFilters();
+      await executeSearch();
+    } catch (error) {
+      console.error("Clear filters failed:", error);
+    }
+  }
+
+  const currentSortingOrder = computed({
+    get: (): string => getCurrentSortingOrder.value || "",
+    set: async (order: string): Promise<void> => {
+      try {
+        // Pushing is the whole job; the listing refetches from the URL.
+        await router.push({ query: { ...route.query, order } });
+      } catch (error) {
+        console.error("Sorting order change failed:", error);
+      }
+    },
+  });
+
+  const handleSortChange = (sortKey: string) => {
+    currentSortingOrder.value = sortKey;
+  };
+
+  const handleRemoveFilterChip = async (chip: {
+    code: string;
+    value: string | number;
+  }) => {
+    if (
+      chip.code === "properties" ||
+      chip.code === "manufacturer" ||
+      chip.code === "categories"
+    ) {
+      (selectedFilters[chip.code] as Set<string>).delete(String(chip.value));
+    } else if (chip.code === "price") {
+      selectedFilters["min-price"] = undefined;
+      selectedFilters["max-price"] = undefined;
+    } else if (chip.code === "rating") {
+      selectedFilters.rating = undefined;
+    } else if (chip.code === "shipping-free") {
+      selectedFilters["shipping-free"] = undefined;
+    }
+
+    await executeSearch();
+  };
+
+  return {
+    currentSortingOrder,
+    getCurrentSortingOrder,
+    executeSearch,
+    getSortingOrders,
+    handleFilterChange,
+    handleRemoveFilterChip,
+    handleSortChange,
+    invokeCleanFilters,
+    selectedFilters,
+    showResetFiltersButton,
+    visibleFilters,
+  };
+}

package/app/composables/useSelectedListingFilters.ts

@@ -0,0 +1,46 @@
+import { reactive, watch } from "vue";
+import type { UnwrapNestedRefs } from "vue";
+
+// Nuxt's useRoute, never vue-router's: this layer does not depend on
+// vue-router, so a bare import resolves to whichever copy the consumer's
+// package manager hoisted. When that is not the copy Nuxt's router uses, its
+// inject() returns undefined and every page with a listing filter 500s in SSR.
+import {
+  applyQueryToFilters,
+  createEmptyFilterState,
+  useRoute,
+} from "#imports";
+
+import type { FilterState } from "../utils/listingFilterState";
+
+/**
+ * Returns the reactive filter state, populated from the current route.query at
+ * setup (runs on server AND client -> identical first render, no hydration
+ * mismatch) and kept in sync on every subsequent query-only navigation
+ * (Back/Forward, manual URL edits, the component's own executeSearch push).
+ *
+ * The watcher is intentionally NOT immediate: the setup-time apply already
+ * covers the first render, and an immediate watcher would re-run during
+ * hydration. It only resyncs UI state - it never navigates or fetches - so it
+ * cannot loop with executeSearch() nor cause an extra listing request.
+ */
+export const useSelectedListingFilters = (): UnwrapNestedRefs<FilterState> => {
+  const route = useRoute();
+  // Fresh state per call, deliberately: the sidebar and the horizontal filter
+  // bar each hold their own selection object, so a mutation in one is invisible
+  // to the other until it reaches the route. The URL is what synchronises them.
+  const state = reactive<FilterState>(createEmptyFilterState());
+
+  // Initial parse (SSR + first client render).
+  applyQueryToFilters(state as FilterState, route.query);
+
+  // Resync on query-only route changes while the component stays mounted.
+  watch(
+    () => route.query,
+    (query) => {
+      applyQueryToFilters(state as FilterState, query);
+    },
+  );
+
+  return state;
+};

package/app/helpers/cms/getAppRendererLayout.test.ts

@@ -0,0 +1,93 @@
+import type { CmsBlockAppRenderer } from "@shopware/composables";
+import { describe, expect, it } from "vitest";
+
+import { getAppRendererLayout } from "./getAppRendererLayout";
+
+const block = (
+  customFields: CmsBlockAppRenderer["customFields"],
+  slots: string[] = [],
+) =>
+  ({
+    type: "app-renderer",
+    customFields,
+    slots: slots.map((slot) => ({ id: slot, slot, type: slot.split("-")[0] })),
+  }) as unknown as CmsBlockAppRenderer;
+
+describe("getAppRendererLayout", () => {
+  it("reads the app block name and grid", () => {
+    const layout = getAppRendererLayout(
+      block({
+        appBlockName: "swag-two-columns",
+        slotLayout: { grid: "auto / auto auto" },
+      }),
+    );
+
+    expect(layout.appBlockName).toBe("swag-two-columns");
+    expect(layout.grid).toBe("auto / auto auto");
+  });
+
+  it.each([
+    ["swag-two-columns", "CmsBlockAppRendererSwagTwoColumns"],
+    ["SwagTwoColumns", "CmsBlockAppRendererSwagTwoColumns"],
+    ["swag_two_columns", "CmsBlockAppRendererSwagTwoColumns"],
+  ])(
+    "derives the override component name from %s",
+    (appBlockName, expected) => {
+      expect(getAppRendererLayout(block({ appBlockName })).componentName).toBe(
+        expected,
+      );
+    },
+  );
+
+  it("has no override component and no grid without custom fields", () => {
+    const layout = getAppRendererLayout(block(null));
+
+    expect(layout.appBlockName).toBe("");
+    expect(layout.componentName).toBeUndefined();
+    expect(layout.grid).toBeUndefined();
+  });
+
+  it("restores the declared order from the name-sorted Store API order", () => {
+    const layout = getAppRendererLayout(
+      block({ appBlockName: "swag" }, [
+        "image-1",
+        "image-3",
+        "text-0",
+        "text-10",
+        "text-2",
+      ]),
+    );
+
+    expect(layout.slots.map((slot) => slot.slot)).toEqual([
+      "text-0",
+      "image-1",
+      "text-2",
+      "image-3",
+      "text-10",
+    ]);
+  });
+
+  it("keeps slots without an index after the indexed ones, in their order", () => {
+    const layout = getAppRendererLayout(
+      block({ appBlockName: "swag" }, ["content", "text-1", "left", "text-0"]),
+    );
+
+    expect(layout.slots.map((slot) => slot.slot)).toEqual([
+      "text-0",
+      "text-1",
+      "content",
+      "left",
+    ]);
+  });
+
+  it("does not reorder the block's own slots", () => {
+    const content = block({ appBlockName: "swag" }, ["text-1", "text-0"]);
+
+    getAppRendererLayout(content);
+
+    expect(content.slots.map((slot) => slot.slot)).toEqual([
+      "text-1",
+      "text-0",
+    ]);
+  });
+});

package/app/helpers/cms/getAppRendererLayout.ts

@@ -0,0 +1,36 @@
+import type { CmsBlockAppRenderer } from "@shopware/composables";
+import { pascalCase } from "scule";
+
+type AppRendererSlot = CmsBlockAppRenderer["slots"][number];
+
+export type AppRendererLayout = {
+  appBlockName: string;
+  componentName?: string;
+  grid?: string;
+  slots: AppRendererSlot[];
+};
+
+const SLOT_INDEX = /-(\d+)$/;
+
+function getSlotIndex(slot: AppRendererSlot): number {
+  const match = SLOT_INDEX.exec(slot.slot ?? "");
+
+  return match ? Number(match[1]) : Number.MAX_SAFE_INTEGER;
+}
+
+export function getAppRendererLayout(
+  block: CmsBlockAppRenderer,
+): AppRendererLayout {
+  const appBlockName = block.customFields?.appBlockName ?? "";
+
+  return {
+    appBlockName,
+    componentName: appBlockName
+      ? pascalCase(`CmsBlockAppRenderer-${appBlockName}`)
+      : undefined,
+    grid: block.customFields?.slotLayout?.grid || undefined,
+    slots: [...(block.slots ?? [])].sort(
+      (a, b) => getSlotIndex(a) - getSlotIndex(b),
+    ),
+  };
+}

package/app/helpers/cms/getCategoryNameContent.test.ts

@@ -0,0 +1,57 @@
+import type { CmsElementCategoryName } from "@shopware/composables";
+import { describe, expect, it } from "vitest";
+
+import { getCategoryNameContent } from "./getCategoryNameContent";
+
+const element = (source: "static" | "mapped", content: string | null) =>
+  ({
+    type: "category-name",
+    config: {
+      content: {
+        source,
+        value: source === "mapped" ? "category.name" : "<p>static</p>",
+      },
+    },
+    data: { content, apiAlias: "cms_text" },
+  }) as unknown as CmsElementCategoryName;
+
+describe("getCategoryNameContent", () => {
+  it("wraps mapped content in the page headline", () => {
+    expect(getCategoryNameContent(element("mapped", "Clothing"))).toBe(
+      '<h1 class="cms-element-category-name-headline">Clothing</h1>',
+    );
+  });
+
+  it("keeps entities the backend sanitizer produced", () => {
+    expect(getCategoryNameContent(element("mapped", "Shoes &amp; Bags"))).toBe(
+      '<h1 class="cms-element-category-name-headline">Shoes &amp; Bags</h1>',
+    );
+  });
+
+  it("returns static content as authored", () => {
+    expect(
+      getCategoryNameContent(element("static", "<h2>Our <b>range</b></h2>")),
+    ).toBe("<h2>Our <b>range</b></h2>");
+  });
+
+  it("renders no empty headline when the mapped value did not resolve", () => {
+    expect(getCategoryNameContent(element("mapped", null))).toBe("");
+    expect(getCategoryNameContent(element("mapped", ""))).toBe("");
+  });
+
+  it("renders no headline around a mapping path the backend returned", () => {
+    const leakedPath = {
+      type: "category-name",
+      config: {
+        content: { source: "mapped", value: "category.customFields" },
+      },
+      data: { content: "category.customFields", apiAlias: "cms_text" },
+    } as unknown as CmsElementCategoryName;
+
+    expect(getCategoryNameContent(leakedPath)).toBe("");
+  });
+
+  it("returns nothing for static content that did not resolve", () => {
+    expect(getCategoryNameContent(element("static", null))).toBe("");
+  });
+});

package/app/helpers/cms/getCategoryNameContent.ts

@@ -0,0 +1,15 @@
+import type { CmsElementCategoryName } from "@shopware/composables";
+
+import { getTextElementContent } from "./getTextElementContent";
+
+export function getCategoryNameContent(
+  element: CmsElementCategoryName,
+): string {
+  const content = getTextElementContent(element);
+
+  if (!content || element.config?.content?.source !== "mapped") {
+    return content;
+  }
+
+  return `<h1 class="cms-element-category-name-headline">${content}</h1>`;
+}

package/app/helpers/cms/getTextElementContent.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+
+import { getTextElementContent } from "./getTextElementContent";
+
+const element = (
+  source: "static" | "mapped",
+  value: string,
+  data: { content: string | null } | null,
+) => ({ config: { content: { source, value } }, data });
+
+describe("getTextElementContent", () => {
+  it("renders the content the backend resolved", () => {
+    expect(
+      getTextElementContent(
+        element("static", "<p>{{ category.name }}</p>", {
+          content: "<p>Clothing</p>",
+        }),
+      ),
+    ).toBe("<p>Clothing</p>");
+    expect(
+      getTextElementContent(
+        element("mapped", "category.name", { content: "Clothing" }),
+      ),
+    ).toBe("Clothing");
+  });
+
+  it("does not fall back to the unsanitized config when the backend sanitized the content away", () => {
+    expect(
+      getTextElementContent(
+        element("static", "<script>alert(1)</script>", { content: "" }),
+      ),
+    ).toBe("");
+  });
+
+  it("does not render a placeholder that resolved to nothing", () => {
+    expect(
+      getTextElementContent(
+        element("static", "{{ category.description }}", { content: "" }),
+      ),
+    ).toBe("");
+    expect(
+      getTextElementContent(
+        element("static", "{{ category.description }}", { content: null }),
+      ),
+    ).toBe("");
+  });
+
+  it("does not render a mapping path", () => {
+    expect(
+      getTextElementContent(
+        element("mapped", "category.name", { content: null }),
+      ),
+    ).toBe("");
+    expect(
+      getTextElementContent(
+        element("mapped", "category.customFields", {
+          content: "category.customFields",
+        }),
+      ),
+    ).toBe("");
+  });
+
+  it("renders static config for an element without data", () => {
+    expect(getTextElementContent(element("static", "<p>Hi</p>", null))).toBe(
+      "<p>Hi</p>",
+    );
+    expect(
+      getTextElementContent(element("mapped", "category.name", null)),
+    ).toBe("");
+  });
+
+  it("renders nothing for a missing element or config", () => {
+    expect(getTextElementContent(undefined)).toBe("");
+    expect(getTextElementContent({ config: null, data: null })).toBe("");
+    expect(getTextElementContent({ data: { content: "<p>x</p>" } })).toBe(
+      "<p>x</p>",
+    );
+  });
+});

package/app/helpers/cms/getTextElementContent.ts

@@ -0,0 +1,37 @@
+type TextElementLike = {
+  config?: {
+    content?: { source?: string; value?: unknown } | null;
+  } | null;
+  data?: { content?: string | null } | null;
+};
+
+/**
+ * The HTML a text-like element (`text`, `product-name`, `category-name`)
+ * renders.
+ *
+ * Once the Store API resolved the slot, `data.content` is the only source: the
+ * backend sanitized it, `config.content.value` is the raw input. The config is
+ * read only for an element without `data`, which the API never sends but a
+ * hand-built element may.
+ */
+export function getTextElementContent(
+  element: TextElementLike | null | undefined,
+): string {
+  const config = element?.config?.content;
+
+  if (!element?.data) {
+    return config?.source !== "mapped" && typeof config?.value === "string"
+      ? config.value
+      : "";
+  }
+
+  const content = element.data.content ?? "";
+
+  // The backend answers a mapping to a value that is not a string (an entity,
+  // an array) with the mapping path itself, e.g. `category.customFields`.
+  if (config?.source === "mapped" && content === config.value) {
+    return "";
+  }
+
+  return content;
+}