feat(vue-demo-store): customized product example

.changeset/tough-months-breathe.md

@@ -0,0 +1,6 @@
+---
+"vue-demo-store": patch
+"docs": patch
+---
+
+Compatibility with Custom Products extension

apps/docs/.vitepress/config.ts

@@ -213,6 +213,10 @@ export const sidebar = [
             link: "/resources/integrations/multi-cms",
           },
           { text: "Strapi", link: "/resources/integrations/strapi/" },
+          {
+            text: "Custom Products extension",
+            link: "/resources/integrations/custom-products",
+          },
         ],
       },
     ],

apps/docs/src/resources/integrations/custom-products.md

@@ -0,0 +1,106 @@
+---
+head:
+  - - meta
+    - name: og:title
+      content: "Integrations: Custom Products - Shopware Frontends"
+  - - meta
+    - name: og:description
+      content: "Example of integration with Custom Products extension"
+  - - meta
+    - name: og:image
+      content: "https://frontends-og-image.vercel.app/Integration:%20**Custom%20Products**?fontSize=100px"
+---
+
+# Custom Products extension
+
+The example explains how **Custom Products** feature is implemented in `vue-demo-store` template (already done), but also can be used as a guide how to deal with the process in any project.
+
+:::warning Custom Products for Shopware 6 is an extension that is part of the Shopware Rise plan.
+[Read more](https://docs.shopware.com/en/shopware-6-en/extensions/customproducts).
+:::
+
+## Logic: Composable function
+
+See [the source code](https://github.com/shopware/frontends/blob/main/templates/vue-demo-store/composables/useProductCustomizedProductConfigurator.ts) of `useProductCustomizedProductConfigurator` composable function.
+
+The composable is a main place to keep the logic related to _custom product_ features:
+
+- adds TypeScript types
+- stores the state
+- extracts the custom product's specific data
+- exposes method for adding to cart
+- serializes the state to be in a correct format for the request's payload (adding to cart)
+
+### Example of usage:
+
+:::warning
+Works only if the `useProduct` is fulfilled and the product data is known. Typically on Product Details Page, when the product context is provided.
+
+Visit the [useProduct](../../packages/composables/useProduct) reference to see more details.
+:::
+
+```ts
+// useProductCustomizedProductConfigurator is autoimported
+// in vue-demo-store template as it's located in ~/composables
+const {
+  isActive, // indicates whether product is empowered by Custom Products extension and active
+  customizedProduct, // returns the custom product's template data
+  state, // state to be used in option selector / forms
+  addToCart, // triggers add to cart action (refreshCart() action invoked afterwards)
+  handleFileUpload, // uploads an image, then gets mediaId from API and assigns it to the state
+} = useProductCustomizedProductConfigurator();
+```
+
+## Presentation: Vue component
+
+See [the source code](https://github.com/shopware/frontends/blob/main/templates/vue-demo-store/components/product/ProductCustomizedProductConfigurator.vue) of the `ProductCustomizedProductConfigurator` Vue component.
+
+The component is responsible for:
+
+- Displaying product options in any type: text field, image upload, select, color select, image select (this one has to be fixed in the core to get the URL's of the images)
+- Showing corresponding additional price and currency of an option
+
+## Implementation
+
+Add the mentioned component in a template. For instance in `<ProductStatic/>` for templates that not come from CMS:
+
+```html{9}
+<!-- part of templates/vue-demo-store/components/product/ProductStatic.vue -->
+<!-- Options -->
+<div class="mt-4 lg:mt-0 lg:row-span-3">
+  <h2 class="sr-only">Product information</h2>
+  <div class="product-variants mt-10">
+    <ProductPrice :product="product" />
+    <ProductUnits :product="product" class="text-sm" />
+    <ProductVariantConfigurator @change="handleVariantChange" />
+    <ProductCustomizedProductConfigurator /> <!-- ADDED -->
+    <ProductAddToCart :product="product" />
+  </div>
+</div>
+```
+
+Overwrite a logic in `<ProductAddToCart/>` (or any other responsible for adding a product to cart in your template):
+
+```ts{3-6,9-10}
+// part of templates/vue-demo-store/components/product/ProductAddToCart.vue;
+// the <script setup lang="ts"> section
+const {
+  addToCart: customizedProductAddToCart,
+  isActive: isCustomizedProductActive,
+} = useProductCustomizedProductConfigurator();
+
+const addToCartProxy = async () => {
+  if (isCustomizedProductActive.value) {
+    await customizedProductAddToCart();
+  } else {
+    await addToCart();
+  }
+...
+```
+
+Used composable function allows to use `addToCart()` method and `isActive` computed property. Both are described in "Example of usage" chapter above.
+
+There was a condition added to use a different method to add to cart a product if the product is enhanced by Custom Product template ([how to set it up](https://docs.shopware.com/en/shopware-6-en/extensions/customproducts)):
+
+- if the product has a Custom Product template, then use `customizedProductAddToCart()` method.
+- otherwise, don't change the adding to cart behavior and use the default one

apps/docs/src/resources/integrations/index.md

@@ -26,3 +26,7 @@ Streamline your operations and enhance your user experience with these comprehen
 ## Payments
 
 <PageRef title="Paypal Express" sub="Custom payment flow based on PayPal Express Checkout " page="../../getting-started/e-commerce/custom-payment.html" />
+
+## Shopware Extensions
+
+<PageRef title="Custom Products" sub="Example of integration with Custom Products extension" page="./custom-products" />

packages/composables/src/useCart.ts

@@ -189,9 +189,7 @@ export function useCartFunction(): UseCartReturn {
   const count = computed(() => {
     return cartItems.value.reduce(
       (accumulator: number, lineItem: LineItem) =>
-        lineItem.type === "product"
-          ? lineItem.quantity + accumulator
-          : accumulator,
+        lineItem.good === true ? lineItem.quantity + accumulator : accumulator,
       0,
     );
   });

packages/composables/src/useCartItem.ts

@@ -46,6 +46,10 @@ export type UseCartItemReturn = {
    * Determines if the current item is a promotion
    */
   isPromotion: ComputedRef<boolean>;
+  /**
+   * Determines if the current item can be removed from cart
+   */
+  isRemovable: ComputedRef<boolean>;
   /**
    * Stock information for the current item
    */
@@ -115,6 +119,8 @@ export function useCartItem(cartItem: Ref<LineItem>): UseCartItemReturn {
 
   const isPromotion = computed(() => cartItem.value.type === "promotion");
 
+  const isRemovable = computed(() => cartItem.value.removable);
+
   async function removeItem() {
     const newCart = await removeCartItem(cartItem.value.id, apiInstance);
     await refreshCart(newCart);
@@ -174,5 +180,6 @@ export function useCartItem(cartItem: Ref<LineItem>): UseCartItemReturn {
     itemImageThumbnailUrl,
     isProduct,
     isPromotion,
+    isRemovable,
   };
 }

packages/types/shopware-6-client/models/content/product/Product.d.ts

@@ -87,7 +87,7 @@ export type Product = {
   displayGroup: string;
   downloads: any;
   ean: string | null;
-  extensions: [];
+  extensions: unknown;
   height: number | null;
   id: string;
   isCloseout: boolean | null;

templates/vue-demo-store/components/checkout/CheckoutCartItem.vue

@@ -26,6 +26,7 @@ const {
   itemTotalPrice,
   itemQuantity,
   isPromotion,
+  isRemovable,
   changeItemQuantity,
 } = useCartItem(cartItem);
 
@@ -122,7 +123,7 @@ const removeCartItem = async () => {
       />
       <div class="flex">
         <button
-          v-if="!isPromotion"
+          v-if="!isPromotion && isRemovable"
           type="button"
           class="font-medium text-brand-dark bg-transparent"
           :class="{ 'text-gray-500': isLoading }"

templates/vue-demo-store/components/product/ProductAddToCart.vue

@@ -9,9 +9,17 @@ const { product } = toRefs(props);
 const { getErrorsCodes } = useCartNotification();
 const { t } = useI18n();
 const { addToCart, quantity } = useAddToCart(product);
+const {
+  addToCart: customizedProductAddToCart,
+  isActive: isCustomizedProductActive,
+} = useProductCustomizedProductConfigurator();
 
 const addToCartProxy = async () => {
-  await addToCart();
+  if (isCustomizedProductActive.value) {
+    await customizedProductAddToCart();
+  } else {
+    await addToCart();
+  }
   getErrorsCodes()?.forEach((element) => {
     pushError(t(`errors.${element.messageKey}`, { ...element }));
   });

templates/vue-demo-store/components/product/ProductCard.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import type { BoxLayout, DisplayMode } from "@shopware-pwa/composables-next";
+import {
+  type BoxLayout,
+  type DisplayMode,
+} from "@shopware-pwa/composables-next";
 import {
   getProductName,
   getProductThumbnailUrl,
@@ -31,6 +34,10 @@ const props = withDefaults(
 );
 const { product } = toRefs(props);
 const { addToCart, isInCart, count } = useAddToCart(product);
+const {
+  addToCart: customizedProductAddToCart,
+  isActive: isCustomizedProductActive,
+} = useProductCustomizedProductConfigurator();
 
 const { addToWishlist, removeFromWishlist, isInWishlist } =
   useProductWishlist(product);
@@ -61,7 +68,12 @@ const toggleWishlistProduct = async () => {
 };
 
 const addToCartProxy = async () => {
-  await addToCart();
+  if (isCustomizedProductActive.value) {
+    await customizedProductAddToCart();
+  } else {
+    await addToCart();
+  }
+
   getErrorsCodes()?.forEach((element) => {
     pushError(t(`errors.${element.messageKey}`, { ...element }));
   });

templates/vue-demo-store/components/product/ProductCustomizedProductConfigurator.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+const { customizedProduct, state, handleFileUpload } =
+  useProductCustomizedProductConfigurator();
+const { currency } = useSessionContext();
+
+const customizedProductOptions = computed(() => {
+  const options = customizedProduct.value?.options.map((option) => ({
+    ...option,
+    // prepend options by "No selection"
+    values: [
+      {
+        id: undefined,
+        displayName: "No selection",
+        value: null,
+        price: [{ gross: "0" }],
+      },
+      ...option.values,
+    ],
+  }));
+
+  return options;
+});
+
+const removeUploadedImage = (optionId: string) => {
+  delete state.value[optionId];
+};
+</script>
+<template>
+  <div class="flex flex-col">
+    <h3>{{ customizedProduct?.translated.displayName }}</h3>
+    <p class="mb-3 text-gray-500 dark:text-gray-400">
+      {{ customizedProduct?.translated.description }}
+    </p>
+    <hr />
+    <div class="flex flex-col">
+      <div v-for="option in customizedProductOptions" :key="option.id">
+        {{ option.translated.displayName }}
+        <div
+          v-if="['select', 'colorselect', 'imageselect'].includes(option.type)"
+          :id="option.id"
+          :key="option.id"
+          class="mb-6 mt-4"
+        >
+          <select
+            :id="option.id"
+            :key="option.id"
+            v-model="state[option.id]"
+            :selected="null"
+            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          >
+            <option
+              v-for="value in option.values"
+              :key="value.id"
+              :value="value.id"
+              class="p-2"
+              :style="{ 'background-color': value.value?._value }"
+            >
+              {{ value.displayName }}
+              <span v-if="+value.price?.[0]?.gross > 0"
+                >+{{ value?.price?.[0]?.gross }} {{ currency?.symbol }}</span
+              >
+            </option>
+          </select>
+        </div>
+
+        <div v-if="option.type == 'textfield'" :id="option.id" class="mb-6">
+          <input
+            v-model="state[option.id]"
+            type="text"
+            :placeholder="option.placeholder || ''"
+            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          />
+        </div>
+        <div v-if="option.type == 'imageupload'" :id="option.id" class="mb-6">
+          <p class="mb-3 text-gray-500 dark:text-gray-400">
+            {{ option.description }}
+          </p>
+          <div
+            v-if="!state[option.id]"
+            class="flex items-center justify-center w-full mt-4"
+          >
+            <label
+              for="dropzone-file"
+              class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+            >
+              <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                <svg
+                  class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 20 16"
+                >
+                  <path
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+                  />
+                </svg>
+                <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                  <span class="font-semibold">Click to upload</span> or drag and
+                  drop
+                </p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  SVG, PNG, JPG or GIF (Max. 1 file(s), max. 10 MB per file)
+                </p>
+              </div>
+              <input
+                id="dropzone-file"
+                type="file"
+                class="hidden"
+                @change="handleFileUpload($event, option.id)"
+              />
+            </label>
+          </div>
+          <div v-else>
+            <span class="italic">{{
+              (state[option.id] as any)?.media?.filename
+            }}</span>
+            <button
+              type="button"
+              class="ml-4 px-2 py-1 text-xs font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
+              @click="removeUploadedImage(option.id)"
+            >
+              x
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

templates/vue-demo-store/components/product/ProductStatic.vue

@@ -83,6 +83,7 @@ const handleVariantChange = (val: Product) => {
             <ProductPrice :product="product" />
             <ProductUnits :product="product" class="text-sm" />
             <ProductVariantConfigurator @change="handleVariantChange" />
+            <ProductCustomizedProductConfigurator />
             <ProductAddToCart :product="product" />
           </div>
         </div>