Add basic transition gif implementation and fix search engine

packages/shopify/src/utils/get-search-variables.ts

@@ -11,7 +11,7 @@ export const getSearchVariables = ({
   let query = ''
 
   if (search) {
-    query += `product_type:"${search}" OR title:"${search}" OR tag:"${search}" `
+    query += `(product_type:${search}) OR (title:${search}) OR (tag:${search})`
   }
 
   if (brandId) {

pnpm-lock.yaml

@@ -631,6 +631,7 @@ importers:
       eslint-config-next: ^12.0.8
       eslint-config-prettier: ^8.3.0
       framer-motion: ^7.10.3
+      image-crossfade-react: ^1.0.0
       js-cookie: ^3.0.1
       keen-slider: ^6.7.0
       lint-staged: ^13.0.3
@@ -645,6 +646,7 @@ importers:
       postcss-preset-env: ^7.2.3
       prettier: ^2.5.1
       react: ^18.2.0
+      react-crossfade-image: ^1.2.0
       react-dom: ^18.2.0
       react-fast-marquee: ^1.3.1
       react-h5-audio-player: ^3.8.6
@@ -682,6 +684,7 @@ importers:
       clsx: 1.2.1
       email-validator: 2.0.4
       framer-motion: 7.10.3_biqbaboplfbrettd7655fr4n2y
+      image-crossfade-react: 1.0.0
       js-cookie: 3.0.1
       keen-slider: 6.8.0
       lodash.random: 3.2.0
@@ -692,6 +695,7 @@ importers:
       postcss: 8.4.16
       postcss-nesting: 10.1.10_postcss@8.4.16
       react: 18.2.0
+      react-crossfade-image: 1.2.0
       react-dom: 18.2.0_react@18.2.0
       react-fast-marquee: 1.3.5_biqbaboplfbrettd7655fr4n2y
       react-h5-audio-player: 3.8.6_biqbaboplfbrettd7655fr4n2y
@@ -7211,6 +7215,12 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /image-crossfade-react/1.0.0:
+    resolution: {integrity: sha512-0TwdAG/APUM7bcj+BTJ2OvIuTMjpbNcQFco+MNcOpSjKK9dCzCxDLtG9t0ZWa5/1W//Z5gc1jVq/hZcpWfW+NQ==}
+    dependencies:
+      react: 16.14.0
+    dev: false
+
   /immutability-helper/3.1.1:
     resolution: {integrity: sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ==}
     dev: false
@@ -9594,6 +9604,26 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-crossfade-image/1.2.0:
+    resolution: {integrity: sha512-y/rYGRc9Wmgw3UPHyfnjTB4bwaIwfr4fHArn6GwwYvuiLiJ2+yJGskN9J+qJJdQXEhwB8Oi+g8wNtD+svxdOkg==}
+    dependencies:
+      prop-types: 15.8.1
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+    dev: false
+
+  /react-dom/16.14.0_react@16.14.0:
+    resolution: {integrity: sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==}
+    peerDependencies:
+      react: ^16.14.0
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+      react: 16.14.0
+      scheduler: 0.19.1
+    dev: false
+
   /react-dom/18.2.0_react@18.2.0:
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -9753,6 +9783,15 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /react/16.14.0:
+    resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+    dev: false
+
   /react/18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -10072,6 +10111,13 @@ packages:
   /safer-buffer/2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  /scheduler/0.19.1:
+    resolution: {integrity: sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+    dev: false
+
   /scheduler/0.23.0:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:

site/components/common/HomePage/PolygonModal/PolygonModal.tsx

@@ -1,71 +1,96 @@
-import { 
-    Modal, 
-    ModalOverlay, 
-    ModalContent,  
-    ModalBody,
-    Box, 
-} from "@chakra-ui/react"
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  Box,
+} from '@chakra-ui/react'
 
-import decadesManifest from '../../../../static_data/decadesManifest.json';
-import { useRouter } from "next/router";
-import { useEffect, useRef, useState } from "react";
-import ImageMapper from "react-img-mapper"
+import decadesManifest from '../../../../static_data/decadesManifest.json'
+import { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
+import ImageMapper from 'react-img-mapper'
+import Image from 'next/image'
 
 export default function MarkerCardModal(props: {
-    isOpen: boolean,
-    onModalClose: () => void,
-    decade: string,
+  isOpen: boolean
+  onModalClose: () => void
+  decade: string
 }) {
+  const { locale } = useRouter()
+  const containerRef = useRef<any>()
 
-  const {locale} = useRouter();
-  const containerRef = useRef<any>();
+  const decadeColor =
+    decadesManifest[props.decade as keyof typeof decadesManifest].color
 
-  const decadeColor = decadesManifest[props.decade as keyof typeof decadesManifest].color;
-
-  const [width, setWidth] = useState(200);
+  const [width, setWidth] = useState(200)
   const [isMapLoaded, setIsMapLoaded] = useState<boolean>(false)
 
-  const [mapDefinition, setMapDefinition] = useState<any>() 
+  const [mapDefinition, setMapDefinition] = useState<any>()
+  const [isTransitionCompleted, setIsTransitionComplited] =
+    useState<boolean>(false)
 
-    const getContainerSize = () => {
-      if(containerRef.current != undefined) {
-        setWidth(containerRef.current.clientWidth);
-      }
-    };
-
-    const getMapDefinition = async () => {
-      const tempMapDefinition = await import("../../../../static_data/regions/abruzzo/" + props.decade + "/plan/manifest.json")
-      tempMapDefinition.areas.forEach((area: any) => {
-        area.href = "/" + locale + area.href
-      })
-      setMapDefinition(tempMapDefinition)
+  const getContainerSize = () => {
+    if (containerRef.current != undefined) {
+      setWidth(containerRef.current.clientWidth)
     }
-
-    useEffect(() => {
-      getContainerSize()
-    }, [isMapLoaded]);
-
-    useEffect(() => {
-      getMapDefinition()
-      return window.addEventListener("resize", getContainerSize);
-    }, []);
-
-    return (
-      <>
-        <Modal onClose={props.onModalClose} isOpen={props.isOpen} isCentered>
-          <ModalOverlay />
-          <ModalContent rounded={"lg"}>
-            <ModalBody rounded={"lg"} style={{background: 'linear-gradient(120deg, ' + decadeColor + ' 0%, #000000 130%)'}} p={5}>
-              <Box
-                w={'full'}
-                ref={containerRef}
-                >
-                  <ImageMapper onLoad={() => setIsMapLoaded(true)} natural stayHighlighted responsive={true} parentWidth={width} map={mapDefinition} src={"/regions/abruzzo/" + props.decade + "/plan/plan.jpeg"}></ImageMapper>
-              </Box>
-            </ModalBody>
-          </ModalContent>
-        </Modal>
-      </>
-    )
   }
-  
+
+  const getMapDefinition = async () => {
+    const tempMapDefinition = await import(
+      '../../../../static_data/regions/abruzzo/' +
+        props.decade +
+        '/plan/manifest.json'
+    )
+    tempMapDefinition.areas.forEach((area: any) => {
+      area.href = '/' + locale + area.href
+    })
+    setMapDefinition(tempMapDefinition)
+  }
+
+  useEffect(() => {
+    getMapDefinition()
+    return window.addEventListener('resize', getContainerSize)
+  }, [])
+
+  return (
+    <>
+      <Modal onClose={props.onModalClose} isOpen={props.isOpen} isCentered>
+        <ModalOverlay />
+        <ModalContent rounded={'lg'}>
+          <ModalBody
+            rounded={'lg'}
+            style={{
+              background:
+                'linear-gradient(120deg, ' + decadeColor + ' 0%, #000000 130%)',
+            }}
+            p={5}
+          >
+            <Box w={'full'} ref={containerRef}>
+              {!isTransitionCompleted ? (
+                <Image
+                  src={'/regions/abruzzo/11/plan/transition.gif'}
+                  height={200}
+                  width={200}
+                  onLoad={() =>
+                    setInterval(() => {
+                      setIsTransitionComplited(true)
+                    }, 5000)
+                  }
+                ></Image>
+              ) : (
+                <ImageMapper
+                  onLoad={() => setInterval(() => getContainerSize(), 10)}
+                  responsive={true}
+                  parentWidth={width}
+                  map={mapDefinition}
+                  src={'/regions/abruzzo/' + props.decade + '/plan/plan.jpeg'}
+                />
+              )}
+            </Box>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}

site/components/common/Navbar/Navbar.tsx

@@ -6,6 +6,7 @@ import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
 import { useDisclosure } from '@chakra-ui/react'
 import NavBarFiltersDrawer from './NavBarFiltersDrawer'
+import { useRouter } from 'next/router'
 
 interface Link {
   href: string
@@ -23,6 +24,8 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
     onClose: onCloseDrawer,
   } = useDisclosure()
 
+  const { locale } = useRouter()
+
   return (
     <>
       <NavBarFiltersDrawer
@@ -40,7 +43,9 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
               </Link>
               <nav className={s.navMenu}>
                 <Link href="/search">
-                  <a className={s.link}>All</a>
+                  <a className={s.link}>
+                    {locale === 'it' ? 'Prodotti' : 'All'}
+                  </a>
                 </Link>
                 {links?.map((l) => (
                   <Link href={l.href} key={l.href}>

site/config/seo_meta.json

@@ -1,9 +1,9 @@
 {
-  "title": "ACME Storefront | Powered by Next.js Commerce",
-  "titleTemplate": "%s - ACME Storefront",
-  "description": "Next.js Commerce - https://www.nextjs.org/commerce",
+  "title": "SafaraEcommerce",
+  "titleTemplate": "%s - SafaraEcommerce",
+  "description": "SafaraEcommerce",
   "openGraph": {
-    "title": "ACME Storefront | Powered by Next.js Commerce",
+    "title": "SafaraEcommerce",
     "description": "Next.js Commerce - https://www.nextjs.org/commerce",
     "type": "website",
     "url": "https://nextjs.org/commerce",

site/package.json

@@ -36,6 +36,7 @@
     "clsx": "^1.1.1",
     "email-validator": "^2.0.4",
     "framer-motion": "^7.10.3",
+    "image-crossfade-react": "^1.0.0",
     "js-cookie": "^3.0.1",
     "keen-slider": "^6.7.0",
     "lodash.random": "^3.2.0",
@@ -46,6 +47,7 @@
     "postcss": "^8.3.5",
     "postcss-nesting": "^10.1.10",
     "react": "^18.2.0",
+    "react-crossfade-image": "^1.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.3.1",
     "react-h5-audio-player": "^3.8.6",