{"version":3,"file":"ShopifyDetail.DXi-7Kgp.mjs","names":["React.useState"],"sources":["https:/framerusercontent.com/modules/dpp5DJf83k2hHoSA3PN7/CUTaBFaT4DCd1dQQt2b2/ShopifyDetail.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * SHOPIFY PRODUCT DETAIL (No-CMS Version)\n * Designed to sit on a page path like /shop/*\n */export default function ShopifyDetail(props){const[product,setProduct]=React.useState(null);const[loading,setLoading]=React.useState(true);const[error,setError]=React.useState(null);// Helper: Formatting\nconst formatPrice=(amount,currencyCode)=>{return new Intl.NumberFormat(\"en-US\",{style:\"currency\",currency:currencyCode}).format(amount);};React.useEffect(()=>{// --- URL LOGIC ---\n// 1. Get current path (e.g., \"/shop/antique-desk\")\nlet handle=props.handle// 1. Check for handle from Framer Override first\n;if(!handle){// 2. If no override handle, use existing URL logic (as a fallback)\nconst path=window.location.pathname;const cleanPath=path.endsWith(\"/\")?path.slice(0,-1):path;handle=cleanPath.split(\"/\").pop();}// Debugging for you\n// console.log(\"Current Path:\", cleanPath)\nconsole.log(\"Extracted Handle:\",handle);// 3. Validation: If we are just on \"/shop\", don't fetch\nif(handle===\"shop\"||!handle){setError(\"Select a product\");setLoading(false);return;}if(!props.storeDomain||!props.accessToken)return;// --- FETCH LOGIC ---\nconst fetchProduct=async()=>{// alert(\"handle is ${handle}\")\n//console.log(\"handle is ${handle}\")\nconst query=`\n            {\n              productByHandle(handle: \"${handle}\") {\n                id\n                title\n                description\n                images(first: 5) { edges { node { src } } }\n                variants(first: 1) { \n                    edges { \n                        node { \n                            id \n                            availableForSale \n                            price { amount currencyCode } \n                            compareAtPrice { amount currencyCode }\n                        } \n                    } \n                }\n              }\n            }\n            `;try{const response=await fetch(`https://${props.storeDomain}/api/2023-01/graphql.json`,{method:\"POST\",headers:{\"Content-Type\":\"application/json\",\"X-Shopify-Storefront-Access-Token\":props.accessToken},body:JSON.stringify({query})});const result=await response.json();if(result.errors)throw new Error(result.errors[0].message);// Specific check: Did Shopify return null? (Handle doesn't exist)\nif(!result.data||!result.data.productByHandle){throw new Error(\"Product not found\");}setProduct(result.data.productByHandle);}catch(err){setError(err.message);}finally{setLoading(false);}};fetchProduct();},[props.storeDomain,props.accessToken,props.handle]);// --- RENDER STATES ---\n// 1. Loading\nif(loading)return /*#__PURE__*/_jsx(\"div\",{style:statusStyle,children:/*#__PURE__*/_jsx(\"div\",{className:\"loading-spinner\",children:\"Loading...\"})});// 2. Error (or 404 behavior)\nif(error)return /*#__PURE__*/_jsxs(\"div\",{style:statusStyle,children:[/*#__PURE__*/_jsx(\"h3\",{children:\"Product not found\"}),/*#__PURE__*/_jsx(\"p\",{style:{color:\"#666\"},children:error}),/*#__PURE__*/_jsx(\"a\",{href:\"/\",style:backLinkStyle,children:\"← Back to Shop\"})]});// 3. Success\nif(!product)return null;const variantNode=product.variants.edges[0]?.node;const variantId=variantNode?.id.split(\"/\").pop();const mainImage=product.images.edges[0]?.node.src;const price=formatPrice(variantNode?.price.amount,variantNode?.price.currencyCode);const isAvailable=variantNode?.availableForSale;return /*#__PURE__*/_jsxs(\"div\",{style:wrapperStyle,children:[/*#__PURE__*/_jsxs(\"div\",{style:containerStyle,children:[/*#__PURE__*/_jsx(\"div\",{style:colStyle,children:/*#__PURE__*/_jsx(\"div\",{style:{...imageStyle,backgroundImage:`url(${mainImage})`}})}),/*#__PURE__*/_jsxs(\"div\",{style:colStyle,children:[/*#__PURE__*/_jsx(\"h1\",{style:titleStyle,children:product.title}),/*#__PURE__*/_jsx(\"h2\",{style:priceStyle,children:price}),/*#__PURE__*/_jsx(\"div\",{style:descStyle,children:product.description}),isAvailable?/*#__PURE__*/_jsx(\"a\",{href:`https://${props.storeDomain}/cart/${variantId}:1`,target:\"_blank\",rel:\"noopener noreferrer\",style:{...buttonStyle,backgroundColor:props.buttonColor},children:props.buttonLabel}):/*#__PURE__*/_jsx(\"div\",{style:disabledButtonStyle,children:\"Sold Out\"})]})]}),/*#__PURE__*/_jsx(\"style\",{children:`\n                @media (max-width: 800px) {\n                    .shopify-detail-grid {\n                        grid-template-columns: 1fr !important;\n                    }\n                }\n            `})]});}// --- STYLES ---\nconst wrapperStyle={width:\"100%\",minHeight:\"100vh\",display:\"flex\",justifyContent:\"center\",padding:\"60px 20px\",backgroundColor:\"#fff\"};const containerStyle={display:\"grid\",gridTemplateColumns:\"1fr 1fr\",gap:\"60px\",width:\"100%\",maxWidth:\"1100px\",className:\"shopify-detail-grid\"};const statusStyle={width:\"100%\",height:\"60vh\",display:\"flex\",flexDirection:\"column\",alignItems:\"center\",justifyContent:\"center\",fontFamily:\"Inter, sans-serif\"};const colStyle={display:\"flex\",flexDirection:\"column\",gap:\"24px\",justifyContent:\"flex-start\"};const imageStyle={width:\"100%\",aspectRatio:\"1 / 1\",backgroundSize:\"contain\",backgroundPosition:\"center top\",backgroundRepeat:\"no-repeat\",borderRadius:\"12px\"};const titleStyle={fontSize:\"36px\",fontWeight:700,margin:0,lineHeight:1.2,fontFamily:\"Inter, sans-serif\",color:\"#111\"};const priceStyle={fontSize:\"24px\",fontWeight:500,color:\"#555\",margin:0,fontFamily:\"Inter, sans-serif\"};const descStyle={fontSize:\"16px\",lineHeight:\"1.6\",color:\"#444\",fontFamily:\"Inter, sans-serif\",whiteSpace:\"pre-wrap\"};const buttonStyle={display:\"inline-block\",textAlign:\"center\",color:\"white\",padding:\"16px 32px\",borderRadius:\"8px\",textDecoration:\"none\",fontWeight:\"600\",maxWidth:\"250px\",cursor:\"pointer\",marginTop:\"20px\",fontFamily:\"Inter, sans-serif\"};const disabledButtonStyle={display:\"inline-block\",textAlign:\"center\",color:\"#999\",backgroundColor:\"#eee\",padding:\"16px 32px\",borderRadius:\"8px\",fontWeight:\"600\",maxWidth:\"250px\",cursor:\"not-allowed\",marginTop:\"20px\",fontFamily:\"Inter, sans-serif\"};const backLinkStyle={marginTop:\"20px\",textDecoration:\"none\",color:\"black\",fontWeight:600};addPropertyControls(ShopifyDetail,{storeDomain:{type:ControlType.String,title:\"Store Domain\",placeholder:\"shop.myshopify.com\"},accessToken:{type:ControlType.String,title:\"API Token\",placeholder:\"Paste Storefront Token...\"},buttonLabel:{type:ControlType.String,title:\"Button Text\",defaultValue:\"Add to Cart\"},buttonColor:{type:ControlType.Color,title:\"Button Color\",defaultValue:\"#000000\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ShopifyDetail\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ShopifyDetail.map"],"mappings":"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"}