cloudcommerce 0.32.0 → 0.33.1

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ProductShelf.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="ui-section">
-    <div v-if="title" class="max-w-prose mx-auto text-center mb-2">
+    <div v-if="title" class="mx-auto mb-2 max-w-prose text-center">
       <h2 class="ui-text-brand text-3xl">
         <ALink :href="titleLink" :class="titleLink ? 'ui-link' : 'text-base-700'">
           {{ title }}
@@ -11,22 +11,22 @@
       <li
         v-for="product in products"
         :key="product._id"
-        class="basis-1/2 md:basis-1/3 lg:basis-1/4 shrink-0"
+        class="shrink-0 basis-1/2 md:basis-1/3 lg:basis-1/4"
       >
         <ProductCard :product="product" />
       </li>
       <template #controls>
         <div
           v-show="products.length > 2"
-          class="text-3xl lg:text-2xl leading-none text-primary
-          lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity"
+          class="text-primary text-3xl leading-none transition-opacity
+          group-hover/shelf:opacity-90 lg:text-2xl lg:opacity-0"
         >
-          <CarouselControl class="!top-1/2 !lg:top-1/3 !-left-4 w-12 h-12
-            bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded
-            lg:shadow-sm lg:ring-1 ring-black/5" is-prev />
-          <CarouselControl class="!top-1/2 !lg:top-1/3 !-right-4 w-12 h-12
-            bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded
-            lg:shadow-sm lg:ring-1 ring-black/5" />
+          <CarouselControl class="!lg:top-1/3 lg:hover:bg-primary-300/60 !-left-4 !top-1/2 h-12
+            w-12 rounded bg-transparent ring-black/5
+            lg:bg-white/80 lg:shadow-sm lg:ring-1" is-prev />
+          <CarouselControl class="!lg:top-1/3 lg:hover:bg-primary-300/60 !-right-4 !top-1/2 h-12
+            w-12 rounded bg-transparent ring-black/5
+            lg:bg-white/80 lg:shadow-sm lg:ring-1" />
         </div>
       </template>
     </Carousel>
@@ -38,8 +38,6 @@ import {
   type Props as UseProductShelfProps,
   useProductShelf,
 } from '@@sf/composables/use-product-shelf';
-import Carousel from '@@sf/components/Carousel.vue';
-import CarouselControl from '@@sf/components/CarouselControl.vue';
 import ProductCard from '~/components/ProductCard.vue';
 
 export interface Props extends UseProductShelfProps {}

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ProductSpecifications.vue

@@ -0,0 +1,42 @@
+<template>
+  <section v-if="hasSpecs" class="ui-section">
+    <Collapse :title="title || $t.i19specifications">
+      <ul>
+        <li
+          v-for="(grid, gridId) in specifications"
+          :key="gridId"
+          class="border-base-200 grid grid-cols-2
+          border-dashed py-2 sm:grid-cols-3 [&:not(:last-child)]:border-b"
+        >
+          <span class="text-base-700">
+            {{ getGridTitle(`${gridId}`, grids) }}
+          </span>
+          <strong class="font-semibold sm:col-span-2">
+            {{ getSpecTextValue(product, `${gridId}`, grids) }}
+          </strong>
+        </li>
+      </ul>
+    </Collapse>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Products } from '@cloudcommerce/api/types';
+import {
+  gridTitle as getGridTitle,
+  specTextValue as getSpecTextValue,
+} from '@ecomplus/utils';
+import Collapse from '~/components/Collapse.vue';
+
+export interface Props {
+  product?: Products;
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  product: () => globalThis.$storefront.apiContext?.doc as Products,
+});
+const specifications = computed(() => props.product.specifications || {});
+const hasSpecs = computed(() => Object.keys(specifications.value).length);
+const { grids } = globalThis.$storefront.data;
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/SearchModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-40 bg-base-300"></div>
+  <div class="bg-base-300 h-40 w-full"></div>
 </template>
 
 <script setup lang="ts">

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopFooter.vue

@@ -19,10 +19,7 @@
               </SocialNetworkLink>
             </span>
           </div>
-          <div v-if="$settings.address || $settings.phone" class="text-base-700 mt-3">
-            <address v-if="$settings.address" class="mr-4 inline-block">
-              {{ $settings.address }}
-            </address>
+          <div v-if="$settings.phone" class="text-base-700 mt-3">
             <ALink
               v-if="$settings.phone"
               :href="`tel:${$settings.phone.replace(/\D/g, '')}`"
@@ -43,14 +40,14 @@
               ? 'grid md:grid-cols-2 gap-x-5 gap-y-1.5' : 'space-y-1.5'"
           >
             <li v-for="({ name, slug }, i) in categories" :key="`c-${i}`">
-              <ALink :href="`/${slug}`" class="ui-link text-base-600">
+              <a :href="`/${slug}`" class="ui-link text-base-600">
                 {{ name }}
-              </ALink>
+              </a>
             </li>
             <li>
-              <ALink href="/s" class="ui-link text-base-900">
+              <a href="/s" class="ui-link text-base-900">
                 {{ $t.i19allProducts }}
-              </ALink>
+              </a>
             </li>
           </ul>
         </div>
@@ -72,55 +69,7 @@
         </div>
       </div>
     </div>
-    <div class="ui-section">
-      <div class="flex flex-wrap items-start justify-between gap-5 lg:flex-nowrap">
-        <ul class="mx-auto flex items-center gap-x-6 gap-y-3
-          overflow-x-auto md:mx-0 md:flex-wrap md:overflow-hidden lg:gap-x-8">
-          <li v-for="(stamp, i) in stamps" :key="i">
-            <ALink :href="stamp.href?.replace('{domain}', $settings.domain || '')">
-              <slot :name="`picture-${i}`" />
-              <span v-if="!stamp.img" class="flex items-center">
-                <span
-                  v-if="stamp.icon"
-                  class="[&>*]:from-secondary-300 [&>*]:to-secondary-600
-                  mr-2 text-4xl [&>*]:bg-gradient-to-br"
-                >
-                  <i v-if="stamp.icon === 'lock'" class="i-lock-closed"></i>
-                  <i v-else-if="stamp.icon === 'check'" class="i-check-badge"></i>
-                  <i v-else class="i-arrow-path-rounded-square"></i>
-                </span>
-                <span class="text-base-600 max-w-[140px] text-sm font-medium">
-                  {{ stamp.alt }}
-                  <i
-                    v-if="stamp.href && stamp.href.charAt(0) !== '/'"
-                    class="bg-base-400 i-arrow-top-right-on-square ml-0.5"
-                  ></i>
-                </span>
-              </span>
-            </ALink>
-          </li>
-        </ul>
-        <div class="mx-auto flex flex-wrap items-center justify-end
-          gap-4 overflow-x-auto text-2xl md:mx-0 md:flex-nowrap md:overflow-hidden">
-          <PaymentMethodFlag
-            v-for="paymentMethod in $settings.paymentMethods"
-            :key="paymentMethod"
-            :flag="paymentMethod"
-          />
-        </div>
-      </div>
-      <div class="mt-7 justify-between gap-4 text-center
-        text-xs md:flex md:text-left">
-        <div class="mb-3 md:mb-0">
-          @ {{ new Date().getFullYear() }} {{ $settings.corporateName }}
-          {{ $settings.address ? `/ ${$settings.address}` : '' }}
-          / {{ $settings.docNumber }}
-        </div>
-        <ALink href="https://www.ecomplus.io/" class="italic text-[#37003c]">
-          powered by <b>E-Com Plus</b>
-        </ALink>
-      </div>
-    </div>
+    <FooterStamps :stamps="stamps" />
   </footer>
 </template>
 
@@ -129,7 +78,7 @@ import type { Categories } from '@cloudcommerce/api/types';
 import type { LayoutContent } from '@@sf/content';
 import { socialNetworks } from '@@sf/sf-lib';
 import SocialNetworkLink from '@@sf/components/SocialNetworkLink.vue';
-import PaymentMethodFlag from '@@sf/components/PaymentMethodFlag.vue';
+import FooterStamps from '~/components/FooterStamps.vue';
 
 export interface Props {
   stamps?: LayoutContent['footer']['stamps'];

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopHeader.vue

@@ -4,35 +4,38 @@
     class="relative top-0 z-50 transition-colors"
     :class="[
       isSticky && !isSidenavOpen ? 'bg-white/80' : 'bg-white',
-      isSticky ? 'backdrop-blur-md shadow py-2 md:py-3' : 'py-3 sm:py-4 md:py-5',
+      isSticky ? 'py-2 shadow backdrop-blur-md md:py-3' : 'py-3 sm:py-4 md:py-5',
     ]"
   >
-    <div class="w-screen lg:w-[calc(100vw-1rem)] xl:max-w-[82rem] 2xl:max-w-[85rem]
-      mx-auto px-1 sm:pl-2 sm:pr-2.5 lg:px-1">
-      <div class="flex justify-between items-center">
+    <div class="mx-auto w-screen px-1 sm:pl-2
+      sm:pr-2.5 lg:w-[calc(100vw-1rem)] lg:px-1 xl:max-w-[82rem] 2xl:max-w-[85rem]">
+      <div class="flex items-center justify-between">
         <div
-          class="basis-1/4 lg:basis-auto lg:me-5"
+          class="basis-1/4 lg:me-5 lg:basis-auto"
           :class="!isSticky ? 'lg:hidden' : null"
         >
           <button
-            class="px-2 my-1"
+            class="my-1 px-2"
             :aria-label="$t.i19toggleMenu"
             @click="isSidenavOpen = !isSidenavOpen"
           >
             <i
-              class="text-base-600 text-3xl"
-              :class="isSidenavOpen ? 'i-close' : 'i-menu-line'"
+              class="text-3xl transition-colors"
+              :class="[
+                isSidenavOpen ? 'i-close' : 'i-menu-line',
+                isMounted ? 'text-base-600' : 'text-base-400 animate-pulse',
+              ]"
             ></i>
           </button>
         </div>
         <div class="lg:grow" :class="isSticky ? '[&_img]:max-w-[170px]' : null">
           <slot name="logo" />
         </div>
-        <div class="basis-1/4 px-2 flex justify-end items-center gap-3 lg:gap-4">
+        <div class="flex basis-1/4 items-center justify-end gap-3 px-2 lg:gap-4">
           <form
-            action="/search"
+            action="/s"
             method="get"
-            class="hidden lg:block w-[400px] relative mb-1"
+            class="relative mb-1 hidden w-[400px] lg:block"
             @submit.prevent="searchTerm
               ? (isSearchOpen = !isSearchOpen)
               : searchInput?.focus()"
@@ -47,14 +50,14 @@
               name="term"
               v-model="searchTerm"
               :placeholder="$t.i19searchProducts"
-              class="w-full rounded-md py-2.5 pe-10 sm:text-sm
-              bg-gradient-to-br from-secondary-50/10 to-secondary-50/80
-              border-secondary-200 shadow-sm"
+              class="from-secondary-50/10 to-secondary-50/80 border-secondary-200 w-full rounded-md
+              bg-gradient-to-br py-2.5 pe-10
+              shadow-sm sm:text-sm"
             />
-            <span class="absolute inset-y-0 end-0 px-1 grid place-content-center">
+            <span class="absolute inset-y-0 end-0 grid place-content-center px-1">
               <button
                 type="submit"
-                class="p-1 text-2xl text-secondary-600 hover:text-primary"
+                class="text-secondary-600 hover:text-primary p-1 text-2xl"
               >
                 <span class="sr-only">{{ $t.i19search }}</span>
                 <i class="i-search-3-line"></i>
@@ -66,38 +69,40 @@
             @click="isSearchOpen = !isSearchOpen"
             class="lg:hidden"
           >
-            <i class="i-search-3-line w-7 h-7
-              text-base-700 hover:text-primary hover:scale-110 active:scale-125"></i>
+            <i class="i-search-3-line text-base-700 hover:text-primary
+              h-7 w-7 hover:scale-110 active:scale-125"></i>
           </button>
           <AccountMenu class="hidden sm:block">
             <template #button="{ open }">
               <i
-                class="i-user-2-line w-7 h-7
-                text-base-600 hover:text-primary hover:scale-110 active:scale-125"
+                class="i-user-2-line text-base-600 hover:text-primary
+                h-7 w-7 hover:scale-110 active:scale-125"
                 :class="open ? 'text-base-800 scale-110' : null"
               ></i>
             </template>
           </AccountMenu>
-          <button
+          <a
+            :href="$settings.cartUrl || '/app/'"
             :aria-label="$t.i19openCart"
-            @click="isCartOpen = !isCartOpen"
-            class="relative group text-primary-500"
+            @click.prevent="isCartOpen = !isCartOpen"
+            class="text-primary-500 group relative"
+            role="button"
           >
-            <i class="i-shopping-bag-3-fill w-7 h-7 group-hover:text-primary
+            <i class="i-shopping-bag-3-fill group-hover:text-primary h-7 w-7
               group-hover:scale-110 group-active:scale-125"></i>
             <span
               v-if="delayedTotalItems"
-              class="ui-badge-pill-sm absolute -top-1 -right-1.5"
+              class="ui-badge-pill-sm absolute -right-1.5 -top-1"
             >
               {{ delayedTotalItems }}
             </span>
-          </button>
+          </a>
         </div>
       </div>
       <ShopHeaderMenu
         v-show="!isSticky"
         v-bind="{ inlineMenuTrees }"
-        class="hidden lg:block px-3 2xl:px-8 mt-3"
+        class="mt-3 hidden px-3 lg:block 2xl:px-8"
       />
     </div>
     <Drawer
@@ -135,7 +140,7 @@
         <Suspense>
           <CartSidebar v-if="isCartOpenOnce" @close="isCartOpen = false" />
           <template #fallback>
-            <Skeleton class="pt-16 px-6" is-bold />
+            <Skeleton class="px-6 pt-16" is-bold />
           </template>
         </Suspense>
       </Drawer>
@@ -144,12 +149,6 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  watch,
-  onMounted,
-  defineAsyncComponent,
-} from 'vue';
 import { watchOnce } from '@vueuse/core';
 import { totalItems } from '@@sf/state/shopping-cart';
 import {

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopHeaderMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <nav>
     <ul
-      class="flex justify-between gap-1.5 text-base-700"
+      class="text-base-700 flex justify-between gap-1.5"
       :class="inlineMenuTrees.length < 7 ? 'text-base' : 'text-sm'"
     >
       <li v-for="(categoryTree, i) in inlineMenuTrees" :key="i">
@@ -9,13 +9,13 @@
           v-if="categoryTree.subcategories.length"
           :category-tree="categoryTree"
           :class="[
-            i < 4 ? '[&_.Popover]:translate-x-0 [&_.Popover]:-left-2' : null,
-            i > 3 ? '[&_.Popover]:text-right [&_.Popover]:-right-2' : null,
+            i < 4 ? '[&_.Popover]:-left-2 [&_.Popover]:translate-x-0' : null,
+            i > 3 ? '[&_.Popover]:-right-2 [&_.Popover]:text-right' : null,
           ]"
         >
           <template #button="{ open }">
             <span class="hover:text-primary group">
-              <span class="hidden lg:inline text-secondary-500">
+              <span class="text-secondary-500 hidden lg:inline">
                 <i v-if="categoryTree.slug.includes('confeitar')"
                   class="i-cupcake-line me-1"></i>
                 <i v-else-if="categoryTree.slug.includes('cortadores')"
@@ -30,7 +30,7 @@
                   class="i-drop-line me-1"></i>
               </span>
               <h3
-                class="group-hover:underline inline tracking-tight"
+                class="inline tracking-tight group-hover:underline"
                 :class="[
                   inlineMenuTrees.length < 7 ? 'decoration-2' : null,
                   open ? 'underline' : null,

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopHeaderSubmenu.vue

@@ -1,25 +1,28 @@
 <template>
   <Popover v-slot="{ open }">
-    <PopoverButton class="outline-none">
-      <slot name="button" v-bind="{ open }" />
-    </PopoverButton>
-    <div class="relative">
+    <a :href="`/${categoryTree.slug}`" role="button">
+      <PopoverButton class="outline-none">
+        <slot name="button" v-bind="{ open }" />
+      </PopoverButton>
+    </a>
+    <div class="relative" ref="panel">
       <Fade>
         <PopoverPanel
-          class="Popover absolute z-20 top-3 !transform
-          px-7 py-5 rounded backdrop-blur-md shadow bg-white/80
-          text-base text-base-700"
+          v-slot="{ close }"
+          class="Popover text-base-700 absolute top-3 z-20
+          !transform rounded bg-white/80 px-7 py-5 text-base
+          shadow backdrop-blur-md"
           :class="countMenuCols === 1 ? 'w-auto'
             : countMenuCols === 2 ? `w-screen ${(categoryPicture ? 'max-w-lg' : 'max-w-sm')}`
             : countMenuCols === 3 ? `w-screen ${(categoryPicture ? 'max-w-xl' : 'max-w-md')}`
             : countMenuCols < 6 ? 'w-screen max-w-3xl' : 'w-screen max-w-5xl'"
         >
-          <div class="flex gap-6 w-full">
+          <div class="flex w-full gap-6">
             <ul v-if="subcategoryLinks.length" class="flex-1">
               <li
                 v-for="(subcategory, i) in subcategoryLinks"
                 :key="`link-${i}`"
-                class="text-sm mb-2"
+                class="mb-2 text-sm"
               >
                 <a :href="`/${subcategory.slug}`" class="hover:text-primary">
                   <h3 :class="countMenuCols === 1 ? 'whitespace-nowrap' : null">
@@ -36,7 +39,7 @@
               <a :href="`/${subcategory.slug}`" class="hover:text-primary">
                 <h3>{{ subcategory.name }}</h3>
               </a>
-              <ul class="text-sm text-base-600 mt-1 mb-1.5">
+              <ul class="text-base-600 mb-1.5 mt-1 text-sm">
                 <li
                   v-for="(nestedSubcategory, ii) in subcategory.subcategories"
                   :key="`${i}-${ii}`"
@@ -61,10 +64,11 @@
           </div>
           <a
             :href="`/${categoryTree.slug}`"
-            class="block mt-1 text-xs text-base-600 leading-snug underline"
+            class="text-base-600 mt-1 block text-xs leading-snug underline"
           >
             {{ $t.i19seeAll$1Category.replace('$1', categoryTree.name) }}
           </a>
+          <button ref="close" @click.stop="close" class="hidden"></button>
         </PopoverPanel>
       </Fade>
     </div>
@@ -72,6 +76,7 @@
 </template>
 
 <script setup lang="ts">
+import { onClickOutside } from '@vueuse/core';
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
 import {
   type Props as UseShopHeaderSubmenuProps,
@@ -87,4 +92,7 @@ const {
   subcategoryCols,
   countMenuCols,
 } = useShopHeaderSubmenu(props);
+const panel = ref(null);
+const close = ref<HTMLElement | null>(null);
+onClickOutside(panel, () => close.value?.click());
 </script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopSidenav.vue

@@ -1,6 +1,6 @@
 <template>
-  <aside class="flex flex-col h-full">
-    <nav class="py-4 grow">
+  <aside class="flex h-full flex-col">
+    <nav class="grow py-4">
       <ul class="relative h-full">
         <ShopSidenavCategory
           v-for="(categoryTree, i) in categoryTrees"
@@ -10,12 +10,12 @@
       </ul>
     </nav>
     <footer class="text-base">
-      <div class="flex items-center px-2 py-4 bg-base-100">
-        <AccountLink class="p-2 grow flex items-center gap-3">
-          <i class="i-user-2-line text-4xl text-base-500 m-0"></i>
+      <div class="bg-base-100 flex items-center px-2 py-4">
+        <AccountLink class="flex grow items-center gap-3 p-2">
+          <i class="i-user-2-line text-base-500 m-0 text-4xl"></i>
           <span class="leading-tight">
             {{ `${$t.i19hello} ${customerName || $t.i19visitor}` }}
-            <small class="block lowercase font-semibold text-primary">
+            <small class="text-primary block font-semibold lowercase">
               {{ $t.i19myOrders }}, {{ $t.i19myAccount }}
             </small>
           </span>
@@ -23,15 +23,15 @@
         <button
           v-if="isLogged"
           @click="logout"
-          class="p-2 text-right text-base-800"
+          class="text-base-800 p-2 text-right"
         >
           <span class="text-base-600">{{ $t.i19logout }}</span>
-          <i class="i-align-arrow-left-fill text-lg ml-1"></i>
+          <i class="i-align-arrow-left-fill ml-1 text-lg"></i>
         </button>
       </div>
-      <ul class="flex gap-3 p-4 bg-base-200 text-xl text-base-700">
+      <ul class="bg-base-200 text-base-700 flex gap-3 p-4 text-xl">
         <li v-for="(href, network) in socialNetworks" :key="network">
-          <SocialNetworkLink :network="network" class="p-1 active:text-primary" />
+          <SocialNetworkLink :network="network" class="active:text-primary p-1" />
         </li>
       </ul>
     </footer>
@@ -40,7 +40,6 @@
 
 <script setup lang="ts">
 import type { CategoryTree } from '@@sf/composables/use-shop-header';
-import { onMounted } from 'vue';
 import { socialNetworks } from '@@sf/sf-lib';
 import {
   customerName,

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopSidenavCategory.vue

@@ -1,23 +1,23 @@
 <template>
-  <li class="text-lg text-base-800">
+  <li class="text-base-800 text-lg">
     <details
       v-if="categoryTree.subcategories.length"
-      class="bg-white overflow-y-auto overflow-x-hidden z-10
-      open:absolute open:top-0 open:left-0 open:w-full open:h-full"
+      class="z-10 overflow-y-auto overflow-x-hidden bg-white
+      open:absolute open:left-0 open:top-0 open:h-full open:w-full"
       @toggle="isOpen = !isOpen"
     >
       <summary
-        class="cursor-pointer list-none px-6 py-3 active:bg-base-100 transition-colors"
+        class="active:bg-base-100 cursor-pointer list-none px-6 py-3 transition-colors"
         :class="isOpen ? 'bg-base-100' : null"
       >
         <i :class="!isOpen
           ? 'i-arrow-right-line float-right mb-0 mt-1 text-xl text-base-500'
-          : 'i-arrow-left-line text-lg'"></i>
+          : 'i-arrow-right-line rotate-180 text-lg'"></i>
         <AImg
           v-if="!isOpen && categoryTree.icon"
           :picture="categoryTree.icon"
           :alt="categoryTree.name"
-          class="w-auto h-5 inline mr-3"
+          class="mr-3 inline h-5 w-auto"
         />
         <h3 class="inline" :class="isOpen ? 'ml-4 text-base' : null">
           {{ categoryTree.name }}
@@ -36,7 +36,7 @@
         <li>
           <a
             :href="`/${categoryTree.slug}`"
-            class="block px-6 py-3 text-base underline active:bg-base-200"
+            class="active:bg-base-200 block px-6 py-3 text-base underline"
           >
             {{ $t.i19seeAll$1Category.replace('$1', categoryTree.name) }}
           </a>
@@ -46,13 +46,13 @@
     <a
       v-else
       :href="`/${categoryTree.slug}`"
-      class="block px-6 py-3 active:bg-base-200"
+      class="active:bg-base-200 block px-6 py-3"
     >
       <AImg
         v-if="!isOpen && categoryTree.icon"
         :picture="categoryTree.icon"
         :alt="categoryTree.name"
-        class="w-auto h-5 inline mr-3"
+        class="mr-3 inline h-5 w-auto"
       />
       <h3 class="inline">{{ categoryTree.name }}</h3>
     </a>
@@ -61,7 +61,6 @@
 
 <script setup lang="ts">
 import type { CategoryTree, SubcategoryTree } from '@@sf/composables/use-shop-header';
-import { ref, watch } from 'vue';
 
 export interface Props {
   categoryTree: CategoryTree | SubcategoryTree;

package/ecomplus-stores/barra-doce/functions/ssr/src/components/SkuSelector.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div v-for="(options, gridId) in variationsGrids" :key="gridId">
+      <span class="text-base-700 text-sm font-medium">
+        {{ getGridTitle(gridId) }}:
+        <strong v-if="selectedOptions[gridId]" class="text-base-800">
+          {{ selectedOptions[gridId] }}
+        </strong>
+      </span>
+      <ul v-if="options.length < 7" class="mt-2 flex gap-2">
+        <li v-for="(optionText, i) in options" :key="`${gridId}-${i}`">
+          <button
+            class="ring-secondary/60 rounded border"
+            :class="[
+              selectedOptions[gridId] === optionText
+                ? 'border-secondary ring-2'
+                : null,
+              gridId === 'colors'
+                ? 'h-9 w-9 text-[0]'
+                : 'px-2 py-1',
+              activeVariationsGrids[gridId].includes(optionText)
+                ? 'text-base-800 bg-base-100 border-base-400'
+                : 'text-base-500 bg-base-200 border-base-300'
+            ]"
+            :style="gridId === 'colors' ? getColorOptionBg(optionText) : undefined"
+            @click="selectOption({ optionText, gridId, gridIndex: i })"
+          >
+            {{ optionText }}
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  type Props as UseSkuSelector,
+  useSkuSelector,
+} from '@@sf/composables/use-sku-selector';
+
+export interface Props extends UseSkuSelector {}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['update:variationId']);
+const {
+  variationsGrids,
+  activeVariationsGrids,
+  selectOption,
+  selectedOptions,
+  variationId,
+  getGridTitle,
+  getColorOptionBg,
+} = useSkuSelector(props);
+watch(variationId, (_id) => {
+  emit('update:variationId', _id);
+});
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/layouts/PageFooter.astro

@@ -26,7 +26,9 @@ if (categoriesList?.isActive) {
   } else {
     // Will wait and reuse categories loaded from <PageHeader>
     const { value: categories } = await useSharedData({ field: 'categories' });
-    mainCategories = filterMainCategories(categories);
+    if (categories) {
+      mainCategories = filterMainCategories(categories);
+    }
   }
 }
 if (pagesList?.isActive) {

package/ecomplus-stores/barra-doce/functions/ssr/src/layouts/PageHeader.astro

@@ -23,12 +23,11 @@ const { inlineClientJS } = await useSharedData({
   {pitchBar.slides.length === 1 && <PitchBar {...pitchBar} />}
 </slot>
 <script is:inline set:html={inlineClientJS} />
-<ShopHeader {...shopHeader} client:load>
+<ShopHeader {...shopHeader} client:context>
   <Fragment slot="logo">
     <a href="/" class="inline-block">
       <LogoHeading class="inline-block">
         <Picture
-          slot="logo-picture"
           src={settings.logo}
           alt={settings.name}
           widths={[280, 400]}