[{"data":1,"prerenderedAt":4904},["ShallowReactive",2],{"navigation_docs":3,"-examples-collection-page":134,"-examples-collection-page-surround":4842,"collection-accessoires":4847},[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":89,"body":136,"description":4835,"extension":4836,"links":4837,"meta":4838,"navigation":4839,"path":90,"seo":4840,"stem":91,"__hash__":4841},"docs\u002F3.examples\u002F2.collection-page.md",{"type":137,"value":138,"toc":4829},"minimark",[139,143,147,2392,2403,2408,2411,2414,2456,2459,2554,2557,2636,2640,2653,2748,2758,3036,3040,3055,3314,3325,3922,3926,3940,3947,4577,4580,4608,4614,4818,4825],[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",{},"To show products to your customers, you may want to retrieve a collection and display it in your store.\nThis example will show you how to create a collection page for your Shopify store in Nuxt.",[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-collection-page",{"className":161,"handle":163},[162],"pt-2","accessoires",[154,165,167],{"icon":24,"label":166},"Code",[168,169,172,1376,2142,2195],"code-tree",{":expand-all":170,"default-value":171},"true","app\u002Fpages\u002Fcollections\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()\n\nconst key = `collection-${route.params.handle}`\nconst perPage = 4\n\nconst { data: collection } = await useStorefrontData(key, `#graphql\n  query GetCollection(\n    $handle: String!, \n    $first: Int, \n    $last: Int, \n    $after: String, \n    $before: String, \n    $language: LanguageCode, \n    $country: CountryCode\n  )\n  @inContext(language: $language, country: $country) {\n    collection(handle: $handle) {\n      ...CollectionFields\n\n      products(\n        first: $first,\n        last: $last,\n        after: $after,\n        before: $before\n      ) {\n        ...ProductConnectionFields\n      }\n    }\n  }\n`, {\n  variables: computed(() => ({\n    handle: route.params.handle,\n    language: 'EN',\n    country: 'US',\n    first: route.query.before ? undefined : perPage,\n    last: route.query.before ? perPage : undefined,\n    after: route.query.after,\n    before: route.query.before,\n  })),\n  transform: data => data.collection,\n  watch: [ () => route.query ],\n})\n\nconst products = computed(() => flattenConnection(collection.value?.products))\n\nconst startCursor = computed(() => collection.value?.products.pageInfo.startCursor)\nconst endCursor = computed(() => collection.value?.products.pageInfo.endCursor)\nconst hasPreviousPage = computed(() => collection.value?.products.pageInfo.hasPreviousPage)\nconst hasNextPage = computed(() => collection.value?.products.pageInfo.hasNextPage)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp class=\"mb-4 text-2xl font-bold\">\n      {{ collection?.title }}\n    \u003C\u002Fp>\n\n    \u003Cp class=\"mb-6\">\n      {{ collection?.description }}\n    \u003C\u002Fp>\n\n    \u003Cdiv class=\"grid gap-4 grid-cols-1 sm:gap-8 md:grid-cols-2\">\n      \u003CProductCard\n        v-for=\"product in products\"\n        :key=\"product.id\"\n        :product=\"product\"\n      \u002F>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"flex justify-between mt-8\">\n      \u003CUButton\n        v-if=\"hasPreviousPage\"\n        :to=\"`?before=${startCursor}`\"\n        icon=\"i-lucide-arrow-left\"\n      >\n        Previous\n      \u003C\u002FUButton>\n\n      \u003CUButton\n        v-if=\"hasNextPage\"\n        :to=\"`?after=${endCursor}`\"\n        trailing-icon=\"i-lucide-arrow-right\"\n      >\n        Next\n      \u003C\u002FUButton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[180,181,182,217,236,243,279,293,298,339,345,351,357,363,369,375,381,387,393,399,405,411,416,422,428,434,440,446,452,458,464,470,476,487,513,535,554,571,605,632,653,674,685,707,731,739,744,779,784,824,861,898,935,945,950,960,971,993,999,1009,1014,1034,1040,1049,1054,1074,1083,1104,1126,1141,1147,1156,1161,1181,1189,1204,1228,1243,1249,1255,1266,1271,1278,1292,1313,1328,1333,1339,1348,1357,1367],"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],{"class":185,"line":238},3,[183,240,242],{"emptyLinePlaceholder":241},true,"\n",[183,244,246,248,251,253,256,259,262,265,268,271,273,276],{"class":185,"line":245},4,[183,247,222],{"class":197},[183,249,250],{"class":225}," key ",[183,252,204],{"class":189},[183,254,255],{"class":189}," `",[183,257,258],{"class":210},"collection-",[183,260,261],{"class":189},"${",[183,263,264],{"class":225},"route",[183,266,267],{"class":189},".",[183,269,270],{"class":225},"params",[183,272,267],{"class":189},[183,274,275],{"class":225},"handle",[183,277,278],{"class":189},"}`\n",[183,280,282,284,287,289],{"class":185,"line":281},5,[183,283,222],{"class":197},[183,285,286],{"class":225}," perPage ",[183,288,204],{"class":189},[183,290,292],{"class":291},"sbssI"," 4\n",[183,294,296],{"class":185,"line":295},6,[183,297,242],{"emptyLinePlaceholder":241},[183,299,301,303,306,309,312,315,318,321,325,328,331,334,336],{"class":185,"line":300},7,[183,302,222],{"class":197},[183,304,305],{"class":189}," {",[183,307,308],{"class":193}," data",[183,310,311],{"class":189},":",[183,313,314],{"class":225}," collection ",[183,316,317],{"class":189},"}",[183,319,320],{"class":189}," =",[183,322,324],{"class":323},"s7zQu"," await",[183,326,327],{"class":231}," useStorefrontData",[183,329,330],{"class":225},"(key",[183,332,333],{"class":189},",",[183,335,255],{"class":189},[183,337,338],{"class":210},"#graphql\n",[183,340,342],{"class":185,"line":341},8,[183,343,344],{"class":210},"  query GetCollection(\n",[183,346,348],{"class":185,"line":347},9,[183,349,350],{"class":210},"    $handle: String!, \n",[183,352,354],{"class":185,"line":353},10,[183,355,356],{"class":210},"    $first: Int, \n",[183,358,360],{"class":185,"line":359},11,[183,361,362],{"class":210},"    $last: Int, \n",[183,364,366],{"class":185,"line":365},12,[183,367,368],{"class":210},"    $after: String, \n",[183,370,372],{"class":185,"line":371},13,[183,373,374],{"class":210},"    $before: String, \n",[183,376,378],{"class":185,"line":377},14,[183,379,380],{"class":210},"    $language: LanguageCode, \n",[183,382,384],{"class":185,"line":383},15,[183,385,386],{"class":210},"    $country: CountryCode\n",[183,388,390],{"class":185,"line":389},16,[183,391,392],{"class":210},"  )\n",[183,394,396],{"class":185,"line":395},17,[183,397,398],{"class":210},"  @inContext(language: $language, country: $country) {\n",[183,400,402],{"class":185,"line":401},18,[183,403,404],{"class":210},"    collection(handle: $handle) {\n",[183,406,408],{"class":185,"line":407},19,[183,409,410],{"class":210},"      ...CollectionFields\n",[183,412,414],{"class":185,"line":413},20,[183,415,242],{"emptyLinePlaceholder":241},[183,417,419],{"class":185,"line":418},21,[183,420,421],{"class":210},"      products(\n",[183,423,425],{"class":185,"line":424},22,[183,426,427],{"class":210},"        first: $first,\n",[183,429,431],{"class":185,"line":430},23,[183,432,433],{"class":210},"        last: $last,\n",[183,435,437],{"class":185,"line":436},24,[183,438,439],{"class":210},"        after: $after,\n",[183,441,443],{"class":185,"line":442},25,[183,444,445],{"class":210},"        before: $before\n",[183,447,449],{"class":185,"line":448},26,[183,450,451],{"class":210},"      ) {\n",[183,453,455],{"class":185,"line":454},27,[183,456,457],{"class":210},"        ...ProductConnectionFields\n",[183,459,461],{"class":185,"line":460},28,[183,462,463],{"class":210},"      }\n",[183,465,467],{"class":185,"line":466},29,[183,468,469],{"class":210},"    }\n",[183,471,473],{"class":185,"line":472},30,[183,474,475],{"class":210},"  }\n",[183,477,479,482,484],{"class":185,"line":478},31,[183,480,481],{"class":189},"`",[183,483,333],{"class":189},[183,485,486],{"class":189}," {\n",[183,488,490,493,495,498,501,504,507,510],{"class":185,"line":489},32,[183,491,492],{"class":193},"  variables",[183,494,311],{"class":189},[183,496,497],{"class":231}," computed",[183,499,500],{"class":225},"(",[183,502,503],{"class":189},"()",[183,505,506],{"class":197}," =>",[183,508,509],{"class":225}," (",[183,511,512],{"class":189},"{\n",[183,514,516,519,521,524,526,528,530,532],{"class":185,"line":515},33,[183,517,518],{"class":193},"    handle",[183,520,311],{"class":189},[183,522,523],{"class":225}," route",[183,525,267],{"class":189},[183,527,270],{"class":225},[183,529,267],{"class":189},[183,531,275],{"class":225},[183,533,534],{"class":189},",\n",[183,536,538,541,543,546,549,552],{"class":185,"line":537},34,[183,539,540],{"class":193},"    language",[183,542,311],{"class":189},[183,544,545],{"class":189}," '",[183,547,548],{"class":210},"EN",[183,550,551],{"class":189},"'",[183,553,534],{"class":189},[183,555,557,560,562,564,567,569],{"class":185,"line":556},35,[183,558,559],{"class":193},"    country",[183,561,311],{"class":189},[183,563,545],{"class":189},[183,565,566],{"class":210},"US",[183,568,551],{"class":189},[183,570,534],{"class":189},[183,572,574,577,579,581,583,586,588,591,594,597,600,603],{"class":185,"line":573},36,[183,575,576],{"class":193},"    first",[183,578,311],{"class":189},[183,580,523],{"class":225},[183,582,267],{"class":189},[183,584,585],{"class":225},"query",[183,587,267],{"class":189},[183,589,590],{"class":225},"before ",[183,592,593],{"class":189},"?",[183,595,596],{"class":189}," undefined",[183,598,599],{"class":189}," :",[183,601,602],{"class":225}," perPage",[183,604,534],{"class":189},[183,606,608,611,613,615,617,619,621,623,625,627,629],{"class":185,"line":607},37,[183,609,610],{"class":193},"    last",[183,612,311],{"class":189},[183,614,523],{"class":225},[183,616,267],{"class":189},[183,618,585],{"class":225},[183,620,267],{"class":189},[183,622,590],{"class":225},[183,624,593],{"class":189},[183,626,286],{"class":225},[183,628,311],{"class":189},[183,630,631],{"class":189}," undefined,\n",[183,633,635,638,640,642,644,646,648,651],{"class":185,"line":634},38,[183,636,637],{"class":193},"    after",[183,639,311],{"class":189},[183,641,523],{"class":225},[183,643,267],{"class":189},[183,645,585],{"class":225},[183,647,267],{"class":189},[183,649,650],{"class":225},"after",[183,652,534],{"class":189},[183,654,656,659,661,663,665,667,669,672],{"class":185,"line":655},39,[183,657,658],{"class":193},"    before",[183,660,311],{"class":189},[183,662,523],{"class":225},[183,664,267],{"class":189},[183,666,585],{"class":225},[183,668,267],{"class":189},[183,670,671],{"class":225},"before",[183,673,534],{"class":189},[183,675,677,680,683],{"class":185,"line":676},40,[183,678,679],{"class":189},"  }",[183,681,682],{"class":225},"))",[183,684,534],{"class":189},[183,686,688,691,693,696,698,700,702,705],{"class":185,"line":687},41,[183,689,690],{"class":231},"  transform",[183,692,311],{"class":189},[183,694,308],{"class":695},"sHdIc",[183,697,506],{"class":197},[183,699,308],{"class":225},[183,701,267],{"class":189},[183,703,704],{"class":225},"collection",[183,706,534],{"class":189},[183,708,710,713,715,718,720,722,724,726,729],{"class":185,"line":709},42,[183,711,712],{"class":193},"  watch",[183,714,311],{"class":189},[183,716,717],{"class":225}," [ ",[183,719,503],{"class":189},[183,721,506],{"class":197},[183,723,523],{"class":225},[183,725,267],{"class":189},[183,727,728],{"class":225},"query ]",[183,730,534],{"class":189},[183,732,734,736],{"class":185,"line":733},43,[183,735,317],{"class":189},[183,737,738],{"class":225},")\n",[183,740,742],{"class":185,"line":741},44,[183,743,242],{"emptyLinePlaceholder":241},[183,745,747,749,752,754,756,758,760,762,765,768,770,773,776],{"class":185,"line":746},45,[183,748,222],{"class":197},[183,750,751],{"class":225}," products ",[183,753,204],{"class":189},[183,755,497],{"class":231},[183,757,500],{"class":225},[183,759,503],{"class":189},[183,761,506],{"class":197},[183,763,764],{"class":231}," flattenConnection",[183,766,767],{"class":225},"(collection",[183,769,267],{"class":189},[183,771,772],{"class":225},"value",[183,774,775],{"class":189},"?.",[183,777,778],{"class":225},"products))\n",[183,780,782],{"class":185,"line":781},46,[183,783,242],{"emptyLinePlaceholder":241},[183,785,787,789,792,794,796,798,800,802,805,807,809,811,814,816,819,821],{"class":185,"line":786},47,[183,788,222],{"class":197},[183,790,791],{"class":225}," startCursor ",[183,793,204],{"class":189},[183,795,497],{"class":231},[183,797,500],{"class":225},[183,799,503],{"class":189},[183,801,506],{"class":197},[183,803,804],{"class":225}," collection",[183,806,267],{"class":189},[183,808,772],{"class":225},[183,810,775],{"class":189},[183,812,813],{"class":225},"products",[183,815,267],{"class":189},[183,817,818],{"class":225},"pageInfo",[183,820,267],{"class":189},[183,822,823],{"class":225},"startCursor)\n",[183,825,827,829,832,834,836,838,840,842,844,846,848,850,852,854,856,858],{"class":185,"line":826},48,[183,828,222],{"class":197},[183,830,831],{"class":225}," endCursor ",[183,833,204],{"class":189},[183,835,497],{"class":231},[183,837,500],{"class":225},[183,839,503],{"class":189},[183,841,506],{"class":197},[183,843,804],{"class":225},[183,845,267],{"class":189},[183,847,772],{"class":225},[183,849,775],{"class":189},[183,851,813],{"class":225},[183,853,267],{"class":189},[183,855,818],{"class":225},[183,857,267],{"class":189},[183,859,860],{"class":225},"endCursor)\n",[183,862,864,866,869,871,873,875,877,879,881,883,885,887,889,891,893,895],{"class":185,"line":863},49,[183,865,222],{"class":197},[183,867,868],{"class":225}," hasPreviousPage ",[183,870,204],{"class":189},[183,872,497],{"class":231},[183,874,500],{"class":225},[183,876,503],{"class":189},[183,878,506],{"class":197},[183,880,804],{"class":225},[183,882,267],{"class":189},[183,884,772],{"class":225},[183,886,775],{"class":189},[183,888,813],{"class":225},[183,890,267],{"class":189},[183,892,818],{"class":225},[183,894,267],{"class":189},[183,896,897],{"class":225},"hasPreviousPage)\n",[183,899,901,903,906,908,910,912,914,916,918,920,922,924,926,928,930,932],{"class":185,"line":900},50,[183,902,222],{"class":197},[183,904,905],{"class":225}," hasNextPage ",[183,907,204],{"class":189},[183,909,497],{"class":231},[183,911,500],{"class":225},[183,913,503],{"class":189},[183,915,506],{"class":197},[183,917,804],{"class":225},[183,919,267],{"class":189},[183,921,772],{"class":225},[183,923,775],{"class":189},[183,925,813],{"class":225},[183,927,267],{"class":189},[183,929,818],{"class":225},[183,931,267],{"class":189},[183,933,934],{"class":225},"hasNextPage)\n",[183,936,938,941,943],{"class":185,"line":937},51,[183,939,940],{"class":189},"\u003C\u002F",[183,942,194],{"class":193},[183,944,216],{"class":189},[183,946,948],{"class":185,"line":947},52,[183,949,242],{"emptyLinePlaceholder":241},[183,951,953,955,958],{"class":185,"line":952},53,[183,954,190],{"class":189},[183,956,957],{"class":193},"template",[183,959,216],{"class":189},[183,961,963,966,969],{"class":185,"line":962},54,[183,964,965],{"class":189},"  \u003C",[183,967,968],{"class":193},"div",[183,970,216],{"class":189},[183,972,974,977,979,982,984,986,989,991],{"class":185,"line":973},55,[183,975,976],{"class":189},"    \u003C",[183,978,144],{"class":193},[183,980,981],{"class":197}," class",[183,983,204],{"class":189},[183,985,207],{"class":189},[183,987,988],{"class":210},"mb-4 text-2xl font-bold",[183,990,207],{"class":189},[183,992,216],{"class":189},[183,994,996],{"class":185,"line":995},56,[183,997,998],{"class":225},"      {{ collection?.title }}\n",[183,1000,1002,1005,1007],{"class":185,"line":1001},57,[183,1003,1004],{"class":189},"    \u003C\u002F",[183,1006,144],{"class":193},[183,1008,216],{"class":189},[183,1010,1012],{"class":185,"line":1011},58,[183,1013,242],{"emptyLinePlaceholder":241},[183,1015,1017,1019,1021,1023,1025,1027,1030,1032],{"class":185,"line":1016},59,[183,1018,976],{"class":189},[183,1020,144],{"class":193},[183,1022,981],{"class":197},[183,1024,204],{"class":189},[183,1026,207],{"class":189},[183,1028,1029],{"class":210},"mb-6",[183,1031,207],{"class":189},[183,1033,216],{"class":189},[183,1035,1037],{"class":185,"line":1036},60,[183,1038,1039],{"class":225},"      {{ collection?.description }}\n",[183,1041,1043,1045,1047],{"class":185,"line":1042},61,[183,1044,1004],{"class":189},[183,1046,144],{"class":193},[183,1048,216],{"class":189},[183,1050,1052],{"class":185,"line":1051},62,[183,1053,242],{"emptyLinePlaceholder":241},[183,1055,1057,1059,1061,1063,1065,1067,1070,1072],{"class":185,"line":1056},63,[183,1058,976],{"class":189},[183,1060,968],{"class":193},[183,1062,981],{"class":197},[183,1064,204],{"class":189},[183,1066,207],{"class":189},[183,1068,1069],{"class":210},"grid gap-4 grid-cols-1 sm:gap-8 md:grid-cols-2",[183,1071,207],{"class":189},[183,1073,216],{"class":189},[183,1075,1077,1080],{"class":185,"line":1076},64,[183,1078,1079],{"class":189},"      \u003C",[183,1081,1082],{"class":193},"ProductCard\n",[183,1084,1086,1089,1091,1093,1096,1099,1101],{"class":185,"line":1085},65,[183,1087,1088],{"class":323},"        v-for",[183,1090,204],{"class":189},[183,1092,207],{"class":189},[183,1094,1095],{"class":225},"product",[183,1097,1098],{"class":189}," in ",[183,1100,813],{"class":225},[183,1102,1103],{"class":189},"\"\n",[183,1105,1107,1110,1113,1115,1117,1119,1121,1124],{"class":185,"line":1106},66,[183,1108,1109],{"class":189},"        :",[183,1111,1112],{"class":197},"key",[183,1114,204],{"class":189},[183,1116,207],{"class":189},[183,1118,1095],{"class":225},[183,1120,267],{"class":189},[183,1122,1123],{"class":225},"id",[183,1125,1103],{"class":189},[183,1127,1129,1131,1133,1135,1137,1139],{"class":185,"line":1128},67,[183,1130,1109],{"class":189},[183,1132,1095],{"class":197},[183,1134,204],{"class":189},[183,1136,207],{"class":189},[183,1138,1095],{"class":225},[183,1140,1103],{"class":189},[183,1142,1144],{"class":185,"line":1143},68,[183,1145,1146],{"class":189},"      \u002F>\n",[183,1148,1150,1152,1154],{"class":185,"line":1149},69,[183,1151,1004],{"class":189},[183,1153,968],{"class":193},[183,1155,216],{"class":189},[183,1157,1159],{"class":185,"line":1158},70,[183,1160,242],{"emptyLinePlaceholder":241},[183,1162,1164,1166,1168,1170,1172,1174,1177,1179],{"class":185,"line":1163},71,[183,1165,976],{"class":189},[183,1167,968],{"class":193},[183,1169,981],{"class":197},[183,1171,204],{"class":189},[183,1173,207],{"class":189},[183,1175,1176],{"class":210},"flex justify-between mt-8",[183,1178,207],{"class":189},[183,1180,216],{"class":189},[183,1182,1184,1186],{"class":185,"line":1183},72,[183,1185,1079],{"class":189},[183,1187,1188],{"class":193},"UButton\n",[183,1190,1192,1195,1197,1199,1202],{"class":185,"line":1191},73,[183,1193,1194],{"class":323},"        v-if",[183,1196,204],{"class":189},[183,1198,207],{"class":189},[183,1200,1201],{"class":225},"hasPreviousPage",[183,1203,1103],{"class":189},[183,1205,1207,1209,1212,1214,1217,1220,1222,1225],{"class":185,"line":1206},74,[183,1208,1109],{"class":189},[183,1210,1211],{"class":197},"to",[183,1213,204],{"class":189},[183,1215,1216],{"class":189},"\"`",[183,1218,1219],{"class":210},"?before=",[183,1221,261],{"class":189},[183,1223,1224],{"class":225},"startCursor",[183,1226,1227],{"class":189},"}`\"\n",[183,1229,1231,1234,1236,1238,1241],{"class":185,"line":1230},75,[183,1232,1233],{"class":197},"        icon",[183,1235,204],{"class":189},[183,1237,207],{"class":189},[183,1239,1240],{"class":210},"i-lucide-arrow-left",[183,1242,1103],{"class":189},[183,1244,1246],{"class":185,"line":1245},76,[183,1247,1248],{"class":189},"      >\n",[183,1250,1252],{"class":185,"line":1251},77,[183,1253,1254],{"class":225},"        Previous\n",[183,1256,1258,1261,1264],{"class":185,"line":1257},78,[183,1259,1260],{"class":189},"      \u003C\u002F",[183,1262,1263],{"class":193},"UButton",[183,1265,216],{"class":189},[183,1267,1269],{"class":185,"line":1268},79,[183,1270,242],{"emptyLinePlaceholder":241},[183,1272,1274,1276],{"class":185,"line":1273},80,[183,1275,1079],{"class":189},[183,1277,1188],{"class":193},[183,1279,1281,1283,1285,1287,1290],{"class":185,"line":1280},81,[183,1282,1194],{"class":323},[183,1284,204],{"class":189},[183,1286,207],{"class":189},[183,1288,1289],{"class":225},"hasNextPage",[183,1291,1103],{"class":189},[183,1293,1295,1297,1299,1301,1303,1306,1308,1311],{"class":185,"line":1294},82,[183,1296,1109],{"class":189},[183,1298,1211],{"class":197},[183,1300,204],{"class":189},[183,1302,1216],{"class":189},[183,1304,1305],{"class":210},"?after=",[183,1307,261],{"class":189},[183,1309,1310],{"class":225},"endCursor",[183,1312,1227],{"class":189},[183,1314,1316,1319,1321,1323,1326],{"class":185,"line":1315},83,[183,1317,1318],{"class":197},"        trailing-icon",[183,1320,204],{"class":189},[183,1322,207],{"class":189},[183,1324,1325],{"class":210},"i-lucide-arrow-right",[183,1327,1103],{"class":189},[183,1329,1331],{"class":185,"line":1330},84,[183,1332,1248],{"class":189},[183,1334,1336],{"class":185,"line":1335},85,[183,1337,1338],{"class":225},"        Next\n",[183,1340,1342,1344,1346],{"class":185,"line":1341},86,[183,1343,1260],{"class":189},[183,1345,1263],{"class":193},[183,1347,216],{"class":189},[183,1349,1351,1353,1355],{"class":185,"line":1350},87,[183,1352,1004],{"class":189},[183,1354,968],{"class":193},[183,1356,216],{"class":189},[183,1358,1360,1363,1365],{"class":185,"line":1359},88,[183,1361,1362],{"class":189},"  \u003C\u002F",[183,1364,968],{"class":193},[183,1366,216],{"class":189},[183,1368,1370,1372,1374],{"class":185,"line":1369},89,[183,1371,940],{"class":189},[183,1373,957],{"class":193},[183,1375,216],{"class":189},[173,1377,1380],{"className":175,"code":1378,"filename":1379,"language":177,"meta":178,"style":178},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  product: ProductFieldsFragment\n}>()\n\nconst price = computed(() => {\n  const price = props.product.priceRange.minVariantPrice\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: price.currencyCode,\n  }).format(Number(price.amount))\n})\n\nconst image = computed(() => props.product.featuredImage)\nconst to = computed(() => `\u002Fproducts\u002F${props.product.handle}`)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUPageCard\n    :key=\"props.product.id\"\n    :to=\"to\"\n    :title=\"props.product.title\"\n    :description=\"props.product.description\"\n    orientation=\"vertical\"\n    reverse\n    :ui=\"{\n      description: 'line-clamp-2',\n      footer: 'w-full',\n    }\"\n  >\n    \u003Ctemplate #header>\n      \u003CNuxtImg\n        provider=\"shopify\"\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 lg:33vw xl:33vw\"\n        class=\"rounded-sm\"\n      \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #footer>\n      \u003Cdiv class=\"flex justify-between items-center w-full\">\n        \u003Cdiv class=\"font-semibold\">\n          from {{ price }}\n        \u003C\u002Fdiv>\n\n        \u003CUButton size=\"sm\">\n          Add to Cart\n        \u003C\u002FUButton>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUPageCard>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FProductCard.vue",[180,1381,1382,1402,1417,1428,1435,1439,1458,1485,1514,1530,1546,1576,1582,1586,1614,1654,1662,1666,1674,1681,1704,1718,1741,1764,1778,1783,1796,1813,1829,1836,1841,1855,1862,1876,1897,1920,1941,1962,1976,1990,1994,2002,2006,2019,2038,2058,2063,2072,2076,2096,2101,2109,2117,2125,2134],{"__ignoreMap":178},[183,1383,1384,1386,1388,1390,1392,1394,1396,1398,1400],{"class":185,"line":186},[183,1385,190],{"class":189},[183,1387,194],{"class":193},[183,1389,198],{"class":197},[183,1391,201],{"class":197},[183,1393,204],{"class":189},[183,1395,207],{"class":189},[183,1397,211],{"class":210},[183,1399,207],{"class":189},[183,1401,216],{"class":189},[183,1403,1404,1406,1409,1411,1414],{"class":185,"line":219},[183,1405,222],{"class":197},[183,1407,1408],{"class":225}," props ",[183,1410,204],{"class":189},[183,1412,1413],{"class":231}," defineProps",[183,1415,1416],{"class":189},"\u003C{\n",[183,1418,1419,1422,1424],{"class":185,"line":238},[183,1420,1421],{"class":193},"  product",[183,1423,311],{"class":189},[183,1425,1427],{"class":1426},"sBMFI"," ProductFieldsFragment\n",[183,1429,1430,1433],{"class":185,"line":245},[183,1431,1432],{"class":189},"}>",[183,1434,235],{"class":225},[183,1436,1437],{"class":185,"line":281},[183,1438,242],{"emptyLinePlaceholder":241},[183,1440,1441,1443,1446,1448,1450,1452,1454,1456],{"class":185,"line":295},[183,1442,222],{"class":197},[183,1444,1445],{"class":225}," price ",[183,1447,204],{"class":189},[183,1449,497],{"class":231},[183,1451,500],{"class":225},[183,1453,503],{"class":189},[183,1455,506],{"class":197},[183,1457,486],{"class":189},[183,1459,1460,1463,1466,1468,1471,1473,1475,1477,1480,1482],{"class":185,"line":300},[183,1461,1462],{"class":197},"  const",[183,1464,1465],{"class":225}," price",[183,1467,320],{"class":189},[183,1469,1470],{"class":225}," props",[183,1472,267],{"class":189},[183,1474,1095],{"class":225},[183,1476,267],{"class":189},[183,1478,1479],{"class":225},"priceRange",[183,1481,267],{"class":189},[183,1483,1484],{"class":225},"minVariantPrice\n",[183,1486,1487,1490,1493,1496,1498,1501,1503,1505,1508,1510,1512],{"class":185,"line":341},[183,1488,1489],{"class":323},"  return",[183,1491,1492],{"class":189}," new",[183,1494,1495],{"class":225}," Intl",[183,1497,267],{"class":189},[183,1499,1500],{"class":231},"NumberFormat",[183,1502,500],{"class":193},[183,1504,551],{"class":189},[183,1506,1507],{"class":210},"en-US",[183,1509,551],{"class":189},[183,1511,333],{"class":189},[183,1513,486],{"class":189},[183,1515,1516,1519,1521,1523,1526,1528],{"class":185,"line":347},[183,1517,1518],{"class":193},"    style",[183,1520,311],{"class":189},[183,1522,545],{"class":189},[183,1524,1525],{"class":210},"currency",[183,1527,551],{"class":189},[183,1529,534],{"class":189},[183,1531,1532,1535,1537,1539,1541,1544],{"class":185,"line":353},[183,1533,1534],{"class":193},"    currency",[183,1536,311],{"class":189},[183,1538,1465],{"class":225},[183,1540,267],{"class":189},[183,1542,1543],{"class":225},"currencyCode",[183,1545,534],{"class":189},[183,1547,1548,1550,1553,1555,1558,1560,1563,1565,1568,1570,1573],{"class":185,"line":359},[183,1549,679],{"class":189},[183,1551,1552],{"class":193},")",[183,1554,267],{"class":189},[183,1556,1557],{"class":231},"format",[183,1559,500],{"class":193},[183,1561,1562],{"class":231},"Number",[183,1564,500],{"class":193},[183,1566,1567],{"class":225},"price",[183,1569,267],{"class":189},[183,1571,1572],{"class":225},"amount",[183,1574,1575],{"class":193},"))\n",[183,1577,1578,1580],{"class":185,"line":365},[183,1579,317],{"class":189},[183,1581,738],{"class":225},[183,1583,1584],{"class":185,"line":371},[183,1585,242],{"emptyLinePlaceholder":241},[183,1587,1588,1590,1593,1595,1597,1599,1601,1603,1605,1607,1609,1611],{"class":185,"line":377},[183,1589,222],{"class":197},[183,1591,1592],{"class":225}," image ",[183,1594,204],{"class":189},[183,1596,497],{"class":231},[183,1598,500],{"class":225},[183,1600,503],{"class":189},[183,1602,506],{"class":197},[183,1604,1470],{"class":225},[183,1606,267],{"class":189},[183,1608,1095],{"class":225},[183,1610,267],{"class":189},[183,1612,1613],{"class":225},"featuredImage)\n",[183,1615,1616,1618,1621,1623,1625,1627,1629,1631,1633,1636,1638,1641,1643,1645,1647,1649,1652],{"class":185,"line":383},[183,1617,222],{"class":197},[183,1619,1620],{"class":225}," to ",[183,1622,204],{"class":189},[183,1624,497],{"class":231},[183,1626,500],{"class":225},[183,1628,503],{"class":189},[183,1630,506],{"class":197},[183,1632,255],{"class":189},[183,1634,1635],{"class":210},"\u002Fproducts\u002F",[183,1637,261],{"class":189},[183,1639,1640],{"class":225},"props",[183,1642,267],{"class":189},[183,1644,1095],{"class":225},[183,1646,267],{"class":189},[183,1648,275],{"class":225},[183,1650,1651],{"class":189},"}`",[183,1653,738],{"class":225},[183,1655,1656,1658,1660],{"class":185,"line":389},[183,1657,940],{"class":189},[183,1659,194],{"class":193},[183,1661,216],{"class":189},[183,1663,1664],{"class":185,"line":395},[183,1665,242],{"emptyLinePlaceholder":241},[183,1667,1668,1670,1672],{"class":185,"line":401},[183,1669,190],{"class":189},[183,1671,957],{"class":193},[183,1673,216],{"class":189},[183,1675,1676,1678],{"class":185,"line":407},[183,1677,965],{"class":189},[183,1679,1680],{"class":193},"UPageCard\n",[183,1682,1683,1686,1688,1690,1692,1694,1696,1698,1700,1702],{"class":185,"line":413},[183,1684,1685],{"class":189},"    :",[183,1687,1112],{"class":197},[183,1689,204],{"class":189},[183,1691,207],{"class":189},[183,1693,1640],{"class":225},[183,1695,267],{"class":189},[183,1697,1095],{"class":225},[183,1699,267],{"class":189},[183,1701,1123],{"class":225},[183,1703,1103],{"class":189},[183,1705,1706,1708,1710,1712,1714,1716],{"class":185,"line":418},[183,1707,1685],{"class":189},[183,1709,1211],{"class":197},[183,1711,204],{"class":189},[183,1713,207],{"class":189},[183,1715,1211],{"class":225},[183,1717,1103],{"class":189},[183,1719,1720,1722,1725,1727,1729,1731,1733,1735,1737,1739],{"class":185,"line":424},[183,1721,1685],{"class":189},[183,1723,1724],{"class":197},"title",[183,1726,204],{"class":189},[183,1728,207],{"class":189},[183,1730,1640],{"class":225},[183,1732,267],{"class":189},[183,1734,1095],{"class":225},[183,1736,267],{"class":189},[183,1738,1724],{"class":225},[183,1740,1103],{"class":189},[183,1742,1743,1745,1748,1750,1752,1754,1756,1758,1760,1762],{"class":185,"line":430},[183,1744,1685],{"class":189},[183,1746,1747],{"class":197},"description",[183,1749,204],{"class":189},[183,1751,207],{"class":189},[183,1753,1640],{"class":225},[183,1755,267],{"class":189},[183,1757,1095],{"class":225},[183,1759,267],{"class":189},[183,1761,1747],{"class":225},[183,1763,1103],{"class":189},[183,1765,1766,1769,1771,1773,1776],{"class":185,"line":436},[183,1767,1768],{"class":197},"    orientation",[183,1770,204],{"class":189},[183,1772,207],{"class":189},[183,1774,1775],{"class":210},"vertical",[183,1777,1103],{"class":189},[183,1779,1780],{"class":185,"line":442},[183,1781,1782],{"class":197},"    reverse\n",[183,1784,1785,1787,1790,1792,1794],{"class":185,"line":448},[183,1786,1685],{"class":189},[183,1788,1789],{"class":197},"ui",[183,1791,204],{"class":189},[183,1793,207],{"class":189},[183,1795,512],{"class":189},[183,1797,1798,1801,1804,1806,1809,1811],{"class":185,"line":454},[183,1799,1800],{"class":193},"      description",[183,1802,1803],{"class":189},": ",[183,1805,551],{"class":189},[183,1807,1808],{"class":210},"line-clamp-2",[183,1810,551],{"class":189},[183,1812,534],{"class":189},[183,1814,1815,1818,1820,1822,1825,1827],{"class":185,"line":460},[183,1816,1817],{"class":193},"      footer",[183,1819,1803],{"class":189},[183,1821,551],{"class":189},[183,1823,1824],{"class":210},"w-full",[183,1826,551],{"class":189},[183,1828,534],{"class":189},[183,1830,1831,1834],{"class":185,"line":466},[183,1832,1833],{"class":189},"    }",[183,1835,1103],{"class":189},[183,1837,1838],{"class":185,"line":472},[183,1839,1840],{"class":189},"  >\n",[183,1842,1843,1845,1847,1850,1853],{"class":185,"line":478},[183,1844,976],{"class":189},[183,1846,957],{"class":193},[183,1848,1849],{"class":189}," #",[183,1851,1852],{"class":197},"header",[183,1854,216],{"class":189},[183,1856,1857,1859],{"class":185,"line":489},[183,1858,1079],{"class":189},[183,1860,1861],{"class":193},"NuxtImg\n",[183,1863,1864,1867,1869,1871,1874],{"class":185,"line":515},[183,1865,1866],{"class":197},"        provider",[183,1868,204],{"class":189},[183,1870,207],{"class":189},[183,1872,1873],{"class":210},"shopify",[183,1875,1103],{"class":189},[183,1877,1878,1880,1883,1885,1887,1890,1892,1895],{"class":185,"line":537},[183,1879,1109],{"class":189},[183,1881,1882],{"class":197},"src",[183,1884,204],{"class":189},[183,1886,207],{"class":189},[183,1888,1889],{"class":225},"image",[183,1891,775],{"class":189},[183,1893,1894],{"class":225},"url",[183,1896,1103],{"class":189},[183,1898,1899,1901,1904,1906,1908,1910,1912,1915,1918],{"class":185,"line":556},[183,1900,1109],{"class":189},[183,1902,1903],{"class":197},"alt",[183,1905,204],{"class":189},[183,1907,207],{"class":189},[183,1909,1889],{"class":225},[183,1911,775],{"class":189},[183,1913,1914],{"class":225},"altText",[183,1916,1917],{"class":189}," ?? undefined",[183,1919,1103],{"class":189},[183,1921,1922,1924,1927,1929,1931,1933,1935,1937,1939],{"class":185,"line":573},[183,1923,1109],{"class":189},[183,1925,1926],{"class":197},"width",[183,1928,204],{"class":189},[183,1930,207],{"class":189},[183,1932,1889],{"class":225},[183,1934,775],{"class":189},[183,1936,1926],{"class":225},[183,1938,1917],{"class":189},[183,1940,1103],{"class":189},[183,1942,1943,1945,1948,1950,1952,1954,1956,1958,1960],{"class":185,"line":607},[183,1944,1109],{"class":189},[183,1946,1947],{"class":197},"height",[183,1949,204],{"class":189},[183,1951,207],{"class":189},[183,1953,1889],{"class":225},[183,1955,775],{"class":189},[183,1957,1947],{"class":225},[183,1959,1917],{"class":189},[183,1961,1103],{"class":189},[183,1963,1964,1967,1969,1971,1974],{"class":185,"line":634},[183,1965,1966],{"class":197},"        sizes",[183,1968,204],{"class":189},[183,1970,207],{"class":189},[183,1972,1973],{"class":210},"xs:100vw sm:50vw md:33vw lg:33vw xl:33vw",[183,1975,1103],{"class":189},[183,1977,1978,1981,1983,1985,1988],{"class":185,"line":655},[183,1979,1980],{"class":197},"        class",[183,1982,204],{"class":189},[183,1984,207],{"class":189},[183,1986,1987],{"class":210},"rounded-sm",[183,1989,1103],{"class":189},[183,1991,1992],{"class":185,"line":676},[183,1993,1146],{"class":189},[183,1995,1996,1998,2000],{"class":185,"line":687},[183,1997,1004],{"class":189},[183,1999,957],{"class":193},[183,2001,216],{"class":189},[183,2003,2004],{"class":185,"line":709},[183,2005,242],{"emptyLinePlaceholder":241},[183,2007,2008,2010,2012,2014,2017],{"class":185,"line":733},[183,2009,976],{"class":189},[183,2011,957],{"class":193},[183,2013,1849],{"class":189},[183,2015,2016],{"class":197},"footer",[183,2018,216],{"class":189},[183,2020,2021,2023,2025,2027,2029,2031,2034,2036],{"class":185,"line":741},[183,2022,1079],{"class":189},[183,2024,968],{"class":193},[183,2026,981],{"class":197},[183,2028,204],{"class":189},[183,2030,207],{"class":189},[183,2032,2033],{"class":210},"flex justify-between items-center w-full",[183,2035,207],{"class":189},[183,2037,216],{"class":189},[183,2039,2040,2043,2045,2047,2049,2051,2054,2056],{"class":185,"line":746},[183,2041,2042],{"class":189},"        \u003C",[183,2044,968],{"class":193},[183,2046,981],{"class":197},[183,2048,204],{"class":189},[183,2050,207],{"class":189},[183,2052,2053],{"class":210},"font-semibold",[183,2055,207],{"class":189},[183,2057,216],{"class":189},[183,2059,2060],{"class":185,"line":781},[183,2061,2062],{"class":225},"          from {{ price }}\n",[183,2064,2065,2068,2070],{"class":185,"line":786},[183,2066,2067],{"class":189},"        \u003C\u002F",[183,2069,968],{"class":193},[183,2071,216],{"class":189},[183,2073,2074],{"class":185,"line":826},[183,2075,242],{"emptyLinePlaceholder":241},[183,2077,2078,2080,2082,2085,2087,2089,2092,2094],{"class":185,"line":863},[183,2079,2042],{"class":189},[183,2081,1263],{"class":193},[183,2083,2084],{"class":197}," size",[183,2086,204],{"class":189},[183,2088,207],{"class":189},[183,2090,2091],{"class":210},"sm",[183,2093,207],{"class":189},[183,2095,216],{"class":189},[183,2097,2098],{"class":185,"line":900},[183,2099,2100],{"class":225},"          Add to Cart\n",[183,2102,2103,2105,2107],{"class":185,"line":937},[183,2104,2067],{"class":189},[183,2106,1263],{"class":193},[183,2108,216],{"class":189},[183,2110,2111,2113,2115],{"class":185,"line":947},[183,2112,1260],{"class":189},[183,2114,968],{"class":193},[183,2116,216],{"class":189},[183,2118,2119,2121,2123],{"class":185,"line":952},[183,2120,1004],{"class":189},[183,2122,957],{"class":193},[183,2124,216],{"class":189},[183,2126,2127,2129,2132],{"class":185,"line":962},[183,2128,1362],{"class":189},[183,2130,2131],{"class":193},"UPageCard",[183,2133,216],{"class":189},[183,2135,2136,2138,2140],{"class":185,"line":973},[183,2137,940],{"class":189},[183,2139,957],{"class":193},[183,2141,216],{"class":189},[173,2143,2147],{"className":2144,"code":2145,"filename":2146,"language":211,"meta":178,"style":178},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export const COLLECTION_FRAGMENT = `#graphql\n  fragment CollectionFields on Collection {\n    id\n    title\n    description\n  }\n`\n","graphql\u002Fcollection.ts",[180,2148,2149,2166,2171,2176,2181,2186,2190],{"__ignoreMap":178},[183,2150,2151,2154,2157,2160,2162,2164],{"class":185,"line":186},[183,2152,2153],{"class":323},"export",[183,2155,2156],{"class":197}," const",[183,2158,2159],{"class":225}," COLLECTION_FRAGMENT ",[183,2161,204],{"class":189},[183,2163,255],{"class":189},[183,2165,338],{"class":210},[183,2167,2168],{"class":185,"line":219},[183,2169,2170],{"class":210},"  fragment CollectionFields on Collection {\n",[183,2172,2173],{"class":185,"line":238},[183,2174,2175],{"class":210},"    id\n",[183,2177,2178],{"class":185,"line":245},[183,2179,2180],{"class":210},"    title\n",[183,2182,2183],{"class":185,"line":281},[183,2184,2185],{"class":210},"    description\n",[183,2187,2188],{"class":185,"line":295},[183,2189,475],{"class":210},[183,2191,2192],{"class":185,"line":300},[183,2193,2194],{"class":189},"`\n",[173,2196,2199],{"className":2144,"code":2197,"filename":2198,"language":211,"meta":178,"style":178},"export const PRODUCT_FRAGMENT = `#graphql\n  fragment ProductFields on Product {\n    id\n    handle\n    title\n    description\n    featuredImage {\n      url\n      altText\n      height\n      width\n    }\n    priceRange {\n      minVariantPrice {\n        amount\n        currencyCode\n      }\n    }\n  }\n`\n\nexport const PRODUCT_CONNECTION_FRAGMENT = `#graphql\n  fragment ProductConnectionFields on ProductConnection {\n    edges {\n      cursor\n      node {\n        ...ProductFields\n      }\n    }\n    pageInfo {\n      hasNextPage\n      hasPreviousPage\n      startCursor\n      endCursor\n    }\n  }\n`\n","graphql\u002Fproduct.ts",[180,2200,2201,2216,2221,2225,2230,2234,2238,2243,2248,2253,2258,2263,2267,2272,2277,2282,2287,2291,2295,2299,2303,2307,2322,2327,2332,2337,2342,2347,2351,2355,2360,2365,2370,2375,2380,2384,2388],{"__ignoreMap":178},[183,2202,2203,2205,2207,2210,2212,2214],{"class":185,"line":186},[183,2204,2153],{"class":323},[183,2206,2156],{"class":197},[183,2208,2209],{"class":225}," PRODUCT_FRAGMENT ",[183,2211,204],{"class":189},[183,2213,255],{"class":189},[183,2215,338],{"class":210},[183,2217,2218],{"class":185,"line":219},[183,2219,2220],{"class":210},"  fragment ProductFields on Product {\n",[183,2222,2223],{"class":185,"line":238},[183,2224,2175],{"class":210},[183,2226,2227],{"class":185,"line":245},[183,2228,2229],{"class":210},"    handle\n",[183,2231,2232],{"class":185,"line":281},[183,2233,2180],{"class":210},[183,2235,2236],{"class":185,"line":295},[183,2237,2185],{"class":210},[183,2239,2240],{"class":185,"line":300},[183,2241,2242],{"class":210},"    featuredImage {\n",[183,2244,2245],{"class":185,"line":341},[183,2246,2247],{"class":210},"      url\n",[183,2249,2250],{"class":185,"line":347},[183,2251,2252],{"class":210},"      altText\n",[183,2254,2255],{"class":185,"line":353},[183,2256,2257],{"class":210},"      height\n",[183,2259,2260],{"class":185,"line":359},[183,2261,2262],{"class":210},"      width\n",[183,2264,2265],{"class":185,"line":365},[183,2266,469],{"class":210},[183,2268,2269],{"class":185,"line":371},[183,2270,2271],{"class":210},"    priceRange {\n",[183,2273,2274],{"class":185,"line":377},[183,2275,2276],{"class":210},"      minVariantPrice {\n",[183,2278,2279],{"class":185,"line":383},[183,2280,2281],{"class":210},"        amount\n",[183,2283,2284],{"class":185,"line":389},[183,2285,2286],{"class":210},"        currencyCode\n",[183,2288,2289],{"class":185,"line":395},[183,2290,463],{"class":210},[183,2292,2293],{"class":185,"line":401},[183,2294,469],{"class":210},[183,2296,2297],{"class":185,"line":407},[183,2298,475],{"class":210},[183,2300,2301],{"class":185,"line":413},[183,2302,2194],{"class":189},[183,2304,2305],{"class":185,"line":418},[183,2306,242],{"emptyLinePlaceholder":241},[183,2308,2309,2311,2313,2316,2318,2320],{"class":185,"line":424},[183,2310,2153],{"class":323},[183,2312,2156],{"class":197},[183,2314,2315],{"class":225}," PRODUCT_CONNECTION_FRAGMENT ",[183,2317,204],{"class":189},[183,2319,255],{"class":189},[183,2321,338],{"class":210},[183,2323,2324],{"class":185,"line":430},[183,2325,2326],{"class":210},"  fragment ProductConnectionFields on ProductConnection {\n",[183,2328,2329],{"class":185,"line":436},[183,2330,2331],{"class":210},"    edges {\n",[183,2333,2334],{"class":185,"line":442},[183,2335,2336],{"class":210},"      cursor\n",[183,2338,2339],{"class":185,"line":448},[183,2340,2341],{"class":210},"      node {\n",[183,2343,2344],{"class":185,"line":454},[183,2345,2346],{"class":210},"        ...ProductFields\n",[183,2348,2349],{"class":185,"line":460},[183,2350,463],{"class":210},[183,2352,2353],{"class":185,"line":466},[183,2354,469],{"class":210},[183,2356,2357],{"class":185,"line":472},[183,2358,2359],{"class":210},"    pageInfo {\n",[183,2361,2362],{"class":185,"line":478},[183,2363,2364],{"class":210},"      hasNextPage\n",[183,2366,2367],{"class":185,"line":489},[183,2368,2369],{"class":210},"      hasPreviousPage\n",[183,2371,2372],{"class":185,"line":515},[183,2373,2374],{"class":210},"      startCursor\n",[183,2376,2377],{"class":185,"line":537},[183,2378,2379],{"class":210},"      endCursor\n",[183,2381,2382],{"class":185,"line":556},[183,2383,469],{"class":210},[183,2385,2386],{"class":185,"line":573},[183,2387,475],{"class":210},[183,2389,2390],{"class":185,"line":607},[183,2391,2194],{"class":189},[144,2393,2394,2395,2399,2400,267],{},"In order to follow this example, you need to have at least one collection with products set up in your Shopify store.\nMake sure you have configured the ",[2396,2397,2398],"a",{"href":44},"Nuxt Shopify module"," and have a ",[2396,2401,2402],{"href":39},"Shopify store set up",[2404,2405,2407],"h2",{"id":2406},"setting-up-graphql-fragments","Setting Up GraphQL Fragments",[144,2409,2410],{},"Before we start, let's define some reusable GraphQL fragments for our collection and product data.\nThese fragments will keep our queries clean and make it easy to reuse the same fields across multiple queries.",[144,2412,2413],{},"The collection fragment fetches the basic collection info:",[173,2415,2416],{"className":2144,"code":2145,"filename":2146,"language":211,"meta":178,"style":178},[180,2417,2418,2432,2436,2440,2444,2448,2452],{"__ignoreMap":178},[183,2419,2420,2422,2424,2426,2428,2430],{"class":185,"line":186},[183,2421,2153],{"class":323},[183,2423,2156],{"class":197},[183,2425,2159],{"class":225},[183,2427,204],{"class":189},[183,2429,255],{"class":189},[183,2431,338],{"class":210},[183,2433,2434],{"class":185,"line":219},[183,2435,2170],{"class":210},[183,2437,2438],{"class":185,"line":238},[183,2439,2175],{"class":210},[183,2441,2442],{"class":185,"line":245},[183,2443,2180],{"class":210},[183,2445,2446],{"class":185,"line":281},[183,2447,2185],{"class":210},[183,2449,2450],{"class":185,"line":295},[183,2451,475],{"class":210},[183,2453,2454],{"class":185,"line":300},[183,2455,2194],{"class":189},[144,2457,2458],{},"The product fragment fetches the fields we need for each product card:",[173,2460,2462],{"className":2144,"code":2461,"filename":2198,"language":211,"meta":178,"style":178},"export const PRODUCT_FRAGMENT = `#graphql\n  fragment ProductFields on Product {\n    id\n    handle\n    title\n    description\n    featuredImage {\n      url\n      altText\n      height\n      width\n    }\n    priceRange {\n      minVariantPrice {\n        amount\n        currencyCode\n      }\n    }\n  }\n`\n",[180,2463,2464,2478,2482,2486,2490,2494,2498,2502,2506,2510,2514,2518,2522,2526,2530,2534,2538,2542,2546,2550],{"__ignoreMap":178},[183,2465,2466,2468,2470,2472,2474,2476],{"class":185,"line":186},[183,2467,2153],{"class":323},[183,2469,2156],{"class":197},[183,2471,2209],{"class":225},[183,2473,204],{"class":189},[183,2475,255],{"class":189},[183,2477,338],{"class":210},[183,2479,2480],{"class":185,"line":219},[183,2481,2220],{"class":210},[183,2483,2484],{"class":185,"line":238},[183,2485,2175],{"class":210},[183,2487,2488],{"class":185,"line":245},[183,2489,2229],{"class":210},[183,2491,2492],{"class":185,"line":281},[183,2493,2180],{"class":210},[183,2495,2496],{"class":185,"line":295},[183,2497,2185],{"class":210},[183,2499,2500],{"class":185,"line":300},[183,2501,2242],{"class":210},[183,2503,2504],{"class":185,"line":341},[183,2505,2247],{"class":210},[183,2507,2508],{"class":185,"line":347},[183,2509,2252],{"class":210},[183,2511,2512],{"class":185,"line":353},[183,2513,2257],{"class":210},[183,2515,2516],{"class":185,"line":359},[183,2517,2262],{"class":210},[183,2519,2520],{"class":185,"line":365},[183,2521,469],{"class":210},[183,2523,2524],{"class":185,"line":371},[183,2525,2271],{"class":210},[183,2527,2528],{"class":185,"line":377},[183,2529,2276],{"class":210},[183,2531,2532],{"class":185,"line":383},[183,2533,2281],{"class":210},[183,2535,2536],{"class":185,"line":389},[183,2537,2286],{"class":210},[183,2539,2540],{"class":185,"line":395},[183,2541,463],{"class":210},[183,2543,2544],{"class":185,"line":401},[183,2545,469],{"class":210},[183,2547,2548],{"class":185,"line":407},[183,2549,475],{"class":210},[183,2551,2552],{"class":185,"line":413},[183,2553,2194],{"class":189},[144,2555,2556],{},"And the product connection fragment wraps the product fragment with pagination info:",[173,2558,2560],{"className":2144,"code":2559,"filename":2198,"language":211,"meta":178,"style":178},"export const PRODUCT_CONNECTION_FRAGMENT = `#graphql\n  fragment ProductConnectionFields on ProductConnection {\n    edges {\n      cursor\n      node {\n        ...ProductFields\n      }\n    }\n    pageInfo {\n      hasNextPage\n      hasPreviousPage\n      startCursor\n      endCursor\n    }\n  }\n`\n",[180,2561,2562,2576,2580,2584,2588,2592,2596,2600,2604,2608,2612,2616,2620,2624,2628,2632],{"__ignoreMap":178},[183,2563,2564,2566,2568,2570,2572,2574],{"class":185,"line":186},[183,2565,2153],{"class":323},[183,2567,2156],{"class":197},[183,2569,2315],{"class":225},[183,2571,204],{"class":189},[183,2573,255],{"class":189},[183,2575,338],{"class":210},[183,2577,2578],{"class":185,"line":219},[183,2579,2326],{"class":210},[183,2581,2582],{"class":185,"line":238},[183,2583,2331],{"class":210},[183,2585,2586],{"class":185,"line":245},[183,2587,2336],{"class":210},[183,2589,2590],{"class":185,"line":281},[183,2591,2341],{"class":210},[183,2593,2594],{"class":185,"line":295},[183,2595,2346],{"class":210},[183,2597,2598],{"class":185,"line":300},[183,2599,463],{"class":210},[183,2601,2602],{"class":185,"line":341},[183,2603,469],{"class":210},[183,2605,2606],{"class":185,"line":347},[183,2607,2359],{"class":210},[183,2609,2610],{"class":185,"line":353},[183,2611,2364],{"class":210},[183,2613,2614],{"class":185,"line":359},[183,2615,2369],{"class":210},[183,2617,2618],{"class":185,"line":365},[183,2619,2374],{"class":210},[183,2621,2622],{"class":185,"line":371},[183,2623,2379],{"class":210},[183,2625,2626],{"class":185,"line":377},[183,2627,469],{"class":210},[183,2629,2630],{"class":185,"line":383},[183,2631,475],{"class":210},[183,2633,2634],{"class":185,"line":389},[183,2635,2194],{"class":189},[2404,2637,2639],{"id":2638},"fetching-the-collection","Fetching the Collection",[144,2641,2642,2643,2645,2646,2649,2650,2652],{},"Now, let's create a page at ",[180,2644,171],{},".\nWe use the ",[180,2647,2648],{},"useStorefrontData"," composable to fetch a collection by its handle from Shopify.\nThe GraphQL query takes a ",[180,2651,275],{}," variable and returns the collection along with its products:",[173,2654,2656],{"className":2144,"code":2655,"language":211,"meta":178,"style":178},"query GetCollection($handle: String!, $first: Int) {\n  collection(handle: $handle) {\n    ...CollectionFields\n\n    products(first: $first) {\n      ...ProductConnectionFields\n    }\n  }\n}\n",[180,2657,2658,2677,2696,2704,2708,2727,2735,2739,2743],{"__ignoreMap":178},[183,2659,2660,2663,2666,2669,2672,2675],{"class":185,"line":186},[183,2661,2662],{"class":225},"query ",[183,2664,2665],{"class":231},"GetCollection",[183,2667,2668],{"class":225},"($handle: String",[183,2670,2671],{"class":189},"!,",[183,2673,2674],{"class":225}," $first: Int) ",[183,2676,512],{"class":189},[183,2678,2679,2682,2684,2686,2688,2691,2694],{"class":185,"line":219},[183,2680,2681],{"class":231},"  collection",[183,2683,500],{"class":193},[183,2685,275],{"class":225},[183,2687,1803],{"class":193},[183,2689,2690],{"class":225},"$handle",[183,2692,2693],{"class":193},") ",[183,2695,512],{"class":189},[183,2697,2698,2701],{"class":185,"line":238},[183,2699,2700],{"class":189},"    ...",[183,2702,2703],{"class":225},"CollectionFields\n",[183,2705,2706],{"class":185,"line":245},[183,2707,242],{"emptyLinePlaceholder":241},[183,2709,2710,2713,2715,2718,2720,2723,2725],{"class":185,"line":281},[183,2711,2712],{"class":231},"    products",[183,2714,500],{"class":193},[183,2716,2717],{"class":225},"first",[183,2719,1803],{"class":193},[183,2721,2722],{"class":225},"$first",[183,2724,2693],{"class":193},[183,2726,512],{"class":189},[183,2728,2729,2732],{"class":185,"line":295},[183,2730,2731],{"class":189},"      ...",[183,2733,2734],{"class":225},"ProductConnectionFields\n",[183,2736,2737],{"class":185,"line":300},[183,2738,469],{"class":189},[183,2740,2741],{"class":185,"line":341},[183,2742,475],{"class":189},[183,2744,2745],{"class":185,"line":347},[183,2746,2747],{"class":189},"}\n",[144,2749,2750,2751,2753,2754,2757],{},"When using this query with the ",[180,2752,2648],{}," composable, we pass the route param as the handle and use the ",[180,2755,2756],{},"transform"," option to extract the collection directly:",[173,2759,2761],{"className":175,"code":2760,"filename":171,"language":177,"meta":178,"style":178},"\u003Cscript setup lang=\"ts\">\nconst route = useRoute()\n\nconst { data: collection } = await useStorefrontData(`collection-${route.params.handle}`, `#graphql\n  query GetCollection($handle: String!, $first: Int) {\n    collection(handle: $handle) {\n      ...CollectionFields\n\n      products(first: $first) {\n        ...ProductConnectionFields\n      }\n    }\n  }\n`, {\n  variables: {\n    handle: route.params.handle,\n    first: 4,\n  },\n  transform: data => data.collection,\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>{{ collection?.title }}\u003C\u002Fp>\n    \u003Cpre>{{ collection?.products }}\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[180,2762,2763,2783,2795,2799,2845,2850,2854,2858,2862,2867,2871,2875,2879,2883,2891,2899,2917,2928,2933,2951,2957,2965,2969,2977,2985,3003,3020,3028],{"__ignoreMap":178},[183,2764,2765,2767,2769,2771,2773,2775,2777,2779,2781],{"class":185,"line":186},[183,2766,190],{"class":189},[183,2768,194],{"class":193},[183,2770,198],{"class":197},[183,2772,201],{"class":197},[183,2774,204],{"class":189},[183,2776,207],{"class":189},[183,2778,211],{"class":210},[183,2780,207],{"class":189},[183,2782,216],{"class":189},[183,2784,2785,2787,2789,2791,2793],{"class":185,"line":219},[183,2786,222],{"class":197},[183,2788,226],{"class":225},[183,2790,204],{"class":189},[183,2792,232],{"class":231},[183,2794,235],{"class":225},[183,2796,2797],{"class":185,"line":238},[183,2798,242],{"emptyLinePlaceholder":241},[183,2800,2801,2803,2805,2807,2809,2811,2813,2815,2817,2819,2821,2823,2825,2827,2829,2831,2833,2835,2837,2839,2841,2843],{"class":185,"line":245},[183,2802,222],{"class":197},[183,2804,305],{"class":189},[183,2806,308],{"class":193},[183,2808,311],{"class":189},[183,2810,314],{"class":225},[183,2812,317],{"class":189},[183,2814,320],{"class":189},[183,2816,324],{"class":323},[183,2818,327],{"class":231},[183,2820,500],{"class":225},[183,2822,481],{"class":189},[183,2824,258],{"class":210},[183,2826,261],{"class":189},[183,2828,264],{"class":225},[183,2830,267],{"class":189},[183,2832,270],{"class":225},[183,2834,267],{"class":189},[183,2836,275],{"class":225},[183,2838,1651],{"class":189},[183,2840,333],{"class":189},[183,2842,255],{"class":189},[183,2844,338],{"class":210},[183,2846,2847],{"class":185,"line":281},[183,2848,2849],{"class":210},"  query GetCollection($handle: String!, $first: Int) {\n",[183,2851,2852],{"class":185,"line":295},[183,2853,404],{"class":210},[183,2855,2856],{"class":185,"line":300},[183,2857,410],{"class":210},[183,2859,2860],{"class":185,"line":341},[183,2861,242],{"emptyLinePlaceholder":241},[183,2863,2864],{"class":185,"line":347},[183,2865,2866],{"class":210},"      products(first: $first) {\n",[183,2868,2869],{"class":185,"line":353},[183,2870,457],{"class":210},[183,2872,2873],{"class":185,"line":359},[183,2874,463],{"class":210},[183,2876,2877],{"class":185,"line":365},[183,2878,469],{"class":210},[183,2880,2881],{"class":185,"line":371},[183,2882,475],{"class":210},[183,2884,2885,2887,2889],{"class":185,"line":377},[183,2886,481],{"class":189},[183,2888,333],{"class":189},[183,2890,486],{"class":189},[183,2892,2893,2895,2897],{"class":185,"line":383},[183,2894,492],{"class":193},[183,2896,311],{"class":189},[183,2898,486],{"class":189},[183,2900,2901,2903,2905,2907,2909,2911,2913,2915],{"class":185,"line":389},[183,2902,518],{"class":193},[183,2904,311],{"class":189},[183,2906,523],{"class":225},[183,2908,267],{"class":189},[183,2910,270],{"class":225},[183,2912,267],{"class":189},[183,2914,275],{"class":225},[183,2916,534],{"class":189},[183,2918,2919,2921,2923,2926],{"class":185,"line":395},[183,2920,576],{"class":193},[183,2922,311],{"class":189},[183,2924,2925],{"class":291}," 4",[183,2927,534],{"class":189},[183,2929,2930],{"class":185,"line":401},[183,2931,2932],{"class":189},"  },\n",[183,2934,2935,2937,2939,2941,2943,2945,2947,2949],{"class":185,"line":407},[183,2936,690],{"class":231},[183,2938,311],{"class":189},[183,2940,308],{"class":695},[183,2942,506],{"class":197},[183,2944,308],{"class":225},[183,2946,267],{"class":189},[183,2948,704],{"class":225},[183,2950,534],{"class":189},[183,2952,2953,2955],{"class":185,"line":413},[183,2954,317],{"class":189},[183,2956,738],{"class":225},[183,2958,2959,2961,2963],{"class":185,"line":418},[183,2960,940],{"class":189},[183,2962,194],{"class":193},[183,2964,216],{"class":189},[183,2966,2967],{"class":185,"line":424},[183,2968,242],{"emptyLinePlaceholder":241},[183,2970,2971,2973,2975],{"class":185,"line":430},[183,2972,190],{"class":189},[183,2974,957],{"class":193},[183,2976,216],{"class":189},[183,2978,2979,2981,2983],{"class":185,"line":436},[183,2980,965],{"class":189},[183,2982,968],{"class":193},[183,2984,216],{"class":189},[183,2986,2987,2989,2991,2994,2997,2999,3001],{"class":185,"line":442},[183,2988,976],{"class":189},[183,2990,144],{"class":193},[183,2992,2993],{"class":189},">",[183,2995,2996],{"class":225},"{{ collection?.title }}",[183,2998,940],{"class":189},[183,3000,144],{"class":193},[183,3002,216],{"class":189},[183,3004,3005,3007,3009,3011,3014,3016,3018],{"class":185,"line":448},[183,3006,976],{"class":189},[183,3008,173],{"class":193},[183,3010,2993],{"class":189},[183,3012,3013],{"class":225},"{{ collection?.products }}",[183,3015,940],{"class":189},[183,3017,173],{"class":193},[183,3019,216],{"class":189},[183,3021,3022,3024,3026],{"class":185,"line":454},[183,3023,1362],{"class":189},[183,3025,968],{"class":193},[183,3027,216],{"class":189},[183,3029,3030,3032,3034],{"class":185,"line":460},[183,3031,940],{"class":189},[183,3033,957],{"class":193},[183,3035,216],{"class":189},[2404,3037,3039],{"id":3038},"displaying-the-products","Displaying the Products",[144,3041,3042,3043,3046,3047,3050,3051,3054],{},"The products come back as a Shopify connection (with ",[180,3044,3045],{},"edges"," and ",[180,3048,3049],{},"nodes",").\nTo make them easier to work with, we can use the ",[180,3052,3053],{},"flattenConnection"," utility provided by the module to get a flat array of products:",[173,3056,3058],{"className":175,"code":3057,"filename":171,"language":177,"meta":178,"style":178},"\u003Cscript setup lang=\"ts\">\n\u002F\u002F ... useStorefrontData call from above\n\nconst products = computed(() => flattenConnection(collection.value?.products))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp class=\"mb-4 text-2xl font-bold\">\n      {{ collection?.title }}\n    \u003C\u002Fp>\n\n    \u003Cp class=\"mb-6\">\n      {{ collection?.description }}\n    \u003C\u002Fp>\n\n    \u003Cdiv class=\"grid gap-4 grid-cols-1 sm:gap-8 md:grid-cols-2\">\n      \u003CProductCard\n        v-for=\"product in products\"\n        :key=\"product.id\"\n        :product=\"product\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[180,3059,3060,3080,3086,3090,3118,3126,3130,3138,3146,3164,3168,3176,3180,3198,3202,3210,3214,3232,3238,3254,3272,3286,3290,3298,3306],{"__ignoreMap":178},[183,3061,3062,3064,3066,3068,3070,3072,3074,3076,3078],{"class":185,"line":186},[183,3063,190],{"class":189},[183,3065,194],{"class":193},[183,3067,198],{"class":197},[183,3069,201],{"class":197},[183,3071,204],{"class":189},[183,3073,207],{"class":189},[183,3075,211],{"class":210},[183,3077,207],{"class":189},[183,3079,216],{"class":189},[183,3081,3082],{"class":185,"line":219},[183,3083,3085],{"class":3084},"sHwdD","\u002F\u002F ... useStorefrontData call from above\n",[183,3087,3088],{"class":185,"line":238},[183,3089,242],{"emptyLinePlaceholder":241},[183,3091,3092,3094,3096,3098,3100,3102,3104,3106,3108,3110,3112,3114,3116],{"class":185,"line":245},[183,3093,222],{"class":197},[183,3095,751],{"class":225},[183,3097,204],{"class":189},[183,3099,497],{"class":231},[183,3101,500],{"class":225},[183,3103,503],{"class":189},[183,3105,506],{"class":197},[183,3107,764],{"class":231},[183,3109,767],{"class":225},[183,3111,267],{"class":189},[183,3113,772],{"class":225},[183,3115,775],{"class":189},[183,3117,778],{"class":225},[183,3119,3120,3122,3124],{"class":185,"line":281},[183,3121,940],{"class":189},[183,3123,194],{"class":193},[183,3125,216],{"class":189},[183,3127,3128],{"class":185,"line":295},[183,3129,242],{"emptyLinePlaceholder":241},[183,3131,3132,3134,3136],{"class":185,"line":300},[183,3133,190],{"class":189},[183,3135,957],{"class":193},[183,3137,216],{"class":189},[183,3139,3140,3142,3144],{"class":185,"line":341},[183,3141,965],{"class":189},[183,3143,968],{"class":193},[183,3145,216],{"class":189},[183,3147,3148,3150,3152,3154,3156,3158,3160,3162],{"class":185,"line":347},[183,3149,976],{"class":189},[183,3151,144],{"class":193},[183,3153,981],{"class":197},[183,3155,204],{"class":189},[183,3157,207],{"class":189},[183,3159,988],{"class":210},[183,3161,207],{"class":189},[183,3163,216],{"class":189},[183,3165,3166],{"class":185,"line":353},[183,3167,998],{"class":225},[183,3169,3170,3172,3174],{"class":185,"line":359},[183,3171,1004],{"class":189},[183,3173,144],{"class":193},[183,3175,216],{"class":189},[183,3177,3178],{"class":185,"line":365},[183,3179,242],{"emptyLinePlaceholder":241},[183,3181,3182,3184,3186,3188,3190,3192,3194,3196],{"class":185,"line":371},[183,3183,976],{"class":189},[183,3185,144],{"class":193},[183,3187,981],{"class":197},[183,3189,204],{"class":189},[183,3191,207],{"class":189},[183,3193,1029],{"class":210},[183,3195,207],{"class":189},[183,3197,216],{"class":189},[183,3199,3200],{"class":185,"line":377},[183,3201,1039],{"class":225},[183,3203,3204,3206,3208],{"class":185,"line":383},[183,3205,1004],{"class":189},[183,3207,144],{"class":193},[183,3209,216],{"class":189},[183,3211,3212],{"class":185,"line":389},[183,3213,242],{"emptyLinePlaceholder":241},[183,3215,3216,3218,3220,3222,3224,3226,3228,3230],{"class":185,"line":395},[183,3217,976],{"class":189},[183,3219,968],{"class":193},[183,3221,981],{"class":197},[183,3223,204],{"class":189},[183,3225,207],{"class":189},[183,3227,1069],{"class":210},[183,3229,207],{"class":189},[183,3231,216],{"class":189},[183,3233,3234,3236],{"class":185,"line":401},[183,3235,1079],{"class":189},[183,3237,1082],{"class":193},[183,3239,3240,3242,3244,3246,3248,3250,3252],{"class":185,"line":407},[183,3241,1088],{"class":323},[183,3243,204],{"class":189},[183,3245,207],{"class":189},[183,3247,1095],{"class":225},[183,3249,1098],{"class":189},[183,3251,813],{"class":225},[183,3253,1103],{"class":189},[183,3255,3256,3258,3260,3262,3264,3266,3268,3270],{"class":185,"line":413},[183,3257,1109],{"class":189},[183,3259,1112],{"class":197},[183,3261,204],{"class":189},[183,3263,207],{"class":189},[183,3265,1095],{"class":225},[183,3267,267],{"class":189},[183,3269,1123],{"class":225},[183,3271,1103],{"class":189},[183,3273,3274,3276,3278,3280,3282,3284],{"class":185,"line":418},[183,3275,1109],{"class":189},[183,3277,1095],{"class":197},[183,3279,204],{"class":189},[183,3281,207],{"class":189},[183,3283,1095],{"class":225},[183,3285,1103],{"class":189},[183,3287,3288],{"class":185,"line":424},[183,3289,1146],{"class":189},[183,3291,3292,3294,3296],{"class":185,"line":430},[183,3293,1004],{"class":189},[183,3295,968],{"class":193},[183,3297,216],{"class":189},[183,3299,3300,3302,3304],{"class":185,"line":436},[183,3301,1362],{"class":189},[183,3303,968],{"class":193},[183,3305,216],{"class":189},[183,3307,3308,3310,3312],{"class":185,"line":442},[183,3309,940],{"class":189},[183,3311,957],{"class":193},[183,3313,216],{"class":189},[144,3315,3316,3317,3320,3321,3324],{},"The ",[180,3318,3319],{},"ProductCard"," component receives a product and formats the data for display.\nWe use ",[180,3322,3323],{},"Intl.NumberFormat"," to properly format the price with its currency:",[173,3326,3328],{"className":175,"code":3327,"filename":1379,"language":177,"meta":178,"style":178},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  product: ProductFieldsFragment\n}>()\n\nconst price = computed(() => {\n  const price = props.product.priceRange.minVariantPrice\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: price.currencyCode,\n  }).format(Number(price.amount))\n})\n\nconst image = computed(() => props.product.featuredImage)\nconst to = computed(() => `\u002Fproducts\u002F${props.product.handle}`)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUPageCard\n    :to=\"to\"\n    :title=\"props.product.title\"\n    :description=\"props.product.description\"\n    orientation=\"vertical\"\n    reverse\n  >\n    \u003Ctemplate #header>\n      \u003CNuxtImg\n        provider=\"shopify\"\n        :src=\"image?.url\"\n        :alt=\"image?.altText ?? undefined\"\n        :width=\"image?.width ?? undefined\"\n        :height=\"image?.height ?? undefined\"\n      \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #footer>\n      \u003Cdiv class=\"flex justify-between items-center w-full\">\n        \u003Cdiv class=\"font-semibold\">\n          from {{ price }}\n        \u003C\u002Fdiv>\n\n        \u003CUButton size=\"sm\">\n          Add to Cart\n        \u003C\u002FUButton>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUPageCard>\n\u003C\u002Ftemplate>\n",[180,3329,3330,3350,3362,3370,3376,3380,3398,3420,3444,3458,3472,3496,3502,3506,3532,3568,3576,3580,3588,3594,3608,3630,3652,3664,3668,3672,3684,3690,3702,3720,3740,3760,3780,3784,3792,3796,3808,3826,3844,3848,3856,3860,3878,3882,3890,3898,3906,3914],{"__ignoreMap":178},[183,3331,3332,3334,3336,3338,3340,3342,3344,3346,3348],{"class":185,"line":186},[183,3333,190],{"class":189},[183,3335,194],{"class":193},[183,3337,198],{"class":197},[183,3339,201],{"class":197},[183,3341,204],{"class":189},[183,3343,207],{"class":189},[183,3345,211],{"class":210},[183,3347,207],{"class":189},[183,3349,216],{"class":189},[183,3351,3352,3354,3356,3358,3360],{"class":185,"line":219},[183,3353,222],{"class":197},[183,3355,1408],{"class":225},[183,3357,204],{"class":189},[183,3359,1413],{"class":231},[183,3361,1416],{"class":189},[183,3363,3364,3366,3368],{"class":185,"line":238},[183,3365,1421],{"class":193},[183,3367,311],{"class":189},[183,3369,1427],{"class":1426},[183,3371,3372,3374],{"class":185,"line":245},[183,3373,1432],{"class":189},[183,3375,235],{"class":225},[183,3377,3378],{"class":185,"line":281},[183,3379,242],{"emptyLinePlaceholder":241},[183,3381,3382,3384,3386,3388,3390,3392,3394,3396],{"class":185,"line":295},[183,3383,222],{"class":197},[183,3385,1445],{"class":225},[183,3387,204],{"class":189},[183,3389,497],{"class":231},[183,3391,500],{"class":225},[183,3393,503],{"class":189},[183,3395,506],{"class":197},[183,3397,486],{"class":189},[183,3399,3400,3402,3404,3406,3408,3410,3412,3414,3416,3418],{"class":185,"line":300},[183,3401,1462],{"class":197},[183,3403,1465],{"class":225},[183,3405,320],{"class":189},[183,3407,1470],{"class":225},[183,3409,267],{"class":189},[183,3411,1095],{"class":225},[183,3413,267],{"class":189},[183,3415,1479],{"class":225},[183,3417,267],{"class":189},[183,3419,1484],{"class":225},[183,3421,3422,3424,3426,3428,3430,3432,3434,3436,3438,3440,3442],{"class":185,"line":341},[183,3423,1489],{"class":323},[183,3425,1492],{"class":189},[183,3427,1495],{"class":225},[183,3429,267],{"class":189},[183,3431,1500],{"class":231},[183,3433,500],{"class":193},[183,3435,551],{"class":189},[183,3437,1507],{"class":210},[183,3439,551],{"class":189},[183,3441,333],{"class":189},[183,3443,486],{"class":189},[183,3445,3446,3448,3450,3452,3454,3456],{"class":185,"line":347},[183,3447,1518],{"class":193},[183,3449,311],{"class":189},[183,3451,545],{"class":189},[183,3453,1525],{"class":210},[183,3455,551],{"class":189},[183,3457,534],{"class":189},[183,3459,3460,3462,3464,3466,3468,3470],{"class":185,"line":353},[183,3461,1534],{"class":193},[183,3463,311],{"class":189},[183,3465,1465],{"class":225},[183,3467,267],{"class":189},[183,3469,1543],{"class":225},[183,3471,534],{"class":189},[183,3473,3474,3476,3478,3480,3482,3484,3486,3488,3490,3492,3494],{"class":185,"line":359},[183,3475,679],{"class":189},[183,3477,1552],{"class":193},[183,3479,267],{"class":189},[183,3481,1557],{"class":231},[183,3483,500],{"class":193},[183,3485,1562],{"class":231},[183,3487,500],{"class":193},[183,3489,1567],{"class":225},[183,3491,267],{"class":189},[183,3493,1572],{"class":225},[183,3495,1575],{"class":193},[183,3497,3498,3500],{"class":185,"line":365},[183,3499,317],{"class":189},[183,3501,738],{"class":225},[183,3503,3504],{"class":185,"line":371},[183,3505,242],{"emptyLinePlaceholder":241},[183,3507,3508,3510,3512,3514,3516,3518,3520,3522,3524,3526,3528,3530],{"class":185,"line":377},[183,3509,222],{"class":197},[183,3511,1592],{"class":225},[183,3513,204],{"class":189},[183,3515,497],{"class":231},[183,3517,500],{"class":225},[183,3519,503],{"class":189},[183,3521,506],{"class":197},[183,3523,1470],{"class":225},[183,3525,267],{"class":189},[183,3527,1095],{"class":225},[183,3529,267],{"class":189},[183,3531,1613],{"class":225},[183,3533,3534,3536,3538,3540,3542,3544,3546,3548,3550,3552,3554,3556,3558,3560,3562,3564,3566],{"class":185,"line":383},[183,3535,222],{"class":197},[183,3537,1620],{"class":225},[183,3539,204],{"class":189},[183,3541,497],{"class":231},[183,3543,500],{"class":225},[183,3545,503],{"class":189},[183,3547,506],{"class":197},[183,3549,255],{"class":189},[183,3551,1635],{"class":210},[183,3553,261],{"class":189},[183,3555,1640],{"class":225},[183,3557,267],{"class":189},[183,3559,1095],{"class":225},[183,3561,267],{"class":189},[183,3563,275],{"class":225},[183,3565,1651],{"class":189},[183,3567,738],{"class":225},[183,3569,3570,3572,3574],{"class":185,"line":389},[183,3571,940],{"class":189},[183,3573,194],{"class":193},[183,3575,216],{"class":189},[183,3577,3578],{"class":185,"line":395},[183,3579,242],{"emptyLinePlaceholder":241},[183,3581,3582,3584,3586],{"class":185,"line":401},[183,3583,190],{"class":189},[183,3585,957],{"class":193},[183,3587,216],{"class":189},[183,3589,3590,3592],{"class":185,"line":407},[183,3591,965],{"class":189},[183,3593,1680],{"class":193},[183,3595,3596,3598,3600,3602,3604,3606],{"class":185,"line":413},[183,3597,1685],{"class":189},[183,3599,1211],{"class":197},[183,3601,204],{"class":189},[183,3603,207],{"class":189},[183,3605,1211],{"class":225},[183,3607,1103],{"class":189},[183,3609,3610,3612,3614,3616,3618,3620,3622,3624,3626,3628],{"class":185,"line":418},[183,3611,1685],{"class":189},[183,3613,1724],{"class":197},[183,3615,204],{"class":189},[183,3617,207],{"class":189},[183,3619,1640],{"class":225},[183,3621,267],{"class":189},[183,3623,1095],{"class":225},[183,3625,267],{"class":189},[183,3627,1724],{"class":225},[183,3629,1103],{"class":189},[183,3631,3632,3634,3636,3638,3640,3642,3644,3646,3648,3650],{"class":185,"line":424},[183,3633,1685],{"class":189},[183,3635,1747],{"class":197},[183,3637,204],{"class":189},[183,3639,207],{"class":189},[183,3641,1640],{"class":225},[183,3643,267],{"class":189},[183,3645,1095],{"class":225},[183,3647,267],{"class":189},[183,3649,1747],{"class":225},[183,3651,1103],{"class":189},[183,3653,3654,3656,3658,3660,3662],{"class":185,"line":430},[183,3655,1768],{"class":197},[183,3657,204],{"class":189},[183,3659,207],{"class":189},[183,3661,1775],{"class":210},[183,3663,1103],{"class":189},[183,3665,3666],{"class":185,"line":436},[183,3667,1782],{"class":197},[183,3669,3670],{"class":185,"line":442},[183,3671,1840],{"class":189},[183,3673,3674,3676,3678,3680,3682],{"class":185,"line":448},[183,3675,976],{"class":189},[183,3677,957],{"class":193},[183,3679,1849],{"class":189},[183,3681,1852],{"class":197},[183,3683,216],{"class":189},[183,3685,3686,3688],{"class":185,"line":454},[183,3687,1079],{"class":189},[183,3689,1861],{"class":193},[183,3691,3692,3694,3696,3698,3700],{"class":185,"line":460},[183,3693,1866],{"class":197},[183,3695,204],{"class":189},[183,3697,207],{"class":189},[183,3699,1873],{"class":210},[183,3701,1103],{"class":189},[183,3703,3704,3706,3708,3710,3712,3714,3716,3718],{"class":185,"line":466},[183,3705,1109],{"class":189},[183,3707,1882],{"class":197},[183,3709,204],{"class":189},[183,3711,207],{"class":189},[183,3713,1889],{"class":225},[183,3715,775],{"class":189},[183,3717,1894],{"class":225},[183,3719,1103],{"class":189},[183,3721,3722,3724,3726,3728,3730,3732,3734,3736,3738],{"class":185,"line":472},[183,3723,1109],{"class":189},[183,3725,1903],{"class":197},[183,3727,204],{"class":189},[183,3729,207],{"class":189},[183,3731,1889],{"class":225},[183,3733,775],{"class":189},[183,3735,1914],{"class":225},[183,3737,1917],{"class":189},[183,3739,1103],{"class":189},[183,3741,3742,3744,3746,3748,3750,3752,3754,3756,3758],{"class":185,"line":478},[183,3743,1109],{"class":189},[183,3745,1926],{"class":197},[183,3747,204],{"class":189},[183,3749,207],{"class":189},[183,3751,1889],{"class":225},[183,3753,775],{"class":189},[183,3755,1926],{"class":225},[183,3757,1917],{"class":189},[183,3759,1103],{"class":189},[183,3761,3762,3764,3766,3768,3770,3772,3774,3776,3778],{"class":185,"line":489},[183,3763,1109],{"class":189},[183,3765,1947],{"class":197},[183,3767,204],{"class":189},[183,3769,207],{"class":189},[183,3771,1889],{"class":225},[183,3773,775],{"class":189},[183,3775,1947],{"class":225},[183,3777,1917],{"class":189},[183,3779,1103],{"class":189},[183,3781,3782],{"class":185,"line":515},[183,3783,1146],{"class":189},[183,3785,3786,3788,3790],{"class":185,"line":537},[183,3787,1004],{"class":189},[183,3789,957],{"class":193},[183,3791,216],{"class":189},[183,3793,3794],{"class":185,"line":556},[183,3795,242],{"emptyLinePlaceholder":241},[183,3797,3798,3800,3802,3804,3806],{"class":185,"line":573},[183,3799,976],{"class":189},[183,3801,957],{"class":193},[183,3803,1849],{"class":189},[183,3805,2016],{"class":197},[183,3807,216],{"class":189},[183,3809,3810,3812,3814,3816,3818,3820,3822,3824],{"class":185,"line":607},[183,3811,1079],{"class":189},[183,3813,968],{"class":193},[183,3815,981],{"class":197},[183,3817,204],{"class":189},[183,3819,207],{"class":189},[183,3821,2033],{"class":210},[183,3823,207],{"class":189},[183,3825,216],{"class":189},[183,3827,3828,3830,3832,3834,3836,3838,3840,3842],{"class":185,"line":634},[183,3829,2042],{"class":189},[183,3831,968],{"class":193},[183,3833,981],{"class":197},[183,3835,204],{"class":189},[183,3837,207],{"class":189},[183,3839,2053],{"class":210},[183,3841,207],{"class":189},[183,3843,216],{"class":189},[183,3845,3846],{"class":185,"line":655},[183,3847,2062],{"class":225},[183,3849,3850,3852,3854],{"class":185,"line":676},[183,3851,2067],{"class":189},[183,3853,968],{"class":193},[183,3855,216],{"class":189},[183,3857,3858],{"class":185,"line":687},[183,3859,242],{"emptyLinePlaceholder":241},[183,3861,3862,3864,3866,3868,3870,3872,3874,3876],{"class":185,"line":709},[183,3863,2042],{"class":189},[183,3865,1263],{"class":193},[183,3867,2084],{"class":197},[183,3869,204],{"class":189},[183,3871,207],{"class":189},[183,3873,2091],{"class":210},[183,3875,207],{"class":189},[183,3877,216],{"class":189},[183,3879,3880],{"class":185,"line":733},[183,3881,2100],{"class":225},[183,3883,3884,3886,3888],{"class":185,"line":741},[183,3885,2067],{"class":189},[183,3887,1263],{"class":193},[183,3889,216],{"class":189},[183,3891,3892,3894,3896],{"class":185,"line":746},[183,3893,1260],{"class":189},[183,3895,968],{"class":193},[183,3897,216],{"class":189},[183,3899,3900,3902,3904],{"class":185,"line":781},[183,3901,1004],{"class":189},[183,3903,957],{"class":193},[183,3905,216],{"class":189},[183,3907,3908,3910,3912],{"class":185,"line":786},[183,3909,1362],{"class":189},[183,3911,2131],{"class":193},[183,3913,216],{"class":189},[183,3915,3916,3918,3920],{"class":185,"line":826},[183,3917,940],{"class":189},[183,3919,957],{"class":193},[183,3921,216],{"class":189},[2404,3923,3925],{"id":3924},"adding-pagination","Adding Pagination",[144,3927,3928,3929,3931,3932,3931,3935,3046,3937,3939],{},"Shopify uses cursor-based pagination for connections.\nWe can support this by passing ",[180,3930,2717],{},", ",[180,3933,3934],{},"last",[180,3936,650],{},[180,3938,671],{}," variables to the query\nand reading the cursor values from the route query parameters.",[144,3941,3942,3943,3946],{},"We also need to add the ",[180,3944,3945],{},"watch"," option so the data refreshes whenever the user navigates between pages:",[173,3948,3950],{"className":175,"code":3949,"filename":171,"language":177,"meta":178,"style":178},"\u003Cscript setup lang=\"ts\">\nconst route = useRoute()\n\nconst key = `collection-${route.params.handle}`\nconst perPage = 4\n\nconst { data: collection } = await useStorefrontData(key, `#graphql\n  query GetCollection(\n    $handle: String!,\n    $first: Int,\n    $last: Int,\n    $after: String,\n    $before: String,\n    $language: LanguageCode,\n    $country: CountryCode\n  )\n  @inContext(language: $language, country: $country) {\n    collection(handle: $handle) {\n      ...CollectionFields\n\n      products(\n        first: $first,\n        last: $last,\n        after: $after,\n        before: $before\n      ) {\n        ...ProductConnectionFields\n      }\n    }\n  }\n`, {\n  variables: computed(() => ({\n    handle: route.params.handle,\n    language: 'EN',\n    country: 'US',\n    first: route.query.before ? undefined : perPage,\n    last: route.query.before ? perPage : undefined,\n    after: route.query.after,\n    before: route.query.before,\n  })),\n  transform: data => data.collection,\n  watch: [\n    () => route.query.after,\n    () => route.query.before,\n  ],\n})\n\nconst products = computed(() => flattenConnection(collection.value?.products))\n\nconst startCursor = computed(() => collection.value?.products.pageInfo.startCursor)\nconst endCursor = computed(() => collection.value?.products.pageInfo.endCursor)\nconst hasPreviousPage = computed(() => collection.value?.products.pageInfo.hasPreviousPage)\nconst hasNextPage = computed(() => collection.value?.products.pageInfo.hasNextPage)\n\u003C\u002Fscript>\n",[180,3951,3952,3972,3984,3988,4014,4024,4028,4056,4060,4065,4070,4075,4080,4085,4090,4094,4098,4102,4106,4110,4114,4118,4122,4126,4130,4134,4138,4142,4146,4150,4154,4162,4180,4198,4212,4226,4252,4276,4294,4312,4320,4338,4347,4366,4384,4391,4397,4401,4429,4433,4467,4501,4535,4569],{"__ignoreMap":178},[183,3953,3954,3956,3958,3960,3962,3964,3966,3968,3970],{"class":185,"line":186},[183,3955,190],{"class":189},[183,3957,194],{"class":193},[183,3959,198],{"class":197},[183,3961,201],{"class":197},[183,3963,204],{"class":189},[183,3965,207],{"class":189},[183,3967,211],{"class":210},[183,3969,207],{"class":189},[183,3971,216],{"class":189},[183,3973,3974,3976,3978,3980,3982],{"class":185,"line":219},[183,3975,222],{"class":197},[183,3977,226],{"class":225},[183,3979,204],{"class":189},[183,3981,232],{"class":231},[183,3983,235],{"class":225},[183,3985,3986],{"class":185,"line":238},[183,3987,242],{"emptyLinePlaceholder":241},[183,3989,3990,3992,3994,3996,3998,4000,4002,4004,4006,4008,4010,4012],{"class":185,"line":245},[183,3991,222],{"class":197},[183,3993,250],{"class":225},[183,3995,204],{"class":189},[183,3997,255],{"class":189},[183,3999,258],{"class":210},[183,4001,261],{"class":189},[183,4003,264],{"class":225},[183,4005,267],{"class":189},[183,4007,270],{"class":225},[183,4009,267],{"class":189},[183,4011,275],{"class":225},[183,4013,278],{"class":189},[183,4015,4016,4018,4020,4022],{"class":185,"line":281},[183,4017,222],{"class":197},[183,4019,286],{"class":225},[183,4021,204],{"class":189},[183,4023,292],{"class":291},[183,4025,4026],{"class":185,"line":295},[183,4027,242],{"emptyLinePlaceholder":241},[183,4029,4030,4032,4034,4036,4038,4040,4042,4044,4046,4048,4050,4052,4054],{"class":185,"line":300},[183,4031,222],{"class":197},[183,4033,305],{"class":189},[183,4035,308],{"class":193},[183,4037,311],{"class":189},[183,4039,314],{"class":225},[183,4041,317],{"class":189},[183,4043,320],{"class":189},[183,4045,324],{"class":323},[183,4047,327],{"class":231},[183,4049,330],{"class":225},[183,4051,333],{"class":189},[183,4053,255],{"class":189},[183,4055,338],{"class":210},[183,4057,4058],{"class":185,"line":341},[183,4059,344],{"class":210},[183,4061,4062],{"class":185,"line":347},[183,4063,4064],{"class":210},"    $handle: String!,\n",[183,4066,4067],{"class":185,"line":353},[183,4068,4069],{"class":210},"    $first: Int,\n",[183,4071,4072],{"class":185,"line":359},[183,4073,4074],{"class":210},"    $last: Int,\n",[183,4076,4077],{"class":185,"line":365},[183,4078,4079],{"class":210},"    $after: String,\n",[183,4081,4082],{"class":185,"line":371},[183,4083,4084],{"class":210},"    $before: String,\n",[183,4086,4087],{"class":185,"line":377},[183,4088,4089],{"class":210},"    $language: LanguageCode,\n",[183,4091,4092],{"class":185,"line":383},[183,4093,386],{"class":210},[183,4095,4096],{"class":185,"line":389},[183,4097,392],{"class":210},[183,4099,4100],{"class":185,"line":395},[183,4101,398],{"class":210},[183,4103,4104],{"class":185,"line":401},[183,4105,404],{"class":210},[183,4107,4108],{"class":185,"line":407},[183,4109,410],{"class":210},[183,4111,4112],{"class":185,"line":413},[183,4113,242],{"emptyLinePlaceholder":241},[183,4115,4116],{"class":185,"line":418},[183,4117,421],{"class":210},[183,4119,4120],{"class":185,"line":424},[183,4121,427],{"class":210},[183,4123,4124],{"class":185,"line":430},[183,4125,433],{"class":210},[183,4127,4128],{"class":185,"line":436},[183,4129,439],{"class":210},[183,4131,4132],{"class":185,"line":442},[183,4133,445],{"class":210},[183,4135,4136],{"class":185,"line":448},[183,4137,451],{"class":210},[183,4139,4140],{"class":185,"line":454},[183,4141,457],{"class":210},[183,4143,4144],{"class":185,"line":460},[183,4145,463],{"class":210},[183,4147,4148],{"class":185,"line":466},[183,4149,469],{"class":210},[183,4151,4152],{"class":185,"line":472},[183,4153,475],{"class":210},[183,4155,4156,4158,4160],{"class":185,"line":478},[183,4157,481],{"class":189},[183,4159,333],{"class":189},[183,4161,486],{"class":189},[183,4163,4164,4166,4168,4170,4172,4174,4176,4178],{"class":185,"line":489},[183,4165,492],{"class":193},[183,4167,311],{"class":189},[183,4169,497],{"class":231},[183,4171,500],{"class":225},[183,4173,503],{"class":189},[183,4175,506],{"class":197},[183,4177,509],{"class":225},[183,4179,512],{"class":189},[183,4181,4182,4184,4186,4188,4190,4192,4194,4196],{"class":185,"line":515},[183,4183,518],{"class":193},[183,4185,311],{"class":189},[183,4187,523],{"class":225},[183,4189,267],{"class":189},[183,4191,270],{"class":225},[183,4193,267],{"class":189},[183,4195,275],{"class":225},[183,4197,534],{"class":189},[183,4199,4200,4202,4204,4206,4208,4210],{"class":185,"line":537},[183,4201,540],{"class":193},[183,4203,311],{"class":189},[183,4205,545],{"class":189},[183,4207,548],{"class":210},[183,4209,551],{"class":189},[183,4211,534],{"class":189},[183,4213,4214,4216,4218,4220,4222,4224],{"class":185,"line":556},[183,4215,559],{"class":193},[183,4217,311],{"class":189},[183,4219,545],{"class":189},[183,4221,566],{"class":210},[183,4223,551],{"class":189},[183,4225,534],{"class":189},[183,4227,4228,4230,4232,4234,4236,4238,4240,4242,4244,4246,4248,4250],{"class":185,"line":573},[183,4229,576],{"class":193},[183,4231,311],{"class":189},[183,4233,523],{"class":225},[183,4235,267],{"class":189},[183,4237,585],{"class":225},[183,4239,267],{"class":189},[183,4241,590],{"class":225},[183,4243,593],{"class":189},[183,4245,596],{"class":189},[183,4247,599],{"class":189},[183,4249,602],{"class":225},[183,4251,534],{"class":189},[183,4253,4254,4256,4258,4260,4262,4264,4266,4268,4270,4272,4274],{"class":185,"line":607},[183,4255,610],{"class":193},[183,4257,311],{"class":189},[183,4259,523],{"class":225},[183,4261,267],{"class":189},[183,4263,585],{"class":225},[183,4265,267],{"class":189},[183,4267,590],{"class":225},[183,4269,593],{"class":189},[183,4271,286],{"class":225},[183,4273,311],{"class":189},[183,4275,631],{"class":189},[183,4277,4278,4280,4282,4284,4286,4288,4290,4292],{"class":185,"line":634},[183,4279,637],{"class":193},[183,4281,311],{"class":189},[183,4283,523],{"class":225},[183,4285,267],{"class":189},[183,4287,585],{"class":225},[183,4289,267],{"class":189},[183,4291,650],{"class":225},[183,4293,534],{"class":189},[183,4295,4296,4298,4300,4302,4304,4306,4308,4310],{"class":185,"line":655},[183,4297,658],{"class":193},[183,4299,311],{"class":189},[183,4301,523],{"class":225},[183,4303,267],{"class":189},[183,4305,585],{"class":225},[183,4307,267],{"class":189},[183,4309,671],{"class":225},[183,4311,534],{"class":189},[183,4313,4314,4316,4318],{"class":185,"line":676},[183,4315,679],{"class":189},[183,4317,682],{"class":225},[183,4319,534],{"class":189},[183,4321,4322,4324,4326,4328,4330,4332,4334,4336],{"class":185,"line":687},[183,4323,690],{"class":231},[183,4325,311],{"class":189},[183,4327,308],{"class":695},[183,4329,506],{"class":197},[183,4331,308],{"class":225},[183,4333,267],{"class":189},[183,4335,704],{"class":225},[183,4337,534],{"class":189},[183,4339,4340,4342,4344],{"class":185,"line":709},[183,4341,712],{"class":193},[183,4343,311],{"class":189},[183,4345,4346],{"class":225}," [\n",[183,4348,4349,4352,4354,4356,4358,4360,4362,4364],{"class":185,"line":733},[183,4350,4351],{"class":189},"    ()",[183,4353,506],{"class":197},[183,4355,523],{"class":225},[183,4357,267],{"class":189},[183,4359,585],{"class":225},[183,4361,267],{"class":189},[183,4363,650],{"class":225},[183,4365,534],{"class":189},[183,4367,4368,4370,4372,4374,4376,4378,4380,4382],{"class":185,"line":741},[183,4369,4351],{"class":189},[183,4371,506],{"class":197},[183,4373,523],{"class":225},[183,4375,267],{"class":189},[183,4377,585],{"class":225},[183,4379,267],{"class":189},[183,4381,671],{"class":225},[183,4383,534],{"class":189},[183,4385,4386,4389],{"class":185,"line":746},[183,4387,4388],{"class":225},"  ]",[183,4390,534],{"class":189},[183,4392,4393,4395],{"class":185,"line":781},[183,4394,317],{"class":189},[183,4396,738],{"class":225},[183,4398,4399],{"class":185,"line":786},[183,4400,242],{"emptyLinePlaceholder":241},[183,4402,4403,4405,4407,4409,4411,4413,4415,4417,4419,4421,4423,4425,4427],{"class":185,"line":826},[183,4404,222],{"class":197},[183,4406,751],{"class":225},[183,4408,204],{"class":189},[183,4410,497],{"class":231},[183,4412,500],{"class":225},[183,4414,503],{"class":189},[183,4416,506],{"class":197},[183,4418,764],{"class":231},[183,4420,767],{"class":225},[183,4422,267],{"class":189},[183,4424,772],{"class":225},[183,4426,775],{"class":189},[183,4428,778],{"class":225},[183,4430,4431],{"class":185,"line":863},[183,4432,242],{"emptyLinePlaceholder":241},[183,4434,4435,4437,4439,4441,4443,4445,4447,4449,4451,4453,4455,4457,4459,4461,4463,4465],{"class":185,"line":900},[183,4436,222],{"class":197},[183,4438,791],{"class":225},[183,4440,204],{"class":189},[183,4442,497],{"class":231},[183,4444,500],{"class":225},[183,4446,503],{"class":189},[183,4448,506],{"class":197},[183,4450,804],{"class":225},[183,4452,267],{"class":189},[183,4454,772],{"class":225},[183,4456,775],{"class":189},[183,4458,813],{"class":225},[183,4460,267],{"class":189},[183,4462,818],{"class":225},[183,4464,267],{"class":189},[183,4466,823],{"class":225},[183,4468,4469,4471,4473,4475,4477,4479,4481,4483,4485,4487,4489,4491,4493,4495,4497,4499],{"class":185,"line":937},[183,4470,222],{"class":197},[183,4472,831],{"class":225},[183,4474,204],{"class":189},[183,4476,497],{"class":231},[183,4478,500],{"class":225},[183,4480,503],{"class":189},[183,4482,506],{"class":197},[183,4484,804],{"class":225},[183,4486,267],{"class":189},[183,4488,772],{"class":225},[183,4490,775],{"class":189},[183,4492,813],{"class":225},[183,4494,267],{"class":189},[183,4496,818],{"class":225},[183,4498,267],{"class":189},[183,4500,860],{"class":225},[183,4502,4503,4505,4507,4509,4511,4513,4515,4517,4519,4521,4523,4525,4527,4529,4531,4533],{"class":185,"line":947},[183,4504,222],{"class":197},[183,4506,868],{"class":225},[183,4508,204],{"class":189},[183,4510,497],{"class":231},[183,4512,500],{"class":225},[183,4514,503],{"class":189},[183,4516,506],{"class":197},[183,4518,804],{"class":225},[183,4520,267],{"class":189},[183,4522,772],{"class":225},[183,4524,775],{"class":189},[183,4526,813],{"class":225},[183,4528,267],{"class":189},[183,4530,818],{"class":225},[183,4532,267],{"class":189},[183,4534,897],{"class":225},[183,4536,4537,4539,4541,4543,4545,4547,4549,4551,4553,4555,4557,4559,4561,4563,4565,4567],{"class":185,"line":952},[183,4538,222],{"class":197},[183,4540,905],{"class":225},[183,4542,204],{"class":189},[183,4544,497],{"class":231},[183,4546,500],{"class":225},[183,4548,503],{"class":189},[183,4550,506],{"class":197},[183,4552,804],{"class":225},[183,4554,267],{"class":189},[183,4556,772],{"class":225},[183,4558,775],{"class":189},[183,4560,813],{"class":225},[183,4562,267],{"class":189},[183,4564,818],{"class":225},[183,4566,267],{"class":189},[183,4568,934],{"class":225},[183,4570,4571,4573,4575],{"class":185,"line":962},[183,4572,940],{"class":189},[183,4574,194],{"class":193},[183,4576,216],{"class":189},[144,4578,4579],{},"The pagination logic works as follows:",[4581,4582,4583,4598],"ul",{},[4584,4585,4586,4587,4591,4592,4594,4595,4597],"li",{},"When navigating ",[4588,4589,4590],"strong",{},"forward",", we pass ",[180,4593,2717],{}," (items per page) and ",[180,4596,650],{}," (the end cursor of the current page).",[4584,4599,4586,4600,4591,4603,4594,4605,4607],{},[4588,4601,4602],{},"backward",[180,4604,3934],{},[180,4606,671],{}," (the start cursor of the current page).",[144,4609,4610,4611,4613],{},"In the template, we use the ",[180,4612,818],{}," to conditionally render previous and next buttons:",[173,4615,4617],{"className":175,"code":4616,"filename":171,"language":177,"meta":178,"style":178},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- collection title, description, product grid... -->\n\n    \u003Cdiv class=\"flex justify-between mt-8\">\n      \u003CUButton\n        v-if=\"hasPreviousPage\"\n        :to=\"`?before=${startCursor}`\"\n        icon=\"i-lucide-arrow-left\"\n      >\n        Previous\n      \u003C\u002FUButton>\n\n      \u003CUButton\n        v-if=\"hasNextPage\"\n        :to=\"`?after=${endCursor}`\"\n        trailing-icon=\"i-lucide-arrow-right\"\n      >\n        Next\n      \u003C\u002FUButton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[180,4618,4619,4627,4635,4640,4644,4662,4668,4680,4698,4710,4714,4718,4726,4730,4736,4748,4766,4778,4782,4786,4794,4802,4810],{"__ignoreMap":178},[183,4620,4621,4623,4625],{"class":185,"line":186},[183,4622,190],{"class":189},[183,4624,957],{"class":193},[183,4626,216],{"class":189},[183,4628,4629,4631,4633],{"class":185,"line":219},[183,4630,965],{"class":189},[183,4632,968],{"class":193},[183,4634,216],{"class":189},[183,4636,4637],{"class":185,"line":238},[183,4638,4639],{"class":3084},"    \u003C!-- collection title, description, product grid... -->\n",[183,4641,4642],{"class":185,"line":245},[183,4643,242],{"emptyLinePlaceholder":241},[183,4645,4646,4648,4650,4652,4654,4656,4658,4660],{"class":185,"line":281},[183,4647,976],{"class":189},[183,4649,968],{"class":193},[183,4651,981],{"class":197},[183,4653,204],{"class":189},[183,4655,207],{"class":189},[183,4657,1176],{"class":210},[183,4659,207],{"class":189},[183,4661,216],{"class":189},[183,4663,4664,4666],{"class":185,"line":295},[183,4665,1079],{"class":189},[183,4667,1188],{"class":193},[183,4669,4670,4672,4674,4676,4678],{"class":185,"line":300},[183,4671,1194],{"class":323},[183,4673,204],{"class":189},[183,4675,207],{"class":189},[183,4677,1201],{"class":225},[183,4679,1103],{"class":189},[183,4681,4682,4684,4686,4688,4690,4692,4694,4696],{"class":185,"line":341},[183,4683,1109],{"class":189},[183,4685,1211],{"class":197},[183,4687,204],{"class":189},[183,4689,1216],{"class":189},[183,4691,1219],{"class":210},[183,4693,261],{"class":189},[183,4695,1224],{"class":225},[183,4697,1227],{"class":189},[183,4699,4700,4702,4704,4706,4708],{"class":185,"line":347},[183,4701,1233],{"class":197},[183,4703,204],{"class":189},[183,4705,207],{"class":189},[183,4707,1240],{"class":210},[183,4709,1103],{"class":189},[183,4711,4712],{"class":185,"line":353},[183,4713,1248],{"class":189},[183,4715,4716],{"class":185,"line":359},[183,4717,1254],{"class":225},[183,4719,4720,4722,4724],{"class":185,"line":365},[183,4721,1260],{"class":189},[183,4723,1263],{"class":193},[183,4725,216],{"class":189},[183,4727,4728],{"class":185,"line":371},[183,4729,242],{"emptyLinePlaceholder":241},[183,4731,4732,4734],{"class":185,"line":377},[183,4733,1079],{"class":189},[183,4735,1188],{"class":193},[183,4737,4738,4740,4742,4744,4746],{"class":185,"line":383},[183,4739,1194],{"class":323},[183,4741,204],{"class":189},[183,4743,207],{"class":189},[183,4745,1289],{"class":225},[183,4747,1103],{"class":189},[183,4749,4750,4752,4754,4756,4758,4760,4762,4764],{"class":185,"line":389},[183,4751,1109],{"class":189},[183,4753,1211],{"class":197},[183,4755,204],{"class":189},[183,4757,1216],{"class":189},[183,4759,1305],{"class":210},[183,4761,261],{"class":189},[183,4763,1310],{"class":225},[183,4765,1227],{"class":189},[183,4767,4768,4770,4772,4774,4776],{"class":185,"line":395},[183,4769,1318],{"class":197},[183,4771,204],{"class":189},[183,4773,207],{"class":189},[183,4775,1325],{"class":210},[183,4777,1103],{"class":189},[183,4779,4780],{"class":185,"line":401},[183,4781,1248],{"class":189},[183,4783,4784],{"class":185,"line":407},[183,4785,1338],{"class":225},[183,4787,4788,4790,4792],{"class":185,"line":413},[183,4789,1260],{"class":189},[183,4791,1263],{"class":193},[183,4793,216],{"class":189},[183,4795,4796,4798,4800],{"class":185,"line":418},[183,4797,1004],{"class":189},[183,4799,968],{"class":193},[183,4801,216],{"class":189},[183,4803,4804,4806,4808],{"class":185,"line":424},[183,4805,1362],{"class":189},[183,4807,968],{"class":193},[183,4809,216],{"class":189},[183,4811,4812,4814,4816],{"class":185,"line":430},[183,4813,940],{"class":189},[183,4815,957],{"class":193},[183,4817,216],{"class":189},[144,4819,4820,4821,4824],{},"And that's it! You now have a fully functional collection page with pagination that fetches its data from Shopify.\nYou can customize the number of products per page by changing the ",[180,4822,4823],{},"perPage"," variable, and the page will automatically handle forward and backward navigation using cursors.",[4826,4827,4828],"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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":178,"searchDepth":219,"depth":219,"links":4830},[4831,4832,4833,4834],{"id":2406,"depth":219,"text":2407},{"id":2638,"depth":219,"text":2639},{"id":3038,"depth":219,"text":3039},{"id":3924,"depth":219,"text":3925},"How to create a collection page for your Shopify store in Nuxt","md",null,{},{"icon":92},{"title":89,"description":4835},"gRuHII6Ntgb9pxKHCCSgEvJp-IFXCw43EzN7K1N-f80",[4843,4845],{"title":84,"path":85,"stem":86,"description":4844,"icon":87,"children":-1},"How to create a navigation menu for your Shopify store in Nuxt",{"title":94,"path":95,"stem":96,"description":4846,"icon":97,"children":-1},"How to create collection filters for your Shopify store in Nuxt",{"id":4848,"title":4849,"description":4850,"products":4851},"gid:\u002F\u002Fshopify\u002FCollection\u002F316338274383","Accessoires","Finishing touches that carry the look — sunglasses, sneakers, bags and slides built for everyday wear.",{"edges":4852,"pageInfo":4903},[4853,4867,4879,4891],{"cursor":4854,"node":4855},"eyJsYXN0X2lkIjo5MDAzNjQ2MTU2ODc5LCJsYXN0X3ZhbHVlIjowLCJvZmZzZXQiOjB9",{"id":4856,"handle":4857,"title":4858,"description":4859,"featuredImage":4860,"priceRange":4863},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003646156879","beanie","Beanie","This beanie is perfect for all seasons! Crafted in luxurious cashmere – it's classic, warm and comfortable. Just the thing to keep you stylish and cozy.",{"url":4861,"altText":4837,"height":4862,"width":4862},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FGreenHat01_e925fadd-05dc-4185-b7fe-482f9c0e49b2.jpg?v=1786350455",4096,{"minVariantPrice":4864},{"amount":4865,"currencyCode":4866},"100.0","USD",{"cursor":4868,"node":4869},"eyJsYXN0X2lkIjo5MDAzNjQ2MDkxMzQzLCJsYXN0X3ZhbHVlIjowLCJvZmZzZXQiOjF9",{"id":4870,"handle":4871,"title":4872,"description":4873,"featuredImage":4874,"priceRange":4876},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003646091343","high-top-sneakers","High Top Sneakers","These stylish and durable high top sneakers are perfect for any casual look, offering superior comfort and protection with their foam cushioning and reinforced heel support.",{"url":4875,"altText":4837,"height":4862,"width":4862},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FWhiteleathersneakers01.jpg?v=1786350454",{"minVariantPrice":4877},{"amount":4878,"currencyCode":4866},"180.0",{"cursor":4880,"node":4881},"eyJsYXN0X2lkIjo5MDAzNjQ2MDI1ODA3LCJsYXN0X3ZhbHVlIjowLCJvZmZzZXQiOjJ9",{"id":4882,"handle":4883,"title":4884,"description":4885,"featuredImage":4886,"priceRange":4888},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003646025807","clear-sunnies","Clear Sunnies","These modern clear sunglasses provide 100% UV400 protection from harmful sunrays and feature mirrored lenses for a timeless and stylish look. With lightweight construction and comfortable fit, you can look cool and stay safe in any situation.",{"url":4887,"altText":4837,"height":4862,"width":4862},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FSeethroughsunnies.jpg?v=1786350453",{"minVariantPrice":4889},{"amount":4890,"currencyCode":4866},"25.0",{"cursor":4892,"node":4893},"eyJsYXN0X2lkIjo5MDAzNjQ1OTkzMDM5LCJsYXN0X3ZhbHVlIjowLCJvZmZzZXQiOjN9",{"id":4894,"handle":4895,"title":4896,"description":4897,"featuredImage":4898,"priceRange":4900},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003645993039","gray-runners","Gray Runners","These gray runners are the perfect choice for running enthusiasts. These shoes provide superior breathability and comfort, so you can run longer with less fatigue. The lightweight design and airy mesh material make these shoes durable and lightweight, giving you the support you need for peak performance.",{"url":4899,"altText":4837,"height":4862,"width":4862},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FGreyrunners.jpg?v=1786350452",{"minVariantPrice":4901},{"amount":4902,"currencyCode":4866},"30.0",{"hasNextPage":241,"hasPreviousPage":30,"startCursor":4854,"endCursor":4892},1788560609152]