From 323fdd435cb590926f70d5bef9c9ef38917cadd1 Mon Sep 17 00:00:00 2001
From: Dominik <info@dominikdeimel.com>
Date: Tue, 20 Apr 2021 18:36:14 +0200
Subject: [PATCH] fix(Product): fixed Product Detail page filters

---
 .../src/composables/getters/productGetters.ts |  2 +-
 packages/theme/pages/Product.vue              | 27 +++++++++----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/composables/src/composables/getters/productGetters.ts b/packages/composables/src/composables/getters/productGetters.ts
index a7eb0a676..c32ab1f8e 100644
--- a/packages/composables/src/composables/getters/productGetters.ts
+++ b/packages/composables/src/composables/getters/productGetters.ts
@@ -119,7 +119,7 @@ export const getProductAttributes = (products: Product[] | Product, filterByAttr
       label: option.label,
       value: option.values.map((value) => {
         const obj = {};
-        obj[value.value_index] = value.value_label;
+        obj[value.value_index] = value.label;
         return obj;
       }),
     } as AgnosticAttribute;
diff --git a/packages/theme/pages/Product.vue b/packages/theme/pages/Product.vue
index 212b0454a..63bd2d941 100644
--- a/packages/theme/pages/Product.vue
+++ b/packages/theme/pages/Product.vue
@@ -51,41 +51,39 @@
           </div>
         </div>
         <div>
-          <p class="product__description desktop-only">
-            {{ description }}
-          </p>
+          <p class="product__description desktop-only" v-if="product.short_description.html" v-dompurify-html="product.short_description.html"/>
           <SfButton class="sf-button--text desktop-only product__guide">
             {{ $t('Size guide') }}
           </SfButton>
           <SfSelect
             v-if="options.size"
-            :value="configuration.size"
+            :value="Object.keys(options.size.value[0])[0]"
             label="Size"
             class="sf-select--underlined product__select-size"
             :required="true"
             @input="size => updateFilter({ size })"
           >
             <SfSelectOption
-              v-for="size in options.size"
-              :key="size.value"
-              :value="size.value"
+              v-for="(size, i) in options.size.value"
+              :key="i"
+              :value="Object.keys(size)[0]"
             >
-              {{ size.label }}
+              {{ Object.values(size)[0] }}
             </SfSelectOption>
           </SfSelect>
           <div
-            v-if="options.color && options.color.length > 1"
+            v-if="options.color && options.color.value.length > 1"
             class="product__colors desktop-only"
           >
             <p class="product__color-label">
               {{ $t('Color') }}:
             </p>
             <SfColor
-              v-for="(color, i) in options.color"
+              v-for="(color, i) in options.color.value"
               :key="i"
-              :color="color.value"
+              :color="Object.values(color)[0]"
               class="product__color"
-              @click="updateFilter({color})"
+              @click="updateFilter({color: Object.keys(color)[0]})"
             />
           </div>
           <SfAddToCart
@@ -277,7 +275,8 @@ export default {
       return Array.isArray(baseProduct) && baseProduct[0] ? baseProduct[0] : {};
     });
 
-    const options = computed(() => productGetters.getAttributes(products.value, ['color', 'size']));
+    const options = computed(() => productGetters.getAttributes(product.value,
+      ['color', 'size']));
 
     const configuration = computed(() => productGetters.getAttributes(product.value,
       ['color', 'size']));
@@ -326,7 +325,7 @@ export default {
       context.root.$router.push({
         path: context.root.$route.path,
         query: {
-          ...configuration.value,
+          ...Object.keys(configuration.value)[0],
           ...filter,
         },
       });