[{"data":1,"prerenderedAt":3661},["ShallowReactive",2],{"navigation_docs":3,"-examples-product-page":134,"-examples-product-page-surround":3603,"product-men-t-shirt":3608},[4,31,77,108],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting Started","i-lucide-play","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-home",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-plug",{"title":21,"path":22,"stem":23,"icon":24},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F4.usage","i-lucide-code",{"title":26,"path":27,"stem":28,"icon":29},"Editor","\u002Fgetting-started\u002Feditor","1.getting-started\u002F5.editor","i-lucide-wrench",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Essentials","i-lucide-book","\u002Fessentials","2.essentials",[37,42,47,52,57,62,67,72],{"title":38,"path":39,"stem":40,"icon":41},"Setup Shopify","\u002Fessentials\u002Fsetup-shopify","2.essentials\u002F1.setup-shopify","i-lucide-shopping-bag",{"title":43,"path":44,"stem":45,"icon":46},"Module Config","\u002Fessentials\u002Fconfiguration","2.essentials\u002F2.configuration","i-lucide-anvil",{"title":48,"path":49,"stem":50,"icon":51},"Storefront API","\u002Fessentials\u002Fstorefront","2.essentials\u002F3.storefront","i-lucide-store",{"title":53,"path":54,"stem":55,"icon":56},"Customer API","\u002Fessentials\u002Fcustomer-account","2.essentials\u002F4.customer-account","i-lucide-user",{"title":58,"path":59,"stem":60,"icon":61},"Admin API","\u002Fessentials\u002Fadmin","2.essentials\u002F5.admin","i-lucide-shield",{"title":63,"path":64,"stem":65,"icon":66},"Error Handling","\u002Fessentials\u002Ferror-handling","2.essentials\u002F6.error-handling","i-lucide-bug",{"title":68,"path":69,"stem":70,"icon":71},"Caching","\u002Fessentials\u002Fcaching","2.essentials\u002F7.caching","i-lucide-rabbit",{"title":73,"path":74,"stem":75,"icon":76},"Analytics","\u002Fessentials\u002Fanalytics","2.essentials\u002F8.analytics","i-lucide-chart-line",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":30},"Examples","i-lucide-chef-hat","\u002Fexamples","3.examples",[83,88,93,98,103],{"title":84,"path":85,"stem":86,"icon":87},"Navigation Menu","\u002Fexamples\u002Fnavigation-tree","3.examples\u002F1.navigation-tree","i-lucide-menu",{"title":89,"path":90,"stem":91,"icon":92},"Collection Page","\u002Fexamples\u002Fcollection-page","3.examples\u002F2.collection-page","i-lucide-group",{"title":94,"path":95,"stem":96,"icon":97},"Collection Filters","\u002Fexamples\u002Fcollection-filters","3.examples\u002F3.collection-filters","i-lucide-funnel",{"title":99,"path":100,"stem":101,"icon":102},"Product Page","\u002Fexamples\u002Fproduct-page","3.examples\u002F4.product-page","i-lucide-shirt",{"title":104,"path":105,"stem":106,"icon":107},"Using the Cart","\u002Fexamples\u002Fcart","3.examples\u002F5.cart","i-lucide-shopping-cart",{"title":109,"icon":110,"path":111,"stem":112,"children":113,"page":30},"Going Further","i-lucide-pickaxe","\u002Fgoing-further","4.going-further",[114,119,124,129],{"title":115,"path":116,"stem":117,"icon":118},"Hooks","\u002Fgoing-further\u002Fhooks","4.going-further\u002F1.hooks","i-lucide-between-horizontal-start",{"title":120,"path":121,"stem":122,"icon":123},"Codegen","\u002Fgoing-further\u002Fcodegen","4.going-further\u002F2.codegen","i-lucide-wand-sparkles",{"title":125,"path":126,"stem":127,"icon":128},"GraphQL Explorer","\u002Fgoing-further\u002Fexplorer","4.going-further\u002F3.explorer","i-lucide-app-window",{"title":130,"path":131,"stem":132,"icon":133},"Webhooks","\u002Fgoing-further\u002Fwebhooks","4.going-further\u002F4.webhooks","i-lucide-fishing-hook",{"id":135,"title":99,"body":136,"description":3596,"extension":3597,"links":3598,"meta":3599,"navigation":3600,"path":100,"seo":3601,"stem":101,"__hash__":3602},"docs\u002F3.examples\u002F4.product-page.md",{"type":137,"value":138,"toc":3590},"minimark",[139,143,147,2495,2506,2511,2518,2633,2663,2667,2682,2812,2815,2846,2855,3032,3038,3042,3052,3464,3474,3478,3481,3579,3586],[140,141,142],"note",{},"With the upcoming release of @shopify\u002Fhydrogen-vue the examples will be updated to use the new composables and components, so the current examples may become outdated.",[144,145,146],"p",{},"For your customers to view and buy your products, you need a Product page with a variant picker, price, image, availability, etc.\nThis example fetches a product with its options, hands the customer's selection to Shopify to resolve the matching variant,\nand adds a quantity input and add-to-cart button.",[148,149,150],"card",{},[151,152,153,164],"tabs",{},[154,155,158],"tabs-item",{"icon":156,"label":157},"i-lucide-eye","Preview",[159,160],"example-product-page",{"className":161,"handle":163},[162],"pt-2","men-t-shirt",[154,165,167],{"icon":24,"label":166},"Code",[168,169,172,1820,2276,2342,2441],"code-tree",{":expand-all":170,"default-value":171},"true","app\u002Fpages\u002Fproducts\u002F[handle].vue",[173,174,179],"pre",{"className":175,"code":176,"filename":171,"language":177,"meta":178,"style":178},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst route = useRoute()\nconst router = useRouter()\n\nconst quantity = ref(1)\n\nconst { data: product } = await useStorefrontData(`product-${route.params.handle}`, `#graphql\n  query GetProductDetails($handle: String!, $selectedOptions: [SelectedOptionInput!]) {\n    product(handle: $handle) {\n      id\n      title\n      description\n      featuredImage {\n        ...ImageFields\n      }\n      options {\n        ...ProductOptionFields\n      }\n      selectedOrFirstAvailableVariant(selectedOptions: $selectedOptions) {\n        ...ProductVariantFields\n      }\n    }\n  }\n`, {\n  variables: computed(() => ({\n    handle: route.params.handle,\n    selectedOptions: Object.entries(route.query).map(([name, value]) => ({ name, value: String(value) })),\n  })),\n  transform: data => data.product,\n  watch: [() => route.query],\n})\n\nconst variant = computed(() => product.value?.selectedOrFirstAvailableVariant)\n\nconst selected = computed\u003CRecord\u003Cstring, string>>({\n  get: () => Object.keys(route.query).length\n    ? { ...route.query } as Record\u003Cstring, string>\n    : Object.fromEntries(variant.value?.selectedOptions.map(option => [option.name, option.value]) ?? []),\n  set: options => router.push({ query: options }),\n})\n\nconst image = computed(() => variant.value?.image ?? product.value?.featuredImage)\n\nconst price = computed(() => {\n  if (!variant.value) return ''\n\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: variant.value.price.currencyCode,\n  }).format(Number(variant.value.price.amount))\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"grid gap-8 md:grid-cols-2\">\n    \u003CNuxtImg\n      provider=\"shopify\"\n      v-if=\"image\"\n      :src=\"image.url\"\n      :alt=\"image.altText ?? undefined\"\n      :width=\"image.width ?? undefined\"\n      :height=\"image.height ?? undefined\"\n      sizes=\"xs:100vw sm:50vw md:33vw\"\n      class=\"rounded-md\"\n    \u002F>\n\n    \u003Cdiv class=\"space-y-6\">\n      \u003Cdiv>\n        \u003Cp class=\"text-2xl font-bold\">\n          {{ product?.title }}\n        \u003C\u002Fp>\n\n        \u003Cp class=\"text-xl\">\n          {{ price }}\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003Cp class=\"text-muted\">\n        {{ product?.description }}\n      \u003C\u002Fp>\n\n      \u003CVariantSelector\n        v-if=\"product\"\n        v-model=\"selected\"\n        :options=\"product.options\"\n      \u002F>\n\n      \u003Cdiv class=\"flex items-end gap-4\">\n        \u003Cdiv>\n          \u003Cp class=\"mb-2 text-sm font-semibold text-muted\">\n            Quantity\n          \u003C\u002Fp>\n\n          \u003CUInputNumber\n            v-model=\"quantity\"\n            :min=\"1\"\n            class=\"w-32\"\n          \u002F>\n        \u003C\u002Fdiv>\n\n        \u003CUButton\n          size=\"lg\"\n          :disabled=\"!variant?.availableForSale\"\n        >\n          {{ variant?.availableForSale ? 'Add to Cart' : 'Unavailable' }}\n        \u003C\u002FUButton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[180,181,182,217,236,251,258,281,286,353,359,365,371,377,383,389,395,401,407,413,418,424,430,435,441,447,457,482,504,579,589,610,634,641,646,678,683,718,749,785,846,886,893,898,941,946,966,993,998,1029,1047,1073,1110,1117,1127,1132,1142,1165,1174,1190,1205,1227,1251,1273,1295,1310,1325,1331,1336,1356,1366,1387,1393,1403,1408,1428,1434,1443,1453,1458,1478,1484,1493,1498,1506,1520,1535,1556,1562,1567,1587,1596,1617,1623,1633,1638,1646,1661,1678,1693,1699,1708,1713,1721,1736,1760,1766,1772,1782,1791,1801,1811],"code",{"__ignoreMap":178},[183,184,187,191,195,199,202,205,208,212,214],"span",{"class":185,"line":186},"line",1,[183,188,190],{"class":189},"sMK4o","\u003C",[183,192,194],{"class":193},"swJcz","script",[183,196,198],{"class":197},"spNyl"," setup",[183,200,201],{"class":197}," lang",[183,203,204],{"class":189},"=",[183,206,207],{"class":189},"\"",[183,209,211],{"class":210},"sfazB","ts",[183,213,207],{"class":189},[183,215,216],{"class":189},">\n",[183,218,220,223,227,229,233],{"class":185,"line":219},2,[183,221,222],{"class":197},"const",[183,224,226],{"class":225},"sTEyZ"," route ",[183,228,204],{"class":189},[183,230,232],{"class":231},"s2Zo4"," useRoute",[183,234,235],{"class":225},"()\n",[183,237,239,241,244,246,249],{"class":185,"line":238},3,[183,240,222],{"class":197},[183,242,243],{"class":225}," router ",[183,245,204],{"class":189},[183,247,248],{"class":231}," useRouter",[183,250,235],{"class":225},[183,252,254],{"class":185,"line":253},4,[183,255,257],{"emptyLinePlaceholder":256},true,"\n",[183,259,261,263,266,268,271,274,278],{"class":185,"line":260},5,[183,262,222],{"class":197},[183,264,265],{"class":225}," quantity ",[183,267,204],{"class":189},[183,269,270],{"class":231}," ref",[183,272,273],{"class":225},"(",[183,275,277],{"class":276},"sbssI","1",[183,279,280],{"class":225},")\n",[183,282,284],{"class":185,"line":283},6,[183,285,257],{"emptyLinePlaceholder":256},[183,287,289,291,294,297,300,303,306,309,313,316,318,321,324,327,330,333,336,338,341,344,347,350],{"class":185,"line":288},7,[183,290,222],{"class":197},[183,292,293],{"class":189}," {",[183,295,296],{"class":193}," data",[183,298,299],{"class":189},":",[183,301,302],{"class":225}," product ",[183,304,305],{"class":189},"}",[183,307,308],{"class":189}," =",[183,310,312],{"class":311},"s7zQu"," await",[183,314,315],{"class":231}," useStorefrontData",[183,317,273],{"class":225},[183,319,320],{"class":189},"`",[183,322,323],{"class":210},"product-",[183,325,326],{"class":189},"${",[183,328,329],{"class":225},"route",[183,331,332],{"class":189},".",[183,334,335],{"class":225},"params",[183,337,332],{"class":189},[183,339,340],{"class":225},"handle",[183,342,343],{"class":189},"}`",[183,345,346],{"class":189},",",[183,348,349],{"class":189}," `",[183,351,352],{"class":210},"#graphql\n",[183,354,356],{"class":185,"line":355},8,[183,357,358],{"class":210},"  query GetProductDetails($handle: String!, $selectedOptions: [SelectedOptionInput!]) {\n",[183,360,362],{"class":185,"line":361},9,[183,363,364],{"class":210},"    product(handle: $handle) {\n",[183,366,368],{"class":185,"line":367},10,[183,369,370],{"class":210},"      id\n",[183,372,374],{"class":185,"line":373},11,[183,375,376],{"class":210},"      title\n",[183,378,380],{"class":185,"line":379},12,[183,381,382],{"class":210},"      description\n",[183,384,386],{"class":185,"line":385},13,[183,387,388],{"class":210},"      featuredImage {\n",[183,390,392],{"class":185,"line":391},14,[183,393,394],{"class":210},"        ...ImageFields\n",[183,396,398],{"class":185,"line":397},15,[183,399,400],{"class":210},"      }\n",[183,402,404],{"class":185,"line":403},16,[183,405,406],{"class":210},"      options {\n",[183,408,410],{"class":185,"line":409},17,[183,411,412],{"class":210},"        ...ProductOptionFields\n",[183,414,416],{"class":185,"line":415},18,[183,417,400],{"class":210},[183,419,421],{"class":185,"line":420},19,[183,422,423],{"class":210},"      selectedOrFirstAvailableVariant(selectedOptions: $selectedOptions) {\n",[183,425,427],{"class":185,"line":426},20,[183,428,429],{"class":210},"        ...ProductVariantFields\n",[183,431,433],{"class":185,"line":432},21,[183,434,400],{"class":210},[183,436,438],{"class":185,"line":437},22,[183,439,440],{"class":210},"    }\n",[183,442,444],{"class":185,"line":443},23,[183,445,446],{"class":210},"  }\n",[183,448,450,452,454],{"class":185,"line":449},24,[183,451,320],{"class":189},[183,453,346],{"class":189},[183,455,456],{"class":189}," {\n",[183,458,460,463,465,468,470,473,476,479],{"class":185,"line":459},25,[183,461,462],{"class":193},"  variables",[183,464,299],{"class":189},[183,466,467],{"class":231}," computed",[183,469,273],{"class":225},[183,471,472],{"class":189},"()",[183,474,475],{"class":197}," =>",[183,477,478],{"class":225}," (",[183,480,481],{"class":189},"{\n",[183,483,485,488,490,493,495,497,499,501],{"class":185,"line":484},26,[183,486,487],{"class":193},"    handle",[183,489,299],{"class":189},[183,491,492],{"class":225}," route",[183,494,332],{"class":189},[183,496,335],{"class":225},[183,498,332],{"class":189},[183,500,340],{"class":225},[183,502,503],{"class":189},",\n",[183,505,507,510,512,515,517,520,523,525,528,530,533,535,538,542,544,547,550,552,554,557,560,562,564,566,569,572,574,577],{"class":185,"line":506},27,[183,508,509],{"class":193},"    selectedOptions",[183,511,299],{"class":189},[183,513,514],{"class":225}," Object",[183,516,332],{"class":189},[183,518,519],{"class":231},"entries",[183,521,522],{"class":225},"(route",[183,524,332],{"class":189},[183,526,527],{"class":225},"query)",[183,529,332],{"class":189},[183,531,532],{"class":231},"map",[183,534,273],{"class":225},[183,536,537],{"class":189},"([",[183,539,541],{"class":540},"sHdIc","name",[183,543,346],{"class":189},[183,545,546],{"class":540}," value",[183,548,549],{"class":189},"])",[183,551,475],{"class":197},[183,553,478],{"class":225},[183,555,556],{"class":189},"{",[183,558,559],{"class":225}," name",[183,561,346],{"class":189},[183,563,546],{"class":193},[183,565,299],{"class":189},[183,567,568],{"class":231}," String",[183,570,571],{"class":225},"(value) ",[183,573,305],{"class":189},[183,575,576],{"class":225},"))",[183,578,503],{"class":189},[183,580,582,585,587],{"class":185,"line":581},28,[183,583,584],{"class":189},"  }",[183,586,576],{"class":225},[183,588,503],{"class":189},[183,590,592,595,597,599,601,603,605,608],{"class":185,"line":591},29,[183,593,594],{"class":231},"  transform",[183,596,299],{"class":189},[183,598,296],{"class":540},[183,600,475],{"class":197},[183,602,296],{"class":225},[183,604,332],{"class":189},[183,606,607],{"class":225},"product",[183,609,503],{"class":189},[183,611,613,616,618,621,623,625,627,629,632],{"class":185,"line":612},30,[183,614,615],{"class":193},"  watch",[183,617,299],{"class":189},[183,619,620],{"class":225}," [",[183,622,472],{"class":189},[183,624,475],{"class":197},[183,626,492],{"class":225},[183,628,332],{"class":189},[183,630,631],{"class":225},"query]",[183,633,503],{"class":189},[183,635,637,639],{"class":185,"line":636},31,[183,638,305],{"class":189},[183,640,280],{"class":225},[183,642,644],{"class":185,"line":643},32,[183,645,257],{"emptyLinePlaceholder":256},[183,647,649,651,654,656,658,660,662,664,667,669,672,675],{"class":185,"line":648},33,[183,650,222],{"class":197},[183,652,653],{"class":225}," variant ",[183,655,204],{"class":189},[183,657,467],{"class":231},[183,659,273],{"class":225},[183,661,472],{"class":189},[183,663,475],{"class":197},[183,665,666],{"class":225}," product",[183,668,332],{"class":189},[183,670,671],{"class":225},"value",[183,673,674],{"class":189},"?.",[183,676,677],{"class":225},"selectedOrFirstAvailableVariant)\n",[183,679,681],{"class":185,"line":680},34,[183,682,257],{"emptyLinePlaceholder":256},[183,684,686,688,691,693,695,697,701,703,706,708,711,714,716],{"class":185,"line":685},35,[183,687,222],{"class":197},[183,689,690],{"class":225}," selected ",[183,692,204],{"class":189},[183,694,467],{"class":231},[183,696,190],{"class":189},[183,698,700],{"class":699},"sBMFI","Record",[183,702,190],{"class":189},[183,704,705],{"class":699},"string",[183,707,346],{"class":189},[183,709,710],{"class":699}," string",[183,712,713],{"class":189},">>",[183,715,273],{"class":225},[183,717,481],{"class":189},[183,719,721,724,726,729,731,733,735,738,740,742,744,746],{"class":185,"line":720},36,[183,722,723],{"class":231},"  get",[183,725,299],{"class":189},[183,727,728],{"class":189}," ()",[183,730,475],{"class":197},[183,732,514],{"class":225},[183,734,332],{"class":189},[183,736,737],{"class":231},"keys",[183,739,522],{"class":225},[183,741,332],{"class":189},[183,743,527],{"class":225},[183,745,332],{"class":189},[183,747,748],{"class":225},"length\n",[183,750,752,755,757,760,762,764,767,769,772,775,777,779,781,783],{"class":185,"line":751},37,[183,753,754],{"class":189},"    ?",[183,756,293],{"class":189},[183,758,759],{"class":189}," ...",[183,761,329],{"class":225},[183,763,332],{"class":189},[183,765,766],{"class":225},"query ",[183,768,305],{"class":189},[183,770,771],{"class":311}," as",[183,773,774],{"class":699}," Record",[183,776,190],{"class":189},[183,778,705],{"class":699},[183,780,346],{"class":189},[183,782,710],{"class":699},[183,784,216],{"class":189},[183,786,788,791,793,795,798,801,803,805,807,810,812,814,816,819,821,824,826,828,830,833,835,838,841,844],{"class":185,"line":787},38,[183,789,790],{"class":189},"    :",[183,792,514],{"class":225},[183,794,332],{"class":189},[183,796,797],{"class":231},"fromEntries",[183,799,800],{"class":225},"(variant",[183,802,332],{"class":189},[183,804,671],{"class":225},[183,806,674],{"class":189},[183,808,809],{"class":225},"selectedOptions",[183,811,332],{"class":189},[183,813,532],{"class":231},[183,815,273],{"class":225},[183,817,818],{"class":540},"option",[183,820,475],{"class":197},[183,822,823],{"class":225}," [option",[183,825,332],{"class":189},[183,827,541],{"class":225},[183,829,346],{"class":189},[183,831,832],{"class":225}," option",[183,834,332],{"class":189},[183,836,837],{"class":225},"value]) ",[183,839,840],{"class":189},"??",[183,842,843],{"class":225}," [])",[183,845,503],{"class":189},[183,847,849,852,854,857,859,862,864,867,869,871,874,876,879,881,884],{"class":185,"line":848},39,[183,850,851],{"class":231},"  set",[183,853,299],{"class":189},[183,855,856],{"class":540}," options",[183,858,475],{"class":197},[183,860,861],{"class":225}," router",[183,863,332],{"class":189},[183,865,866],{"class":231},"push",[183,868,273],{"class":225},[183,870,556],{"class":189},[183,872,873],{"class":193}," query",[183,875,299],{"class":189},[183,877,878],{"class":225}," options ",[183,880,305],{"class":189},[183,882,883],{"class":225},")",[183,885,503],{"class":189},[183,887,889,891],{"class":185,"line":888},40,[183,890,305],{"class":189},[183,892,280],{"class":225},[183,894,896],{"class":185,"line":895},41,[183,897,257],{"emptyLinePlaceholder":256},[183,899,901,903,906,908,910,912,914,916,919,921,923,925,928,930,932,934,936,938],{"class":185,"line":900},42,[183,902,222],{"class":197},[183,904,905],{"class":225}," image ",[183,907,204],{"class":189},[183,909,467],{"class":231},[183,911,273],{"class":225},[183,913,472],{"class":189},[183,915,475],{"class":197},[183,917,918],{"class":225}," variant",[183,920,332],{"class":189},[183,922,671],{"class":225},[183,924,674],{"class":189},[183,926,927],{"class":225},"image ",[183,929,840],{"class":189},[183,931,666],{"class":225},[183,933,332],{"class":189},[183,935,671],{"class":225},[183,937,674],{"class":189},[183,939,940],{"class":225},"featuredImage)\n",[183,942,944],{"class":185,"line":943},43,[183,945,257],{"emptyLinePlaceholder":256},[183,947,949,951,954,956,958,960,962,964],{"class":185,"line":948},44,[183,950,222],{"class":197},[183,952,953],{"class":225}," price ",[183,955,204],{"class":189},[183,957,467],{"class":231},[183,959,273],{"class":225},[183,961,472],{"class":189},[183,963,475],{"class":197},[183,965,456],{"class":189},[183,967,969,972,974,977,980,982,984,987,990],{"class":185,"line":968},45,[183,970,971],{"class":311},"  if",[183,973,478],{"class":193},[183,975,976],{"class":189},"!",[183,978,979],{"class":225},"variant",[183,981,332],{"class":189},[183,983,671],{"class":225},[183,985,986],{"class":193},") ",[183,988,989],{"class":311},"return",[183,991,992],{"class":189}," ''\n",[183,994,996],{"class":185,"line":995},46,[183,997,257],{"emptyLinePlaceholder":256},[183,999,1001,1004,1007,1010,1012,1015,1017,1020,1023,1025,1027],{"class":185,"line":1000},47,[183,1002,1003],{"class":311},"  return",[183,1005,1006],{"class":189}," new",[183,1008,1009],{"class":225}," Intl",[183,1011,332],{"class":189},[183,1013,1014],{"class":231},"NumberFormat",[183,1016,273],{"class":193},[183,1018,1019],{"class":189},"'",[183,1021,1022],{"class":210},"en-US",[183,1024,1019],{"class":189},[183,1026,346],{"class":189},[183,1028,456],{"class":189},[183,1030,1032,1035,1037,1040,1043,1045],{"class":185,"line":1031},48,[183,1033,1034],{"class":193},"    style",[183,1036,299],{"class":189},[183,1038,1039],{"class":189}," '",[183,1041,1042],{"class":210},"currency",[183,1044,1019],{"class":189},[183,1046,503],{"class":189},[183,1048,1050,1053,1055,1057,1059,1061,1063,1066,1068,1071],{"class":185,"line":1049},49,[183,1051,1052],{"class":193},"    currency",[183,1054,299],{"class":189},[183,1056,918],{"class":225},[183,1058,332],{"class":189},[183,1060,671],{"class":225},[183,1062,332],{"class":189},[183,1064,1065],{"class":225},"price",[183,1067,332],{"class":189},[183,1069,1070],{"class":225},"currencyCode",[183,1072,503],{"class":189},[183,1074,1076,1078,1080,1082,1085,1087,1090,1092,1094,1096,1098,1100,1102,1104,1107],{"class":185,"line":1075},50,[183,1077,584],{"class":189},[183,1079,883],{"class":193},[183,1081,332],{"class":189},[183,1083,1084],{"class":231},"format",[183,1086,273],{"class":193},[183,1088,1089],{"class":231},"Number",[183,1091,273],{"class":193},[183,1093,979],{"class":225},[183,1095,332],{"class":189},[183,1097,671],{"class":225},[183,1099,332],{"class":189},[183,1101,1065],{"class":225},[183,1103,332],{"class":189},[183,1105,1106],{"class":225},"amount",[183,1108,1109],{"class":193},"))\n",[183,1111,1113,1115],{"class":185,"line":1112},51,[183,1114,305],{"class":189},[183,1116,280],{"class":225},[183,1118,1120,1123,1125],{"class":185,"line":1119},52,[183,1121,1122],{"class":189},"\u003C\u002F",[183,1124,194],{"class":193},[183,1126,216],{"class":189},[183,1128,1130],{"class":185,"line":1129},53,[183,1131,257],{"emptyLinePlaceholder":256},[183,1133,1135,1137,1140],{"class":185,"line":1134},54,[183,1136,190],{"class":189},[183,1138,1139],{"class":193},"template",[183,1141,216],{"class":189},[183,1143,1145,1148,1151,1154,1156,1158,1161,1163],{"class":185,"line":1144},55,[183,1146,1147],{"class":189},"  \u003C",[183,1149,1150],{"class":193},"div",[183,1152,1153],{"class":197}," class",[183,1155,204],{"class":189},[183,1157,207],{"class":189},[183,1159,1160],{"class":210},"grid gap-8 md:grid-cols-2",[183,1162,207],{"class":189},[183,1164,216],{"class":189},[183,1166,1168,1171],{"class":185,"line":1167},56,[183,1169,1170],{"class":189},"    \u003C",[183,1172,1173],{"class":193},"NuxtImg\n",[183,1175,1177,1180,1182,1184,1187],{"class":185,"line":1176},57,[183,1178,1179],{"class":197},"      provider",[183,1181,204],{"class":189},[183,1183,207],{"class":189},[183,1185,1186],{"class":210},"shopify",[183,1188,1189],{"class":189},"\"\n",[183,1191,1193,1196,1198,1200,1203],{"class":185,"line":1192},58,[183,1194,1195],{"class":311},"      v-if",[183,1197,204],{"class":189},[183,1199,207],{"class":189},[183,1201,1202],{"class":225},"image",[183,1204,1189],{"class":189},[183,1206,1208,1211,1214,1216,1218,1220,1222,1225],{"class":185,"line":1207},59,[183,1209,1210],{"class":189},"      :",[183,1212,1213],{"class":197},"src",[183,1215,204],{"class":189},[183,1217,207],{"class":189},[183,1219,1202],{"class":225},[183,1221,332],{"class":189},[183,1223,1224],{"class":225},"url",[183,1226,1189],{"class":189},[183,1228,1230,1232,1235,1237,1239,1241,1243,1246,1249],{"class":185,"line":1229},60,[183,1231,1210],{"class":189},[183,1233,1234],{"class":197},"alt",[183,1236,204],{"class":189},[183,1238,207],{"class":189},[183,1240,1202],{"class":225},[183,1242,332],{"class":189},[183,1244,1245],{"class":225},"altText",[183,1247,1248],{"class":189}," ?? undefined",[183,1250,1189],{"class":189},[183,1252,1254,1256,1259,1261,1263,1265,1267,1269,1271],{"class":185,"line":1253},61,[183,1255,1210],{"class":189},[183,1257,1258],{"class":197},"width",[183,1260,204],{"class":189},[183,1262,207],{"class":189},[183,1264,1202],{"class":225},[183,1266,332],{"class":189},[183,1268,1258],{"class":225},[183,1270,1248],{"class":189},[183,1272,1189],{"class":189},[183,1274,1276,1278,1281,1283,1285,1287,1289,1291,1293],{"class":185,"line":1275},62,[183,1277,1210],{"class":189},[183,1279,1280],{"class":197},"height",[183,1282,204],{"class":189},[183,1284,207],{"class":189},[183,1286,1202],{"class":225},[183,1288,332],{"class":189},[183,1290,1280],{"class":225},[183,1292,1248],{"class":189},[183,1294,1189],{"class":189},[183,1296,1298,1301,1303,1305,1308],{"class":185,"line":1297},63,[183,1299,1300],{"class":197},"      sizes",[183,1302,204],{"class":189},[183,1304,207],{"class":189},[183,1306,1307],{"class":210},"xs:100vw sm:50vw md:33vw",[183,1309,1189],{"class":189},[183,1311,1313,1316,1318,1320,1323],{"class":185,"line":1312},64,[183,1314,1315],{"class":197},"      class",[183,1317,204],{"class":189},[183,1319,207],{"class":189},[183,1321,1322],{"class":210},"rounded-md",[183,1324,1189],{"class":189},[183,1326,1328],{"class":185,"line":1327},65,[183,1329,1330],{"class":189},"    \u002F>\n",[183,1332,1334],{"class":185,"line":1333},66,[183,1335,257],{"emptyLinePlaceholder":256},[183,1337,1339,1341,1343,1345,1347,1349,1352,1354],{"class":185,"line":1338},67,[183,1340,1170],{"class":189},[183,1342,1150],{"class":193},[183,1344,1153],{"class":197},[183,1346,204],{"class":189},[183,1348,207],{"class":189},[183,1350,1351],{"class":210},"space-y-6",[183,1353,207],{"class":189},[183,1355,216],{"class":189},[183,1357,1359,1362,1364],{"class":185,"line":1358},68,[183,1360,1361],{"class":189},"      \u003C",[183,1363,1150],{"class":193},[183,1365,216],{"class":189},[183,1367,1369,1372,1374,1376,1378,1380,1383,1385],{"class":185,"line":1368},69,[183,1370,1371],{"class":189},"        \u003C",[183,1373,144],{"class":193},[183,1375,1153],{"class":197},[183,1377,204],{"class":189},[183,1379,207],{"class":189},[183,1381,1382],{"class":210},"text-2xl font-bold",[183,1384,207],{"class":189},[183,1386,216],{"class":189},[183,1388,1390],{"class":185,"line":1389},70,[183,1391,1392],{"class":225},"          {{ product?.title }}\n",[183,1394,1396,1399,1401],{"class":185,"line":1395},71,[183,1397,1398],{"class":189},"        \u003C\u002F",[183,1400,144],{"class":193},[183,1402,216],{"class":189},[183,1404,1406],{"class":185,"line":1405},72,[183,1407,257],{"emptyLinePlaceholder":256},[183,1409,1411,1413,1415,1417,1419,1421,1424,1426],{"class":185,"line":1410},73,[183,1412,1371],{"class":189},[183,1414,144],{"class":193},[183,1416,1153],{"class":197},[183,1418,204],{"class":189},[183,1420,207],{"class":189},[183,1422,1423],{"class":210},"text-xl",[183,1425,207],{"class":189},[183,1427,216],{"class":189},[183,1429,1431],{"class":185,"line":1430},74,[183,1432,1433],{"class":225},"          {{ price }}\n",[183,1435,1437,1439,1441],{"class":185,"line":1436},75,[183,1438,1398],{"class":189},[183,1440,144],{"class":193},[183,1442,216],{"class":189},[183,1444,1446,1449,1451],{"class":185,"line":1445},76,[183,1447,1448],{"class":189},"      \u003C\u002F",[183,1450,1150],{"class":193},[183,1452,216],{"class":189},[183,1454,1456],{"class":185,"line":1455},77,[183,1457,257],{"emptyLinePlaceholder":256},[183,1459,1461,1463,1465,1467,1469,1471,1474,1476],{"class":185,"line":1460},78,[183,1462,1361],{"class":189},[183,1464,144],{"class":193},[183,1466,1153],{"class":197},[183,1468,204],{"class":189},[183,1470,207],{"class":189},[183,1472,1473],{"class":210},"text-muted",[183,1475,207],{"class":189},[183,1477,216],{"class":189},[183,1479,1481],{"class":185,"line":1480},79,[183,1482,1483],{"class":225},"        {{ product?.description }}\n",[183,1485,1487,1489,1491],{"class":185,"line":1486},80,[183,1488,1448],{"class":189},[183,1490,144],{"class":193},[183,1492,216],{"class":189},[183,1494,1496],{"class":185,"line":1495},81,[183,1497,257],{"emptyLinePlaceholder":256},[183,1499,1501,1503],{"class":185,"line":1500},82,[183,1502,1361],{"class":189},[183,1504,1505],{"class":193},"VariantSelector\n",[183,1507,1509,1512,1514,1516,1518],{"class":185,"line":1508},83,[183,1510,1511],{"class":311},"        v-if",[183,1513,204],{"class":189},[183,1515,207],{"class":189},[183,1517,607],{"class":225},[183,1519,1189],{"class":189},[183,1521,1523,1526,1528,1530,1533],{"class":185,"line":1522},84,[183,1524,1525],{"class":197},"        v-model",[183,1527,204],{"class":189},[183,1529,207],{"class":189},[183,1531,1532],{"class":225},"selected",[183,1534,1189],{"class":189},[183,1536,1538,1541,1544,1546,1548,1550,1552,1554],{"class":185,"line":1537},85,[183,1539,1540],{"class":189},"        :",[183,1542,1543],{"class":197},"options",[183,1545,204],{"class":189},[183,1547,207],{"class":189},[183,1549,607],{"class":225},[183,1551,332],{"class":189},[183,1553,1543],{"class":225},[183,1555,1189],{"class":189},[183,1557,1559],{"class":185,"line":1558},86,[183,1560,1561],{"class":189},"      \u002F>\n",[183,1563,1565],{"class":185,"line":1564},87,[183,1566,257],{"emptyLinePlaceholder":256},[183,1568,1570,1572,1574,1576,1578,1580,1583,1585],{"class":185,"line":1569},88,[183,1571,1361],{"class":189},[183,1573,1150],{"class":193},[183,1575,1153],{"class":197},[183,1577,204],{"class":189},[183,1579,207],{"class":189},[183,1581,1582],{"class":210},"flex items-end gap-4",[183,1584,207],{"class":189},[183,1586,216],{"class":189},[183,1588,1590,1592,1594],{"class":185,"line":1589},89,[183,1591,1371],{"class":189},[183,1593,1150],{"class":193},[183,1595,216],{"class":189},[183,1597,1599,1602,1604,1606,1608,1610,1613,1615],{"class":185,"line":1598},90,[183,1600,1601],{"class":189},"          \u003C",[183,1603,144],{"class":193},[183,1605,1153],{"class":197},[183,1607,204],{"class":189},[183,1609,207],{"class":189},[183,1611,1612],{"class":210},"mb-2 text-sm font-semibold text-muted",[183,1614,207],{"class":189},[183,1616,216],{"class":189},[183,1618,1620],{"class":185,"line":1619},91,[183,1621,1622],{"class":225},"            Quantity\n",[183,1624,1626,1629,1631],{"class":185,"line":1625},92,[183,1627,1628],{"class":189},"          \u003C\u002F",[183,1630,144],{"class":193},[183,1632,216],{"class":189},[183,1634,1636],{"class":185,"line":1635},93,[183,1637,257],{"emptyLinePlaceholder":256},[183,1639,1641,1643],{"class":185,"line":1640},94,[183,1642,1601],{"class":189},[183,1644,1645],{"class":193},"UInputNumber\n",[183,1647,1649,1652,1654,1656,1659],{"class":185,"line":1648},95,[183,1650,1651],{"class":197},"            v-model",[183,1653,204],{"class":189},[183,1655,207],{"class":189},[183,1657,1658],{"class":225},"quantity",[183,1660,1189],{"class":189},[183,1662,1664,1667,1670,1672,1674,1676],{"class":185,"line":1663},96,[183,1665,1666],{"class":189},"            :",[183,1668,1669],{"class":197},"min",[183,1671,204],{"class":189},[183,1673,207],{"class":189},[183,1675,277],{"class":276},[183,1677,1189],{"class":189},[183,1679,1681,1684,1686,1688,1691],{"class":185,"line":1680},97,[183,1682,1683],{"class":197},"            class",[183,1685,204],{"class":189},[183,1687,207],{"class":189},[183,1689,1690],{"class":210},"w-32",[183,1692,1189],{"class":189},[183,1694,1696],{"class":185,"line":1695},98,[183,1697,1698],{"class":189},"          \u002F>\n",[183,1700,1702,1704,1706],{"class":185,"line":1701},99,[183,1703,1398],{"class":189},[183,1705,1150],{"class":193},[183,1707,216],{"class":189},[183,1709,1711],{"class":185,"line":1710},100,[183,1712,257],{"emptyLinePlaceholder":256},[183,1714,1716,1718],{"class":185,"line":1715},101,[183,1717,1371],{"class":189},[183,1719,1720],{"class":193},"UButton\n",[183,1722,1724,1727,1729,1731,1734],{"class":185,"line":1723},102,[183,1725,1726],{"class":197},"          size",[183,1728,204],{"class":189},[183,1730,207],{"class":189},[183,1732,1733],{"class":210},"lg",[183,1735,1189],{"class":189},[183,1737,1739,1742,1745,1747,1749,1751,1753,1755,1758],{"class":185,"line":1738},103,[183,1740,1741],{"class":189},"          :",[183,1743,1744],{"class":197},"disabled",[183,1746,204],{"class":189},[183,1748,207],{"class":189},[183,1750,976],{"class":189},[183,1752,979],{"class":225},[183,1754,674],{"class":189},[183,1756,1757],{"class":225},"availableForSale",[183,1759,1189],{"class":189},[183,1761,1763],{"class":185,"line":1762},104,[183,1764,1765],{"class":189},"        >\n",[183,1767,1769],{"class":185,"line":1768},105,[183,1770,1771],{"class":225},"          {{ variant?.availableForSale ? 'Add to Cart' : 'Unavailable' }}\n",[183,1773,1775,1777,1780],{"class":185,"line":1774},106,[183,1776,1398],{"class":189},[183,1778,1779],{"class":193},"UButton",[183,1781,216],{"class":189},[183,1783,1785,1787,1789],{"class":185,"line":1784},107,[183,1786,1448],{"class":189},[183,1788,1150],{"class":193},[183,1790,216],{"class":189},[183,1792,1794,1797,1799],{"class":185,"line":1793},108,[183,1795,1796],{"class":189},"    \u003C\u002F",[183,1798,1150],{"class":193},[183,1800,216],{"class":189},[183,1802,1804,1807,1809],{"class":185,"line":1803},109,[183,1805,1806],{"class":189},"  \u003C\u002F",[183,1808,1150],{"class":193},[183,1810,216],{"class":189},[183,1812,1814,1816,1818],{"class":185,"line":1813},110,[183,1815,1122],{"class":189},[183,1817,1139],{"class":193},[183,1819,216],{"class":189},[173,1821,1824],{"className":175,"code":1822,"filename":1823,"language":177,"meta":178,"style":178},"\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n  options: ProductOptionFieldsFragment[]\n}>()\n\nconst selected = defineModel\u003CRecord\u003Cstring, string>>({ required: true })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"space-y-4\">\n    \u003Cdiv\n      v-for=\"option in options\"\n      :key=\"option.id\"\n    >\n      \u003Cp class=\"mb-2 text-sm font-semibold text-muted\">\n        {{ option.name }}\n      \u003C\u002Fp>\n\n      \u003Cdiv class=\"flex flex-wrap gap-2\">\n        \u003CUButton\n          v-for=\"value in option.optionValues\"\n          :key=\"value.id\"\n          :variant=\"selected[option.name] === value.name ? 'solid' : 'outline'\"\n          color=\"neutral\"\n          size=\"sm\"\n          @click=\"selected = { ...selected, [option.name]: value.name }\"\n        >\n          {{ value.name }}\n        \u003C\u002FUButton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FVariantSelector.vue",[180,1825,1826,1846,1854,1867,1874,1878,1921,1929,1933,1941,1960,1967,1981,1995,2000,2018,2023,2031,2035,2054,2060,2083,2103,2154,2168,2181,2227,2231,2236,2244,2252,2260,2268],{"__ignoreMap":178},[183,1827,1828,1830,1832,1834,1836,1838,1840,1842,1844],{"class":185,"line":186},[183,1829,190],{"class":189},[183,1831,194],{"class":193},[183,1833,198],{"class":197},[183,1835,201],{"class":197},[183,1837,204],{"class":189},[183,1839,207],{"class":189},[183,1841,211],{"class":210},[183,1843,207],{"class":189},[183,1845,216],{"class":189},[183,1847,1848,1851],{"class":185,"line":219},[183,1849,1850],{"class":231},"defineProps",[183,1852,1853],{"class":189},"\u003C{\n",[183,1855,1856,1859,1861,1864],{"class":185,"line":238},[183,1857,1858],{"class":193},"  options",[183,1860,299],{"class":189},[183,1862,1863],{"class":699}," ProductOptionFieldsFragment",[183,1865,1866],{"class":225},"[]\n",[183,1868,1869,1872],{"class":185,"line":253},[183,1870,1871],{"class":189},"}>",[183,1873,235],{"class":225},[183,1875,1876],{"class":185,"line":260},[183,1877,257],{"emptyLinePlaceholder":256},[183,1879,1880,1882,1884,1886,1889,1891,1893,1895,1897,1899,1901,1903,1905,1907,1910,1912,1916,1919],{"class":185,"line":283},[183,1881,222],{"class":197},[183,1883,690],{"class":225},[183,1885,204],{"class":189},[183,1887,1888],{"class":231}," defineModel",[183,1890,190],{"class":189},[183,1892,700],{"class":699},[183,1894,190],{"class":189},[183,1896,705],{"class":699},[183,1898,346],{"class":189},[183,1900,710],{"class":699},[183,1902,713],{"class":189},[183,1904,273],{"class":225},[183,1906,556],{"class":189},[183,1908,1909],{"class":193}," required",[183,1911,299],{"class":189},[183,1913,1915],{"class":1914},"sfNiH"," true",[183,1917,1918],{"class":189}," }",[183,1920,280],{"class":225},[183,1922,1923,1925,1927],{"class":185,"line":288},[183,1924,1122],{"class":189},[183,1926,194],{"class":193},[183,1928,216],{"class":189},[183,1930,1931],{"class":185,"line":355},[183,1932,257],{"emptyLinePlaceholder":256},[183,1934,1935,1937,1939],{"class":185,"line":361},[183,1936,190],{"class":189},[183,1938,1139],{"class":193},[183,1940,216],{"class":189},[183,1942,1943,1945,1947,1949,1951,1953,1956,1958],{"class":185,"line":367},[183,1944,1147],{"class":189},[183,1946,1150],{"class":193},[183,1948,1153],{"class":197},[183,1950,204],{"class":189},[183,1952,207],{"class":189},[183,1954,1955],{"class":210},"space-y-4",[183,1957,207],{"class":189},[183,1959,216],{"class":189},[183,1961,1962,1964],{"class":185,"line":373},[183,1963,1170],{"class":189},[183,1965,1966],{"class":193},"div\n",[183,1968,1969,1972,1974,1976,1979],{"class":185,"line":379},[183,1970,1971],{"class":197},"      v-for",[183,1973,204],{"class":189},[183,1975,207],{"class":189},[183,1977,1978],{"class":210},"option in options",[183,1980,1189],{"class":189},[183,1982,1983,1986,1988,1990,1993],{"class":185,"line":385},[183,1984,1985],{"class":197},"      :key",[183,1987,204],{"class":189},[183,1989,207],{"class":189},[183,1991,1992],{"class":210},"option.id",[183,1994,1189],{"class":189},[183,1996,1997],{"class":185,"line":391},[183,1998,1999],{"class":189},"    >\n",[183,2001,2002,2004,2006,2008,2010,2012,2014,2016],{"class":185,"line":397},[183,2003,1361],{"class":189},[183,2005,144],{"class":193},[183,2007,1153],{"class":197},[183,2009,204],{"class":189},[183,2011,207],{"class":189},[183,2013,1612],{"class":210},[183,2015,207],{"class":189},[183,2017,216],{"class":189},[183,2019,2020],{"class":185,"line":403},[183,2021,2022],{"class":225},"        {{ option.name }}\n",[183,2024,2025,2027,2029],{"class":185,"line":409},[183,2026,1448],{"class":189},[183,2028,144],{"class":193},[183,2030,216],{"class":189},[183,2032,2033],{"class":185,"line":415},[183,2034,257],{"emptyLinePlaceholder":256},[183,2036,2037,2039,2041,2043,2045,2047,2050,2052],{"class":185,"line":420},[183,2038,1361],{"class":189},[183,2040,1150],{"class":193},[183,2042,1153],{"class":197},[183,2044,204],{"class":189},[183,2046,207],{"class":189},[183,2048,2049],{"class":210},"flex flex-wrap gap-2",[183,2051,207],{"class":189},[183,2053,216],{"class":189},[183,2055,2056,2058],{"class":185,"line":426},[183,2057,1371],{"class":189},[183,2059,1720],{"class":193},[183,2061,2062,2065,2067,2069,2071,2074,2076,2078,2081],{"class":185,"line":432},[183,2063,2064],{"class":311},"          v-for",[183,2066,204],{"class":189},[183,2068,207],{"class":189},[183,2070,671],{"class":225},[183,2072,2073],{"class":189}," in ",[183,2075,818],{"class":225},[183,2077,332],{"class":189},[183,2079,2080],{"class":225},"optionValues",[183,2082,1189],{"class":189},[183,2084,2085,2087,2090,2092,2094,2096,2098,2101],{"class":185,"line":437},[183,2086,1741],{"class":189},[183,2088,2089],{"class":197},"key",[183,2091,204],{"class":189},[183,2093,207],{"class":189},[183,2095,671],{"class":225},[183,2097,332],{"class":189},[183,2099,2100],{"class":225},"id",[183,2102,1189],{"class":189},[183,2104,2105,2107,2109,2111,2113,2115,2118,2120,2122,2124,2127,2129,2131,2133,2136,2138,2141,2143,2146,2148,2151],{"class":185,"line":443},[183,2106,1741],{"class":189},[183,2108,979],{"class":197},[183,2110,204],{"class":189},[183,2112,207],{"class":189},[183,2114,1532],{"class":225},[183,2116,2117],{"class":189},"[",[183,2119,818],{"class":225},[183,2121,332],{"class":189},[183,2123,541],{"class":225},[183,2125,2126],{"class":189},"] === ",[183,2128,671],{"class":225},[183,2130,332],{"class":189},[183,2132,541],{"class":225},[183,2134,2135],{"class":189}," ? ",[183,2137,1019],{"class":189},[183,2139,2140],{"class":210},"solid",[183,2142,1019],{"class":189},[183,2144,2145],{"class":189}," : ",[183,2147,1019],{"class":189},[183,2149,2150],{"class":210},"outline",[183,2152,2153],{"class":189},"'\"\n",[183,2155,2156,2159,2161,2163,2166],{"class":185,"line":449},[183,2157,2158],{"class":197},"          color",[183,2160,204],{"class":189},[183,2162,207],{"class":189},[183,2164,2165],{"class":210},"neutral",[183,2167,1189],{"class":189},[183,2169,2170,2172,2174,2176,2179],{"class":185,"line":459},[183,2171,1726],{"class":197},[183,2173,204],{"class":189},[183,2175,207],{"class":189},[183,2177,2178],{"class":210},"sm",[183,2180,1189],{"class":189},[183,2182,2183,2186,2189,2191,2193,2195,2198,2200,2203,2205,2207,2209,2211,2214,2217,2219,2221,2223,2225],{"class":185,"line":484},[183,2184,2185],{"class":189},"          @",[183,2187,2188],{"class":197},"click",[183,2190,204],{"class":189},[183,2192,207],{"class":189},[183,2194,1532],{"class":225},[183,2196,2197],{"class":189}," = { ...",[183,2199,1532],{"class":225},[183,2201,2202],{"class":189},", ",[183,2204,2117],{"class":193},[183,2206,818],{"class":225},[183,2208,332],{"class":189},[183,2210,541],{"class":225},[183,2212,2213],{"class":193},"]",[183,2215,2216],{"class":189},": ",[183,2218,671],{"class":225},[183,2220,332],{"class":189},[183,2222,541],{"class":225},[183,2224,1918],{"class":189},[183,2226,1189],{"class":189},[183,2228,2229],{"class":185,"line":506},[183,2230,1765],{"class":189},[183,2232,2233],{"class":185,"line":581},[183,2234,2235],{"class":225},"          {{ value.name }}\n",[183,2237,2238,2240,2242],{"class":185,"line":591},[183,2239,1398],{"class":189},[183,2241,1779],{"class":193},[183,2243,216],{"class":189},[183,2245,2246,2248,2250],{"class":185,"line":612},[183,2247,1448],{"class":189},[183,2249,1150],{"class":193},[183,2251,216],{"class":189},[183,2253,2254,2256,2258],{"class":185,"line":636},[183,2255,1796],{"class":189},[183,2257,1150],{"class":193},[183,2259,216],{"class":189},[183,2261,2262,2264,2266],{"class":185,"line":643},[183,2263,1806],{"class":189},[183,2265,1150],{"class":193},[183,2267,216],{"class":189},[183,2269,2270,2272,2274],{"class":185,"line":648},[183,2271,1122],{"class":189},[183,2273,1139],{"class":193},[183,2275,216],{"class":189},[173,2277,2281],{"className":2278,"code":2279,"filename":2280,"language":211,"meta":178,"style":178},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export const OPTION_FRAGMENT = `#graphql\n  fragment ProductOptionFields on ProductOption {\n    id\n    name\n    optionValues {\n      id\n      name\n    }\n  }\n`\n","graphql\u002Foption.ts",[180,2282,2283,2300,2305,2310,2315,2320,2324,2329,2333,2337],{"__ignoreMap":178},[183,2284,2285,2288,2291,2294,2296,2298],{"class":185,"line":186},[183,2286,2287],{"class":311},"export",[183,2289,2290],{"class":197}," const",[183,2292,2293],{"class":225}," OPTION_FRAGMENT ",[183,2295,204],{"class":189},[183,2297,349],{"class":189},[183,2299,352],{"class":210},[183,2301,2302],{"class":185,"line":219},[183,2303,2304],{"class":210},"  fragment ProductOptionFields on ProductOption {\n",[183,2306,2307],{"class":185,"line":238},[183,2308,2309],{"class":210},"    id\n",[183,2311,2312],{"class":185,"line":253},[183,2313,2314],{"class":210},"    name\n",[183,2316,2317],{"class":185,"line":260},[183,2318,2319],{"class":210},"    optionValues {\n",[183,2321,2322],{"class":185,"line":283},[183,2323,370],{"class":210},[183,2325,2326],{"class":185,"line":288},[183,2327,2328],{"class":210},"      name\n",[183,2330,2331],{"class":185,"line":355},[183,2332,440],{"class":210},[183,2334,2335],{"class":185,"line":361},[183,2336,446],{"class":210},[183,2338,2339],{"class":185,"line":367},[183,2340,2341],{"class":189},"`\n",[173,2343,2346],{"className":2278,"code":2344,"filename":2345,"language":211,"meta":178,"style":178},"export const VARIANT_FRAGMENT = `#graphql\n  fragment ProductVariantFields on ProductVariant {\n    id\n    title\n    availableForSale\n    image {\n      ...ImageFields\n    }\n    price {\n      amount\n      currencyCode\n    }\n    selectedOptions {\n      name\n      value\n    }\n  }\n`\n","graphql\u002Fvariant.ts",[180,2347,2348,2363,2368,2372,2377,2382,2387,2392,2396,2401,2406,2411,2415,2420,2424,2429,2433,2437],{"__ignoreMap":178},[183,2349,2350,2352,2354,2357,2359,2361],{"class":185,"line":186},[183,2351,2287],{"class":311},[183,2353,2290],{"class":197},[183,2355,2356],{"class":225}," VARIANT_FRAGMENT ",[183,2358,204],{"class":189},[183,2360,349],{"class":189},[183,2362,352],{"class":210},[183,2364,2365],{"class":185,"line":219},[183,2366,2367],{"class":210},"  fragment ProductVariantFields on ProductVariant {\n",[183,2369,2370],{"class":185,"line":238},[183,2371,2309],{"class":210},[183,2373,2374],{"class":185,"line":253},[183,2375,2376],{"class":210},"    title\n",[183,2378,2379],{"class":185,"line":260},[183,2380,2381],{"class":210},"    availableForSale\n",[183,2383,2384],{"class":185,"line":283},[183,2385,2386],{"class":210},"    image {\n",[183,2388,2389],{"class":185,"line":288},[183,2390,2391],{"class":210},"      ...ImageFields\n",[183,2393,2394],{"class":185,"line":355},[183,2395,440],{"class":210},[183,2397,2398],{"class":185,"line":361},[183,2399,2400],{"class":210},"    price {\n",[183,2402,2403],{"class":185,"line":367},[183,2404,2405],{"class":210},"      amount\n",[183,2407,2408],{"class":185,"line":373},[183,2409,2410],{"class":210},"      currencyCode\n",[183,2412,2413],{"class":185,"line":379},[183,2414,440],{"class":210},[183,2416,2417],{"class":185,"line":385},[183,2418,2419],{"class":210},"    selectedOptions {\n",[183,2421,2422],{"class":185,"line":391},[183,2423,2328],{"class":210},[183,2425,2426],{"class":185,"line":397},[183,2427,2428],{"class":210},"      value\n",[183,2430,2431],{"class":185,"line":403},[183,2432,440],{"class":210},[183,2434,2435],{"class":185,"line":409},[183,2436,446],{"class":210},[183,2438,2439],{"class":185,"line":415},[183,2440,2341],{"class":189},[173,2442,2445],{"className":2278,"code":2443,"filename":2444,"language":211,"meta":178,"style":178},"export const IMAGE_FRAGMENT = `#graphql\n  fragment ImageFields on Image {\n    url\n    altText\n    width\n    height\n  }\n`\n","graphql\u002Fimage.ts",[180,2446,2447,2462,2467,2472,2477,2482,2487,2491],{"__ignoreMap":178},[183,2448,2449,2451,2453,2456,2458,2460],{"class":185,"line":186},[183,2450,2287],{"class":311},[183,2452,2290],{"class":197},[183,2454,2455],{"class":225}," IMAGE_FRAGMENT ",[183,2457,204],{"class":189},[183,2459,349],{"class":189},[183,2461,352],{"class":210},[183,2463,2464],{"class":185,"line":219},[183,2465,2466],{"class":210},"  fragment ImageFields on Image {\n",[183,2468,2469],{"class":185,"line":238},[183,2470,2471],{"class":210},"    url\n",[183,2473,2474],{"class":185,"line":253},[183,2475,2476],{"class":210},"    altText\n",[183,2478,2479],{"class":185,"line":260},[183,2480,2481],{"class":210},"    width\n",[183,2483,2484],{"class":185,"line":283},[183,2485,2486],{"class":210},"    height\n",[183,2488,2489],{"class":185,"line":288},[183,2490,446],{"class":210},[183,2492,2493],{"class":185,"line":355},[183,2494,2341],{"class":189},[144,2496,2497,2498,2502,2503,332],{},"You need a product with a couple of options set up in your store.\nMake sure the ",[2499,2500,2501],"a",{"href":44},"Nuxt Shopify module"," is configured and your\n",[2499,2504,2505],{"href":39},"store is set up",[2507,2508,2510],"h2",{"id":2509},"fetching-the-product","Fetching the product",[144,2512,2513,2514,2517],{},"Shopify gives us the customer's variant selection in ",[180,2515,2516],{},"selectedOrFirstAvailableVariant"," automatically.\nSo instead of pulling down the whole variant list and matching things ourselves, we let Shopify do the resolving:",[173,2519,2523],{"className":2520,"code":2521,"language":2522,"meta":178,"style":178},"language-graphql shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","product(handle: $handle) {\n  title\n  description\n\n  featuredImage {\n    ...ImageFields\n  }\n\n  options {\n    ...ProductOptionFields\n  }\n\n  selectedOrFirstAvailableVariant(selectedOptions: $selectedOptions) {\n    ...ProductVariantFields\n  }\n}\n","graphql",[180,2524,2525,2544,2549,2554,2558,2565,2573,2577,2581,2588,2595,2599,2603,2617,2624,2628],{"__ignoreMap":178},[183,2526,2527,2529,2531,2533,2535,2538,2540,2542],{"class":185,"line":186},[183,2528,607],{"class":231},[183,2530,273],{"class":225},[183,2532,340],{"class":540},[183,2534,299],{"class":189},[183,2536,2537],{"class":225}," $",[183,2539,340],{"class":699},[183,2541,986],{"class":225},[183,2543,481],{"class":189},[183,2545,2546],{"class":185,"line":219},[183,2547,2548],{"class":225},"  title\n",[183,2550,2551],{"class":185,"line":238},[183,2552,2553],{"class":225},"  description\n",[183,2555,2556],{"class":185,"line":253},[183,2557,257],{"emptyLinePlaceholder":256},[183,2559,2560,2563],{"class":185,"line":260},[183,2561,2562],{"class":225},"  featuredImage ",[183,2564,481],{"class":189},[183,2566,2567,2570],{"class":185,"line":283},[183,2568,2569],{"class":189},"    ...",[183,2571,2572],{"class":225},"ImageFields\n",[183,2574,2575],{"class":185,"line":288},[183,2576,446],{"class":189},[183,2578,2579],{"class":185,"line":355},[183,2580,257],{"emptyLinePlaceholder":256},[183,2582,2583,2586],{"class":185,"line":361},[183,2584,2585],{"class":225},"  options ",[183,2587,481],{"class":189},[183,2589,2590,2592],{"class":185,"line":367},[183,2591,2569],{"class":189},[183,2593,2594],{"class":225},"ProductOptionFields\n",[183,2596,2597],{"class":185,"line":373},[183,2598,446],{"class":189},[183,2600,2601],{"class":185,"line":379},[183,2602,257],{"emptyLinePlaceholder":256},[183,2604,2605,2608,2610,2612,2615],{"class":185,"line":385},[183,2606,2607],{"class":225},"  selectedOrFirstAvailableVariant(",[183,2609,809],{"class":540},[183,2611,299],{"class":189},[183,2613,2614],{"class":225}," $selectedOptions) ",[183,2616,481],{"class":189},[183,2618,2619,2621],{"class":185,"line":391},[183,2620,2569],{"class":189},[183,2622,2623],{"class":225},"ProductVariantFields\n",[183,2625,2626],{"class":185,"line":397},[183,2627,446],{"class":189},[183,2629,2630],{"class":185,"line":403},[183,2631,2632],{"class":189},"}\n",[144,2634,2635,2636,2638,2639,2642,2643,2646,2647,2650,2651,2654,2655,2658,2659,2662],{},"The ",[180,2637,809],{}," variable is just a list of ",[180,2640,2641],{},"{ name, value }"," pairs, one per option, typed as\n",[180,2644,2645],{},"[SelectedOptionInput!]",".\nThe fields sit in three small fragments (shown in the code tab): ",[180,2648,2649],{},"ProductOptionFields"," for the choices,\n",[180,2652,2653],{},"ProductVariantFields"," for the resolved variant, and ",[180,2656,2657],{},"ImageFields",", which the product image and the variant image share.\nThe option fragment doubles as the ",[180,2660,2661],{},"ProductOptionFieldsFragment"," type we give to the selector component.",[2507,2664,2666],{"id":2665},"resolving-the-selected-variant","Resolving the selected variant",[144,2668,2669,2670,2673,2674,2677,2678,2681],{},"We keep the customers's choice in the URL, so a picked variant is shareable and survives a refresh, the same way the\ncursors work on the ",[2499,2671,2672],{"href":90},"collection page",".\nEach option is one query parameter, so the selected options are really just ",[180,2675,2676],{},"route.query"," turned into the shape the\nAPI wants, and ",[180,2679,2680],{},"watch"," refetches whenever it changes:",[173,2683,2685],{"className":2278,"code":2684,"language":211,"meta":178,"style":178},"variables: computed(() => ({\n  handle: route.params.handle,\n  selectedOptions: Object.entries(route.query).map(([name, value]) => ({ name, value: String(value) })),\n})),\nwatch: [() => route.query],\n",[180,2686,2687,2706,2725,2784,2792],{"__ignoreMap":178},[183,2688,2689,2692,2694,2696,2698,2700,2702,2704],{"class":185,"line":186},[183,2690,2691],{"class":699},"variables",[183,2693,299],{"class":189},[183,2695,467],{"class":231},[183,2697,273],{"class":225},[183,2699,472],{"class":189},[183,2701,475],{"class":197},[183,2703,478],{"class":225},[183,2705,481],{"class":189},[183,2707,2708,2711,2713,2715,2717,2719,2721,2723],{"class":185,"line":219},[183,2709,2710],{"class":193},"  handle",[183,2712,299],{"class":189},[183,2714,492],{"class":225},[183,2716,332],{"class":189},[183,2718,335],{"class":225},[183,2720,332],{"class":189},[183,2722,340],{"class":225},[183,2724,503],{"class":189},[183,2726,2727,2730,2732,2734,2736,2738,2740,2742,2744,2746,2748,2750,2752,2754,2756,2758,2760,2762,2764,2766,2768,2770,2772,2774,2776,2778,2780,2782],{"class":185,"line":238},[183,2728,2729],{"class":193},"  selectedOptions",[183,2731,299],{"class":189},[183,2733,514],{"class":225},[183,2735,332],{"class":189},[183,2737,519],{"class":231},[183,2739,522],{"class":225},[183,2741,332],{"class":189},[183,2743,527],{"class":225},[183,2745,332],{"class":189},[183,2747,532],{"class":231},[183,2749,273],{"class":225},[183,2751,537],{"class":189},[183,2753,541],{"class":540},[183,2755,346],{"class":189},[183,2757,546],{"class":540},[183,2759,549],{"class":189},[183,2761,475],{"class":197},[183,2763,478],{"class":225},[183,2765,556],{"class":189},[183,2767,559],{"class":225},[183,2769,346],{"class":189},[183,2771,546],{"class":193},[183,2773,299],{"class":189},[183,2775,568],{"class":231},[183,2777,571],{"class":225},[183,2779,305],{"class":189},[183,2781,576],{"class":225},[183,2783,503],{"class":189},[183,2785,2786,2788,2790],{"class":185,"line":253},[183,2787,305],{"class":189},[183,2789,576],{"class":225},[183,2791,503],{"class":189},[183,2793,2794,2796,2798,2800,2802,2804,2806,2808,2810],{"class":185,"line":260},[183,2795,2680],{"class":699},[183,2797,299],{"class":189},[183,2799,620],{"class":225},[183,2801,472],{"class":189},[183,2803,475],{"class":197},[183,2805,492],{"class":225},[183,2807,332],{"class":189},[183,2809,631],{"class":225},[183,2811,503],{"class":189},[144,2813,2814],{},"The variant is then just a read off whatever Shopify sends back:",[173,2816,2818],{"className":2278,"code":2817,"language":211,"meta":178,"style":178},"const variant = computed(() => product.value?.selectedOrFirstAvailableVariant)\n",[180,2819,2820],{"__ignoreMap":178},[183,2821,2822,2824,2826,2828,2830,2832,2834,2836,2838,2840,2842,2844],{"class":185,"line":186},[183,2823,222],{"class":197},[183,2825,653],{"class":225},[183,2827,204],{"class":189},[183,2829,467],{"class":231},[183,2831,273],{"class":225},[183,2833,472],{"class":189},[183,2835,475],{"class":197},[183,2837,666],{"class":225},[183,2839,332],{"class":189},[183,2841,671],{"class":225},[183,2843,674],{"class":189},[183,2845,677],{"class":225},[144,2847,2848,2849,2851,2852,2854],{},"The selector still needs to know what's currently picked so it can highlight it.\nThat's the same ",[180,2850,2676],{},", except it's empty on first load, so we fall back to whatever variant Shopify resolved.\nWriting to it pushes the new selection onto the URL, which trips the ",[180,2853,2680],{}," and pulls the matching variant back:",[173,2856,2858],{"className":2278,"code":2857,"language":211,"meta":178,"style":178},"const selected = computed\u003CRecord\u003Cstring, string>>({\n  get: () => Object.keys(route.query).length\n    ? { ...route.query } as Record\u003Cstring, string>\n    : Object.fromEntries(variant.value?.selectedOptions.map(option => [option.name, option.value]) ?? []),\n  set: options => router.push({ query: options }),\n})\n",[180,2859,2860,2888,2914,2944,2994,3026],{"__ignoreMap":178},[183,2861,2862,2864,2866,2868,2870,2872,2874,2876,2878,2880,2882,2884,2886],{"class":185,"line":186},[183,2863,222],{"class":197},[183,2865,690],{"class":225},[183,2867,204],{"class":189},[183,2869,467],{"class":231},[183,2871,190],{"class":189},[183,2873,700],{"class":699},[183,2875,190],{"class":189},[183,2877,705],{"class":699},[183,2879,346],{"class":189},[183,2881,710],{"class":699},[183,2883,713],{"class":189},[183,2885,273],{"class":225},[183,2887,481],{"class":189},[183,2889,2890,2892,2894,2896,2898,2900,2902,2904,2906,2908,2910,2912],{"class":185,"line":219},[183,2891,723],{"class":231},[183,2893,299],{"class":189},[183,2895,728],{"class":189},[183,2897,475],{"class":197},[183,2899,514],{"class":225},[183,2901,332],{"class":189},[183,2903,737],{"class":231},[183,2905,522],{"class":225},[183,2907,332],{"class":189},[183,2909,527],{"class":225},[183,2911,332],{"class":189},[183,2913,748],{"class":225},[183,2915,2916,2918,2920,2922,2924,2926,2928,2930,2932,2934,2936,2938,2940,2942],{"class":185,"line":238},[183,2917,754],{"class":189},[183,2919,293],{"class":189},[183,2921,759],{"class":189},[183,2923,329],{"class":225},[183,2925,332],{"class":189},[183,2927,766],{"class":225},[183,2929,305],{"class":189},[183,2931,771],{"class":311},[183,2933,774],{"class":699},[183,2935,190],{"class":189},[183,2937,705],{"class":699},[183,2939,346],{"class":189},[183,2941,710],{"class":699},[183,2943,216],{"class":189},[183,2945,2946,2948,2950,2952,2954,2956,2958,2960,2962,2964,2966,2968,2970,2972,2974,2976,2978,2980,2982,2984,2986,2988,2990,2992],{"class":185,"line":253},[183,2947,790],{"class":189},[183,2949,514],{"class":225},[183,2951,332],{"class":189},[183,2953,797],{"class":231},[183,2955,800],{"class":225},[183,2957,332],{"class":189},[183,2959,671],{"class":225},[183,2961,674],{"class":189},[183,2963,809],{"class":225},[183,2965,332],{"class":189},[183,2967,532],{"class":231},[183,2969,273],{"class":225},[183,2971,818],{"class":540},[183,2973,475],{"class":197},[183,2975,823],{"class":225},[183,2977,332],{"class":189},[183,2979,541],{"class":225},[183,2981,346],{"class":189},[183,2983,832],{"class":225},[183,2985,332],{"class":189},[183,2987,837],{"class":225},[183,2989,840],{"class":189},[183,2991,843],{"class":225},[183,2993,503],{"class":189},[183,2995,2996,2998,3000,3002,3004,3006,3008,3010,3012,3014,3016,3018,3020,3022,3024],{"class":185,"line":260},[183,2997,851],{"class":231},[183,2999,299],{"class":189},[183,3001,856],{"class":540},[183,3003,475],{"class":197},[183,3005,861],{"class":225},[183,3007,332],{"class":189},[183,3009,866],{"class":231},[183,3011,273],{"class":225},[183,3013,556],{"class":189},[183,3015,873],{"class":193},[183,3017,299],{"class":189},[183,3019,878],{"class":225},[183,3021,305],{"class":189},[183,3023,883],{"class":225},[183,3025,503],{"class":189},[183,3027,3028,3030],{"class":185,"line":283},[183,3029,305],{"class":189},[183,3031,280],{"class":225},[144,3033,3034,3035,3037],{},"Because ",[180,3036,979],{}," reads off the latest response, the image and price update the moment it responds.",[2507,3039,3041],{"id":3040},"variant-selector","Variant selector",[144,3043,3044,3045,3047,3048,3051],{},"The selector itself is small.\nIt takes the product's ",[180,3046,1543],{}," and writes the chosen value for each one back through ",[180,3049,3050],{},"v-model",", so the page keeps\nowning the selection:",[173,3053,3054],{"className":175,"code":1822,"filename":1823,"language":177,"meta":178,"style":178},[180,3055,3056,3076,3082,3092,3098,3102,3140,3148,3152,3160,3178,3184,3196,3208,3212,3230,3234,3242,3246,3264,3270,3290,3308,3352,3364,3376,3416,3420,3424,3432,3440,3448,3456],{"__ignoreMap":178},[183,3057,3058,3060,3062,3064,3066,3068,3070,3072,3074],{"class":185,"line":186},[183,3059,190],{"class":189},[183,3061,194],{"class":193},[183,3063,198],{"class":197},[183,3065,201],{"class":197},[183,3067,204],{"class":189},[183,3069,207],{"class":189},[183,3071,211],{"class":210},[183,3073,207],{"class":189},[183,3075,216],{"class":189},[183,3077,3078,3080],{"class":185,"line":219},[183,3079,1850],{"class":231},[183,3081,1853],{"class":189},[183,3083,3084,3086,3088,3090],{"class":185,"line":238},[183,3085,1858],{"class":193},[183,3087,299],{"class":189},[183,3089,1863],{"class":699},[183,3091,1866],{"class":225},[183,3093,3094,3096],{"class":185,"line":253},[183,3095,1871],{"class":189},[183,3097,235],{"class":225},[183,3099,3100],{"class":185,"line":260},[183,3101,257],{"emptyLinePlaceholder":256},[183,3103,3104,3106,3108,3110,3112,3114,3116,3118,3120,3122,3124,3126,3128,3130,3132,3134,3136,3138],{"class":185,"line":283},[183,3105,222],{"class":197},[183,3107,690],{"class":225},[183,3109,204],{"class":189},[183,3111,1888],{"class":231},[183,3113,190],{"class":189},[183,3115,700],{"class":699},[183,3117,190],{"class":189},[183,3119,705],{"class":699},[183,3121,346],{"class":189},[183,3123,710],{"class":699},[183,3125,713],{"class":189},[183,3127,273],{"class":225},[183,3129,556],{"class":189},[183,3131,1909],{"class":193},[183,3133,299],{"class":189},[183,3135,1915],{"class":1914},[183,3137,1918],{"class":189},[183,3139,280],{"class":225},[183,3141,3142,3144,3146],{"class":185,"line":288},[183,3143,1122],{"class":189},[183,3145,194],{"class":193},[183,3147,216],{"class":189},[183,3149,3150],{"class":185,"line":355},[183,3151,257],{"emptyLinePlaceholder":256},[183,3153,3154,3156,3158],{"class":185,"line":361},[183,3155,190],{"class":189},[183,3157,1139],{"class":193},[183,3159,216],{"class":189},[183,3161,3162,3164,3166,3168,3170,3172,3174,3176],{"class":185,"line":367},[183,3163,1147],{"class":189},[183,3165,1150],{"class":193},[183,3167,1153],{"class":197},[183,3169,204],{"class":189},[183,3171,207],{"class":189},[183,3173,1955],{"class":210},[183,3175,207],{"class":189},[183,3177,216],{"class":189},[183,3179,3180,3182],{"class":185,"line":373},[183,3181,1170],{"class":189},[183,3183,1966],{"class":193},[183,3185,3186,3188,3190,3192,3194],{"class":185,"line":379},[183,3187,1971],{"class":197},[183,3189,204],{"class":189},[183,3191,207],{"class":189},[183,3193,1978],{"class":210},[183,3195,1189],{"class":189},[183,3197,3198,3200,3202,3204,3206],{"class":185,"line":385},[183,3199,1985],{"class":197},[183,3201,204],{"class":189},[183,3203,207],{"class":189},[183,3205,1992],{"class":210},[183,3207,1189],{"class":189},[183,3209,3210],{"class":185,"line":391},[183,3211,1999],{"class":189},[183,3213,3214,3216,3218,3220,3222,3224,3226,3228],{"class":185,"line":397},[183,3215,1361],{"class":189},[183,3217,144],{"class":193},[183,3219,1153],{"class":197},[183,3221,204],{"class":189},[183,3223,207],{"class":189},[183,3225,1612],{"class":210},[183,3227,207],{"class":189},[183,3229,216],{"class":189},[183,3231,3232],{"class":185,"line":403},[183,3233,2022],{"class":225},[183,3235,3236,3238,3240],{"class":185,"line":409},[183,3237,1448],{"class":189},[183,3239,144],{"class":193},[183,3241,216],{"class":189},[183,3243,3244],{"class":185,"line":415},[183,3245,257],{"emptyLinePlaceholder":256},[183,3247,3248,3250,3252,3254,3256,3258,3260,3262],{"class":185,"line":420},[183,3249,1361],{"class":189},[183,3251,1150],{"class":193},[183,3253,1153],{"class":197},[183,3255,204],{"class":189},[183,3257,207],{"class":189},[183,3259,2049],{"class":210},[183,3261,207],{"class":189},[183,3263,216],{"class":189},[183,3265,3266,3268],{"class":185,"line":426},[183,3267,1371],{"class":189},[183,3269,1720],{"class":193},[183,3271,3272,3274,3276,3278,3280,3282,3284,3286,3288],{"class":185,"line":432},[183,3273,2064],{"class":311},[183,3275,204],{"class":189},[183,3277,207],{"class":189},[183,3279,671],{"class":225},[183,3281,2073],{"class":189},[183,3283,818],{"class":225},[183,3285,332],{"class":189},[183,3287,2080],{"class":225},[183,3289,1189],{"class":189},[183,3291,3292,3294,3296,3298,3300,3302,3304,3306],{"class":185,"line":437},[183,3293,1741],{"class":189},[183,3295,2089],{"class":197},[183,3297,204],{"class":189},[183,3299,207],{"class":189},[183,3301,671],{"class":225},[183,3303,332],{"class":189},[183,3305,2100],{"class":225},[183,3307,1189],{"class":189},[183,3309,3310,3312,3314,3316,3318,3320,3322,3324,3326,3328,3330,3332,3334,3336,3338,3340,3342,3344,3346,3348,3350],{"class":185,"line":443},[183,3311,1741],{"class":189},[183,3313,979],{"class":197},[183,3315,204],{"class":189},[183,3317,207],{"class":189},[183,3319,1532],{"class":225},[183,3321,2117],{"class":189},[183,3323,818],{"class":225},[183,3325,332],{"class":189},[183,3327,541],{"class":225},[183,3329,2126],{"class":189},[183,3331,671],{"class":225},[183,3333,332],{"class":189},[183,3335,541],{"class":225},[183,3337,2135],{"class":189},[183,3339,1019],{"class":189},[183,3341,2140],{"class":210},[183,3343,1019],{"class":189},[183,3345,2145],{"class":189},[183,3347,1019],{"class":189},[183,3349,2150],{"class":210},[183,3351,2153],{"class":189},[183,3353,3354,3356,3358,3360,3362],{"class":185,"line":449},[183,3355,2158],{"class":197},[183,3357,204],{"class":189},[183,3359,207],{"class":189},[183,3361,2165],{"class":210},[183,3363,1189],{"class":189},[183,3365,3366,3368,3370,3372,3374],{"class":185,"line":459},[183,3367,1726],{"class":197},[183,3369,204],{"class":189},[183,3371,207],{"class":189},[183,3373,2178],{"class":210},[183,3375,1189],{"class":189},[183,3377,3378,3380,3382,3384,3386,3388,3390,3392,3394,3396,3398,3400,3402,3404,3406,3408,3410,3412,3414],{"class":185,"line":484},[183,3379,2185],{"class":189},[183,3381,2188],{"class":197},[183,3383,204],{"class":189},[183,3385,207],{"class":189},[183,3387,1532],{"class":225},[183,3389,2197],{"class":189},[183,3391,1532],{"class":225},[183,3393,2202],{"class":189},[183,3395,2117],{"class":193},[183,3397,818],{"class":225},[183,3399,332],{"class":189},[183,3401,541],{"class":225},[183,3403,2213],{"class":193},[183,3405,2216],{"class":189},[183,3407,671],{"class":225},[183,3409,332],{"class":189},[183,3411,541],{"class":225},[183,3413,1918],{"class":189},[183,3415,1189],{"class":189},[183,3417,3418],{"class":185,"line":506},[183,3419,1765],{"class":189},[183,3421,3422],{"class":185,"line":581},[183,3423,2235],{"class":225},[183,3425,3426,3428,3430],{"class":185,"line":591},[183,3427,1398],{"class":189},[183,3429,1779],{"class":193},[183,3431,216],{"class":189},[183,3433,3434,3436,3438],{"class":185,"line":612},[183,3435,1448],{"class":189},[183,3437,1150],{"class":193},[183,3439,216],{"class":189},[183,3441,3442,3444,3446],{"class":185,"line":636},[183,3443,1796],{"class":189},[183,3445,1150],{"class":193},[183,3447,216],{"class":189},[183,3449,3450,3452,3454],{"class":185,"line":643},[183,3451,1806],{"class":189},[183,3453,1150],{"class":193},[183,3455,216],{"class":189},[183,3457,3458,3460,3462],{"class":185,"line":648},[183,3459,1122],{"class":189},[183,3461,1139],{"class":193},[183,3463,216],{"class":189},[144,3465,3466,3467,3469,3470,3473],{},"When the variant Shopify sends back is sold out, its ",[180,3468,1757],{}," is ",[180,3471,3472],{},"false",", so we can disable the buy\nbutton.",[2507,3475,3477],{"id":3476},"quantity-and-add-to-cart","Quantity and add to cart",[144,3479,3480],{},"Quantity is a plain number input with a minimum of one, and the button reads its label and disabled state from\nthe variant's availability:",[173,3482,3486],{"className":3483,"code":3484,"language":3485,"meta":178,"style":178},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CUInputNumber\n  v-model=\"quantity\"\n  :min=\"1\"\n\u002F>\n\n\u003CUButton\n  size=\"lg\"\n  :disabled=\"!variant?.availableForSale\"\n>\n  {{ variant?.availableForSale ? 'Add to Cart' : 'Unavailable' }}\n\u003C\u002FUButton>\n","html",[180,3487,3488,3494,3507,3520,3525,3529,3535,3548,3562,3566,3571],{"__ignoreMap":178},[183,3489,3490,3492],{"class":185,"line":186},[183,3491,190],{"class":189},[183,3493,1645],{"class":193},[183,3495,3496,3499,3501,3503,3505],{"class":185,"line":219},[183,3497,3498],{"class":197},"  v-model",[183,3500,204],{"class":189},[183,3502,207],{"class":189},[183,3504,1658],{"class":210},[183,3506,1189],{"class":189},[183,3508,3509,3512,3514,3516,3518],{"class":185,"line":238},[183,3510,3511],{"class":197},"  :min",[183,3513,204],{"class":189},[183,3515,207],{"class":189},[183,3517,277],{"class":210},[183,3519,1189],{"class":189},[183,3521,3522],{"class":185,"line":253},[183,3523,3524],{"class":189},"\u002F>\n",[183,3526,3527],{"class":185,"line":260},[183,3528,257],{"emptyLinePlaceholder":256},[183,3530,3531,3533],{"class":185,"line":283},[183,3532,190],{"class":189},[183,3534,1720],{"class":193},[183,3536,3537,3540,3542,3544,3546],{"class":185,"line":288},[183,3538,3539],{"class":197},"  size",[183,3541,204],{"class":189},[183,3543,207],{"class":189},[183,3545,1733],{"class":210},[183,3547,1189],{"class":189},[183,3549,3550,3553,3555,3557,3560],{"class":185,"line":355},[183,3551,3552],{"class":197},"  :disabled",[183,3554,204],{"class":189},[183,3556,207],{"class":189},[183,3558,3559],{"class":210},"!variant?.availableForSale",[183,3561,1189],{"class":189},[183,3563,3564],{"class":185,"line":361},[183,3565,216],{"class":189},[183,3567,3568],{"class":185,"line":367},[183,3569,3570],{"class":225},"  {{ variant?.availableForSale ? 'Add to Cart' : 'Unavailable' }}\n",[183,3572,3573,3575,3577],{"class":185,"line":373},[183,3574,1122],{"class":189},[183,3576,1779],{"class":193},[183,3578,216],{"class":189},[144,3580,3581,3582,3585],{},"The \"Add to Cart\" button doesn't do anything for now.\nCheck out the ",[2499,3583,3584],{"href":105},"cart example"," to see how we can create our own\nshopping cart and add products to it.",[3587,3588,3589],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":178,"searchDepth":219,"depth":219,"links":3591},[3592,3593,3594,3595],{"id":2509,"depth":219,"text":2510},{"id":2665,"depth":219,"text":2666},{"id":3040,"depth":219,"text":3041},{"id":3476,"depth":219,"text":3477},"How to create a product page for your Shopify store in Nuxt","md",null,{},{"icon":102},{"title":99,"description":3596},"IKbyO96OUJgxJ8R6RqlGTV7ylNpvwIlj8MMwNP_jomU",[3604,3606],{"title":94,"path":95,"stem":96,"description":3605,"icon":97,"children":-1},"How to create collection filters for your Shopify store in Nuxt",{"title":104,"path":105,"stem":106,"description":3607,"icon":107,"children":-1},"How to use the cart in your Shopify store in Nuxt",{"id":3609,"title":3610,"description":3611,"featuredImage":3612,"options":3615,"selectedOrFirstAvailableVariant":3651},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003644551247","Men's T-shirt","Crafted from organic cotton, this classic T-shirt features a relaxed fit, crew neckline and timeless look. Enjoy the breathable comfort of 100% organic cotton.",{"url":3613,"altText":3598,"width":3614,"height":3614},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FGreenTshirt01.jpg?v=1786350422",4096,[3616,3632],{"id":3617,"name":3618,"optionValues":3619},"gid:\u002F\u002Fshopify\u002FProductOption\u002F11477514321999","Size",[3620,3623,3626,3629],{"id":3621,"name":3622},"gid:\u002F\u002Fshopify\u002FProductOptionValue\u002F6002670960719","Small",{"id":3624,"name":3625},"gid:\u002F\u002Fshopify\u002FProductOptionValue\u002F6002670993487","Medium",{"id":3627,"name":3628},"gid:\u002F\u002Fshopify\u002FProductOptionValue\u002F6002671026255","Large",{"id":3630,"name":3631},"gid:\u002F\u002Fshopify\u002FProductOptionValue\u002F6002671059023","X-Large",{"id":3633,"name":3634,"optionValues":3635},"gid:\u002F\u002Fshopify\u002FProductOption\u002F11477514354767","Color",[3636,3639,3642,3645,3648],{"id":3637,"name":3638},"gid:\u002F\u002Fshopify\u002FProductOptionValue\u002F6002671091791","Green",{"id":3640,"name":3641},"gid:\u002F\u002Fshopify\u002FProductOptionValue\u002F6002671124559","Olive",{"id":3643,"name":3644},"gid:\u002F\u002Fshopify\u002FProductOptionValue\u002F6002671157327","Ocean",{"id":3646,"name":3647},"gid:\u002F\u002Fshopify\u002FProductOptionValue\u002F6002671190095","Purple",{"id":3649,"name":3650},"gid:\u002F\u002Fshopify\u002FProductOptionValue\u002F6002671222863","Red",{"id":3652,"title":3653,"availableForSale":256,"image":3654,"price":3655,"selectedOptions":3658},"gid:\u002F\u002Fshopify\u002FProductVariant\u002F46380469289039","Small \u002F Green",{"url":3613,"altText":3598,"width":3614,"height":3614},{"amount":3656,"currencyCode":3657},"40.0","USD",[3659,3660],{"name":3618,"value":3622},{"name":3634,"value":3638},1788560609419]