fix: mobile category add to cart button is missin on mobile view

- make add to cart button always visible on the mobile view
vuestorefront · Jun 27, 2022 · c8a60d5 · c8a60d5
1 parent c56d15d
commit c8a60d5
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)),