fix: useProductGallery reactivity

Author: bartoszherba

packages/theme/modules/catalog/product/components/product-types/bundle/BundleProduct.vue

@@ -115,7 +115,7 @@ import {
   ref,
   computed,
   defineComponent,
-  PropType,
+  PropType, toRef,
 } from '@nuxtjs/composition-api';
 
 import {
@@ -170,8 +170,9 @@ export default defineComponent({
   },
   setup(props) {
     const qty = ref(1);
+    const product = toRef(props, 'product');
     const { addItem, canAddToCart } = useCart();
-    const { productGallery, imageSizes } = useProductGallery(props.product);
+    const { productGallery, imageSizes } = useProductGallery(product);
     const { activeTab, setActiveTab, openNewReviewTab } = useProductTabs();
     const { isAuthenticated } = useUser();
     const { addItem: addItemToWishlist, isInWishlist } = useWishlist();

packages/theme/modules/catalog/product/components/product-types/configurable/ConfigurableProduct.vue

@@ -170,7 +170,7 @@ import {
   useRoute,
   useRouter,
   defineComponent,
-  PropType,
+  PropType, toRef,
 } from '@nuxtjs/composition-api';
 
 import {
@@ -227,10 +227,11 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const qty = ref(1);
+    const product = toRef(props, 'product');
     const route = useRoute();
     const router = useRouter();
     const { addItem, loading: isCartLoading, canAddToCart } = useCart();
-    const { productGallery, imageSizes } = useProductGallery(props.product);
+    const { productGallery, imageSizes } = useProductGallery(product);
     const { activeTab, setActiveTab, openNewReviewTab } = useProductTabs();
 
     const { isAuthenticated } = useUser();

packages/theme/modules/catalog/product/components/product-types/grouped/GroupedProduct.vue

@@ -114,7 +114,7 @@ import {
   ref,
   computed,
   defineComponent,
-  PropType,
+  PropType, toRef,
 } from '@nuxtjs/composition-api';
 
 import {
@@ -169,8 +169,9 @@ export default defineComponent({
   },
   setup(props) {
     const qty = ref(1);
+    const product = toRef(props, 'product');
     const { addItem, canAddToCart } = useCart();
-    const { productGallery, imageSizes } = useProductGallery(props.product);
+    const { productGallery, imageSizes } = useProductGallery(product);
     const { activeTab, setActiveTab, openNewReviewTab } = useProductTabs();
 
     const { isAuthenticated } = useUser();

packages/theme/modules/catalog/product/components/product-types/simple/SimpleProduct.vue

@@ -118,6 +118,7 @@ import {
   computed,
   defineComponent,
   PropType,
+  toRef,
 } from '@nuxtjs/composition-api';
 
 import {
@@ -170,8 +171,9 @@ export default defineComponent({
   },
   setup(props) {
     const qty = ref(1);
+    const product = toRef(props, 'product');
     const { addItem, loading: isCartLoading, canAddToCart } = useCart();
-    const { productGallery, imageSizes } = useProductGallery(props.product);
+    const { productGallery, imageSizes } = useProductGallery(product);
     const { isAuthenticated } = useUser();
     const { addItem: addItemToWishlist, isInWishlist } = useWishlist();
     const { activeTab, setActiveTab, openNewReviewTab } = useProductTabs();

packages/theme/modules/catalog/product/composables/useProductGallery/index.ts

@@ -1,4 +1,4 @@
-import { computed } from '@nuxtjs/composition-api';
+import { computed, Ref } from '@nuxtjs/composition-api';
 import { getGallery as getProductGallery } from '~/modules/catalog/product/getters/productGetters';
 import { useImage } from '~/composables';
 import type { Product } from '~/modules/catalog/product/types';
@@ -9,13 +9,13 @@ import type { UseProductGalleryInterface } from '~/modules/catalog/product/compo
  *
  * See the {@link UseProductGalleryInterface} page for more information.
  */
-export function useProductGallery(product: Product): UseProductGalleryInterface {
+export function useProductGallery(product: Ref<Product>): UseProductGalleryInterface {
   const { getMagentoImage, imageSizes } = useImage();
-  const productGallery = computed(() => getProductGallery(product).map((img) => ({
+  const productGallery = computed(() => getProductGallery(product.value).map((img) => ({
     mobile: { url: getMagentoImage(img.small) },
     desktop: { url: getMagentoImage(img.normal) },
     big: { url: getMagentoImage(img.big) },
-    alt: product.name,
+    alt: product.value.name,
   })));
 
   return {