sync demo

README.md

@@ -1,22 +1,13 @@
 <h1 align="center">Pilot - Shopify Hydrogen Theme</h1>
 
 <div align="center">
-  <p style="text-align: center;">
-    <img alt="Version" src="https://img.shields.io/badge/version-2.5.1-blue.svg?cacheSeconds=2592000" />
-    <a href="#" target="_blank">
-      <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg?label=license" />
-    </a>
-    <a href="https://twitter.com/weaverseio" target="_blank">
-      <img alt="Twitter: weaverseio" src="https://img.shields.io/twitter/follow/weaverseio.svg?style=social&[email protected]" />
-    </a>
-  </p>
-
-![Weaverse + Hydrogen + Shopify](https://cdn.shopify.com/s/files/1/0693/8201/3220/files/Logos.png?v=1695811776)
 
 📚 [Read the docs](https://weaverse.io/docs) | 🗣 [Join our community on Slack](https://join.slack.com/t/weaversecommunity/shared_invite/zt-235bv7d80-velzJU8CpZIHWdrzFwAdXg) | 🐞 [Report a bug](https://github.com/weaverse/pilot/issues)
 
 </div>
 
+![Weaverse + Hydrogen + Shopify](https://cdn.shopify.com/s/files/1/0693/8201/3220/files/Logos.png?v=1695811776)
+
 _Pilot is an innovative Shopify theme, powered by Hydrogen, Remix, and Weaverse, designed to create lightning-fast storefronts with exceptional performance. This theme combines a collection of powerful tools and features to streamline your Shopify development experience._
 
 ## Demo
@@ -43,7 +34,7 @@ _Pilot is an innovative Shopify theme, powered by Hydrogen, Remix, and Weaverse,
 
 ## Deployment
 - [Deploy to Shopify Oxygen](https://weaverse.io/docs/deployment/oxygen)
-- Deploy to Vercel: [![Deploy to Vercel](https://vercel.com/button)](https://wvse.cc/deploy-pilot-to-vercel)
+- [Deploy to Vercel](https://wvse.cc/deploy-pilot-to-vercel)
 
 ## Getting started
 

app/components/product-form/product-media.tsx

@@ -39,12 +39,12 @@ export function ProductMedia(props: ProductMediaProps) {
     },
   };
 
-  let [activeInd, setActiveInd] = useState(0);
-  let [sliderRef, instanceRef] = useKeenSlider({
+  let [activeInd, setAcitveInd] = useState(0);
+  const [sliderRef, instanceRef] = useKeenSlider({
     ...slideOptions,
-    slideChanged: (slider) => {
+    slideChanged(slider) {
       let pos = slider.track.details.rel;
-      setActiveInd(pos);
+      setAcitveInd(pos);
       let maxThumbnailIndex =
         thumbnailInstance.current?.track.details.maxIdx || 0;
       let thumbnailNext = Math.min(
@@ -54,18 +54,19 @@ export function ProductMedia(props: ProductMediaProps) {
       thumbnailInstance.current?.moveToIdx(thumbnailNext);
     },
   });
-
-  function moveToIdx(idx: number) {
-    setActiveInd(idx);
-    if (instanceRef.current) {
-      instanceRef.current.moveToIdx(idx);
-    }
-  }
-
-  let [thumbnailRef, thumbnailInstance] = useKeenSlider(thumbnailOptions);
-  function handleClickThumbnail(idx: number) {
+  let moveToIdx = useCallback(
+    (idx: number) => {
+      setAcitveInd(idx);
+      if (instanceRef.current) {
+        instanceRef.current.moveToIdx(idx);
+      }
+    },
+    [instanceRef],
+  );
+  const [thumbnailRef, thumbnailInstance] = useKeenSlider(thumbnailOptions);
+  let handleClickThumbnail = (idx: number) => {
     moveToIdx(idx);
-  }
+  };
 
   useEffect(() => {
     // instanceRef.current?.update(slideOptions);
@@ -76,12 +77,13 @@ export function ProductMedia(props: ProductMediaProps) {
     });
     moveToIdx(selectedInd);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedVariant?.id]);
-
+  }, [selectedVariant?.id, moveToIdx]);
   return (
     <div
       className="grid vt-product-image"
-      style={{ gap: spacing, }}
+      style={{
+        gap: spacing,
+      }}
     >
       <div ref={sliderRef} className="keen-slider">
         {media.map((med, i) => {

app/sections/image-hotspots/items.tsx

@@ -11,7 +11,7 @@ import { ProductQuery } from 'storefrontapi.generated';
 import { PRODUCT_QUERY } from '~/data/queries';
 import clsx from 'clsx';
 import { CSSProperties } from 'react';
-import { IconImageBlank, Link } from '~/components';
+import { IconImageBlank } from '~/components';
 
 
 type ProductData = {
@@ -27,47 +27,25 @@ type ProductsHotspotProps = HydrogenComponentProps<
 
 let ProductHotspotItems = forwardRef<HTMLDivElement, ProductsHotspotProps>((props, ref) => {
   let { product, verticalPosition, horizontalPosition, loaderData, ...rest } = props;
+  const ProductImage = loaderData?.product?.variants.nodes.map((variant) => variant.image);
+  const ProductPrice = loaderData?.product?.variants.nodes.map((variant) => variant.price.amount) || '0.00';
+  const ProductCurrency = loaderData?.product?.variants.nodes.map((variant) => variant.price.currencyCode) || '$';
+  const ProductTittle = loaderData?.product?.title || 'Product title';
+  console.log(loaderData?.product);
 
   let Horizontal = horizontalPosition >= 50 ? 'left-auto right-1/2' : 'right-auto left-1/2';
   let Vertical = verticalPosition >= 50 ? 'top-auto bottom-full' : 'bottom-auto top-full';
-
   let sectionStyle: CSSProperties = {
     left: `${horizontalPosition}%`,
     top: `${verticalPosition}%`,
   } as CSSProperties;
-
-  if (!loaderData) {
-    return (
-      <div className='absolute group flex flex-col' style={sectionStyle} >
-      <svg xmlns="http://www.w3.org/2000/svg" className='sm-max:w-4 sm-max:h-4 z-10 cursor-pointer' width="32" height="32" viewBox="0 0 32 32" fill="none">
-        <circle cx="16" cy="16" r="12" fill="white" stroke="#0F0F0F" strokeWidth='8' />
-      </svg>
-      <div className={clsx('hidden z-20 aspect-[2/1] bg-white absolute group-hover:flex flex-row justify-center items-center w-96 sm-max:w-36', Horizontal, Vertical)}>
-        <div className='w-1/2 bg-gray-300 h-full flex justify-center items-center'>
-            <IconImageBlank className='!w-9 !h-9' viewBox='0 0 100 100' />
-        </div>
-        <div className='text-center w-1/2 flex flex-col gap-2 justify-center items-center sm-max:gap-1'>
-          <p className='box-border font-medium text text-[10px] sm:text-sm'>Product title</p>
-          <p className='box-content font-normal text-[10px] sm:text-sm'>0.00 $</p>
-          <p className='box-content font-normal text-[10px] sm:text-sm'>Please select product</p>
-        </div>
-      </div>
-    </div>
-    );
-  }
-
-  const ProductImage = loaderData?.product?.variants.nodes.map((variant) => variant.image);
-  const ProductPrice = loaderData?.product?.variants.nodes.map((variant) => variant.price.amount) || '0.00';
-  const ProductCurrency = loaderData?.product?.variants.nodes.map((variant) => variant.price.currencyCode) || '$';
-  const ProductTittle = loaderData?.product?.title || 'Product title';
-
   return (
     <div ref={ref} {...rest} className='absolute group flex flex-col' style={sectionStyle} >
       <svg xmlns="http://www.w3.org/2000/svg" className='sm-max:w-4 sm-max:h-4 z-10 cursor-pointer' width="32" height="32" viewBox="0 0 32 32" fill="none">
         <circle cx="16" cy="16" r="12" fill="white" stroke="#0F0F0F" strokeWidth='8' />
       </svg>
       <div className={clsx('hidden z-20 aspect-[2/1] bg-white absolute group-hover:flex flex-row justify-center items-center w-96 sm-max:w-36', Horizontal, Vertical)}>
-        <div className='w-1/2 bg-gray-300 h-full flex justify-center items-center aspect-square'>
+        <div className='w-1/2 bg-gray-300 h-full flex justify-center items-center'>
           {ProductImage ? ProductImage.map((image, index) => (
             <Image
               key={index}
@@ -79,7 +57,6 @@ let ProductHotspotItems = forwardRef<HTMLDivElement, ProductsHotspotProps>((prop
         <div className='text-center w-1/2 flex flex-col gap-2 justify-center items-center sm-max:gap-1'>
           <p className='box-border font-medium text text-[10px] sm:text-sm'>{ProductTittle}</p>
           <p className='box-content font-normal text-[10px] sm:text-sm'>{`${ProductPrice} ${ProductCurrency}`}</p>
-          {product.handle && <Link to={`/products/${product.handle}`} className='text-[10px] sm:text-sm underline'>See details</Link>}
         </div>
       </div>
     </div>

app/sections/shared/Description.tsx

@@ -44,8 +44,8 @@ let Description = forwardRef<
         alignmentClasses[alignment!],
         className,
       )}
-      dangerouslySetInnerHTML={{__html: content}}
     >
+      {content}
     </Tag>
   );
 });