cloudcommerce 0.33.0 → 0.33.2

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

@@ -0,0 +1,62 @@
+<template>
+  <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-success-200 [&>*]:to-success-700
+                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>
+</template>
+
+<script setup lang="ts">
+import type { LayoutContent } from '@@sf/content';
+import PaymentMethodFlag from '@@sf/components/PaymentMethodFlag.vue';
+
+export interface Props {
+  stamps?: LayoutContent['footer']['stamps'];
+}
+
+defineProps<Props>();
+</script>

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

@@ -18,15 +18,18 @@
       <template #controls>
         <div
           v-show="slides.length > 1"
-          class="absolute z-10 bottom-5 flex justify-end items-center
-          w-screen right-5 xl:right-auto xl:max-w-screen-xl xl:left-1/2 xl:-ms-[640px]"
+          class="absolute bottom-5 right-5 z-10 flex w-screen
+          items-center justify-end xl:left-1/2 xl:right-auto xl:-ms-[640px] xl:max-w-screen-xl"
         >
-          <div class="relative w-20 h-10 rounded-full
-            bg-white/50 text-primary shadow-sm ring-1 ring-black/5">
-            <CarouselControl class="w-10 h-10 rounded-full hover:bg-primary/10" is-prev>
-              <i class="i-arrow-left-line"></i>
+          <div
+            class="text-primary relative h-10 w-20 rounded-full bg-white/50
+            shadow-sm ring-1 ring-black/5 transition-opacity"
+            :class="isMounted ? 'opacity-100' : 'opacity-20 [&>*]:cursor-wait'"
+          >
+            <CarouselControl class="hover:bg-primary/10 h-10 w-10 rounded-full" is-prev>
+              <i class="i-arrow-right-line rotate-180"></i>
             </CarouselControl>
-            <CarouselControl class="w-10 h-10 rounded-full hover:bg-primary/10">
+            <CarouselControl class="hover:bg-primary/10 h-10 w-10 rounded-full">
               <i class="i-arrow-right-line"></i>
             </CarouselControl>
           </div>
@@ -38,8 +41,6 @@
 
 <script setup lang="ts">
 import type { Props as UseBannerProps } from '@@sf/composables/use-banner';
-import Carousel from '@@sf/components/Carousel.vue';
-import CarouselControl from '@@sf/components/CarouselControl.vue';
 import Banner from '~/components/Banner.vue';
 
 export type Props = {
@@ -48,4 +49,8 @@ export type Props = {
 }
 
 defineProps<Props>();
+const isMounted = ref(false);
+onMounted(() => {
+  isMounted.value = true;
+});
 </script>

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

@@ -0,0 +1,151 @@
+<template>
+  <div class="-mx-4 flex w-screen gap-3 sm:mx-0 sm:w-full md:h-[525px] 2xl:gap-5">
+    <Carousel
+      v-if="pictures.length > 1"
+      axis="y"
+      class="group hidden w-[300px] shrink-0 md:block"
+    >
+      <li
+        v-for="i in Math.ceil(pictures.length / 2)"
+        :key="i"
+        class="grid h-1/3 w-full grid-cols-2 gap-3 px-1 pb-3"
+        :class="i === 1 && 'pt-1'"
+      >
+        <template
+          v-for="index in [1, 2].map(ii => (i - 1) * 2 + (ii - 1))"
+          :key="`${i}-${index}`"
+        >
+          <button
+            v-if="index < pictures.length"
+            class="bg-secondary-100 h-full rounded"
+            @click="activeIndex = index"
+          >
+            <AImg
+              :picture="pictures[index]"
+              class="ring-secondary/10 h-full w-full rounded border-2
+              object-cover opacity-90 transition-colors"
+              :class="index === activeIndex
+                ? 'border-secondary/50 ring-4 cursor-auto'
+                : 'border-transparent hover:border-primary'
+                  + ' hover:ring-4 hover:ring-primary/20'"
+            />
+          </button>
+        </template>
+      </li>
+      <template #controls>
+        <span>
+          <CarouselControl
+            v-if="pictures.length > 6"
+            class="hover:bg-primary-300/60 text-primary
+            !bottom-3 !left-1/2 -ml-5 h-10 w-10
+            rounded-full bg-white/60 text-xl
+            opacity-0 shadow-sm ring-1 ring-black/5
+            group-hover:opacity-90"
+          />
+        </span>
+      </template>
+    </Carousel>
+    <div class="relative aspect-square h-full grow md:aspect-auto">
+      <Carousel
+        as="div"
+        v-model:index="activeIndex"
+        class="text-base-600 [&_i]:i-arrow-right-line mx-auto
+        h-full w-full max-w-[525px] [&>*]:h-full [&_i]:mx-2 [&_i]:text-2xl"
+        :class="isLoadingLightbox && 'opacity-80'"
+        :id="psId"
+      >
+        <ALink
+          v-for="(picture, i) in pictures"
+          :key="`big-${i}`"
+          :href="picture.zoom?.size && picture.zoom.url"
+          :data-pswp-width="getImgSizes(picture.zoom || '').width"
+          :data-pswp-height="getImgSizes(picture.zoom || '').height"
+          target="_blank"
+          rel="noreferrer"
+          class="shrink-0 basis-full"
+          :class="picture.zoom?.size && 'cursor-zoom-in'"
+          v-once
+          @click.prevent="() => picture.zoom?.size && zoom(i)"
+        >
+          <AImg
+            :picture="picture"
+            preferred-size="big"
+            class="h-full w-full rounded object-cover"
+            :fetchpriority="i === 0 ? 'high' : 'low'"
+            :loading="i === 0 ? 'eager' : 'lazy'"
+          />
+        </ALink>
+      </Carousel>
+      <i
+        v-if="isLoadingLightbox"
+        class="i-arrow-path bg-base-200 absolute
+        left-1/2 top-1/2 -ml-7 -mt-7 h-14 w-14 animate-spin"
+        :aria-label="$t.i19loading"
+      ></i>
+      <ul
+        v-if="pictures.length > 1"
+        class="mt-2 flex justify-center gap-1.5 md:hidden"
+      >
+        <li v-for="i in pictures.length" :key="`d-${i}`">
+          <button
+            class="bg-base-700 block h-1.5 w-3 rounded-full"
+            :class="activeIndex !== i - 1 && 'opacity-40'"
+            :aria-label="`${$t.i19picture} ${i}`"
+            @click="activeIndex = i - 1"
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Products } from '@cloudcommerce/api/types';
+import { imgSizes as getImgSizes } from '@ecomplus/utils';
+import { useId } from '@@sf/sf-lib';
+
+export interface Props {
+  pictures: Exclude<Products['pictures'], undefined>;
+}
+
+defineProps<Props>();
+const activeIndex = ref(0);
+const psId = ref('');
+let lightbox: any;
+const isLoadingLightbox = ref(false);
+const zoom = (index: number) => {
+  psId.value = `ps-${useId()}`;
+  if (!lightbox && !isLoadingLightbox.value) {
+    isLoadingLightbox.value = true;
+    const styleId = 'photoswipe-style';
+    Promise.all([
+      // @ts-ignore
+      import('photoswipe/lightbox'),
+      import('photoswipe'),
+      !document.getElementById(styleId) && import('photoswipe/style.css?inline'),
+    ]).then(([
+      { default: PhotoSwipeLightbox },
+      { default: pswpModule },
+      cssImport,
+    ]) => {
+      if (cssImport) {
+        const { default: css } = cssImport;
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = css;
+        document.head.appendChild(style);
+      }
+      lightbox = new PhotoSwipeLightbox({
+        gallery: `#${psId.value} > div`,
+        children: 'a',
+        pswpModule,
+        showAnimationDuration: 300,
+        hideAnimationDuration: 300,
+      });
+      lightbox.init();
+      lightbox.loadAndOpen(index);
+      isLoadingLightbox.value = false;
+    });
+  }
+};
+</script>

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

@@ -0,0 +1,107 @@
+<template>
+  <form
+    class="text-base-800 w-full max-w-sm bg-white p-6 text-base md:p-8"
+    @submit.prevent="() => submitLogin(loginLinkActionUrl)"
+  >
+    <slot name="head" />
+    <p class="text-base-600 mb-4 text-2xl font-light">
+      {{ $t.i19hello }}
+      <span v-if="customerName">{{ customerName }}</span>
+      <span v-else class="lowercase">{{ $t.i19visitor }}</span>
+    </p>
+    <label v-if="isLinkSignIn" for="login-form-email">
+      {{ $t.i19sendLoginLinkByEmail }}
+    </label>
+    <input
+      id="login-form-email"
+      type="email"
+      placeholder="email@mail.com"
+      v-model="email"
+      class="mb-0.5 mt-2 w-full rounded"
+      required
+    />
+    <input
+      v-if="!isLinkSignIn"
+      type="password"
+      :placeholder="$t.i19password"
+      v-model="password"
+      class="mb-0.5 mt-2 w-full rounded lowercase"
+      required
+    />
+    <div class="relative">
+      <div
+        class="transition-opacity"
+        :class="isEmailSentMsg && 'opacity-0 invisible'"
+      >
+        <a
+          v-show="!isSignUp && !isLinkSignInBlocked"
+          href="?password"
+          class="ui-link text-base-500 text-right text-sm lowercase"
+          @click.prevent="isLinkSignIn = !isLinkSignIn"
+        >
+          {{ isLinkSignIn ? $t.i19enterWithPassword : $t.i19iForgotMyPassword }}
+        </a>
+        <button
+          type="submit"
+          :disabled="isSubmitting"
+          class="ui-btn-lg ui-btn-primary mb-2 mt-5 w-full"
+          :class="isSubmitting && 'opacity-50'"
+        >
+          {{ isSignUp ? $t.i19signUp : $t.i19accessMyAccount }}
+        </button>
+      </div>
+      <Fade speed="slow">
+        <p
+          v-if="isEmailSentMsg"
+          class="text-success-800 absolute left-0 top-0 mt-4 font-medium"
+        >
+          <i class="i-check mr-1"></i>
+          {{ $t.i19emailWasSentMsg }}
+        </p>
+      </Fade>
+      <a
+        href="?sign_up"
+        class="ui-btn-lg ui-btn-contrast block w-full text-center"
+        @click.prevent="isSignUp = !isSignUp"
+      >
+        {{ isSignUp ? $t.i19accessMyAccount : $t.i19createAnAccount }}
+      </a>
+    </div>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import useLoginForm from '@@sf/composables/use-login-form';
+import { customerName } from '@@sf/state/customer-session';
+
+export interface Props {
+  loginLinkActionUrl?: string | null;
+}
+
+defineProps<Props>();
+const {
+  isLinkSignIn,
+  isSignUp,
+  email,
+  password,
+  isSubmitting,
+  submitLogin,
+} = useLoginForm();
+const isEmailSentMsg = ref(false);
+const countEmailsSent = ref(0);
+const isLinkSignInBlocked = computed(() => {
+  return countEmailsSent.value > 9;
+});
+watch((isSubmitting), () => {
+  if (!isSubmitting.value && isLinkSignIn.value) {
+    isEmailSentMsg.value = true;
+    countEmailsSent.value += 1;
+  }
+});
+watch([email, isSignUp], () => {
+  isEmailSentMsg.value = false;
+});
+watch(isLinkSignInBlocked, () => {
+  isLinkSignIn.value = false;
+});
+</script>

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

@@ -1,11 +1,11 @@
 <template>
   <div class="bg-base-100 relative z-20">
-    <div class="container lg:w-2/3 mx-auto px-3 py-1">
+    <div class="container mx-auto px-3 py-1 lg:w-2/3">
       <Carousel :autoplay="countValidSlides > 1 ? 7000 : undefined">
         <li
           v-for="(slide, i) in slides"
           :key="i"
-          class="shrink-0 basis-full h-full text-center"
+          class="h-full shrink-0 basis-full text-center"
         >
           <ALink
             :href="slide.href"
@@ -16,17 +16,17 @@
             <span
               v-if="parsedContents[i]"
               v-html="parsedContents[i]"
-              class="prose text-sm text-base-800"
+              class="prose text-base-800 text-sm"
             ></span>
           </ALink>
         </li>
         <template #controls>
           <div
             v-show="countValidSlides > 1"
-            class="text-xl leading-none text-base-400"
+            class="text-base-400 text-xl leading-none"
           >
-            <CarouselControl class="pr-2 bg-base-100 hover:text-base-700" is-prev />
-            <CarouselControl class="pl-2 bg-base-100 hover:text-base-700" />
+            <CarouselControl class="bg-base-100 hover:text-base-700 pr-2" is-prev />
+            <CarouselControl class="bg-base-100 hover:text-base-700 pl-2" />
           </div>
         </template>
       </Carousel>
@@ -39,8 +39,6 @@ import {
   type Props as UsePitchBarProps,
   usePitchBar,
 } from '@@sf/composables/use-pitch-bar';
-import Carousel from '@@sf/components/Carousel.vue';
-import CarouselControl from '@@sf/components/CarouselControl.vue';
 
 export interface Props extends UsePitchBarProps {}
 

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="text-base-600
-      [&>div]:[font-size:90%] [&_small]:[font-size:92%] [&_small]:lowercase"
+      [&>div]:[font-size:90%] [&_small]:lowercase [&_small]:[font-size:92%]"
     :class="isBig ? 'text-lg' : null"
   >
     <span v-if="comparePrice" class="text-base-500 mr-1 [font-size:87%]">
@@ -14,8 +14,8 @@
       </small>
     </span>
     <strong
-      class="inline-block text-base-800"
-      :class="isBig ? 'text-5xl block' : null"
+      class="text-base-800"
+      :class="isBig ? 'text-4xl block' : 'inline-block'"
     >
       <small v-if="hasVariedPrices">
         {{ `${$t.i19asOf} ` }}

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

@@ -2,49 +2,50 @@
   <article
     ref="card"
     :data-sku="product.sku"
-    class="relative h-full max-w-[350px] mx-auto py-3 group"
+    class="group relative mx-auto h-full max-w-[350px] py-3"
   >
     <ALink
       :href="link"
-      class="flex flex-col h-full rounded overflow-hidden
-      group-hover:shadow group-hover:ring-1 ring-black/5"
+      class="flex h-full flex-col overflow-hidden rounded
+      ring-black/5 group-hover:shadow group-hover:ring-1"
     >
       <div class="aspect-square p-2
-        motion-safe:group-hover:scale-110 transition-transform">
-        <div class="relative w-full h-full bg-white rounded overflow-hidden
+        transition-transform motion-safe:group-hover:scale-110">
+        <div class="relative h-full w-full overflow-hidden rounded bg-white
           group-hover:rounded-none">
           <span v-if="images?.length" class="text-xs text-opacity-70">
             <AImg
               :picture="images[0]"
               :alt="title"
-              class="absolute top-0 left-0 block w-full h-full object-cover"
+              class="absolute left-0 top-0 block h-full w-full object-cover"
             />
             <AImg
               v-if="images[1] && wasHoveredOnce"
               :picture="images[1]"
               :alt="title"
-              class="absolute top-0 left-0 block w-full h-full object-cover
-              opacity-0 group-hover:opacity-100 transition-opacity
-              motion-safe:duration-300 text-transparent z-10"
+              class="absolute left-0 top-0 z-10 block h-full w-full
+              object-cover text-transparent opacity-0
+              transition-opacity group-hover:opacity-100 motion-safe:duration-300"
             />
           </span>
           <div
             v-else
-            class="w-full h-full bg-gradient-to-br from-base-50/20 to-base-100"
+            class="from-base-50/20 to-base-100 h-full w-full bg-gradient-to-br"
           />
         </div>
       </div>
       <span
         v-if="discountPercentage"
-        class=":uno: absolute top-9 right-2
-        group-hover:scale-110 group-hover:translate-x-2 transition-transform
-        bg-secondary/70 text-on-secondary text-xs
-        py-0.5 pr-1.5 pl-3 [clip-path:polygon(20%_0,100%_0,100%_100%,0_100%)]"
+        class=":uno: bg-secondary/70 text-on-secondary absolute
+        right-2 top-9 py-0.5
+        pl-3 pr-1.5 text-xs
+        transition-transform [clip-path:polygon(20%_0,100%_0,100%_100%,0_100%)]
+        group-hover:translate-x-2 group-hover:scale-110"
       >
         -<strong>{{ discountPercentage }}</strong>%
       </span>
-      <div class="relative flex flex-col grow justify-start p-4
-        group-hover:backdrop-blur-md bg-white/40 z-10">
+      <div class="relative z-10 flex grow flex-col justify-start
+        bg-white/40 p-4 group-hover:backdrop-blur-md">
         <div class="pb-2">
           <div v-if="isActive">
             <Prices :product="product" />
@@ -55,19 +56,19 @@
         </div>
         <component
           :is="headingTag"
-          class="ui-link no-underline line-clamp-2 text-sm"
+          class="ui-link line-clamp-2 text-sm no-underline"
           :class="[
             isActive ? 'text-base-700' : 'text-base-500',
-            link ? 'group-hover:underline group-hover:text-primary' : null,
+            link ? 'group-hover:text-primary group-hover:underline' : null,
           ]"
         >
           {{ title }}
         </component>
         <button
           v-if="isActive && !hasVariations"
-          class="absolute -top-12 left-1/2 -ml-7 w-14 h-14 lg:-top-13 lg:left-4 lg:ml-0
-          primary opacity-75 hover:opacity-100
-          rounded-full text-3xl leading-none p-2 z-10"
+          class="lg:-top-13 primary absolute -top-12 left-1/2 z-10 -ml-7 h-14 w-14
+          rounded-full p-2 text-3xl
+          leading-none opacity-75 hover:opacity-100 lg:left-4 lg:ml-0"
           @click.prevent="addProductToCart(product)"
           :aria-label="$t.i19addToCart"
         >
@@ -79,7 +80,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
 import { watchOnce, useElementHover } from '@vueuse/core';
 import { addProductToCart } from '@@sf/state/shopping-cart';
 import {

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

@@ -0,0 +1,122 @@
+<template>
+  <section class="ui-section relative grid grid-cols-1 items-start
+    gap-5 md:gap-4 lg:grid-cols-4 2xl:gap-6">
+    <div class="w-full lg:col-span-3">
+      <template v-if="product.pictures?.length">
+        <ImagesGallery :pictures="product.pictures" />
+      </template>
+    </div>
+    <div class="top-0 py-4 lg:sticky">
+      <h1 class="ui-text-brand text-base-700 text-xl">
+        {{ title }}
+      </h1>
+      <div v-if="isActive" class="mt-5">
+        <Prices :product="product" is-big is-literal />
+        <SkuSelector
+          v-if="product.variations"
+          :variations="product.variations"
+          v-model:variation-id="variationId"
+          class="my-4"
+        />
+        <Fade slide="down">
+          <div v-if="hasSkuSelectionAlert" class="ui-alert inline-block">
+            {{ $t.i19selectVariationMsg }}
+            <i class="i-arrow-right-line ml-1 -rotate-90"></i>
+          </div>
+        </Fade>
+        <div class="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2
+          overflow-hidden md:flex-nowrap lg:mt-4 lg:flex-wrap">
+          <QuantitySelector
+            v-model="quantity"
+            :min="product.min_quantity"
+            :max="product.quantity"
+            class="border-base-100 rounded md:mr-5
+            lg:mb-2 lg:mr-auto lg:border-2"
+          />
+          <CheckoutLink
+            class="ui-btn-lg ui-btn-primary grow text-center"
+            to="checkout"
+            :cart-item="{
+              product_id: product._id,
+              quantity,
+              variation_id: variationId || undefined,
+            }"
+            :data-tooltip="!isSkuSelected ? $t.i19chooseProductDetailsToBuy : null"
+            @click="checkVariation"
+          >
+            <i class="i-chevron-double-right mr-1"></i>
+            {{ $t.i19buy }}
+          </CheckoutLink>
+          <button
+            class="ui-btn-lg ui-btn-contrast grow"
+            @click.prevent="addToCart"
+            :data-tooltip="!isSkuSelected ? $t.i19chooseProductDetailsToBuy : null"
+          >
+            {{ $t.i19addToCart }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="w-full lg:col-span-3">
+      <slot name="description" />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { ResourceId, Products } from '@cloudcommerce/api/types';
+import { useUrlSearchParams } from '@vueuse/core';
+import { addProductToCart } from '@@sf/state/shopping-cart';
+import { useProductCard } from '@@sf/composables/use-product-card';
+import CheckoutLink from '@@sf/components/CheckoutLink.vue';
+import QuantitySelector from '@@sf/components/QuantitySelector.vue';
+import Prices from '~/components/Prices.vue';
+import ImagesGallery from '~/components/ImagesGallery.vue';
+import SkuSelector from '~/components/SkuSelector.vue';
+
+export interface Props {
+  product?: Products;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  product: () => globalThis.$storefront.apiContext?.doc as Products,
+});
+const {
+  product,
+  title,
+  isActive,
+} = useProductCard<Products>(props);
+const quantity = ref(product.min_quantity || 1);
+const params = useUrlSearchParams('history');
+const hasSkuSelectionAlert = ref(false);
+const variationId = ref<ResourceId | null>(null);
+watch(variationId, (_variationId) => {
+  if (_variationId) {
+    params.var = _variationId;
+    hasSkuSelectionAlert.value = false;
+  }
+});
+onMounted(() => {
+  watch(params, ({ var: variation }) => {
+    if (typeof variation === 'string' && variation) {
+      variationId.value = variation as ResourceId;
+    }
+  }, { immediate: true });
+});
+const isSkuSelected = computed(() => {
+  return Boolean(!product.variations?.length || variationId.value);
+});
+const checkVariation = (ev?: Event) => {
+  if (!isSkuSelected.value) {
+    if (ev) ev.preventDefault();
+    hasSkuSelectionAlert.value = true;
+  } else {
+    hasSkuSelectionAlert.value = false;
+  }
+  return !hasSkuSelectionAlert.value;
+};
+const addToCart = () => {
+  if (!checkVariation()) return;
+  addProductToCart(product, variationId.value ? variationId.value : undefined);
+};
+</script>