From bf7824a2379d4005ee9cdaa91be37cf85565c1e0 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Mon, 27 Jun 2022 12:16:42 +0200
Subject: [PATCH] fix: mobile category add to cart button is missin on mobile
 view - make add to cart button always visible on the mobile view

---
 .../components/views/CategoryProductGrid.vue         | 12 +++++++++++-
 .../components/views/CategoryProductList.vue         | 10 ++++++++++
 .../components/views/CategoryProductPrice.vue        |  4 ++--
 .../views/useProductsWithCommonCardProps.ts          |  4 ++--
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue b/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue
index 9ca1bbabc..a879a84e2 100644
--- a/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue
+++ b/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue
@@ -26,7 +26,7 @@
         data-testid="product-card"
         :image-height="imageSize.height"
         :image-width="imageSize.width"
-        show-add-to-cart-button
+        :show-add-to-cart-button="true"
         @click:wishlist="$emit('click:wishlist', product)"
         @click:add-to-cart="$emit('click:add-to-cart', { product, quantity: 1 })"
       >
@@ -102,4 +102,14 @@ export default defineComponent({
   }
 }
 
+::v-deep .sf-product-card__add-button {
+  @include for-mobile {
+    opacity: 1;
+    display: flex;
+    z-index: 10;
+    bottom: 1rem;
+    right: 0;
+  }
+}
+
 </style>
diff --git a/packages/theme/modules/catalog/category/components/views/CategoryProductList.vue b/packages/theme/modules/catalog/category/components/views/CategoryProductList.vue
index ab8d168a6..eab4e1498 100644
--- a/packages/theme/modules/catalog/category/components/views/CategoryProductList.vue
+++ b/packages/theme/modules/catalog/category/components/views/CategoryProductList.vue
@@ -165,4 +165,14 @@ export default defineComponent({
   }
 }
 
+::v-deep .sf-product-card__add-button {
+  @include for-mobile {
+    opacity: 1;
+    display: flex;
+    z-index: 10;
+    bottom: 1rem;
+    right: 0;
+  }
+}
+
 </style>
diff --git a/packages/theme/modules/catalog/category/components/views/CategoryProductPrice.vue b/packages/theme/modules/catalog/category/components/views/CategoryProductPrice.vue
index bfb35b323..75903c7dc 100644
--- a/packages/theme/modules/catalog/category/components/views/CategoryProductPrice.vue
+++ b/packages/theme/modules/catalog/category/components/views/CategoryProductPrice.vue
@@ -52,7 +52,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from '@nuxtjs/composition-api';
 import { SfPrice } from '@storefront-ui/vue';
-import type { ProductWithCommondProductCardProps } from '~/modules/catalog/category/components/views/useProductsWithCommonCardProps';
+import type { ProductWithCommonProductCardProps } from '~/modules/catalog/category/components/views/useProductsWithCommonCardProps';
 
 export default defineComponent({
   name: 'CategoryProductPrice',
@@ -61,7 +61,7 @@ export default defineComponent({
   },
   props: {
     product: {
-      type: Object as PropType<ProductWithCommondProductCardProps>,
+      type: Object as PropType<ProductWithCommonProductCardProps>,
       required: true,
     },
   },
diff --git a/packages/theme/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts b/packages/theme/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts
index 1252de00a..89fa5f8d3 100644
--- a/packages/theme/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts
+++ b/packages/theme/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts
@@ -33,7 +33,7 @@ interface ProductCommonCardProps {
   scoreRating: number,
 }
 
-export type ProductWithCommondProductCardProps = Product & { commonProps: ProductCommonCardProps };
+export type ProductWithCommonProductCardProps = Product & { commonProps: ProductCommonCardProps };
 
 export const useProductsWithCommonProductCardProps = (products: Ref<Product[]>) => {
   const { getMagentoImage } = useImage();
@@ -47,7 +47,7 @@ export const useProductsWithCommonProductCardProps = (products: Ref<Product[]>)
    * To avoid passing tens of props to both components two times,
    * instead the below object is passed to them using `v-bind="product.commonProps"`
    */
-  const productsWithCommonProductCardProps = computed<ProductWithCommondProductCardProps[]>(
+  const productsWithCommonProductCardProps = computed<ProductWithCommonProductCardProps[]>(
     () => products.value.map((product, index) => {
       const imageProps = {
         image: getMagentoImage(getProductThumbnailImage(product)),