@shopware/cms-base-layer 0.0.0-canary-20250116171244

package/components/SwListingProductPrice.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useCmsTranslations, useProductPrice } from "@shopware/composables";
+import { defu } from "defu";
+import { toRefs } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  product: Schemas["Product"];
+}>();
+
+type Translations = {
+  listing: {
+    variantsFrom: string;
+    previously: string;
+    to: string;
+  };
+};
+
+let translations: Translations = {
+  listing: {
+    variantsFrom: "variants from",
+    previously: "previously",
+    from: "from",
+    to: "to",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const { product } = toRefs(props);
+
+const {
+  price,
+  unitPrice,
+  displayFromVariants,
+  displayFrom,
+  isListPrice,
+  regulationPrice,
+} = useProductPrice(product);
+</script>
+
+<template>
+  <div :id="product.id">
+    <SwSharedPrice
+      v-if="isListPrice"
+      class="text-l text-gray-900 basis-2/6 justify-end line-through"
+      :value="price?.listPrice?.price"
+    />
+    <template v-if="!isListPrice">
+      <div class="h-6"><!-- placeholder --></div>
+    </template>
+    <SwSharedPrice
+      v-if="displayFromVariants"
+      class="text-xl text-gray-900 basis-2/6 justify-end"
+      :value="displayFromVariants"
+    >
+      <template #beforePrice
+        ><span v-if="displayFromVariants" class="text-sm">{{
+          translations.listing.variantsFrom
+        }}</span></template
+      >
+    </SwSharedPrice>
+    <SwSharedPrice
+      class="text-gray-900 basis-2/6"
+      :class="{
+        'text-red-600 font-bold': isListPrice,
+        'justify-end text-xl':
+          regulationPrice || !regulationPrice || !displayFromVariants,
+      }"
+      :value="unitPrice"
+    >
+      <template #beforePrice
+        ><span v-if="displayFrom || displayFromVariants" class="text-sm">{{
+          translations.listing.from
+        }}</span></template
+      >
+    </SwSharedPrice>
+    <template v-if="regulationPrice">
+      <div class="flex gap-2 justify-end text-gray-500 text-3.5 mb-2">
+        {{ translations.listing.previously }}
+        <SharedPrice :value="regulationPrice" />
+      </div>
+    </template>
+    <template v-if="!regulationPrice">
+      <div class="h-7"><!-- placeholder --></div>
+    </template>
+  </div>
+</template>

package/components/SwMedia3D.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { OrbitControls, useGLTF } from "@tresjs/cientos";
+import { TresCanvas } from "@tresjs/core";
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from "three";
+
+const props = defineProps<{
+  src: string;
+}>();
+
+const gl = {
+  clearColor: "#FFF",
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+  windowSize: false,
+};
+
+const { scene: model } = await useGLTF(props.src);
+</script>
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :args="[75, 1, 0.1, 2000]"
+      :position="[0, 0, 500]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <primitive :object="model" />
+    <TresDirectionalLight :position="[3, 3, 3]" :intensity="1" />
+    <TresAmbientLight :intensity="2" />
+  </TresCanvas>
+</template>

package/components/SwNewsletterForm.vue

@@ -0,0 +1,347 @@
+<script setup lang="ts">
+import { ApiClientError } from "@shopware/api-client";
+import type { ApiError } from "@shopware/api-client";
+import type { CmsElementForm } from "@shopware/composables";
+import { useCmsTranslations } from "@shopware/composables";
+import { useVuelidate } from "@vuelidate/core";
+import type { ValidationRuleWithoutParams } from "@vuelidate/core";
+import { email, required } from "@vuelidate/validators";
+import { defu } from "defu";
+import { computed, reactive, ref } from "vue";
+import { useCmsElementConfig, useNewsletter, useSalutations } from "#imports";
+
+const props = defineProps<{
+  content: CmsElementForm;
+}>();
+
+type Translations = {
+  form: {
+    subscribeLabel: string;
+    unsubscribeLabel: string;
+    action: string;
+    email: string;
+    emailPlaceholder: string;
+    salutation: string;
+    salutationPlaceholder: string;
+    firstName: string;
+    firstNamePlaceholder: string;
+    lastName: string;
+    lastNamePlaceholder: string;
+    privacy: string;
+    privacyLabel: string;
+    submit: string;
+    newsletterBenefits: string;
+  };
+};
+
+let translations: Translations = {
+  form: {
+    subscribeLabel: "Subscribe to newsletter",
+    unsubscribeLabel: "Unsubscribe from newsletter",
+    action: "Action",
+    email: "Email address",
+    emailPlaceholder: "Enter email address...",
+    salutation: "Salutation",
+    salutationPlaceholder: "Enter salutation...",
+    firstName: "First name",
+    firstNamePlaceholder: "Enter first name...",
+    lastName: "Last name",
+    lastNamePlaceholder: "Enter last name...",
+    privacy: "Privacy",
+    privacyLabel: "I have read the data protection information.",
+    submit: "Submit",
+    newsletterBenefits:
+      "Be aware of upcoming sales and events.Receive gifts and special offers!",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const loading = ref<boolean>();
+const formSent = ref<boolean>(false);
+const errorMessages = ref<ApiError[]>([]);
+const subscriptionOptions: {
+  label: string;
+  value: "subscribe" | "unsubscribe";
+}[] = [
+  {
+    label: translations.form.subscribeLabel,
+    value: "subscribe",
+  },
+  {
+    label: translations.form.unsubscribeLabel,
+    value: "unsubscribe",
+  },
+];
+const { getSalutations } = useSalutations();
+const { getConfigValue } = useCmsElementConfig(props.content);
+const { newsletterSubscribe, newsletterUnsubscribe } = useNewsletter();
+
+const getFormTitle = computed(() => getConfigValue("title"));
+const state = reactive({
+  option: subscriptionOptions[0].value,
+  salutationId: "",
+  firstName: "",
+  lastName: "",
+  email: "",
+  checkbox: false,
+});
+
+type Rules = {
+  email: {
+    required: ValidationRuleWithoutParams;
+    email: ValidationRuleWithoutParams;
+  };
+  checkbox: {
+    required: ValidationRuleWithoutParams;
+    isTrue: (value: boolean) => boolean;
+  };
+  firstName: {
+    required: ValidationRuleWithoutParams;
+    minLength: number;
+  };
+  lastName: {
+    required: ValidationRuleWithoutParams;
+    minLength: number;
+  };
+  salutationId: {
+    required: ValidationRuleWithoutParams;
+  };
+};
+const rules = computed(() => {
+  let temp: Partial<Rules> = {
+    email: {
+      required,
+      email,
+    },
+    checkbox: {
+      required,
+      isTrue: (value: boolean) => value === true,
+    },
+  };
+  if (state.option === "subscribe") {
+    temp = {
+      ...temp,
+      firstName: {
+        required,
+        minLength: 3,
+      },
+      lastName: {
+        required,
+        minLength: 3,
+      },
+      salutationId: {
+        required,
+      },
+    };
+  }
+  return temp;
+});
+
+const $v = useVuelidate(rules, state);
+const invokeSubmit = async () => {
+  $v.value.$touch();
+  const valid = await $v.value.$validate();
+  if (valid) {
+    loading.value = true;
+    try {
+      if (state.option === "subscribe") {
+        await newsletterSubscribe({
+          ...state,
+        });
+      } else {
+        await newsletterUnsubscribe(state.email);
+      }
+      formSent.value = true;
+    } catch (e) {
+      if (e instanceof ApiClientError) {
+        errorMessages.value = e.details.errors;
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+};
+</script>
+<template>
+  <form class="w-full relative" @submit.prevent="invokeSubmit">
+    <div
+      v-if="loading"
+      class="absolute inset-0 flex items-center justify-center z-10 bg-white/50"
+    >
+      <div
+        class="h-15 w-15 i-carbon-progress-bar-round animate-spin c-gray-500"
+      />
+    </div>
+    <h3 class="pb-3 mb-10 border-b border-gray-300">
+      {{
+        getFormTitle
+          ? getFormTitle
+          : state.option === "subscribe"
+            ? translations.form.subscribeLabel
+            : translations.form.unsubscribeLabel
+      }}
+    </h3>
+    <template v-if="!formSent">
+      <div class="grid grid-cols-12 gap-5">
+        <div class="col-span-12">
+          <label for="option">{{ translations.form.action }} *</label>
+          <select
+            id="option"
+            v-model="state.option"
+            name="option"
+            class="appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+          >
+            <option
+              v-for="subscription in subscriptionOptions"
+              :key="subscription.value"
+              :value="subscription.value"
+            >
+              {{ subscription.label }}
+            </option>
+          </select>
+        </div>
+        <div class="col-span-12">
+          <label for="email-address">{{ translations.form.email }} *</label>
+          <input
+            id="email-address"
+            v-model="state.email"
+            name="email"
+            type="email"
+            autocomplete="email"
+            :class="[
+              $v.email?.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :placeholder="translations.form.emailPlaceholder"
+            @blur="$v.email?.$touch()"
+          />
+          <span
+            v-if="$v.email?.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.email?.$errors[0].$message }}
+          </span>
+        </div>
+        <div v-if="state.option === 'subscribe'" class="col-span-4">
+          <label for="salutation">{{ translations.form.salutation }} *</label>
+          <select
+            id="salutation"
+            v-model="state.salutationId"
+            name="salutation"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :class="[
+              $v.salutationId?.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            @blur="$v.salutationId?.$touch()"
+          >
+            <option disabled selected value="">
+              {{ translations.form.salutationPlaceholder }}
+            </option>
+            <option
+              v-for="salutation in getSalutations"
+              :key="salutation.id"
+              :value="salutation.id"
+            >
+              {{ salutation.displayName }}
+            </option>
+          </select>
+          <span
+            v-if="$v.salutationId?.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.salutationId?.$errors[0].$message }}
+          </span>
+        </div>
+        <div v-if="state.option === 'subscribe'" class="col-span-4">
+          <label for="first-name">{{ translations.form.firstName }} *</label>
+          <input
+            id="first-name"
+            v-model="state.firstName"
+            name="first-name"
+            type="text"
+            autocomplete="given-name"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :class="[
+              $v.firstName?.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            :placeholder="translations.form.firstNamePlaceholder"
+            @blur="$v.firstName?.$touch()"
+          />
+          <span
+            v-if="$v.firstName?.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.firstName?.$errors[0].$message }}
+          </span>
+        </div>
+        <div v-if="state.option === 'subscribe'" class="col-span-4">
+          <label for="last-name">{{ translations.form.lastName }} *</label>
+          <input
+            id="last-name"
+            v-model="state.lastName"
+            name="last-name"
+            type="text"
+            autocomplete="family-name"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            :class="[
+              $v.lastName?.$error
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-gray-300 focus:border-indigo-500',
+            ]"
+            :placeholder="translations.form.lastNamePlaceholder"
+            @blur="$v.lastName?.$touch()"
+          />
+          <span
+            v-if="$v.lastName?.$error"
+            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
+          >
+            {{ $v.lastName?.$errors[0].$message }}
+          </span>
+        </div>
+        <div class="col-span-12">
+          <label>{{ translations.form.privacy }} *</label>
+          <div class="flex gap-3 items-start">
+            <input
+              id="privacy"
+              v-model="state.checkbox"
+              name="privacy"
+              type="checkbox"
+              class="mt-1 focus:ring-indigo-500 h-4 w-4 border text-indigo-600 rounded"
+              :class="[
+                $v.checkbox?.$error ? 'border-red-600' : 'border-gray-300',
+              ]"
+            />
+            <div>
+              <label
+                :class="[$v.checkbox?.$error ? 'text-red-600' : '']"
+                for="privacy"
+              >
+                {{ translations.form.privacyLabel }}
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-end mt-10">
+        <button
+          class="group relative flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-75"
+          type="submit"
+        >
+          {{ translations.form.submit }}
+        </button>
+      </div>
+    </template>
+    <template v-else>
+      <p class="py-10 text-lg text-center">
+        {{ translations.form.newsletterBenefits }}
+      </p>
+    </template>
+  </form>
+</template>

package/components/SwPagination.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { useCmsTranslations } from "@shopware/composables";
+import { defu } from "defu";
+
+defineProps<{
+  total: number;
+  current: number;
+}>();
+
+type Translations = {
+  listing: {
+    previous: string;
+    next: string;
+  };
+};
+
+let translations: Translations = {
+  listing: {
+    previous: "Previous",
+    next: "Next",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+defineEmits<(e: "changePage", page: number) => void>();
+</script>
+<template>
+  <nav
+    class="relative z-0 inline-flex rounded-md shadow-sm space-x-px"
+    aria-label="Pagination"
+  >
+    <button
+      v-if="current - 1 >= 2"
+      class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-secondary-300 bg-white text-sm font-medium text-secondary-500 hover:bg-secondary-50"
+      @click="$emit('changePage', current - 1)"
+    >
+      <span class="sr-only">{{ translations.listing.previous }}</span>
+      <!-- Heroicon name: solid/chevron-left -->
+      <div class="w-5 h-5 i-carbon-chevron-left" />
+    </button>
+    <button
+      v-if="current > 2"
+      class="bg-white border-secondary-300 text-secondary-500 hover:bg-secondary-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+      @click="$emit('changePage', 1)"
+    >
+      <span class="sr-only">Page </span>1
+    </button>
+    <span
+      v-if="current - 1 > 2"
+      class="relative inline-flex items-center px-4 py-2 border border-secondary-300 bg-white text-sm font-medium text-secondary-700"
+    >
+      ...
+    </span>
+    <button
+      v-if="current > 1"
+      class="bg-white border-secondary-300 text-secondary-500 hover:bg-secondary-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+      :class="[current == 2 ? 'rounded-l-md border border-secondary-300' : '']"
+      @click="$emit('changePage', current - 1)"
+    >
+      <span class="sr-only">Page </span>{{ current - 1 }}
+    </button>
+    <button
+      aria-current="page"
+      class="bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+      :class="[
+        current - 1 >= 1 ? '' : 'rounded-l-md border border-secondary-300',
+        total == current ? 'rounded-r-md border border-secondary-300' : '',
+      ]"
+    >
+      <span class="sr-only">Page </span>{{ current }}
+    </button>
+    <button
+      v-if="current < total"
+      class="bg-white border-secondary-300 text-secondary-500 hover:bg-secondary-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+      :class="[
+        total == current + 1 ? 'rounded-r-md border border-secondary-300' : '',
+      ]"
+      @click="$emit('changePage', current + 1)"
+    >
+      <span class="sr-only">Page </span>{{ current + 1 }}
+    </button>
+    <span
+      v-if="total - current > 2"
+      class="relative inline-flex items-center px-4 py-2 border border-secondary-300 bg-white text-sm font-medium text-secondary-700"
+    >
+      ...
+    </span>
+    <button
+      v-if="total - current > 1"
+      class="bg-white border-secondary-300 text-secondary-500 hover:bg-secondary-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+      @click="$emit('changePage', total)"
+    >
+      {{ total }}
+    </button>
+    <button
+      v-if="total > current + 1"
+      class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-secondary-300 bg-white text-sm font-medium text-secondary-500 hover:bg-secondary-50"
+      @click="$emit('changePage', current + 1)"
+    >
+      <span class="sr-only">{{ translations.listing.next }}</span>
+      <!-- Heroicon name: solid/chevron-right -->
+      <div class="w-5 h-5 i-carbon-chevron-right" />
+    </button>
+  </nav>
+</template>

package/components/SwProductAddToCart.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { useCmsTranslations } from "@shopware/composables";
+import { getCmsTranslate } from "@shopware/helpers";
+import { defu } from "defu";
+import { toRefs } from "vue";
+import {
+  useAddToCart,
+  useCartErrorParamsResolver,
+  useCartNotification,
+  useNotifications,
+} from "#imports";
+import type { Schemas } from "#shopware";
+
+const { pushSuccess, pushError } = useNotifications();
+const { getErrorsCodes } = useCartNotification();
+const { resolveCartError } = useCartErrorParamsResolver();
+const props = defineProps<{
+  product: Schemas["Product"];
+}>();
+
+type Translations = {
+  product: {
+    addedToCart: string;
+    qty: string;
+    addToCart: string;
+  };
+  errors: {
+    [key: string]: string;
+  };
+};
+
+let translations: Translations = {
+  product: {
+    addedToCart: "has been added to cart.",
+    qty: "Qty",
+    addToCart: "Add to cart",
+  },
+  errors: {
+    "product-stock-reached":
+      "The product {name} is only available {quantity} times",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const { product } = toRefs(props);
+const { addToCart, quantity } = useAddToCart(product);
+
+const addToCartProxy = async () => {
+  await addToCart();
+  const errors = getErrorsCodes();
+  for (const element of errors) {
+    const { messageKey, params } = resolveCartError(element);
+    pushError(getCmsTranslate(translations.errors[messageKey], params));
+  }
+
+  if (!errors.length)
+    pushSuccess(
+      `${props.product?.translated.name} ${translations.product.addedToCart}`,
+    );
+};
+</script>
+
+<template>
+  <div class="flex flex-row mt-10">
+    <div class="basis-1/4 relative -top-6">
+      <label for="qty" class="text-sm">{{ translations.product.qty }}</label>
+      <input
+        id="qty"
+        v-model="quantity"
+        type="number"
+        :min="product.minPurchase || 1"
+        :max="product.calculatedMaxPurchase"
+        :step="product.purchaseSteps || 1"
+        class="border rounded-md py-2 px-4 border-solid border-1 border-cyan-600 w-full mt-4"
+        data-testid="product-quantity"
+      />
+    </div>
+    <div class="basis-3/4 ml-4">
+      <button
+        :disabled="!product.available"
+        class="py-2 px-6 w-full mt-4 bg-gradient-to-r from-cyan-500 to-blue-500 transition ease-in-out hover:bg-gradient-to-l duration-300 cursor-pointer border border-transparent rounded-md flex items-center justify-center text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        :class="{
+          'opacity-50 cursor-not-allowed': !product.available,
+        }"
+        data-testid="add-to-cart-button"
+        @click="addToCartProxy"
+      >
+        🛍 {{ translations.product.addToCart }}
+      </button>
+    </div>
+  </div>
+</template>