From 58248378140e2320723dee1b9937e69161d05756 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Tue, 5 Jul 2022 13:53:30 +0200
Subject: [PATCH] fix: m2-723 - button add to cart doesn't work for
 configurable products

---
 .../theme/modules/catalog/pages/product.vue    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/theme/modules/catalog/pages/product.vue b/packages/theme/modules/catalog/pages/product.vue
index b4ddb389d..733ef8973 100644
--- a/packages/theme/modules/catalog/pages/product.vue
+++ b/packages/theme/modules/catalog/pages/product.vue
@@ -102,7 +102,7 @@ export default defineComponent({
     // eslint-disable-next-line no-underscore-dangle
     const renderer = computed(() => product.value?.__typename ?? ProductTypeEnum.SIMPLE_PRODUCT);
 
-    const fetchProduct = async (searchQuery = getBaseSearchQuery()) => {
+    const fetchProductBaseData = async (searchQuery = getBaseSearchQuery()) => {
       const result = await getProductDetails({
         ...searchQuery,
       });
@@ -110,8 +110,14 @@ export default defineComponent({
       product.value = merge({}, product.value, result.items[0] as Product ?? null);
     };
 
+    const fetchProductExtendedData = async (searchQuery = getBaseSearchQuery()) => {
+      const { data } = await query<ProductDetailsQuery>(getProductPriceBySkuGql, searchQuery);
+
+      product.value = merge({}, product.value, data.products?.items?.[0] as Product);
+    };
+
     useFetch(async () => {
-      await fetchProduct();
+      await fetchProductBaseData();
 
       if (Boolean(product?.value?.sku) === false) nuxtError({ statusCode: 404 });
 
@@ -131,18 +137,14 @@ export default defineComponent({
       addTags([...tags, ...productTags]);
     });
 
-    onMounted(async () => {
-      const { data } = await query<ProductDetailsQuery>(getProductPriceBySkuGql, getBaseSearchQuery());
-
-      product.value = merge({}, product.value, data.products?.items?.[0] as Product);
-    });
+    onMounted(async () => fetchProductExtendedData());
 
     return {
       renderer,
       loading,
       breadcrumbs,
       product,
-      fetchProduct,
+      fetchProduct: fetchProductExtendedData,
     };
   },
 });