cloudcommerce 0.22.1 → 0.22.3

package/packages/storefront/dist/server/chunks/pages/{_...slug_.astro.c93fc36d.mjs → _...slug_.astro.a71c9334.mjs}

@@ -274,7 +274,8 @@ if (!globalThis.$storefront) {
     settings: {},
     onLoad(callback) {
       emitter.on("load", callback);
-    }
+    },
+    data: {}
   };
 }
 const setResponseCache = (Astro, maxAge, sMaxAge) => {
@@ -404,10 +405,10 @@ const loadRouteContext = async (Astro, {
 
 const pwaInfo = {"pwaInDevEnvironment":false,"webManifest":{"href":"/manifest.webmanifest","useCredentials":false,"linkTag":"<link rel=\"manifest\" href=\"/manifest.webmanifest\">"}};
 
-var __freeze$1 = Object.freeze;
-var __defProp$1 = Object.defineProperty;
-var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", { value: __freeze$1(raw || cooked.slice()) }));
-var _a$1;
+var __freeze$2 = Object.freeze;
+var __defProp$2 = Object.defineProperty;
+var __template$2 = (cooked, raw) => __freeze$2(__defProp$2(cooked, "raw", { value: __freeze$2(raw || cooked.slice()) }));
+var _a$2;
 const $$Astro$8 = createAstro("https://ecom2-demo.web.app");
 const $$BaseHead = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$8, $$props, $$slots);
@@ -461,7 +462,7 @@ window.ECOM_LANG = '${lang}';
 window.ECOM_CURRENCY = '${currency}';
 window.ECOM_CURRENCY_SYMBOL = '${currencySymbol}';
 window.ECOM_COUNTRY_CODE = '${countryCode}';
-window.$storefront = ${JSON.stringify({ settings })};`;
+window.$storefront = ${JSON.stringify({ settings, data: {} })};`;
   if (apiContext.error) {
     const { message, statusCode } = apiContext.error;
     const url = Astro2.url.pathname;
@@ -511,7 +512,7 @@ window.$isCmsPreview = true;`;
     url: `https://${domain}/`,
     logo: `https://${domain}${settings.logo}`
   });
-  return renderTemplate(_a$1 || (_a$1 = __template$1(['<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width">\n<meta name="theme-color"', '>\n<link rel="icon" type="image/png"', ' sizes="32x32">\n', "\n<title>", '</title>\n<meta name="description"', '>\n<meta name="author"', '>\n<meta name="generator"', '>\n<link rel="canonical"', ">\n", '\n<meta name="apple-mobile-web-app-capable" content="yes">\n<meta name="apple-mobile-web-app-status-bar-style" content="default">\n<meta property="og:site_name"', '>\n<meta property="og:url"', '>\n<meta property="og:title"', '>\n<meta property="og:description"', '>\n<meta property="og:type" content="website">\n<meta property="og:locale"', ">\n", "\n", '\n<meta name="twitter:card" content="summary">\n', '\n<meta name="ecom-store-id"', ">\n\n", "\n", "\n\n<script>", '<\/script>\n<script type="application/ld+json">', "<\/script>"])), addAttribute(primaryColor, "content"), addAttribute(favicon, "href"), shortcutIcon && renderTemplate`<link rel="icon" type="image/png"${addAttribute(shortcutIcon, "href")} sizes="192x192">`, title, addAttribute(description, "content"), addAttribute(settings.name, "content"), addAttribute(Astro2.generator, "content"), addAttribute(canonicalUrl, "href"), shortcutIcon && renderTemplate`<link rel="apple-touch-icon"${addAttribute(shortcutIcon, "href")}>`, addAttribute(settings.name, "content"), addAttribute(canonicalUrl, "content"), addAttribute(title, "content"), addAttribute(description, "content"), addAttribute(ogLocale, "content"), ogImage && renderTemplate`<meta property="og:image"${addAttribute(ogImage, "content")}>`, metatagsContent?.fb_app_id && renderTemplate`<meta property="fb:app_id"${addAttribute(metatagsContent.fb_app_id, "content")}>`, metatagsContent?.twitter_username && renderTemplate`<meta name="twitter:site"${addAttribute(metatagsContent.twitter_username, "content")}>`, addAttribute(String(storeId), "content"), pwaInfo && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(pwaInfo.webManifest.linkTag)}` })}`, !pwaInfo && !false && renderTemplate`<link rel="manifest" href="/manifest.webmanifest">`, unescapeHTML(inlineClientJS), unescapeHTML(inlineJSONLd));
+  return renderTemplate(_a$2 || (_a$2 = __template$2(['<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width">\n<meta name="theme-color"', '>\n<link rel="icon" type="image/png"', ' sizes="32x32">\n', "\n<title>", '</title>\n<meta name="description"', '>\n<meta name="author"', '>\n<meta name="generator"', '>\n<link rel="canonical"', ">\n", '\n<meta name="apple-mobile-web-app-capable" content="yes">\n<meta name="apple-mobile-web-app-status-bar-style" content="default">\n<meta property="og:site_name"', '>\n<meta property="og:url"', '>\n<meta property="og:title"', '>\n<meta property="og:description"', '>\n<meta property="og:type" content="website">\n<meta property="og:locale"', ">\n", "\n", '\n<meta name="twitter:card" content="summary">\n', '\n<meta name="ecom-store-id"', ">\n\n", "\n", "\n\n<script>", '<\/script>\n<script type="application/ld+json">', "<\/script>"])), addAttribute(primaryColor, "content"), addAttribute(favicon, "href"), shortcutIcon && renderTemplate`<link rel="icon" type="image/png"${addAttribute(shortcutIcon, "href")} sizes="192x192">`, title, addAttribute(description, "content"), addAttribute(settings.name, "content"), addAttribute(Astro2.generator, "content"), addAttribute(canonicalUrl, "href"), shortcutIcon && renderTemplate`<link rel="apple-touch-icon"${addAttribute(shortcutIcon, "href")}>`, addAttribute(settings.name, "content"), addAttribute(canonicalUrl, "content"), addAttribute(title, "content"), addAttribute(description, "content"), addAttribute(ogLocale, "content"), ogImage && renderTemplate`<meta property="og:image"${addAttribute(ogImage, "content")}>`, metatagsContent?.fb_app_id && renderTemplate`<meta property="fb:app_id"${addAttribute(metatagsContent.fb_app_id, "content")}>`, metatagsContent?.twitter_username && renderTemplate`<meta name="twitter:site"${addAttribute(metatagsContent.twitter_username, "content")}>`, addAttribute(String(storeId), "content"), pwaInfo && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(pwaInfo.webManifest.linkTag)}` })}`, !pwaInfo && !false && renderTemplate`<link rel="manifest" href="/manifest.webmanifest">`, unescapeHTML(inlineClientJS), unescapeHTML(inlineJSONLd));
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseHead.astro", void 0);
 
 function isRemoteImage(src) {
@@ -600,7 +601,7 @@ async function getImage(transform) {
   }
   let loader = (_a = globalThis.astroImage) == null ? void 0 : _a.loader;
   if (!loader) {
-    const { default: mod } = await import('./endpoint.js.630b1212.mjs').then(n => n.s).catch(() => {
+    const { default: mod } = await import('./endpoint.js.085dadb5.mjs').then(n => n.s).catch(() => {
       throw new Error(
         "[@astrojs/image] Builtin image loader not found. (Did you remember to add the integration to your Astro config?)"
       );
@@ -907,15 +908,15 @@ ${renderComponent($$result, "BaseBody", $$BaseBody, {}, { "default": ($$result2)
 ` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/Base.astro", void 0);
 
-var __freeze = Object.freeze;
-var __defProp = Object.defineProperty;
-var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
-var _a;
+var __freeze$1 = Object.freeze;
+var __defProp$1 = Object.defineProperty;
+var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", { value: __freeze$1(raw || cooked.slice()) }));
+var _a$1;
 const $$Astro$4 = createAstro("https://ecom2-demo.web.app");
 const $$InlineScripts = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
   Astro2.self = $$InlineScripts;
-  return renderTemplate(_a || (_a = __template(['<script>\n  window.$firebaseConfig = {\n    apiKey: "AIzaSyCnvm7QrPKzSBrUi09Z3zTgjDST0t4Yikg",\n    authDomain: "ecom2-demo.firebaseapp.com",\n    projectId: "ecom2-demo",\n    storageBucket: "ecom2-demo.appspot.com",\n    messagingSenderId: "70369627313",\n    appId: "1:70369627313:web:06634033b9c6208fe7e690"\n  };\n<\/script>'])));
+  return renderTemplate(_a$1 || (_a$1 = __template$1(['<script>\n  window.$firebaseConfig = {\n    apiKey: "AIzaSyCnvm7QrPKzSBrUi09Z3zTgjDST0t4Yikg",\n    authDomain: "ecom2-demo.firebaseapp.com",\n    projectId: "ecom2-demo",\n    storageBucket: "ecom2-demo.appspot.com",\n    messagingSenderId: "70369627313",\n    appId: "1:70369627313:web:06634033b9c6208fe7e690"\n  };\n<\/script>'])));
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/scripts/InlineScripts.astro", void 0);
 
 const $$Astro$3 = createAstro("https://ecom2-demo.web.app");
@@ -1054,7 +1055,7 @@ const usePitchBar = (props) => {
   };
 };
 
-const usePageHeader = async ({ routeContext }) => {
+const usePageHeader = async ({ routeContext, listedCategoryFields }) => {
   const { apiState, getContent } = routeContext;
   const layoutContent = await getContent("layout");
   const {
@@ -1065,7 +1066,18 @@ const usePageHeader = async ({ routeContext }) => {
   let { categories } = apiState;
   if (!categories) {
     try {
-      categories = (await api.get("categories")).data.result;
+      categories = (await api.get("categories", {
+        fields: listedCategoryFields || [
+          "name",
+          "slug",
+          "parent.name",
+          "parent.slug",
+          "icon.url",
+          "icon.size",
+          "pictures.0.url",
+          "pictures.0.size"
+        ]
+      })).data.result;
     } catch (err) {
       categories = [];
       console.error(err);
@@ -1084,6 +1096,14 @@ const usePageHeader = async ({ routeContext }) => {
   };
 };
 
+const useSharedData = ({ field, value }) => {
+  global.$storefront.data[field] = value;
+  return {
+    inlineClientJS: `
+window.$storefront.data['${field}'] = ${JSON.stringify(value)};`
+  };
+};
+
 const carouselKey = Symbol("carousel");
 
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
@@ -1683,7 +1703,7 @@ const filterMainCategories = (categories, featuredSlugs) => {
 const filterSubcategories = (categories, parentCategory, isAlphabeticalSort = false) => {
   const subcategories = categories.filter(({ name, slug, parent }) => {
     if (name && slug && parent) {
-      return parent._id === parentCategory._id || parent.slug && parent.slug === parentCategory.slug;
+      return parent._id && parent._id === parentCategory._id || parent.slug && parent.slug === parentCategory.slug;
     }
     return false;
   });
@@ -1696,13 +1716,14 @@ const filterSubcategories = (categories, parentCategory, isAlphabeticalSort = fa
   }
   return subcategories;
 };
-const useShopHeader = ({
-  header,
-  categories,
-  menuCategorySlugs,
-  menuRandomCategories = 7,
-  isAlphabeticalSortSubmenu
-}) => {
+const useShopHeader = (props) => {
+  const {
+    header,
+    categories = globalThis.$storefront.data.categories || [],
+    menuCategorySlugs,
+    menuRandomCategories = 7,
+    isAlphabeticalSortSubmenu
+  } = props;
   const {
     isSticky,
     staticHeight,
@@ -2180,15 +2201,16 @@ function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     if (!$setup.isOpen && $props.categoryTree.icon) {
       _push(ssrRenderComponent(_component_AImg, {
         picture: $props.categoryTree.icon,
+        alt: $props.categoryTree.name,
         class: "w-auto h-5 inline mr-3"
       }, null, _parent));
     } else {
       _push(`<!---->`);
     }
     _push(`<h3 class="${ssrRenderClass([$setup.isOpen ? "ml-4 text-base" : null, "inline"])}">${ssrInterpolate($props.categoryTree.name)}</h3></summary><ul class="${ssrRenderClass([$setup.isFaded ? "opacity-20" : "opacity-100", "mt-2 transition-opacity"])}" tabindex="-1"><!--[-->`);
-    ssrRenderList($props.categoryTree.subcategories, (subcategoryTree) => {
+    ssrRenderList($props.categoryTree.subcategories, (subcategoryTree, i) => {
       _push(ssrRenderComponent(_component_ShopSidenavCategory, {
-        key: subcategoryTree._id,
+        key: i,
         "category-tree": subcategoryTree
       }, null, _parent));
     });
@@ -2198,6 +2220,7 @@ function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     if (!$setup.isOpen && $props.categoryTree.icon) {
       _push(ssrRenderComponent(_component_AImg, {
         picture: $props.categoryTree.icon,
+        alt: $props.categoryTree.name,
         class: "w-auto h-5 inline mr-3"
       }, null, _parent));
     } else {
@@ -2238,9 +2261,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 });
 function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<aside${ssrRenderAttrs(mergeProps({ class: "flex flex-col h-full" }, _attrs))}><nav class="py-4 grow"><ul class="relative h-full"><!--[-->`);
-  ssrRenderList($props.categoryTrees, (categoryTree) => {
+  ssrRenderList($props.categoryTrees, (categoryTree, i) => {
     _push(ssrRenderComponent($setup["ShopSidenavCategory"], {
-      key: categoryTree._id,
+      key: i,
       "category-tree": categoryTree
     }, null, _parent));
   });
@@ -2286,7 +2309,16 @@ _sfc_main$6.setup = (props, ctx) => {
 const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
 
 const useShopHeaderSubmenu = (props) => {
-  const categoryPicture = computed(() => props.categoryTree.pictures?.[0]);
+  const categoryPicture = computed(() => {
+    const picture = props.categoryTree.pictures?.[0];
+    if (picture && !picture.alt) {
+      return {
+        alt: props.categoryTree.name,
+        ...picture
+      };
+    }
+    return void 0;
+  });
   const subcategoriesWithChild = computed(() => {
     return props.categoryTree.subcategories.filter(({ subcategories }) => subcategories.length);
   });
@@ -2429,7 +2461,7 @@ function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                         ])) : createCommentVNode("", true),
                         (openBlock(true), createBlock(Fragment$1, null, renderList($setup.subcategoryCols, (subcategory, i) => {
                           return openBlock(), createBlock("div", {
-                            key: subcategory._id,
+                            key: i,
                             class: "flex-1"
                           }, [
                             createVNode("a", {
@@ -2501,7 +2533,7 @@ function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                       ])) : createCommentVNode("", true),
                       (openBlock(true), createBlock(Fragment$1, null, renderList($setup.subcategoryCols, (subcategory, i) => {
                         return openBlock(), createBlock("div", {
-                          key: subcategory._id,
+                          key: i,
                           class: "flex-1"
                         }, [
                           createVNode("a", {
@@ -2586,7 +2618,7 @@ function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                       ])) : createCommentVNode("", true),
                       (openBlock(true), createBlock(Fragment$1, null, renderList($setup.subcategoryCols, (subcategory, i) => {
                         return openBlock(), createBlock("div", {
-                          key: subcategory._id,
+                          key: i,
                           class: "flex-1"
                         }, [
                           createVNode("a", {
@@ -3536,6 +3568,10 @@ _sfc_main.setup = (props, ctx) => {
 };
 const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
 
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a;
 const $$Astro$2 = createAstro("https://ecom2-demo.web.app");
 const $$PageHeader = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$2, $$props, $$slots);
@@ -3543,16 +3579,19 @@ const $$PageHeader = createComponent(async ($$result, $$props, $$slots) => {
   const { routeContext } = Astro2.locals;
   const { settings, isHomepage } = routeContext;
   const LogoHeading = isHomepage ? "h1" : "h2";
-  const { pitchBar, shopHeader } = await usePageHeader({ routeContext });
-  return renderTemplate`${renderSlot($$result, $$slots["pitch-bar"], renderTemplate`
-  ${pitchBar.slides.length > 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "~/components/PitchBar.vue", "client:component-export": "default" })}`}
-  ${pitchBar.slides.length === 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar })}`}
-
-${renderComponent($$result, "ShopHeader", ShopHeader, { ...shopHeader, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/ShopHeader.vue", "client:component-export": "default" }, { "logo": ($$result2) => renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "slot": "logo" }, { "default": ($$result3) => renderTemplate`
+  const {
+    pitchBar,
+    shopHeader: { categories, ...shopHeader }
+  } = await usePageHeader({ routeContext });
+  const { inlineClientJS } = useSharedData({
+    field: "categories",
+    value: categories?.map(({ _id, ...c }) => c)
+  });
+  return renderTemplate`${renderSlot($$result, $$slots["pitch-bar"], renderTemplate(_a || (_a = __template(["\n  ", "\n  ", "\n\n<script>", "<\/script>\n", ""])), pitchBar.slides.length > 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "~/components/PitchBar.vue", "client:component-export": "default" })}`, pitchBar.slides.length === 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar })}`, unescapeHTML(inlineClientJS), renderComponent($$result, "ShopHeader", ShopHeader, { ...shopHeader, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/ShopHeader.vue", "client:component-export": "default" }, { "logo": ($$result2) => renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "slot": "logo" }, { "default": ($$result3) => renderTemplate`
     ${maybeRenderHead()}<a href="/">
       ${renderComponent($$result3, "LogoHeading", LogoHeading, {}, { "logo-picture": ($$result4) => renderTemplate`${renderComponent($$result4, "Picture", $$Picture, { "slot": "logo-picture", "src": settings.logo, "alt": settings.name, "widths": [300], "fetchpriority": "high", "loading": "eager", "class": "hover:drop-shadow-sm max-w-[150px] mx-auto" })}` })}
     </a>
-  ` })}` })}`)}`;
+  ` })}` })))}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/PageHeader.astro", void 0);
 
 const $$Astro$1 = createAstro("https://ecom2-demo.web.app");

package/packages/storefront/dist/server/chunks/pages/{endpoint.js.630b1212.mjs → endpoint.js.085dadb5.mjs}

@@ -1,6 +1,6 @@
 import mime from 'mime';
 import sharp$1 from 'sharp';
-import { B as BaseSSRService, i as isOutputFormatSupportsAlpha } from './_...slug_.astro.c93fc36d.mjs';
+import { B as BaseSSRService, i as isOutputFormatSupportsAlpha } from './_...slug_.astro.a71c9334.mjs';
 
 class SharpService extends BaseSSRService {
   async transform(inputBuffer, transform) {

package/packages/storefront/dist/server/chunks/pages/{fallback.astro.58c7e581.mjs → fallback.astro.055cb7df.mjs}

@@ -1,5 +1,5 @@
 import { c as createAstro, a as createComponent, r as renderTemplate, m as maybeRenderHead, d as addAttribute, b as renderComponent } from '../astro.e0968ba7.mjs';
-import { l as loadRouteContext, $ as $$BaseHead, a as $$PageHeader, b as $$Base } from './_...slug_.astro.c93fc36d.mjs';
+import { l as loadRouteContext, $ as $$BaseHead, a as $$PageHeader, b as $$Base } from './_...slug_.astro.a71c9334.mjs';
 import 'path-to-regexp';
 import 'cookie';
 import '@astrojs/internal-helpers/path';

package/packages/storefront/dist/server/chunks/pages/{index.astro.6efe85be.mjs → index.astro.abc34f72.mjs}

@@ -1,5 +1,5 @@
 import { c as createAstro, a as createComponent, r as renderTemplate, b as renderComponent, m as maybeRenderHead, d as addAttribute, u as unescapeHTML, F as Fragment$1 } from '../astro.e0968ba7.mjs';
-import { c as $$Picture, p as parseShippingPhrase, _ as _export_sfc, C as Carousel, d as CarouselControl, e as availableExtraDiscount, f as installmentsOption, g as discountOption, h as loyaltyPointsPrograms, j as addProductToCart, l as loadRouteContext, $ as $$BaseHead, a as $$PageHeader, b as $$Base } from './_...slug_.astro.c93fc36d.mjs';
+import { c as $$Picture, p as parseShippingPhrase, _ as _export_sfc, C as Carousel, d as CarouselControl, e as availableExtraDiscount, f as installmentsOption, g as discountOption, h as loyaltyPointsPrograms, j as addProductToCart, l as loadRouteContext, $ as $$BaseHead, a as $$PageHeader, b as $$Base } from './_...slug_.astro.a71c9334.mjs';
 import { ref, shallowReactive, computed, useSSRContext, defineComponent, mergeProps, createVNode, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString, withDirectives, vShow, openBlock, createBlock, Fragment, renderList, resolveComponent, createCommentVNode, withModifiers, withAsyncContext } from 'vue';
 import api from '@cloudcommerce/api';
 import { inStock, price, name, img, onPromotion } from '@ecomplus/utils';
@@ -288,11 +288,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 });
 function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<div${ssrRenderAttrs(mergeProps({
-    class: ["mx-auto overflow-x-hidden", $setup.hasHeader ? "grid grid-cols-1 md:grid-cols-2 items-center" : null]
+    class: ["mx-auto overflow-x-hidden", $setup.hasHeader ? "grid grid-cols-1 sm:grid-cols-2 items-center" : null]
   }, _attrs))}>`);
   ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.href ? "a-link" : "span"), {
     href: $props.href,
-    class: $setup.hasHeader ? "basis-1/2 grow-0 md:order-last" : null
+    class: $setup.hasHeader ? "sm:order-last [&_img]:max-w-full sm:[&_img]:max-w-none [&_img]:aspect-video sm:[&_img]:aspect-[2.5] [&_img]:object-cover" : "[&_img]:max-w-full"
   }, {
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
@@ -306,7 +306,7 @@ function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }), _parent);
   if ($setup.hasHeader) {
-    _push(`<div class="basis-1/2 grow-0 p-12 xl:ps-32 mb-3 md:mb-0">`);
+    _push(`<div class="p-12 xl:ps-32 mb-3 sm:mb-0">`);
     if ($setup.parsedTitle) {
       ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.headingTag), { class: "ui-title mt-1" }, {
         default: withCtx((_, _push2, _parent2, _scopeId) => {
@@ -641,7 +641,7 @@ const usePrices = (props) => {
       return 1;
     }
     const minInstallment = installmentsObject.value.min_installment || 5;
-    const maxInstallmentsNumber = Math.round(salePrice.value / minInstallment);
+    const maxInstallmentsNumber = Math.floor(salePrice.value / minInstallment);
     return Math.min(maxInstallmentsNumber, installmentsObject.value.max_number);
   });
   const monthlyInterest = computed(() => {

package/packages/storefront/dist/server/entry.mjs

@@ -26,7 +26,7 @@ import 'html-escaper';
 import 'vue';
 import 'vue/server-renderer';
 import '@ecomplus/utils';
-import './chunks/pages/_...slug_.astro.c93fc36d.mjs';
+import './chunks/pages/_...slug_.astro.a71c9334.mjs';
 import 'node:fs/promises';
 import 'node:path';
 import 'node:url';
@@ -2825,13 +2825,13 @@ const adapter = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   start
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const _page0  = () => import('./chunks/endpoint@_@js.631ff6c5.mjs');
-const _page1  = () => import('./chunks/index@_@astro.69eb5e8a.mjs');
-const _page2  = () => import('./chunks/fallback@_@astro.12cf85ba.mjs');
-const _page3  = () => import('./chunks/index@_@astro.a20d91aa.mjs');
-const _page4  = () => import('./chunks/account@_@astro.1b311a3d.mjs');
-const _page5  = () => import('./chunks/_...d496b072.mjs');const pageMap = new Map([["../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.9.2_sharp@0.32.4/node_modules/@astrojs/image/dist/endpoint.js", _page0],["src/pages/index.astro", _page1],["src/pages/fallback.astro", _page2],["src/pages/app/index.astro", _page3],["src/pages/app/account.astro", _page4],["src/pages/[...slug].astro", _page5]]);
-const _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.9.2_sharp@0.32.4/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.572313d6.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.2f4f6929.css"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.572313d6.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.2f4f6929.css"}],"routeData":{"route":"/fallback","type":"page","pattern":"^\\/fallback\\/?$","segments":[[{"content":"fallback","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/fallback.astro","pathname":"/fallback","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"route":"/app","type":"page","pattern":"^\\/app\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/index.astro","pathname":"/app","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"route":"/app/account","type":"page","pattern":"^\\/app\\/account\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}],[{"content":"account","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/account.astro","pathname":"/app/account","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.572313d6.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.2f4f6929.css"}],"routeData":{"route":"/[...slug]","type":"page","pattern":"^(?:\\/(.*?))?\\/?$","segments":[[{"content":"...slug","dynamic":true,"spread":true}]],"params":["...slug"],"component":"src/pages/[...slug].astro","prerender":false,"_meta":{"trailingSlash":"ignore"}}}],"site":"https://ecom2-demo.web.app","base":"/","compressHTML":false,"markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true},"componentMetadata":[["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/[...slug].astro",{"propagation":"none","containsHead":true}],["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/fallback.astro",{"propagation":"none","containsHead":true}],["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/index.astro",{"propagation":"none","containsHead":true}]],"renderers":[],"clientDirectives":[["idle","(()=>{var i=t=>{let e=async()=>{await(await t())()};\"requestIdleCallback\"in window?window.requestIdleCallback(e):setTimeout(e,200)};(self.Astro||(self.Astro={})).idle=i;window.dispatchEvent(new Event(\"astro:idle\"));})();"],["load","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event(\"astro:load\"));})();"],["media","(()=>{var s=(i,t)=>{let a=async()=>{await(await i())()};if(t.value){let e=matchMedia(t.value);e.matches?a():e.addEventListener(\"change\",a,{once:!0})}};(self.Astro||(self.Astro={})).media=s;window.dispatchEvent(new Event(\"astro:media\"));})();"],["only","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event(\"astro:only\"));})();"],["visible","(()=>{var r=(i,c,n)=>{let s=async()=>{await(await i())()},t=new IntersectionObserver(e=>{for(let o of e)if(o.isIntersecting){t.disconnect(),s();break}});for(let e of n.children)t.observe(e)};(self.Astro||(self.Astro={})).visible=r;window.dispatchEvent(new Event(\"astro:visible\"));})();"]],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","\u0000@astro-renderers":"renderers.mjs","\u0000empty-middleware":"_empty-middleware.mjs","/src/pages/app/account.astro":"chunks/pages/account.astro.0003ca94.mjs","/src/pages/fallback.astro":"chunks/pages/fallback.astro.58c7e581.mjs","\u0000@astro-page:../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.9.2_sharp@0.32.4/node_modules/@astrojs/image/dist/endpoint@_@js":"chunks/endpoint@_@js.631ff6c5.mjs","\u0000@astro-page:src/pages/index@_@astro":"chunks/index@_@astro.69eb5e8a.mjs","\u0000@astro-page:src/pages/fallback@_@astro":"chunks/fallback@_@astro.12cf85ba.mjs","\u0000@astro-page:src/pages/app/index@_@astro":"chunks/index@_@astro.a20d91aa.mjs","\u0000@astro-page:src/pages/app/account@_@astro":"chunks/account@_@astro.1b311a3d.mjs","\u0000@astro-page:src/pages/[...slug]@_@astro":"chunks/_...d496b072.mjs","/astro/hoisted.js?q=0":"_astro/hoisted.572313d6.js","~/components/PitchBar.vue":"_astro/PitchBar.ed85833a.js","~/components/HeroSlider.vue":"_astro/HeroSlider.0890631f.js","~/components/ProductShelf.vue":"_astro/ProductShelf.9e290480.js","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.a7b12eab.js","@astrojs/vue/client.js":"_astro/client.0fb6b44e.js","~/components/ShopHeader.vue":"_astro/ShopHeader.82ae97a5.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/scripts/firebase-app.ts":"_astro/firebase-app.84207480.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/_...slug_.2f4f6929.css","/manifest.webmanifest","/robots.txt","/sw.js","/workbox-5e0bf4e4.js","/_astro/Carousel.62c97a79.js","/_astro/HeroSlider.0890631f.js","/_astro/PitchBar.ed85833a.js","/_astro/ProductShelf.9e290480.js","/_astro/ShopHeader.82ae97a5.js","/_astro/_plugin-vue_export-helper.4cb7dd76.js","/_astro/api.4984c5be.js","/_astro/client.0fb6b44e.js","/_astro/firebase-app.84207480.js","/_astro/hoisted.572313d6.js","/_astro/img.abbe849f.js","/_astro/index.b93f3d06.js","/_astro/preload-helper.cf010ec4.js","/_astro/session-utm.744b0db3.js","/_astro/workbox-window.prod.es5.a7b12eab.js","/img/icon.png","/img/large-icon.png","/img/uploads/banner2.webp","/img/uploads/ecom-icon.png","/img/uploads/headphone.webp","/img/uploads/logo.png","/img/uploads/og-image.png","/img/uploads/passion.webp","/img/uploads/rect8589.png","/img/uploads/rect859.png","/img/uploads/rect89.webp"]}), {
+const _page0  = () => import('./chunks/endpoint@_@js.67b66d0a.mjs');
+const _page1  = () => import('./chunks/index@_@astro.a4c9c84e.mjs');
+const _page2  = () => import('./chunks/fallback@_@astro.0a6656b6.mjs');
+const _page3  = () => import('./chunks/index@_@astro.df499bf2.mjs');
+const _page4  = () => import('./chunks/account@_@astro.12fbe243.mjs');
+const _page5  = () => import('./chunks/_...75363048.mjs');const pageMap = new Map([["../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.9.2_sharp@0.32.4/node_modules/@astrojs/image/dist/endpoint.js", _page0],["src/pages/index.astro", _page1],["src/pages/fallback.astro", _page2],["src/pages/app/index.astro", _page3],["src/pages/app/account.astro", _page4],["src/pages/[...slug].astro", _page5]]);
+const _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.9.2_sharp@0.32.4/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.572313d6.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.c13e0486.css"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.572313d6.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.c13e0486.css"}],"routeData":{"route":"/fallback","type":"page","pattern":"^\\/fallback\\/?$","segments":[[{"content":"fallback","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/fallback.astro","pathname":"/fallback","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"route":"/app","type":"page","pattern":"^\\/app\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/index.astro","pathname":"/app","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"route":"/app/account","type":"page","pattern":"^\\/app\\/account\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}],[{"content":"account","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/account.astro","pathname":"/app/account","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.572313d6.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.c13e0486.css"}],"routeData":{"route":"/[...slug]","type":"page","pattern":"^(?:\\/(.*?))?\\/?$","segments":[[{"content":"...slug","dynamic":true,"spread":true}]],"params":["...slug"],"component":"src/pages/[...slug].astro","prerender":false,"_meta":{"trailingSlash":"ignore"}}}],"site":"https://ecom2-demo.web.app","base":"/","compressHTML":false,"markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true},"componentMetadata":[["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/[...slug].astro",{"propagation":"none","containsHead":true}],["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/fallback.astro",{"propagation":"none","containsHead":true}],["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/index.astro",{"propagation":"none","containsHead":true}]],"renderers":[],"clientDirectives":[["idle","(()=>{var i=t=>{let e=async()=>{await(await t())()};\"requestIdleCallback\"in window?window.requestIdleCallback(e):setTimeout(e,200)};(self.Astro||(self.Astro={})).idle=i;window.dispatchEvent(new Event(\"astro:idle\"));})();"],["load","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event(\"astro:load\"));})();"],["media","(()=>{var s=(i,t)=>{let a=async()=>{await(await i())()};if(t.value){let e=matchMedia(t.value);e.matches?a():e.addEventListener(\"change\",a,{once:!0})}};(self.Astro||(self.Astro={})).media=s;window.dispatchEvent(new Event(\"astro:media\"));})();"],["only","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event(\"astro:only\"));})();"],["visible","(()=>{var r=(i,c,n)=>{let s=async()=>{await(await i())()},t=new IntersectionObserver(e=>{for(let o of e)if(o.isIntersecting){t.disconnect(),s();break}});for(let e of n.children)t.observe(e)};(self.Astro||(self.Astro={})).visible=r;window.dispatchEvent(new Event(\"astro:visible\"));})();"]],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","\u0000@astro-renderers":"renderers.mjs","\u0000empty-middleware":"_empty-middleware.mjs","/src/pages/app/account.astro":"chunks/pages/account.astro.0003ca94.mjs","/src/pages/fallback.astro":"chunks/pages/fallback.astro.055cb7df.mjs","\u0000@astro-page:../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.9.2_sharp@0.32.4/node_modules/@astrojs/image/dist/endpoint@_@js":"chunks/endpoint@_@js.67b66d0a.mjs","\u0000@astro-page:src/pages/index@_@astro":"chunks/index@_@astro.a4c9c84e.mjs","\u0000@astro-page:src/pages/fallback@_@astro":"chunks/fallback@_@astro.0a6656b6.mjs","\u0000@astro-page:src/pages/app/index@_@astro":"chunks/index@_@astro.df499bf2.mjs","\u0000@astro-page:src/pages/app/account@_@astro":"chunks/account@_@astro.12fbe243.mjs","\u0000@astro-page:src/pages/[...slug]@_@astro":"chunks/_...75363048.mjs","~/components/PitchBar.vue":"_astro/PitchBar.ed85833a.js","/astro/hoisted.js?q=0":"_astro/hoisted.572313d6.js","~/components/HeroSlider.vue":"_astro/HeroSlider.cea1f361.js","@astrojs/vue/client.js":"_astro/client.0fb6b44e.js","~/components/ProductShelf.vue":"_astro/ProductShelf.35614736.js","~/components/ShopHeader.vue":"_astro/ShopHeader.1c27e68e.js","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.a7b12eab.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/scripts/firebase-app.ts":"_astro/firebase-app.84207480.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/_...slug_.c13e0486.css","/manifest.webmanifest","/robots.txt","/sw.js","/workbox-5e0bf4e4.js","/_astro/Carousel.62c97a79.js","/_astro/HeroSlider.cea1f361.js","/_astro/PitchBar.ed85833a.js","/_astro/ProductShelf.35614736.js","/_astro/ShopHeader.1c27e68e.js","/_astro/_plugin-vue_export-helper.4cb7dd76.js","/_astro/api.4984c5be.js","/_astro/client.0fb6b44e.js","/_astro/firebase-app.84207480.js","/_astro/hoisted.572313d6.js","/_astro/img.abbe849f.js","/_astro/index.b93f3d06.js","/_astro/preload-helper.cf010ec4.js","/_astro/session-utm.744b0db3.js","/_astro/workbox-window.prod.es5.a7b12eab.js","/img/icon.png","/img/large-icon.png","/img/uploads/banner2.webp","/img/uploads/ecom-icon.png","/img/uploads/headphone.webp","/img/uploads/logo.png","/img/uploads/og-image.png","/img/uploads/passion.webp","/img/uploads/rect8589.png","/img/uploads/rect859.png","/img/uploads/rect89.webp"]}), {
 	pageMap,
 	renderers,
 });

package/packages/storefront/dist/server/renderers.mjs

@@ -2,7 +2,7 @@ import { h as server_default } from './chunks/astro.e0968ba7.mjs';
 import { useSSRContext, defineComponent, computed, mergeProps, h, createSSRApp } from 'vue';
 import { ssrRenderSlotInner, ssrRenderAttrs, ssrRenderSlot, renderToString } from 'vue/server-renderer';
 import { img, imgSizes, i18n, formatMoney } from '@ecomplus/utils';
-import { _ as _export_sfc } from './chunks/pages/_...slug_.astro.c93fc36d.mjs';
+import { _ as _export_sfc } from './chunks/pages/_...slug_.astro.a71c9334.mjs';
 import 'path-to-regexp';
 import 'cookie';
 import '@astrojs/internal-helpers/path';

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.22.1",
+  "version": "0.22.3",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"

package/packages/storefront/src/lib/$storefront.d.ts

@@ -25,4 +25,5 @@ export type $Storefront = {
     doc: CollectionSet,
     timestamp: number,
   },
+  data: Record<string, any>,
 };

package/packages/storefront/src/lib/components/SharedData.astro

@@ -0,0 +1,12 @@
+---
+import {
+  type Props as UseSharedDataProps,
+  useSharedData,
+} from '@@sf/composables/use-shared-data';
+
+export interface Props extends UseSharedDataProps {}
+
+const { inlineClientJS } = useSharedData(Astro.props);
+---
+
+<script is:inline set:html={inlineClientJS} />

package/packages/storefront/src/lib/composables/use-prices.ts

@@ -88,7 +88,7 @@ const usePrices = (props: Props) => {
       return 1;
     }
     const minInstallment = installmentsObject.value.min_installment || 5;
-    const maxInstallmentsNumber = Math.round(salePrice.value / minInstallment);
+    const maxInstallmentsNumber = Math.floor(salePrice.value / minInstallment);
     return Math.min(maxInstallmentsNumber, installmentsObject.value.max_number);
   });
   const monthlyInterest = computed(() => {

package/packages/storefront/src/lib/composables/use-shared-data.ts

@@ -0,0 +1,18 @@
+export interface Props {
+  field: string;
+  value: any;
+}
+
+const useSharedData = ({ field, value }: Props) => {
+  global.$storefront.data[field] = value;
+  return {
+    inlineClientJS: `
+window.$storefront.data['${field}'] = ${JSON.stringify(value)};`,
+  };
+};
+
+export default useSharedData;
+
+export {
+  useSharedData,
+};

package/packages/storefront/src/lib/composables/use-shop-header-submenu.ts

@@ -7,7 +7,16 @@ export interface Props {
 }
 
 const useShopHeaderSubmenu = (props: Props) => {
-  const categoryPicture = computed(() => props.categoryTree.pictures?.[0]);
+  const categoryPicture = computed(() => {
+    const picture = props.categoryTree.pictures?.[0];
+    if (picture && !picture.alt) {
+      return {
+        alt: props.categoryTree.name,
+        ...picture,
+      };
+    }
+    return undefined;
+  });
   const subcategoriesWithChild = computed(() => {
     return props.categoryTree.subcategories
       .filter(({ subcategories }) => subcategories.length);

package/packages/storefront/src/lib/composables/use-shop-header.ts

@@ -1,24 +1,24 @@
 import type { Ref } from 'vue';
-import type { ResourceId, Categories, CategoriesList } from '@cloudcommerce/api/types';
+import type { Categories } from '@cloudcommerce/api/types';
 import { computed } from 'vue';
 import useStickyHeader from '@@sf/composables/use-sticky-header';
 
+type PartCategory = Partial<Categories>;
+
 export interface Props {
   header: Ref<HTMLElement | null>;
-  categories: CategoriesList;
+  categories?: PartCategory[];
   menuCategorySlugs?: string[];
   menuRandomCategories?: number;
   isAlphabeticalSortSubmenu?: boolean;
 }
 
-type MainCategory = Partial<Categories> & {
-  _id: ResourceId,
+type MainCategory = PartCategory & {
   name: string,
   slug: string,
   parent: undefined,
 };
-type Subcategory = Partial<Categories> & {
-  _id: ResourceId,
+type Subcategory = PartCategory & {
   name: string,
   slug: string,
   parent: Exclude<Categories['parent'], undefined>,
@@ -33,7 +33,7 @@ export type CategoryTree = MainCategory & {
 };
 
 const filterMainCategories = (
-  categories: CategoriesList,
+  categories: PartCategory[],
   featuredSlugs?: string[],
 ) => {
   const mainCategories = categories.filter(({ name, slug, parent }) => {
@@ -55,13 +55,13 @@ const filterMainCategories = (
 };
 
 const filterSubcategories = (
-  categories: CategoriesList,
-  parentCategory: CategoriesList[0],
+  categories: PartCategory[],
+  parentCategory: PartCategory,
   isAlphabeticalSort = false,
 ) => {
   const subcategories = categories.filter(({ name, slug, parent }) => {
     if (name && slug && parent) {
-      return parent._id === parentCategory._id
+      return (parent._id && parent._id === parentCategory._id)
         || (parent.slug && parent.slug === parentCategory.slug);
     }
     return false;
@@ -75,13 +75,14 @@ const filterSubcategories = (
   return subcategories;
 };
 
-const useShopHeader = ({
-  header,
-  categories,
-  menuCategorySlugs,
-  menuRandomCategories = 7,
-  isAlphabeticalSortSubmenu,
-}: Props) => {
+const useShopHeader = (props: Props) => {
+  const {
+    header,
+    categories = (globalThis.$storefront.data.categories || []) as PartCategory[],
+    menuCategorySlugs,
+    menuRandomCategories = 7,
+    isAlphabeticalSortSubmenu,
+  } = props;
   const {
     isSticky,
     staticHeight,
@@ -91,14 +92,14 @@ const useShopHeader = ({
     return isSticky.value ? header.value?.offsetHeight : staticY.value;
   });
   const mainCategories = filterMainCategories(categories, menuCategorySlugs);
-  const getSubcategories = (parentCategory: CategoriesList[0]) => {
+  const getSubcategories = (parentCategory: PartCategory) => {
     return filterSubcategories(
       categories,
       parentCategory,
       !!isAlphabeticalSortSubmenu,
     );
   };
-  const getCategoryTree = <T extends CategoriesList[0]>(parentCategory: T):
+  const getCategoryTree = <T extends PartCategory>(parentCategory: T):
   T & { subcategories: SubcategoryTree[] } => {
     return {
       ...parentCategory,

package/packages/storefront/src/lib/composables/use-sticky-header.ts

@@ -63,7 +63,7 @@ const useStickyHeader = (props: Props) => {
         const headerElm = header.value as HTMLElement;
         staticHeight.value = headerElm.offsetHeight;
         staticY.value = staticHeight.value
-          + window.pageYOffset + headerElm.getBoundingClientRect().top;
+          + window.scrollY + headerElm.getBoundingClientRect().top;
         start();
       };
       const imgs = header.value.getElementsByTagName('IMG');

package/packages/storefront/src/lib/layouts/BaseHead.astro

@@ -56,7 +56,7 @@ window.ECOM_LANG = '${lang}';
 window.ECOM_CURRENCY = '${currency}';
 window.ECOM_CURRENCY_SYMBOL = '${currencySymbol}';
 window.ECOM_COUNTRY_CODE = '${countryCode}';
-window.$storefront = ${JSON.stringify({ settings })};`;
+window.$storefront = ${JSON.stringify({ settings, data: {} })};`;
 if (apiContext.error) {
   const { message, statusCode } = apiContext.error;
   const url = Astro.url.pathname;