feat module 6, 7 : pull Size Chart data from shopify, include Size Chart identifiers in product service

src/components/ProductDetails/ProductDetails.jsx

@@ -132,6 +132,7 @@ const ProductDetails = () => {
   const [variants, setVariants] = useState([])
   const [showLoader, setShowLoader] = useState(false)
   const [atomeOpen, setAtomeOpen] = useState(false)
+  const [sizeChartOpen, setSizeChartOpen] = useState(false)
   const [storeAvailabilityOpen, setStoreAvailabilityOpen] = useState(false)
   const [storeSearch, setStoreSearch] = useState("")
   const [expandedStoreRows, setExpandedStoreRows] = useState({})
@@ -391,6 +392,9 @@ const ProductDetails = () => {
   const shippingInformationMetafield = product?.metafields?.shipping_information
   const returnExchangeMetafield = product?.metafields?.return_exchange
   const productDetailsMetafield = product?.metafields?.product_details
+  const sizeChartMetafield = product?.metafields?.size_chart
+  const sizeChartImageUrl = sizeChartMetafield?.reference?.image?.url || sizeChartMetafield?.reference?.url || ""
+  const sizeChartImageAlt = sizeChartMetafield?.reference?.image?.altText || `${product?.title || "Product"} size chart`
 
   // Renders Shopify product metafield custom.material inside the Material row.
   const materialPanel = (
@@ -713,7 +717,11 @@ const ProductDetails = () => {
 
           <Box
             component="a"
-            href="#"
+            href={sizeChartImageUrl || "#"}
+            onClick={(event) => {
+              event.preventDefault()
+              if (sizeChartImageUrl) setSizeChartOpen(true)
+            }}
             sx={{
               display: "inline-flex",
               alignItems: "center",
@@ -721,7 +729,8 @@ const ProductDetails = () => {
               textDecoration: "underline",
               textTransform: "uppercase",
               fontSize: "0.875rem",
-              mb: 1
+              mb: 1,
+              cursor: sizeChartImageUrl ? "pointer" : "default"
             }}
           >
             <StraightenIcon sx={{ mr: 0.75, fontSize: 20 }} />
@@ -1139,6 +1148,57 @@ const ProductDetails = () => {
         </Box>
       </Dialog>
 
+      {/* Size Chart Popup */}
+      <Dialog
+        open={sizeChartOpen}
+        onClose={() => setSizeChartOpen(false)}
+        maxWidth={false}
+        PaperProps={{
+          sx: {
+            borderRadius: 1,
+            backgroundColor: "#FFF",
+            width: { xs: "calc(100% - 32px)", md: "auto" },
+            maxWidth: { xs: "calc(100% - 32px)", md: "90vw" },
+            maxHeight: "90vh",
+            p: { xs: 1.5, md: 2 },
+            position: "relative",
+            overflow: "visible"
+          }
+        }}
+      >
+        <IconButton
+          aria-label="Close size chart"
+          onClick={() => setSizeChartOpen(false)}
+          sx={{
+            position: "absolute",
+            right: { xs: -12, md: -16 },
+            top: { xs: -12, md: -16 },
+            backgroundColor: "#FFF",
+            color: "#000",
+            zIndex: 1,
+            boxShadow: "0 1px 4px rgba(0,0,0,0.2)",
+            "&:hover": {
+              backgroundColor: "#FFF"
+            }
+          }}
+        >
+          <CloseIcon sx={{ fontSize: { xs: 24, md: 30 } }} />
+        </IconButton>
+
+        <Box
+          component="img"
+          src={sizeChartImageUrl}
+          alt={sizeChartImageAlt}
+          sx={{
+            display: "block",
+            width: "100%",
+            maxWidth: { xs: "100%", md: "80vw" },
+            maxHeight: "80vh",
+            objectFit: "contain"
+          }}
+        />
+      </Dialog>
+
       {/* Store Availability Sidebar */}
       <Drawer
         anchor="right"

src/services/ProductService.js

@@ -171,13 +171,25 @@ const getProduct = async (handle = "") => {
           {key: "care_instruction", namespace: "custom"},
           {key: "shipping_information", namespace: "custom"},
           {key: "return_exchange", namespace: "custom"},
-          {key: "product_details", namespace: "custom"}
+          {key: "product_details", namespace: "custom"},
+          {key: "size_chart", namespace: "custom"}
         ]
       ) {
         namespace
         key
         type
         value
+        reference {
+          ... on MediaImage {
+            image {
+              url
+              altText
+            }
+          }
+          ... on GenericFile {
+            url
+          }
+        }
       }
     }
   }`