Fixing quick view image (#114)

Author: arielWix

examples/astro-stores-demo/src/components/store/CategoryPage.tsx

@@ -30,10 +30,8 @@ interface StoreCollectionPageProps {
 }
 
 export const ProductGridContent = ({
-  productPageRoute,
   categoriesListConfig,
 }: {
-  productPageRoute: string;
   categoriesListConfig: CategoriesListServiceConfig;
 }) => {
   const [quickViewProduct, setQuickViewProduct] =
@@ -167,10 +165,7 @@ export const ProductGridContent = ({
             </div>
           )}
 
-          <a
-            data-testid="title-navigation"
-            href={`${productPageRoute}/${product.slug}`}
-          >
+          <a data-testid="title-navigation" href={`/${product.slug}`}>
             <h3 className="text-content-primary font-semibold mb-2 line-clamp-2">
               {product.name}
             </h3>
@@ -407,7 +402,7 @@ export const ProductGridContent = ({
             {/* View Product Button */}
             <a
               data-testid="view-product-button"
-              href={`${productPageRoute}/${product.slug}`}
+              href={`/${product.slug}`}
               className="w-full text-content-primary font-semibold py-2 px-4 rounded-lg transition-all duration-200 flex items-center justify-center gap-2 btn-secondary"
             >
               View Product
@@ -569,12 +564,24 @@ export const ProductGridContent = ({
 
       {/* Quick View Modal */}
       {quickViewProduct && (
-        <QuickViewModal
-          product={quickViewProduct}
-          isOpen={isQuickViewOpen}
-          onClose={closeQuickView}
-          productPageRoute={productPageRoute}
-        />
+        <Product.Root
+          productServiceConfig={{ productSlug: quickViewProduct.slug! }}
+        >
+          <Product.Loading>
+            {({ isLoading }) => (
+              <Product.Content>
+                {({ product }) => (
+                  <QuickViewModal
+                    product={product}
+                    isLoading={isLoading}
+                    isOpen={isQuickViewOpen}
+                    onClose={closeQuickView}
+                  />
+                )}
+              </Product.Content>
+            )}
+          </Product.Loading>
+        </Product.Root>
       )}
     </div>
   );
@@ -644,17 +651,13 @@ export function CategoryPage({
   productsListConfig,
   productsListSearchConfig,
   categoriesListConfig,
-  productPageRoute,
 }: StoreCollectionPageProps) {
   return (
     <ProductList.Root
       productsListConfig={productsListConfig}
       productsListSearchConfig={productsListSearchConfig}
     >
-      <ProductGridContent
-        productPageRoute={productPageRoute}
-        categoriesListConfig={categoriesListConfig}
-      />
+      <ProductGridContent categoriesListConfig={categoriesListConfig} />
       <LoadMoreSection />
     </ProductList.Root>
   );

examples/astro-stores-demo/src/components/store/QuickViewModal.tsx

@@ -4,24 +4,21 @@ import ProductDetails from './ProductDetails';
 
 import { CurrentCart } from '@wix/headless-ecom/react';
 import type { LineItem } from '@wix/headless-ecom/services';
+import { Product } from '@wix/headless-stores/react';
 
 interface QuickViewModalProps {
   product: productsV3.V3Product;
   isOpen: boolean;
+  isLoading: boolean;
   onClose: () => void;
-  productPageRoute: string;
 }
 
 export default function QuickViewModal({
   product,
+  isLoading,
   isOpen,
   onClose,
-  productPageRoute,
 }: QuickViewModalProps) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [fullProduct, setFullProduct] = useState<productsV3.V3Product | null>(
-    null
-  );
   const [showSuccessMessage, setShowSuccessMessage] = useState(false);
 
   // Handle escape key to close modal
@@ -41,29 +38,6 @@ export default function QuickViewModal({
     };
   }, [isOpen, onClose]);
 
-  // Load full product data when modal opens
-  useEffect(() => {
-    if (isOpen && product.slug) {
-      setIsLoading(true);
-      // Use Wix API to load full product data
-      const loadFullProduct = async () => {
-        try {
-          // For now, use the existing product data since it should contain all necessary information
-          // If more detailed product data is needed, this would require a Wix client instance
-          setFullProduct(product);
-        } catch (error) {
-          console.error('Failed to load full product data:', error);
-          // Fallback to original product data
-          setFullProduct(product);
-        } finally {
-          setIsLoading(false);
-        }
-      };
-
-      loadFullProduct();
-    }
-  }, [isOpen, product.slug]);
-
   if (!isOpen) return null;
 
   return (
@@ -157,12 +131,12 @@ export default function QuickViewModal({
             </div>
           ) : (
             <>
-              <ProductDetails isQuickView={true} product={product} />
+              <ProductDetails isQuickView={true} product={product!} />
 
               {/* View Full Product Page Link */}
               <div className="mt-6 pt-6 border-t border-brand-subtle">
                 <a
-                  href={`${productPageRoute}/${product.slug}`}
+                  href={`/${product.slug}`}
                   className="w-full text-content-primary font-semibold py-3 px-4 rounded-lg transition-all duration-200 flex items-center justify-center gap-2 btn-primary"
                 >
                   View Full Product Page

examples/astro-stores-demo/src/react-pages/category/index.tsx

@@ -41,7 +41,6 @@ export default function StoreCollectionPage({
             productsListConfig={productsListConfig}
             productsListSearchConfig={productsListSearchConfig}
             categoriesListConfig={categoriesListConfig}
-            productPageRoute=""
           />
         </div>
       </StoreLayout>

packages/headless-components/stores/src/react/Product.tsx

@@ -201,3 +201,43 @@ export function Media(props: ProductMediaProps) {
     media,
   });
 }
+
+export interface ProductProps {
+  children: (props: ProductRenderProps) => React.ReactNode;
+}
+
+export interface ProductRenderProps {
+  product: V3Product;
+}
+
+export function Content(props: ProductProps) {
+  const service = useService(ProductServiceDefinition) as ServiceAPI<
+    typeof ProductServiceDefinition
+  >;
+
+  const product = service.product.get();
+
+  return props.children({
+    product,
+  });
+}
+
+export interface LoadingProps {
+  children: (props: LoadingRenderProps) => React.ReactNode;
+}
+
+export interface LoadingRenderProps {
+  isLoading: boolean;
+}
+
+export function Loading(props: LoadingProps) {
+  const service = useService(ProductServiceDefinition) as ServiceAPI<
+    typeof ProductServiceDefinition
+  >;
+
+  const isLoading = service.isLoading.get();
+
+  return props.children({
+    isLoading,
+  });
+}

packages/headless-components/stores/src/services/product-service.ts

@@ -39,7 +39,9 @@ export const ProductServiceDefinition =
  */
 export interface ProductServiceConfig {
   /** The initial product data to configure the service with */
-  product: productsV3.V3Product;
+  product?: productsV3.V3Product;
+
+  productSlug?: string;
 }
 
 /**
@@ -84,21 +86,29 @@ export const ProductService =
       const product: Signal<productsV3.V3Product> = signalsService.signal(
         config.product as any,
       );
-      const isLoading: Signal<boolean> = signalsService.signal(false as any);
+      const isLoading: Signal<boolean> = signalsService.signal(
+        !!config.productSlug as any,
+      );
       const error: Signal<string | null> = signalsService.signal(null as any);
 
       const loadProduct = async (slug: string) => {
         isLoading.set(true);
-        const productResponse = await loadProductBySlug(slug);
+        const productResponse = await loadProductBySlug(slug!);
+
         if (!productResponse.product) {
           error.set("Product not found");
         } else {
           product.set(productResponse.product!);
           error.set(null);
         }
+
         isLoading.set(false);
       };
 
+      if (config.productSlug) {
+        loadProduct(config.productSlug);
+      }
+
       return {
         product,
         isLoading,