fix(client): missing product variants (#1215)

api/helpers.api.md

@@ -149,7 +149,7 @@ export function getProductOptions({ product, }?: {
 export function getProductOptionsUrl({ product, options, }?: {
     product?: Product;
     options?: string[];
-}): string;
+}): string | undefined;
 
 // @alpha (undocumented)
 export function getProductProperties({ product, }?: {
@@ -190,6 +190,14 @@ export function getVariantOptionsLabel({ product, }?: {
     product?: Product;
 }): string | null;
 
+// Warning: (ae-incompatible-release-tags) The symbol "isOptionAvailableForSelectedOptions" is marked as @beta, but its signature references "UiProductOption" which is marked as @alpha
+// Warning: (ae-incompatible-release-tags) The symbol "isOptionAvailableForSelectedOptions" is marked as @beta, but its signature references "ProductOptions" which is marked as @alpha
+//
+// @beta
+export function isOptionAvailableForSelectedOptions(currentAttribute: string, selectedOptionId: string, { code: optionId }: UiProductOption | undefined, allOptions: ProductOptions, allSelectedOptions: {
+    [key: string]: string;
+}): boolean;
+
 // @beta (undocumented)
 export function isProductSimple({ product, }?: {
     product?: Product;
@@ -362,8 +370,6 @@ export interface UiMediaGalleryItemUrl {
 
 // @alpha (undocumented)
 export interface UiProductOption {
-    // (undocumented)
-    [attribute: string]: string;
     // (undocumented)
     attribute: string;
     // (undocumented)
@@ -373,6 +379,8 @@ export interface UiProductOption {
     // (undocumented)
     label: string;
     // (undocumented)
+    matchingIds: string[];
+    // (undocumented)
     value: string;
 }
 

docs/landing/resources/api/helpers.isoptionavailableforselectedoptions.md

@@ -0,0 +1,33 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@shopware-pwa/helpers](./helpers.md) &gt; [isOptionAvailableForSelectedOptions](./helpers.isoptionavailableforselectedoptions.md)
+
+## isOptionAvailableForSelectedOptions() function
+
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Check if the current optionId is also present in matching option ids of other available variants.
+
+<b>Signature:</b>
+
+```typescript
+export declare function isOptionAvailableForSelectedOptions(currentAttribute: string, selectedOptionId: string, { code: optionId }: UiProductOption | undefined, allOptions: ProductOptions, allSelectedOptions: {
+    [key: string]: string;
+}): boolean;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  currentAttribute | string |  |
+|  selectedOptionId | string |  |
+|  { code: optionId } | UiProductOption \| undefined |  |
+|  allOptions | ProductOptions |  |
+|  allSelectedOptions | { \[key: string\]: string; } |  |
+
+<b>Returns:</b>
+
+boolean
+

docs/landing/resources/api/helpers.md

@@ -20,6 +20,7 @@
 |  [getProductThumbnailUrl(product)](./helpers.getproductthumbnailurl.md) | <b><i>(BETA)</i></b> get the thumbnail image URL with the smallest width |
 |  [getProductTierPrices(product)](./helpers.getproducttierprices.md) | <b><i>(BETA)</i></b> Get the prices depending on quantity added to cart. Tier prices can be set in <code>Advanced pricing</code> tab in <code>Product view</code> (admin panel) |
 |  [getStoreNavigationRoutes(navigationElements)](./helpers.getstorenavigationroutes.md) | <b><i>(BETA)</i></b> |
+|  [isOptionAvailableForSelectedOptions(currentAttribute, selectedOptionId, { code: optionId }, allOptions, allSelectedOptions)](./helpers.isoptionavailableforselectedoptions.md) | <b><i>(BETA)</i></b> Check if the current optionId is also present in matching option ids of other available variants. |
 |  [isProductSimple({ product, })](./helpers.isproductsimple.md) | <b><i>(BETA)</i></b> |
 |  [loadScript(src)](./helpers.loadscript.md) | <b><i>(BETA)</i></b> Helper for plugins to load external scripts for plugins |
 

packages/commons/interfaces/models/content/product/Product.ts

@@ -81,7 +81,7 @@ export interface Product {
   length: number | null;
   releaseDate: Date;
   categoryTree: [] | null;
-  optionIds?: [];
+  optionIds?: string[];
   propertyIds: [] | null;
   additionalText?: string | null;
   name: string | null;

packages/composables/src/internalHelpers/defaultApiParams.json

@@ -14,13 +14,15 @@
         "associations": {
           "options": {
             "associations": {
+              "productOptions": {},
               "group": {}
             }
           }
         }
       },
       "options": {
         "associations": {
+          "productOptions": {},
           "group": {}
         }
       }
@@ -67,7 +69,8 @@
         "options",
         "properties",
         "manufacturer",
-        "seoUrls"
+        "seoUrls",
+        "optionIds"
       ],
       "product_media": ["media"],
       "media": ["thumbnails", "width", "height", "url"],
@@ -164,7 +167,8 @@
       "media": {},
       "options": {
         "associations": {
-          "group": {}
+          "group": {},
+          "productOptions": {}
         }
       },
       "properties": {
@@ -180,6 +184,7 @@
           "seoUrls": {},
           "options": {
             "associations": {
+              "productOptions": {},
               "group": {}
             }
           }

packages/default-theme/src/components/SwProductColors.vue

@@ -2,7 +2,7 @@
   <div class="product-colors">
     <p class="product-colors__label">{{ label }}</p>
     <SfColor
-      v-for="(color, code) in colors"
+      v-for="(color, code) in availableColors"
       :key="code"
       :color="color.color"
       :aria-label="color.label"
@@ -15,6 +15,7 @@
 
 <script>
 import { SfColor } from "@storefront-ui/vue"
+import { isOptionAvailableForSelectedOptions as isOptionAvailable } from "@shopware-pwa/helpers"
 
 export default {
   name: "SwProductColors",
@@ -32,6 +33,32 @@ export default {
       type: Array,
       default: () => [],
     },
+    allOptions: {
+      type: Object,
+      default: () => [],
+    },
+    allSelected: {
+      type: Object,
+      default: () => [],
+    },
+  },
+  computed: {
+    availableColors() {
+      return this.colors.filter((color) =>
+        this.isOptionAvailableForSelectedOptions(color)
+      )
+    },
+  },
+  methods: {
+    isOptionAvailableForSelectedOptions(option) {
+      return isOptionAvailable(
+        this.label,
+        this.value,
+        option,
+        this.allOptions,
+        this.allSelected
+      )
+    },
   },
 }
 </script>

packages/default-theme/src/components/SwProductDetails.vue

@@ -26,13 +26,17 @@
             "
             :colors="getAllProductOptions[productType]"
             :value="selected[productType]"
+            :allOptions="getAllProductOptions"
+            :allSelected="selected"
             :label="productType"
             @input="handleChange(productType, $event)"
           />
           <SwProductSelect
             v-else
             :value="selected[productType]"
             :options="getAllProductOptions[productType]"
+            :allOptions="getAllProductOptions"
+            :allSelected="selected"
             :label="productType"
             @change="handleChange(productType, $event)"
           />
@@ -186,7 +190,7 @@ export default {
         options,
       })
 
-      this.$router.push(this.$i18n.path(url))
+      url && this.$router.push(this.$i18n.path(url))
     },
   },
 

packages/default-theme/src/components/SwProductSelect.vue

@@ -13,14 +13,24 @@
         :value="option.code"
       >
         <slot v-bind="option">
-          <SfProductOption :label="option.label" :color="option.color" />
+          <SfProductOption
+            :label="`${option.label} `"
+            :color="option.color"
+            v-if="isOptionAvailableForSelectedOptions(option)"
+          />
+          <SfProductOption v-else :label="`${option.label} (unavailable)`">
+            <template #label="{ label }">
+              <div style="color: var(--c-text-muted)">{{ label }}</div>
+            </template>
+          </SfProductOption>
         </slot>
       </SfSelectOption>
     </SfSelect>
   </div>
 </template>
 <script>
 import { SfSelect, SfProductOption } from "@storefront-ui/vue"
+import { isOptionAvailableForSelectedOptions as isOptionAvailable } from "@shopware-pwa/helpers"
 
 export default {
   name: "SwProductSelect",
@@ -38,6 +48,14 @@ export default {
       type: Array,
       default: () => [],
     },
+    allOptions: {
+      type: Object,
+      default: () => [],
+    },
+    allSelected: {
+      type: Object,
+      default: () => [],
+    },
     label: {
       type: String,
       default: "",
@@ -48,6 +66,34 @@ export default {
       selectedOption: this.value,
     }
   },
+  methods: {
+    isOptionAvailableForSelectedOptions(option) {
+      return isOptionAvailable(
+        this.label,
+        this.value,
+        option,
+        this.allOptions,
+        this.allSelected
+      )
+
+      // if (optionId == this.value) {
+      //   return true
+      // }
+
+      // let matchingOptions = false
+      // Object.entries(this.allSelected).forEach(([attribute, selectedId]) => {
+      //   if (attribute !== this.label) {
+      //     this.allOptions[attribute].forEach((otherOption) => {
+      //       if (otherOption.code === selectedId) {
+      //         matchingOptions = otherOption["matchingIds"].includes(optionId)
+      //       }
+      //     })
+      //   }
+      // })
+
+      // return matchingOptions
+    },
+  },
 }
 </script>
 <style lang="scss" scoped></style>

packages/helpers/__tests__/product/getProductOptions.spec.ts

@@ -13,13 +13,19 @@ describe("Shopware helpers - getProductOptions", () => {
               group: {
                 name: "color",
               },
+              productOptions: [
+                {
+                  optionIds: ["12345"],
+                },
+              ],
             },
             {
               id: "3858d1baf2544a379c92535ea3d2fe53",
               name: "blue",
               group: {
                 name: "color",
               },
+              productOptions: undefined,
             },
             {
               id: "3858d1baf2544a379c92535ea3d2fe52",
@@ -42,8 +48,61 @@ describe("Shopware helpers - getProductOptions", () => {
       product: productWithChildren,
     });
     expect(productOptions).toHaveProperty("color");
+    expect(productOptions["color"][0].matchingIds).toStrictEqual(["12345"]);
   });
 
+  it("should return no matching ids for given variant if there is no productOptions within variant option", () => {
+    const productWithChildren: any = {
+      children: [
+        {
+          id: "04095b39ef07472ebd7547800c40bfd4",
+          options: [
+            {
+              id: "3858d1baf2544a379c92535ea3d2fe53",
+              name: "blue",
+              group: {
+                name: "color",
+              },
+              productOptions: undefined,
+            },
+          ],
+        },
+      ],
+    };
+
+    const productOptions = getProductOptions({
+      product: productWithChildren,
+    });
+    expect(productOptions["color"][0].matchingIds).toStrictEqual([]);
+  });
+  it("should return no matching ids for given variant if there is no optionIds within product option", () => {
+    const productWithChildren: any = {
+      children: [
+        {
+          id: "04095b39ef07472ebd7547800c40bfd4",
+          options: [
+            {
+              id: "3858d1baf2544a379c92535ea3d2fe53",
+              name: "blue",
+              group: {
+                name: "color",
+              },
+              productOptions: [
+                {
+                  optionIds: undefined,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const productOptions = getProductOptions({
+      product: productWithChildren,
+    });
+    expect(productOptions["color"][0].matchingIds).toStrictEqual([]);
+  });
   it("should returns return an empty object if no children", () => {
     const productWithoutChildren: any = {};