[{"data":1,"prerenderedAt":6508},["ShallowReactive",2],{"navigation_docs":3,"-examples-collection-filters":134,"-examples-collection-filters-surround":6332,"filters-men":6337},[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":94,"body":136,"description":6325,"extension":6326,"links":6327,"meta":6328,"navigation":6329,"path":95,"seo":6330,"stem":96,"__hash__":6331},"docs\u002F3.examples\u002F3.collection-filters.md",{"type":137,"value":138,"toc":6317},"minimark",[139,143,152,4003,4018,4023,4035,4113,4120,4186,4198,4202,4217,4223,4364,4374,4526,4530,4542,4689,4692,4696,4708,5282,5286,5298,5304,6207,6213,6217,6227,6310,6313],[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,147,151],"p",{},"Once you have a ",[148,149,150],"a",{"href":90},"collection page",", the next step is filtering.\nThe Storefront API can do the filtering for you, it tells you which filters a collection supports, and it applies the\nselections you pass to a query.\nThis example builds a filter sidebar with a small component for each kind of filter, including a price range.",[153,154,155],"card",{},[156,157,158,169],"tabs",{},[159,160,163],"tabs-item",{"icon":161,"label":162},"i-lucide-eye","Preview",[164,165],"example-collection-filters",{"className":166,"handle":168},[167],"pt-2","men",[159,170,172],{"icon":24,"label":171},"Code",[173,174,177,1461,2088,3063,3811,3893],"code-tree",{":expand-all":175,"default-value":176},"true","app\u002Fpages\u002Fcollections\u002F[handle].vue",[178,179,184],"pre",{"className":180,"code":181,"filename":176,"language":182,"meta":183,"style":183},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport type { ProductFilter } from '#shopify\u002Fstorefront'\n\nconst route = useRoute()\nconst router = useRouter()\n\nconst applied = computed\u003CProductFilter[]>({\n get: () => route.query.filters ? JSON.parse(route.query.filters as string) : [],\n set: filters => router.push({ query: filters.length ? { filters: JSON.stringify(filters) } : {} }),\n})\n\nconst { data: collection } = await useStorefrontData(`collection-${route.params.handle}`, `#graphql\n query GetCollectionFilters($handle: String!, $first: Int, $filters: [ProductFilter!]) {\n collection(handle: $handle) {\n title\n\n products(first: $first, filters: $filters) {\n filters {\n ...FilterFields\n }\n nodes {\n ...ProductFields\n }\n }\n }\n }\n`, {\n variables: computed(() => ({\n handle: route.params.handle,\n first: 12,\n filters: applied.value,\n })),\n transform: data => data.collection,\n watch: [() => route.query.filters],\n})\n\nconst facets = computed(() => collection.value?.products.filters ?? [])\nconst products = computed(() => collection.value?.products.nodes ?? [])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv class=\"grid gap-8 md:grid-cols-4\">\n \u003Caside class=\"space-y-4\">\n \u003Cdiv class=\"flex items-center justify-between\">\n \u003Cp class=\"font-bold\">\n Filters\n \u003C\u002Fp>\n\n \u003CUButton\n v-if=\"applied.length\"\n variant=\"link\"\n size=\"xs\"\n @click=\"applied = []\"\n >\n Clear\n \u003C\u002FUButton>\n \u003C\u002Fdiv>\n\n \u003Ctemplate\n v-for=\"facet in facets\"\n :key=\"facet.id\"\n >\n \u003CFilterPrice\n v-if=\"facet.type === 'PRICE_RANGE'\"\n v-model=\"applied\"\n :facet=\"facet\"\n \u002F>\n\n \u003CFilterList\n v-else\n v-model=\"applied\"\n :facet=\"facet\"\n \u002F>\n \u003C\u002Ftemplate>\n \u003C\u002Faside>\n\n \u003Cdiv class=\"md:col-span-3\">\n \u003Cdiv class=\"grid gap-4 grid-cols-1 sm: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\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[185,186,187,222,254,261,279,294,299,330,398,471,479,484,546,552,558,564,569,575,581,587,593,599,605,610,616,622,628,638,660,680,694,712,723,744,772,779,784,825,862,872,877,887,910,932,953,974,980,990,995,1003,1024,1039,1054,1074,1080,1086,1096,1106,1111,1119,1140,1163,1169,1177,1205,1219,1235,1241,1246,1254,1260,1273,1288,1293,1302,1312,1317,1337,1357,1365,1385,1404,1419,1424,1433,1442,1452],"code",{"__ignoreMap":183},[188,189,192,196,200,204,207,210,213,217,219],"span",{"class":190,"line":191},"line",1,[188,193,195],{"class":194},"sMK4o","\u003C",[188,197,199],{"class":198},"swJcz","script",[188,201,203],{"class":202},"spNyl"," setup",[188,205,206],{"class":202}," lang",[188,208,209],{"class":194},"=",[188,211,212],{"class":194},"\"",[188,214,216],{"class":215},"sfazB","ts",[188,218,212],{"class":194},[188,220,221],{"class":194},">\n",[188,223,225,229,232,235,239,242,245,248,251],{"class":190,"line":224},2,[188,226,228],{"class":227},"s7zQu","import",[188,230,231],{"class":227}," type",[188,233,234],{"class":194}," {",[188,236,238],{"class":237},"sTEyZ"," ProductFilter",[188,240,241],{"class":194}," }",[188,243,244],{"class":227}," from",[188,246,247],{"class":194}," '",[188,249,250],{"class":215},"#shopify\u002Fstorefront",[188,252,253],{"class":194},"'\n",[188,255,257],{"class":190,"line":256},3,[188,258,260],{"emptyLinePlaceholder":259},true,"\n",[188,262,264,267,270,272,276],{"class":190,"line":263},4,[188,265,266],{"class":202},"const",[188,268,269],{"class":237}," route ",[188,271,209],{"class":194},[188,273,275],{"class":274},"s2Zo4"," useRoute",[188,277,278],{"class":237},"()\n",[188,280,282,284,287,289,292],{"class":190,"line":281},5,[188,283,266],{"class":202},[188,285,286],{"class":237}," router ",[188,288,209],{"class":194},[188,290,291],{"class":274}," useRouter",[188,293,278],{"class":237},[188,295,297],{"class":190,"line":296},6,[188,298,260],{"emptyLinePlaceholder":259},[188,300,302,304,307,309,312,314,318,321,324,327],{"class":190,"line":301},7,[188,303,266],{"class":202},[188,305,306],{"class":237}," applied ",[188,308,209],{"class":194},[188,310,311],{"class":274}," computed",[188,313,195],{"class":194},[188,315,317],{"class":316},"sBMFI","ProductFilter",[188,319,320],{"class":237},"[]",[188,322,323],{"class":194},">",[188,325,326],{"class":237},"(",[188,328,329],{"class":194},"{\n",[188,331,333,336,339,342,345,348,351,354,356,359,362,365,367,370,373,375,377,379,381,384,387,390,392,395],{"class":190,"line":332},8,[188,334,335],{"class":274}," get",[188,337,338],{"class":194},":",[188,340,341],{"class":194}," ()",[188,343,344],{"class":202}," =>",[188,346,347],{"class":237}," route",[188,349,350],{"class":194},".",[188,352,353],{"class":237},"query",[188,355,350],{"class":194},[188,357,358],{"class":237},"filters ",[188,360,361],{"class":194},"?",[188,363,364],{"class":237}," JSON",[188,366,350],{"class":194},[188,368,369],{"class":274},"parse",[188,371,372],{"class":237},"(route",[188,374,350],{"class":194},[188,376,353],{"class":237},[188,378,350],{"class":194},[188,380,358],{"class":237},[188,382,383],{"class":227},"as",[188,385,386],{"class":316}," string",[188,388,389],{"class":237},") ",[188,391,338],{"class":194},[188,393,394],{"class":237}," []",[188,396,397],{"class":194},",\n",[188,399,401,404,406,410,412,415,417,420,422,425,428,430,432,434,437,439,441,443,445,447,449,452,455,458,461,464,466,469],{"class":190,"line":400},9,[188,402,403],{"class":274}," set",[188,405,338],{"class":194},[188,407,409],{"class":408},"sHdIc"," filters",[188,411,344],{"class":202},[188,413,414],{"class":237}," router",[188,416,350],{"class":194},[188,418,419],{"class":274},"push",[188,421,326],{"class":237},[188,423,424],{"class":194},"{",[188,426,427],{"class":198}," query",[188,429,338],{"class":194},[188,431,409],{"class":237},[188,433,350],{"class":194},[188,435,436],{"class":237},"length ",[188,438,361],{"class":194},[188,440,234],{"class":194},[188,442,409],{"class":198},[188,444,338],{"class":194},[188,446,364],{"class":237},[188,448,350],{"class":194},[188,450,451],{"class":274},"stringify",[188,453,454],{"class":237},"(filters) ",[188,456,457],{"class":194},"}",[188,459,460],{"class":194}," :",[188,462,463],{"class":194}," {}",[188,465,241],{"class":194},[188,467,468],{"class":237},")",[188,470,397],{"class":194},[188,472,474,476],{"class":190,"line":473},10,[188,475,457],{"class":194},[188,477,478],{"class":237},")\n",[188,480,482],{"class":190,"line":481},11,[188,483,260],{"emptyLinePlaceholder":259},[188,485,487,489,491,494,496,499,501,504,507,510,512,515,518,521,524,526,529,531,534,537,540,543],{"class":190,"line":486},12,[188,488,266],{"class":202},[188,490,234],{"class":194},[188,492,493],{"class":198}," data",[188,495,338],{"class":194},[188,497,498],{"class":237}," collection ",[188,500,457],{"class":194},[188,502,503],{"class":194}," =",[188,505,506],{"class":227}," await",[188,508,509],{"class":274}," useStorefrontData",[188,511,326],{"class":237},[188,513,514],{"class":194},"`",[188,516,517],{"class":215},"collection-",[188,519,520],{"class":194},"${",[188,522,523],{"class":237},"route",[188,525,350],{"class":194},[188,527,528],{"class":237},"params",[188,530,350],{"class":194},[188,532,533],{"class":237},"handle",[188,535,536],{"class":194},"}`",[188,538,539],{"class":194},",",[188,541,542],{"class":194}," `",[188,544,545],{"class":215},"#graphql\n",[188,547,549],{"class":190,"line":548},13,[188,550,551],{"class":215}," query GetCollectionFilters($handle: String!, $first: Int, $filters: [ProductFilter!]) {\n",[188,553,555],{"class":190,"line":554},14,[188,556,557],{"class":215}," collection(handle: $handle) {\n",[188,559,561],{"class":190,"line":560},15,[188,562,563],{"class":215}," title\n",[188,565,567],{"class":190,"line":566},16,[188,568,260],{"emptyLinePlaceholder":259},[188,570,572],{"class":190,"line":571},17,[188,573,574],{"class":215}," products(first: $first, filters: $filters) {\n",[188,576,578],{"class":190,"line":577},18,[188,579,580],{"class":215}," filters {\n",[188,582,584],{"class":190,"line":583},19,[188,585,586],{"class":215}," ...FilterFields\n",[188,588,590],{"class":190,"line":589},20,[188,591,592],{"class":215}," }\n",[188,594,596],{"class":190,"line":595},21,[188,597,598],{"class":215}," nodes {\n",[188,600,602],{"class":190,"line":601},22,[188,603,604],{"class":215}," ...ProductFields\n",[188,606,608],{"class":190,"line":607},23,[188,609,592],{"class":215},[188,611,613],{"class":190,"line":612},24,[188,614,615],{"class":215}," }\n",[188,617,619],{"class":190,"line":618},25,[188,620,621],{"class":215}," }\n",[188,623,625],{"class":190,"line":624},26,[188,626,627],{"class":215}," }\n",[188,629,631,633,635],{"class":190,"line":630},27,[188,632,514],{"class":194},[188,634,539],{"class":194},[188,636,637],{"class":194}," {\n",[188,639,641,644,646,648,650,653,655,658],{"class":190,"line":640},28,[188,642,643],{"class":198}," variables",[188,645,338],{"class":194},[188,647,311],{"class":274},[188,649,326],{"class":237},[188,651,652],{"class":194},"()",[188,654,344],{"class":202},[188,656,657],{"class":237}," (",[188,659,329],{"class":194},[188,661,663,666,668,670,672,674,676,678],{"class":190,"line":662},29,[188,664,665],{"class":198}," handle",[188,667,338],{"class":194},[188,669,347],{"class":237},[188,671,350],{"class":194},[188,673,528],{"class":237},[188,675,350],{"class":194},[188,677,533],{"class":237},[188,679,397],{"class":194},[188,681,683,686,688,692],{"class":190,"line":682},30,[188,684,685],{"class":198}," first",[188,687,338],{"class":194},[188,689,691],{"class":690},"sbssI"," 12",[188,693,397],{"class":194},[188,695,697,700,702,705,707,710],{"class":190,"line":696},31,[188,698,699],{"class":198}," filters",[188,701,338],{"class":194},[188,703,704],{"class":237}," applied",[188,706,350],{"class":194},[188,708,709],{"class":237},"value",[188,711,397],{"class":194},[188,713,715,718,721],{"class":190,"line":714},32,[188,716,717],{"class":194}," }",[188,719,720],{"class":237},"))",[188,722,397],{"class":194},[188,724,726,729,731,733,735,737,739,742],{"class":190,"line":725},33,[188,727,728],{"class":274}," transform",[188,730,338],{"class":194},[188,732,493],{"class":408},[188,734,344],{"class":202},[188,736,493],{"class":237},[188,738,350],{"class":194},[188,740,741],{"class":237},"collection",[188,743,397],{"class":194},[188,745,747,750,752,755,757,759,761,763,765,767,770],{"class":190,"line":746},34,[188,748,749],{"class":198}," watch",[188,751,338],{"class":194},[188,753,754],{"class":237}," [",[188,756,652],{"class":194},[188,758,344],{"class":202},[188,760,347],{"class":237},[188,762,350],{"class":194},[188,764,353],{"class":237},[188,766,350],{"class":194},[188,768,769],{"class":237},"filters]",[188,771,397],{"class":194},[188,773,775,777],{"class":190,"line":774},35,[188,776,457],{"class":194},[188,778,478],{"class":237},[188,780,782],{"class":190,"line":781},36,[188,783,260],{"emptyLinePlaceholder":259},[188,785,787,789,792,794,796,798,800,802,805,807,809,812,815,817,819,822],{"class":190,"line":786},37,[188,788,266],{"class":202},[188,790,791],{"class":237}," facets ",[188,793,209],{"class":194},[188,795,311],{"class":274},[188,797,326],{"class":237},[188,799,652],{"class":194},[188,801,344],{"class":202},[188,803,804],{"class":237}," collection",[188,806,350],{"class":194},[188,808,709],{"class":237},[188,810,811],{"class":194},"?.",[188,813,814],{"class":237},"products",[188,816,350],{"class":194},[188,818,358],{"class":237},[188,820,821],{"class":194},"??",[188,823,824],{"class":237}," [])\n",[188,826,828,830,833,835,837,839,841,843,845,847,849,851,853,855,858,860],{"class":190,"line":827},38,[188,829,266],{"class":202},[188,831,832],{"class":237}," products ",[188,834,209],{"class":194},[188,836,311],{"class":274},[188,838,326],{"class":237},[188,840,652],{"class":194},[188,842,344],{"class":202},[188,844,804],{"class":237},[188,846,350],{"class":194},[188,848,709],{"class":237},[188,850,811],{"class":194},[188,852,814],{"class":237},[188,854,350],{"class":194},[188,856,857],{"class":237},"nodes ",[188,859,821],{"class":194},[188,861,824],{"class":237},[188,863,865,868,870],{"class":190,"line":864},39,[188,866,867],{"class":194},"\u003C\u002F",[188,869,199],{"class":198},[188,871,221],{"class":194},[188,873,875],{"class":190,"line":874},40,[188,876,260],{"emptyLinePlaceholder":259},[188,878,880,882,885],{"class":190,"line":879},41,[188,881,195],{"class":194},[188,883,884],{"class":198},"template",[188,886,221],{"class":194},[188,888,890,893,896,899,901,903,906,908],{"class":190,"line":889},42,[188,891,892],{"class":194}," \u003C",[188,894,895],{"class":198},"div",[188,897,898],{"class":202}," class",[188,900,209],{"class":194},[188,902,212],{"class":194},[188,904,905],{"class":215},"grid gap-8 md:grid-cols-4",[188,907,212],{"class":194},[188,909,221],{"class":194},[188,911,913,916,919,921,923,925,928,930],{"class":190,"line":912},43,[188,914,915],{"class":194}," \u003C",[188,917,918],{"class":198},"aside",[188,920,898],{"class":202},[188,922,209],{"class":194},[188,924,212],{"class":194},[188,926,927],{"class":215},"space-y-4",[188,929,212],{"class":194},[188,931,221],{"class":194},[188,933,935,938,940,942,944,946,949,951],{"class":190,"line":934},44,[188,936,937],{"class":194}," \u003C",[188,939,895],{"class":198},[188,941,898],{"class":202},[188,943,209],{"class":194},[188,945,212],{"class":194},[188,947,948],{"class":215},"flex items-center justify-between",[188,950,212],{"class":194},[188,952,221],{"class":194},[188,954,956,959,961,963,965,967,970,972],{"class":190,"line":955},45,[188,957,958],{"class":194}," \u003C",[188,960,144],{"class":198},[188,962,898],{"class":202},[188,964,209],{"class":194},[188,966,212],{"class":194},[188,968,969],{"class":215},"font-bold",[188,971,212],{"class":194},[188,973,221],{"class":194},[188,975,977],{"class":190,"line":976},46,[188,978,979],{"class":237}," Filters\n",[188,981,983,986,988],{"class":190,"line":982},47,[188,984,985],{"class":194}," \u003C\u002F",[188,987,144],{"class":198},[188,989,221],{"class":194},[188,991,993],{"class":190,"line":992},48,[188,994,260],{"emptyLinePlaceholder":259},[188,996,998,1000],{"class":190,"line":997},49,[188,999,958],{"class":194},[188,1001,1002],{"class":198},"UButton\n",[188,1004,1006,1009,1011,1013,1016,1018,1021],{"class":190,"line":1005},50,[188,1007,1008],{"class":227}," v-if",[188,1010,209],{"class":194},[188,1012,212],{"class":194},[188,1014,1015],{"class":237},"applied",[188,1017,350],{"class":194},[188,1019,1020],{"class":237},"length",[188,1022,1023],{"class":194},"\"\n",[188,1025,1027,1030,1032,1034,1037],{"class":190,"line":1026},51,[188,1028,1029],{"class":202}," variant",[188,1031,209],{"class":194},[188,1033,212],{"class":194},[188,1035,1036],{"class":215},"link",[188,1038,1023],{"class":194},[188,1040,1042,1045,1047,1049,1052],{"class":190,"line":1041},52,[188,1043,1044],{"class":202}," size",[188,1046,209],{"class":194},[188,1048,212],{"class":194},[188,1050,1051],{"class":215},"xs",[188,1053,1023],{"class":194},[188,1055,1057,1060,1063,1065,1067,1069,1072],{"class":190,"line":1056},53,[188,1058,1059],{"class":194}," @",[188,1061,1062],{"class":202},"click",[188,1064,209],{"class":194},[188,1066,212],{"class":194},[188,1068,1015],{"class":237},[188,1070,1071],{"class":194}," = []",[188,1073,1023],{"class":194},[188,1075,1077],{"class":190,"line":1076},54,[188,1078,1079],{"class":194}," >\n",[188,1081,1083],{"class":190,"line":1082},55,[188,1084,1085],{"class":237}," Clear\n",[188,1087,1089,1091,1094],{"class":190,"line":1088},56,[188,1090,985],{"class":194},[188,1092,1093],{"class":198},"UButton",[188,1095,221],{"class":194},[188,1097,1099,1102,1104],{"class":190,"line":1098},57,[188,1100,1101],{"class":194}," \u003C\u002F",[188,1103,895],{"class":198},[188,1105,221],{"class":194},[188,1107,1109],{"class":190,"line":1108},58,[188,1110,260],{"emptyLinePlaceholder":259},[188,1112,1114,1116],{"class":190,"line":1113},59,[188,1115,937],{"class":194},[188,1117,1118],{"class":198},"template\n",[188,1120,1122,1125,1127,1129,1132,1135,1138],{"class":190,"line":1121},60,[188,1123,1124],{"class":227}," v-for",[188,1126,209],{"class":194},[188,1128,212],{"class":194},[188,1130,1131],{"class":237},"facet ",[188,1133,1134],{"class":194},"in",[188,1136,1137],{"class":237}," facets",[188,1139,1023],{"class":194},[188,1141,1143,1146,1149,1151,1153,1156,1158,1161],{"class":190,"line":1142},61,[188,1144,1145],{"class":194}," :",[188,1147,1148],{"class":202},"key",[188,1150,209],{"class":194},[188,1152,212],{"class":194},[188,1154,1155],{"class":237},"facet",[188,1157,350],{"class":194},[188,1159,1160],{"class":237},"id",[188,1162,1023],{"class":194},[188,1164,1166],{"class":190,"line":1165},62,[188,1167,1168],{"class":194}," >\n",[188,1170,1172,1174],{"class":190,"line":1171},63,[188,1173,958],{"class":194},[188,1175,1176],{"class":198},"FilterPrice\n",[188,1178,1180,1182,1184,1186,1188,1190,1193,1196,1199,1202],{"class":190,"line":1179},64,[188,1181,1008],{"class":227},[188,1183,209],{"class":194},[188,1185,212],{"class":194},[188,1187,1155],{"class":237},[188,1189,350],{"class":194},[188,1191,1192],{"class":237},"type",[188,1194,1195],{"class":194}," === ",[188,1197,1198],{"class":194},"'",[188,1200,1201],{"class":215},"PRICE_RANGE",[188,1203,1204],{"class":194},"'\"\n",[188,1206,1208,1211,1213,1215,1217],{"class":190,"line":1207},65,[188,1209,1210],{"class":202}," v-model",[188,1212,209],{"class":194},[188,1214,212],{"class":194},[188,1216,1015],{"class":237},[188,1218,1023],{"class":194},[188,1220,1222,1225,1227,1229,1231,1233],{"class":190,"line":1221},66,[188,1223,1224],{"class":194}," :",[188,1226,1155],{"class":202},[188,1228,209],{"class":194},[188,1230,212],{"class":194},[188,1232,1155],{"class":237},[188,1234,1023],{"class":194},[188,1236,1238],{"class":190,"line":1237},67,[188,1239,1240],{"class":194}," \u002F>\n",[188,1242,1244],{"class":190,"line":1243},68,[188,1245,260],{"emptyLinePlaceholder":259},[188,1247,1249,1251],{"class":190,"line":1248},69,[188,1250,958],{"class":194},[188,1252,1253],{"class":198},"FilterList\n",[188,1255,1257],{"class":190,"line":1256},70,[188,1258,1259],{"class":227}," v-else\n",[188,1261,1263,1265,1267,1269,1271],{"class":190,"line":1262},71,[188,1264,1210],{"class":202},[188,1266,209],{"class":194},[188,1268,212],{"class":194},[188,1270,1015],{"class":237},[188,1272,1023],{"class":194},[188,1274,1276,1278,1280,1282,1284,1286],{"class":190,"line":1275},72,[188,1277,1224],{"class":194},[188,1279,1155],{"class":202},[188,1281,209],{"class":194},[188,1283,212],{"class":194},[188,1285,1155],{"class":237},[188,1287,1023],{"class":194},[188,1289,1291],{"class":190,"line":1290},73,[188,1292,1240],{"class":194},[188,1294,1296,1298,1300],{"class":190,"line":1295},74,[188,1297,1101],{"class":194},[188,1299,884],{"class":198},[188,1301,221],{"class":194},[188,1303,1305,1308,1310],{"class":190,"line":1304},75,[188,1306,1307],{"class":194}," \u003C\u002F",[188,1309,918],{"class":198},[188,1311,221],{"class":194},[188,1313,1315],{"class":190,"line":1314},76,[188,1316,260],{"emptyLinePlaceholder":259},[188,1318,1320,1322,1324,1326,1328,1330,1333,1335],{"class":190,"line":1319},77,[188,1321,915],{"class":194},[188,1323,895],{"class":198},[188,1325,898],{"class":202},[188,1327,209],{"class":194},[188,1329,212],{"class":194},[188,1331,1332],{"class":215},"md:col-span-3",[188,1334,212],{"class":194},[188,1336,221],{"class":194},[188,1338,1340,1342,1344,1346,1348,1350,1353,1355],{"class":190,"line":1339},78,[188,1341,937],{"class":194},[188,1343,895],{"class":198},[188,1345,898],{"class":202},[188,1347,209],{"class":194},[188,1349,212],{"class":194},[188,1351,1352],{"class":215},"grid gap-4 grid-cols-1 sm:grid-cols-2",[188,1354,212],{"class":194},[188,1356,221],{"class":194},[188,1358,1360,1362],{"class":190,"line":1359},79,[188,1361,958],{"class":194},[188,1363,1364],{"class":198},"ProductCard\n",[188,1366,1368,1371,1373,1375,1378,1381,1383],{"class":190,"line":1367},80,[188,1369,1370],{"class":227}," v-for",[188,1372,209],{"class":194},[188,1374,212],{"class":194},[188,1376,1377],{"class":237},"product",[188,1379,1380],{"class":194}," in ",[188,1382,814],{"class":237},[188,1384,1023],{"class":194},[188,1386,1388,1390,1392,1394,1396,1398,1400,1402],{"class":190,"line":1387},81,[188,1389,1224],{"class":194},[188,1391,1148],{"class":202},[188,1393,209],{"class":194},[188,1395,212],{"class":194},[188,1397,1377],{"class":237},[188,1399,350],{"class":194},[188,1401,1160],{"class":237},[188,1403,1023],{"class":194},[188,1405,1407,1409,1411,1413,1415,1417],{"class":190,"line":1406},82,[188,1408,1224],{"class":194},[188,1410,1377],{"class":202},[188,1412,209],{"class":194},[188,1414,212],{"class":194},[188,1416,1377],{"class":237},[188,1418,1023],{"class":194},[188,1420,1422],{"class":190,"line":1421},83,[188,1423,1240],{"class":194},[188,1425,1427,1429,1431],{"class":190,"line":1426},84,[188,1428,1101],{"class":194},[188,1430,895],{"class":198},[188,1432,221],{"class":194},[188,1434,1436,1438,1440],{"class":190,"line":1435},85,[188,1437,1307],{"class":194},[188,1439,895],{"class":198},[188,1441,221],{"class":194},[188,1443,1445,1448,1450],{"class":190,"line":1444},86,[188,1446,1447],{"class":194}," \u003C\u002F",[188,1449,895],{"class":198},[188,1451,221],{"class":194},[188,1453,1455,1457,1459],{"class":190,"line":1454},87,[188,1456,867],{"class":194},[188,1458,884],{"class":198},[188,1460,221],{"class":194},[178,1462,1465],{"className":180,"code":1463,"filename":1464,"language":182,"meta":183,"style":183},"\u003Cscript setup lang=\"ts\">\nimport type { ProductFilter } from '#shopify\u002Fstorefront'\n\nconst props = defineProps\u003C{\n facet: FilterFieldsFragment\n}>()\n\nconst applied = defineModel\u003CProductFilter[]>({ required: true })\n\nconst keyOf = (filter: ProductFilter) => JSON.stringify(filter)\n\nconst isActive = (input: string) => applied.value.some(filter => keyOf(filter) === keyOf(JSON.parse(input)))\n\nconst toggle = (input: string) => {\n const filter = JSON.parse(input) as ProductFilter\n\n applied.value = isActive(input)\n ? applied.value.filter(active => keyOf(active) !== keyOf(filter))\n : [...applied.value, filter]\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cp class=\"mb-2 text-sm font-semibold text-muted\">\n {{ props.facet.label }}\n \u003C\u002Fp>\n\n \u003Cdiv class=\"space-y-1\">\n \u003CUCheckbox\n v-for=\"value in props.facet.values\"\n :key=\"value.id\"\n :model-value=\"isActive(value.input)\"\n :label=\"`${value.label} (${value.count})`\"\n @update:model-value=\"toggle(value.input)\"\n \u002F>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FFilterList.vue",[185,1466,1467,1487,1507,1511,1526,1536,1543,1547,1583,1587,1618,1622,1682,1686,1709,1736,1740,1760,1802,1825,1830,1838,1842,1850,1858,1877,1882,1890,1894,1913,1920,1946,1964,1990,2028,2059,2064,2072,2080],{"__ignoreMap":183},[188,1468,1469,1471,1473,1475,1477,1479,1481,1483,1485],{"class":190,"line":191},[188,1470,195],{"class":194},[188,1472,199],{"class":198},[188,1474,203],{"class":202},[188,1476,206],{"class":202},[188,1478,209],{"class":194},[188,1480,212],{"class":194},[188,1482,216],{"class":215},[188,1484,212],{"class":194},[188,1486,221],{"class":194},[188,1488,1489,1491,1493,1495,1497,1499,1501,1503,1505],{"class":190,"line":224},[188,1490,228],{"class":227},[188,1492,231],{"class":227},[188,1494,234],{"class":194},[188,1496,238],{"class":237},[188,1498,241],{"class":194},[188,1500,244],{"class":227},[188,1502,247],{"class":194},[188,1504,250],{"class":215},[188,1506,253],{"class":194},[188,1508,1509],{"class":190,"line":256},[188,1510,260],{"emptyLinePlaceholder":259},[188,1512,1513,1515,1518,1520,1523],{"class":190,"line":263},[188,1514,266],{"class":202},[188,1516,1517],{"class":237}," props ",[188,1519,209],{"class":194},[188,1521,1522],{"class":274}," defineProps",[188,1524,1525],{"class":194},"\u003C{\n",[188,1527,1528,1531,1533],{"class":190,"line":281},[188,1529,1530],{"class":198}," facet",[188,1532,338],{"class":194},[188,1534,1535],{"class":316}," FilterFieldsFragment\n",[188,1537,1538,1541],{"class":190,"line":296},[188,1539,1540],{"class":194},"}>",[188,1542,278],{"class":237},[188,1544,1545],{"class":190,"line":301},[188,1546,260],{"emptyLinePlaceholder":259},[188,1548,1549,1551,1553,1555,1558,1560,1562,1564,1566,1568,1570,1573,1575,1579,1581],{"class":190,"line":332},[188,1550,266],{"class":202},[188,1552,306],{"class":237},[188,1554,209],{"class":194},[188,1556,1557],{"class":274}," defineModel",[188,1559,195],{"class":194},[188,1561,317],{"class":316},[188,1563,320],{"class":237},[188,1565,323],{"class":194},[188,1567,326],{"class":237},[188,1569,424],{"class":194},[188,1571,1572],{"class":198}," required",[188,1574,338],{"class":194},[188,1576,1578],{"class":1577},"sfNiH"," true",[188,1580,241],{"class":194},[188,1582,478],{"class":237},[188,1584,1585],{"class":190,"line":400},[188,1586,260],{"emptyLinePlaceholder":259},[188,1588,1589,1591,1594,1596,1598,1601,1603,1605,1607,1609,1611,1613,1615],{"class":190,"line":473},[188,1590,266],{"class":202},[188,1592,1593],{"class":237}," keyOf ",[188,1595,209],{"class":194},[188,1597,657],{"class":194},[188,1599,1600],{"class":408},"filter",[188,1602,338],{"class":194},[188,1604,238],{"class":316},[188,1606,468],{"class":194},[188,1608,344],{"class":202},[188,1610,364],{"class":237},[188,1612,350],{"class":194},[188,1614,451],{"class":274},[188,1616,1617],{"class":237},"(filter)\n",[188,1619,1620],{"class":190,"line":481},[188,1621,260],{"emptyLinePlaceholder":259},[188,1623,1624,1626,1629,1631,1633,1636,1638,1640,1642,1644,1646,1648,1650,1652,1655,1657,1659,1661,1664,1667,1670,1672,1675,1677,1679],{"class":190,"line":486},[188,1625,266],{"class":202},[188,1627,1628],{"class":237}," isActive ",[188,1630,209],{"class":194},[188,1632,657],{"class":194},[188,1634,1635],{"class":408},"input",[188,1637,338],{"class":194},[188,1639,386],{"class":316},[188,1641,468],{"class":194},[188,1643,344],{"class":202},[188,1645,704],{"class":237},[188,1647,350],{"class":194},[188,1649,709],{"class":237},[188,1651,350],{"class":194},[188,1653,1654],{"class":274},"some",[188,1656,326],{"class":237},[188,1658,1600],{"class":408},[188,1660,344],{"class":202},[188,1662,1663],{"class":274}," keyOf",[188,1665,1666],{"class":237},"(filter) ",[188,1668,1669],{"class":194},"===",[188,1671,1663],{"class":274},[188,1673,1674],{"class":237},"(JSON",[188,1676,350],{"class":194},[188,1678,369],{"class":274},[188,1680,1681],{"class":237},"(input)))\n",[188,1683,1684],{"class":190,"line":548},[188,1685,260],{"emptyLinePlaceholder":259},[188,1687,1688,1690,1693,1695,1697,1699,1701,1703,1705,1707],{"class":190,"line":554},[188,1689,266],{"class":202},[188,1691,1692],{"class":237}," toggle ",[188,1694,209],{"class":194},[188,1696,657],{"class":194},[188,1698,1635],{"class":408},[188,1700,338],{"class":194},[188,1702,386],{"class":316},[188,1704,468],{"class":194},[188,1706,344],{"class":202},[188,1708,637],{"class":194},[188,1710,1711,1714,1717,1719,1721,1723,1725,1727,1729,1731,1733],{"class":190,"line":560},[188,1712,1713],{"class":202}," const",[188,1715,1716],{"class":237}," filter",[188,1718,503],{"class":194},[188,1720,364],{"class":237},[188,1722,350],{"class":194},[188,1724,369],{"class":274},[188,1726,326],{"class":198},[188,1728,1635],{"class":237},[188,1730,389],{"class":198},[188,1732,383],{"class":227},[188,1734,1735],{"class":316}," ProductFilter\n",[188,1737,1738],{"class":190,"line":566},[188,1739,260],{"emptyLinePlaceholder":259},[188,1741,1742,1745,1747,1749,1751,1754,1756,1758],{"class":190,"line":571},[188,1743,1744],{"class":237}," applied",[188,1746,350],{"class":194},[188,1748,709],{"class":237},[188,1750,503],{"class":194},[188,1752,1753],{"class":274}," isActive",[188,1755,326],{"class":198},[188,1757,1635],{"class":237},[188,1759,478],{"class":198},[188,1761,1762,1765,1767,1769,1771,1773,1775,1777,1780,1782,1784,1786,1788,1790,1793,1795,1797,1799],{"class":190,"line":577},[188,1763,1764],{"class":194}," ?",[188,1766,704],{"class":237},[188,1768,350],{"class":194},[188,1770,709],{"class":237},[188,1772,350],{"class":194},[188,1774,1600],{"class":274},[188,1776,326],{"class":198},[188,1778,1779],{"class":408},"active",[188,1781,344],{"class":202},[188,1783,1663],{"class":274},[188,1785,326],{"class":198},[188,1787,1779],{"class":237},[188,1789,389],{"class":198},[188,1791,1792],{"class":194},"!==",[188,1794,1663],{"class":274},[188,1796,326],{"class":198},[188,1798,1600],{"class":237},[188,1800,1801],{"class":198},"))\n",[188,1803,1804,1807,1809,1812,1814,1816,1818,1820,1822],{"class":190,"line":583},[188,1805,1806],{"class":194}," :",[188,1808,754],{"class":198},[188,1810,1811],{"class":194},"...",[188,1813,1015],{"class":237},[188,1815,350],{"class":194},[188,1817,709],{"class":237},[188,1819,539],{"class":194},[188,1821,1716],{"class":237},[188,1823,1824],{"class":198},"]\n",[188,1826,1827],{"class":190,"line":589},[188,1828,1829],{"class":194},"}\n",[188,1831,1832,1834,1836],{"class":190,"line":595},[188,1833,867],{"class":194},[188,1835,199],{"class":198},[188,1837,221],{"class":194},[188,1839,1840],{"class":190,"line":601},[188,1841,260],{"emptyLinePlaceholder":259},[188,1843,1844,1846,1848],{"class":190,"line":607},[188,1845,195],{"class":194},[188,1847,884],{"class":198},[188,1849,221],{"class":194},[188,1851,1852,1854,1856],{"class":190,"line":612},[188,1853,892],{"class":194},[188,1855,895],{"class":198},[188,1857,221],{"class":194},[188,1859,1860,1862,1864,1866,1868,1870,1873,1875],{"class":190,"line":618},[188,1861,915],{"class":194},[188,1863,144],{"class":198},[188,1865,898],{"class":202},[188,1867,209],{"class":194},[188,1869,212],{"class":194},[188,1871,1872],{"class":215},"mb-2 text-sm font-semibold text-muted",[188,1874,212],{"class":194},[188,1876,221],{"class":194},[188,1878,1879],{"class":190,"line":624},[188,1880,1881],{"class":237}," {{ props.facet.label }}\n",[188,1883,1884,1886,1888],{"class":190,"line":630},[188,1885,1307],{"class":194},[188,1887,144],{"class":198},[188,1889,221],{"class":194},[188,1891,1892],{"class":190,"line":640},[188,1893,260],{"emptyLinePlaceholder":259},[188,1895,1896,1898,1900,1902,1904,1906,1909,1911],{"class":190,"line":662},[188,1897,915],{"class":194},[188,1899,895],{"class":198},[188,1901,898],{"class":202},[188,1903,209],{"class":194},[188,1905,212],{"class":194},[188,1907,1908],{"class":215},"space-y-1",[188,1910,212],{"class":194},[188,1912,221],{"class":194},[188,1914,1915,1917],{"class":190,"line":682},[188,1916,937],{"class":194},[188,1918,1919],{"class":198},"UCheckbox\n",[188,1921,1922,1924,1926,1928,1930,1932,1935,1937,1939,1941,1944],{"class":190,"line":696},[188,1923,1124],{"class":227},[188,1925,209],{"class":194},[188,1927,212],{"class":194},[188,1929,709],{"class":237},[188,1931,1380],{"class":194},[188,1933,1934],{"class":237},"props",[188,1936,350],{"class":194},[188,1938,1155],{"class":237},[188,1940,350],{"class":194},[188,1942,1943],{"class":237},"values",[188,1945,1023],{"class":194},[188,1947,1948,1950,1952,1954,1956,1958,1960,1962],{"class":190,"line":714},[188,1949,1145],{"class":194},[188,1951,1148],{"class":202},[188,1953,209],{"class":194},[188,1955,212],{"class":194},[188,1957,709],{"class":237},[188,1959,350],{"class":194},[188,1961,1160],{"class":237},[188,1963,1023],{"class":194},[188,1965,1966,1968,1971,1973,1975,1978,1980,1982,1984,1986,1988],{"class":190,"line":725},[188,1967,1145],{"class":194},[188,1969,1970],{"class":202},"model-value",[188,1972,209],{"class":194},[188,1974,212],{"class":194},[188,1976,1977],{"class":274},"isActive",[188,1979,326],{"class":194},[188,1981,709],{"class":237},[188,1983,350],{"class":194},[188,1985,1635],{"class":237},[188,1987,468],{"class":194},[188,1989,1023],{"class":194},[188,1991,1992,1994,1997,1999,2002,2004,2006,2008,2010,2012,2014,2016,2018,2021,2023,2025],{"class":190,"line":746},[188,1993,1145],{"class":194},[188,1995,1996],{"class":202},"label",[188,1998,209],{"class":194},[188,2000,2001],{"class":194},"\"`${",[188,2003,709],{"class":237},[188,2005,350],{"class":194},[188,2007,1996],{"class":237},[188,2009,457],{"class":194},[188,2011,657],{"class":215},[188,2013,520],{"class":194},[188,2015,709],{"class":237},[188,2017,350],{"class":194},[188,2019,2020],{"class":237},"count",[188,2022,457],{"class":194},[188,2024,468],{"class":215},[188,2026,2027],{"class":194},"`\"\n",[188,2029,2030,2033,2036,2038,2040,2042,2044,2047,2049,2051,2053,2055,2057],{"class":190,"line":774},[188,2031,2032],{"class":194}," @",[188,2034,2035],{"class":202},"update",[188,2037,338],{"class":194},[188,2039,1970],{"class":202},[188,2041,209],{"class":194},[188,2043,212],{"class":194},[188,2045,2046],{"class":274},"toggle",[188,2048,326],{"class":194},[188,2050,709],{"class":237},[188,2052,350],{"class":194},[188,2054,1635],{"class":237},[188,2056,468],{"class":194},[188,2058,1023],{"class":194},[188,2060,2061],{"class":190,"line":781},[188,2062,2063],{"class":194}," \u002F>\n",[188,2065,2066,2068,2070],{"class":190,"line":786},[188,2067,1307],{"class":194},[188,2069,895],{"class":198},[188,2071,221],{"class":194},[188,2073,2074,2076,2078],{"class":190,"line":827},[188,2075,1447],{"class":194},[188,2077,895],{"class":198},[188,2079,221],{"class":194},[188,2081,2082,2084,2086],{"class":190,"line":864},[188,2083,867],{"class":194},[188,2085,884],{"class":198},[188,2087,221],{"class":194},[178,2089,2092],{"className":180,"code":2090,"filename":2091,"language":182,"meta":183,"style":183},"\u003Cscript setup lang=\"ts\">\nimport type { ProductFilter } from '#shopify\u002Fstorefront'\n\nconst props = defineProps\u003C{\n facet: FilterFieldsFragment\n}>()\n\nconst applied = defineModel\u003CProductFilter[]>({ required: true })\n\nconst bounds = computed(() => JSON.parse(props.facet.values[0]?.input ?? '{}').price ?? {})\n\nconst from = ref('')\nconst to = ref('')\n\nconst apply = () => {\n const min = from.value === '' ? undefined : Number(from.value)\n const max = to.value === '' ? undefined : Number(to.value)\n const others = applied.value.filter(filter => !filter.price)\n\n applied.value = min === undefined && max === undefined\n ? others\n : [...others, { price: { min, max } }]\n}\n\nwatch(applied, (filters) => {\n const price = filters.find(filter => filter.price)?.price\n\n from.value = price?.min?.toString() ?? ''\n to.value = price?.max?.toString() ?? ''\n}, { immediate: true })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cp class=\"mb-2 text-sm font-semibold text-muted\">\n {{ facet.label }}\n \u003C\u002Fp>\n\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003CUInput\n v-model=\"from\"\n type=\"number\"\n :placeholder=\"`${bounds.min ?? 0}`\"\n class=\"w-full\"\n @keyup.enter=\"apply\"\n \u002F>\n\n \u003Cspan class=\"text-muted\">-\u003C\u002Fspan>\n\n \u003CUInput\n v-model=\"to\"\n type=\"number\"\n :placeholder=\"`${bounds.max ?? ''}`\"\n class=\"w-full\"\n @keyup.enter=\"apply\"\n \u002F>\n\n \u003CUButton\n icon=\"i-lucide-arrow-right\"\n color=\"neutral\"\n aria-label=\"Apply price range\"\n @click=\"apply\"\n \u002F>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FFilterPrice.vue",[185,2093,2094,2114,2134,2138,2150,2158,2164,2168,2200,2204,2272,2276,2295,2312,2316,2331,2374,2413,2450,2454,2480,2487,2521,2525,2529,2550,2584,2588,2619,2647,2665,2673,2677,2685,2693,2711,2716,2724,2728,2747,2754,2767,2781,2808,2822,2843,2847,2851,2879,2883,2889,2901,2913,2935,2947,2965,2969,2973,2979,2993,3007,3021,3035,3039,3047,3055],{"__ignoreMap":183},[188,2095,2096,2098,2100,2102,2104,2106,2108,2110,2112],{"class":190,"line":191},[188,2097,195],{"class":194},[188,2099,199],{"class":198},[188,2101,203],{"class":202},[188,2103,206],{"class":202},[188,2105,209],{"class":194},[188,2107,212],{"class":194},[188,2109,216],{"class":215},[188,2111,212],{"class":194},[188,2113,221],{"class":194},[188,2115,2116,2118,2120,2122,2124,2126,2128,2130,2132],{"class":190,"line":224},[188,2117,228],{"class":227},[188,2119,231],{"class":227},[188,2121,234],{"class":194},[188,2123,238],{"class":237},[188,2125,241],{"class":194},[188,2127,244],{"class":227},[188,2129,247],{"class":194},[188,2131,250],{"class":215},[188,2133,253],{"class":194},[188,2135,2136],{"class":190,"line":256},[188,2137,260],{"emptyLinePlaceholder":259},[188,2139,2140,2142,2144,2146,2148],{"class":190,"line":263},[188,2141,266],{"class":202},[188,2143,1517],{"class":237},[188,2145,209],{"class":194},[188,2147,1522],{"class":274},[188,2149,1525],{"class":194},[188,2151,2152,2154,2156],{"class":190,"line":281},[188,2153,1530],{"class":198},[188,2155,338],{"class":194},[188,2157,1535],{"class":316},[188,2159,2160,2162],{"class":190,"line":296},[188,2161,1540],{"class":194},[188,2163,278],{"class":237},[188,2165,2166],{"class":190,"line":301},[188,2167,260],{"emptyLinePlaceholder":259},[188,2169,2170,2172,2174,2176,2178,2180,2182,2184,2186,2188,2190,2192,2194,2196,2198],{"class":190,"line":332},[188,2171,266],{"class":202},[188,2173,306],{"class":237},[188,2175,209],{"class":194},[188,2177,1557],{"class":274},[188,2179,195],{"class":194},[188,2181,317],{"class":316},[188,2183,320],{"class":237},[188,2185,323],{"class":194},[188,2187,326],{"class":237},[188,2189,424],{"class":194},[188,2191,1572],{"class":198},[188,2193,338],{"class":194},[188,2195,1578],{"class":1577},[188,2197,241],{"class":194},[188,2199,478],{"class":237},[188,2201,2202],{"class":190,"line":400},[188,2203,260],{"emptyLinePlaceholder":259},[188,2205,2206,2208,2211,2213,2215,2217,2219,2221,2223,2225,2227,2230,2232,2234,2236,2239,2242,2245,2247,2250,2252,2254,2257,2259,2261,2263,2266,2268,2270],{"class":190,"line":473},[188,2207,266],{"class":202},[188,2209,2210],{"class":237}," bounds ",[188,2212,209],{"class":194},[188,2214,311],{"class":274},[188,2216,326],{"class":237},[188,2218,652],{"class":194},[188,2220,344],{"class":202},[188,2222,364],{"class":237},[188,2224,350],{"class":194},[188,2226,369],{"class":274},[188,2228,2229],{"class":237},"(props",[188,2231,350],{"class":194},[188,2233,1155],{"class":237},[188,2235,350],{"class":194},[188,2237,2238],{"class":237},"values[",[188,2240,2241],{"class":690},"0",[188,2243,2244],{"class":237},"]",[188,2246,811],{"class":194},[188,2248,2249],{"class":237},"input ",[188,2251,821],{"class":194},[188,2253,247],{"class":194},[188,2255,2256],{"class":215},"{}",[188,2258,1198],{"class":194},[188,2260,468],{"class":237},[188,2262,350],{"class":194},[188,2264,2265],{"class":237},"price ",[188,2267,821],{"class":194},[188,2269,463],{"class":194},[188,2271,478],{"class":237},[188,2273,2274],{"class":190,"line":481},[188,2275,260],{"emptyLinePlaceholder":259},[188,2277,2278,2280,2283,2285,2288,2290,2293],{"class":190,"line":486},[188,2279,266],{"class":202},[188,2281,2282],{"class":237}," from ",[188,2284,209],{"class":194},[188,2286,2287],{"class":274}," ref",[188,2289,326],{"class":237},[188,2291,2292],{"class":194},"''",[188,2294,478],{"class":237},[188,2296,2297,2299,2302,2304,2306,2308,2310],{"class":190,"line":548},[188,2298,266],{"class":202},[188,2300,2301],{"class":237}," to ",[188,2303,209],{"class":194},[188,2305,2287],{"class":274},[188,2307,326],{"class":237},[188,2309,2292],{"class":194},[188,2311,478],{"class":237},[188,2313,2314],{"class":190,"line":554},[188,2315,260],{"emptyLinePlaceholder":259},[188,2317,2318,2320,2323,2325,2327,2329],{"class":190,"line":560},[188,2319,266],{"class":202},[188,2321,2322],{"class":237}," apply ",[188,2324,209],{"class":194},[188,2326,341],{"class":194},[188,2328,344],{"class":202},[188,2330,637],{"class":194},[188,2332,2333,2335,2338,2340,2342,2344,2346,2349,2352,2355,2358,2360,2363,2365,2368,2370,2372],{"class":190,"line":566},[188,2334,1713],{"class":202},[188,2336,2337],{"class":237}," min",[188,2339,503],{"class":194},[188,2341,244],{"class":237},[188,2343,350],{"class":194},[188,2345,709],{"class":237},[188,2347,2348],{"class":194}," ===",[188,2350,2351],{"class":194}," ''",[188,2353,2354],{"class":194}," ?",[188,2356,2357],{"class":194}," undefined",[188,2359,460],{"class":194},[188,2361,2362],{"class":274}," Number",[188,2364,326],{"class":198},[188,2366,2367],{"class":237},"from",[188,2369,350],{"class":194},[188,2371,709],{"class":237},[188,2373,478],{"class":198},[188,2375,2376,2378,2381,2383,2386,2388,2390,2392,2394,2396,2398,2400,2402,2404,2407,2409,2411],{"class":190,"line":571},[188,2377,1713],{"class":202},[188,2379,2380],{"class":237}," max",[188,2382,503],{"class":194},[188,2384,2385],{"class":237}," to",[188,2387,350],{"class":194},[188,2389,709],{"class":237},[188,2391,2348],{"class":194},[188,2393,2351],{"class":194},[188,2395,2354],{"class":194},[188,2397,2357],{"class":194},[188,2399,460],{"class":194},[188,2401,2362],{"class":274},[188,2403,326],{"class":198},[188,2405,2406],{"class":237},"to",[188,2408,350],{"class":194},[188,2410,709],{"class":237},[188,2412,478],{"class":198},[188,2414,2415,2417,2420,2422,2424,2426,2428,2430,2432,2434,2436,2438,2441,2443,2445,2448],{"class":190,"line":577},[188,2416,1713],{"class":202},[188,2418,2419],{"class":237}," others",[188,2421,503],{"class":194},[188,2423,704],{"class":237},[188,2425,350],{"class":194},[188,2427,709],{"class":237},[188,2429,350],{"class":194},[188,2431,1600],{"class":274},[188,2433,326],{"class":198},[188,2435,1600],{"class":408},[188,2437,344],{"class":202},[188,2439,2440],{"class":194}," !",[188,2442,1600],{"class":237},[188,2444,350],{"class":194},[188,2446,2447],{"class":237},"price",[188,2449,478],{"class":198},[188,2451,2452],{"class":190,"line":583},[188,2453,260],{"emptyLinePlaceholder":259},[188,2455,2456,2458,2460,2462,2464,2466,2468,2470,2473,2475,2477],{"class":190,"line":589},[188,2457,1744],{"class":237},[188,2459,350],{"class":194},[188,2461,709],{"class":237},[188,2463,503],{"class":194},[188,2465,2337],{"class":237},[188,2467,2348],{"class":194},[188,2469,2357],{"class":194},[188,2471,2472],{"class":194}," &&",[188,2474,2380],{"class":237},[188,2476,2348],{"class":194},[188,2478,2479],{"class":194}," undefined\n",[188,2481,2482,2484],{"class":190,"line":595},[188,2483,1764],{"class":194},[188,2485,2486],{"class":237}," others\n",[188,2488,2489,2491,2493,2495,2498,2500,2502,2505,2507,2509,2511,2513,2515,2517,2519],{"class":190,"line":601},[188,2490,1806],{"class":194},[188,2492,754],{"class":198},[188,2494,1811],{"class":194},[188,2496,2497],{"class":237},"others",[188,2499,539],{"class":194},[188,2501,234],{"class":194},[188,2503,2504],{"class":198}," price",[188,2506,338],{"class":194},[188,2508,234],{"class":194},[188,2510,2337],{"class":237},[188,2512,539],{"class":194},[188,2514,2380],{"class":237},[188,2516,241],{"class":194},[188,2518,241],{"class":194},[188,2520,1824],{"class":198},[188,2522,2523],{"class":190,"line":607},[188,2524,1829],{"class":194},[188,2526,2527],{"class":190,"line":612},[188,2528,260],{"emptyLinePlaceholder":259},[188,2530,2531,2534,2537,2539,2541,2544,2546,2548],{"class":190,"line":618},[188,2532,2533],{"class":274},"watch",[188,2535,2536],{"class":237},"(applied",[188,2538,539],{"class":194},[188,2540,657],{"class":194},[188,2542,2543],{"class":408},"filters",[188,2545,468],{"class":194},[188,2547,344],{"class":202},[188,2549,637],{"class":194},[188,2551,2552,2554,2556,2558,2560,2562,2565,2567,2569,2571,2573,2575,2577,2579,2581],{"class":190,"line":624},[188,2553,1713],{"class":202},[188,2555,2504],{"class":237},[188,2557,503],{"class":194},[188,2559,409],{"class":237},[188,2561,350],{"class":194},[188,2563,2564],{"class":274},"find",[188,2566,326],{"class":198},[188,2568,1600],{"class":408},[188,2570,344],{"class":202},[188,2572,1716],{"class":237},[188,2574,350],{"class":194},[188,2576,2447],{"class":237},[188,2578,468],{"class":198},[188,2580,811],{"class":194},[188,2582,2583],{"class":237},"price\n",[188,2585,2586],{"class":190,"line":630},[188,2587,260],{"emptyLinePlaceholder":259},[188,2589,2590,2593,2595,2597,2599,2601,2603,2606,2608,2611,2614,2616],{"class":190,"line":640},[188,2591,2592],{"class":237}," from",[188,2594,350],{"class":194},[188,2596,709],{"class":237},[188,2598,503],{"class":194},[188,2600,2504],{"class":237},[188,2602,811],{"class":194},[188,2604,2605],{"class":237},"min",[188,2607,811],{"class":194},[188,2609,2610],{"class":274},"toString",[188,2612,2613],{"class":198},"() ",[188,2615,821],{"class":194},[188,2617,2618],{"class":194}," ''\n",[188,2620,2621,2624,2626,2628,2630,2632,2634,2637,2639,2641,2643,2645],{"class":190,"line":662},[188,2622,2623],{"class":237}," to",[188,2625,350],{"class":194},[188,2627,709],{"class":237},[188,2629,503],{"class":194},[188,2631,2504],{"class":237},[188,2633,811],{"class":194},[188,2635,2636],{"class":237},"max",[188,2638,811],{"class":194},[188,2640,2610],{"class":274},[188,2642,2613],{"class":198},[188,2644,821],{"class":194},[188,2646,2618],{"class":194},[188,2648,2649,2652,2654,2657,2659,2661,2663],{"class":190,"line":682},[188,2650,2651],{"class":194},"},",[188,2653,234],{"class":194},[188,2655,2656],{"class":198}," immediate",[188,2658,338],{"class":194},[188,2660,1578],{"class":1577},[188,2662,241],{"class":194},[188,2664,478],{"class":237},[188,2666,2667,2669,2671],{"class":190,"line":696},[188,2668,867],{"class":194},[188,2670,199],{"class":198},[188,2672,221],{"class":194},[188,2674,2675],{"class":190,"line":714},[188,2676,260],{"emptyLinePlaceholder":259},[188,2678,2679,2681,2683],{"class":190,"line":725},[188,2680,195],{"class":194},[188,2682,884],{"class":198},[188,2684,221],{"class":194},[188,2686,2687,2689,2691],{"class":190,"line":746},[188,2688,892],{"class":194},[188,2690,895],{"class":198},[188,2692,221],{"class":194},[188,2694,2695,2697,2699,2701,2703,2705,2707,2709],{"class":190,"line":774},[188,2696,915],{"class":194},[188,2698,144],{"class":198},[188,2700,898],{"class":202},[188,2702,209],{"class":194},[188,2704,212],{"class":194},[188,2706,1872],{"class":215},[188,2708,212],{"class":194},[188,2710,221],{"class":194},[188,2712,2713],{"class":190,"line":781},[188,2714,2715],{"class":237}," {{ facet.label }}\n",[188,2717,2718,2720,2722],{"class":190,"line":786},[188,2719,1307],{"class":194},[188,2721,144],{"class":198},[188,2723,221],{"class":194},[188,2725,2726],{"class":190,"line":827},[188,2727,260],{"emptyLinePlaceholder":259},[188,2729,2730,2732,2734,2736,2738,2740,2743,2745],{"class":190,"line":864},[188,2731,915],{"class":194},[188,2733,895],{"class":198},[188,2735,898],{"class":202},[188,2737,209],{"class":194},[188,2739,212],{"class":194},[188,2741,2742],{"class":215},"flex items-center gap-2",[188,2744,212],{"class":194},[188,2746,221],{"class":194},[188,2748,2749,2751],{"class":190,"line":874},[188,2750,937],{"class":194},[188,2752,2753],{"class":198},"UInput\n",[188,2755,2756,2759,2761,2763,2765],{"class":190,"line":879},[188,2757,2758],{"class":202}," v-model",[188,2760,209],{"class":194},[188,2762,212],{"class":194},[188,2764,2367],{"class":237},[188,2766,1023],{"class":194},[188,2768,2769,2772,2774,2776,2779],{"class":190,"line":889},[188,2770,2771],{"class":202}," type",[188,2773,209],{"class":194},[188,2775,212],{"class":194},[188,2777,2778],{"class":215},"number",[188,2780,1023],{"class":194},[188,2782,2783,2785,2788,2790,2792,2795,2797,2800,2802,2805],{"class":190,"line":912},[188,2784,1145],{"class":194},[188,2786,2787],{"class":202},"placeholder",[188,2789,209],{"class":194},[188,2791,2001],{"class":194},[188,2793,2794],{"class":237},"bounds",[188,2796,350],{"class":194},[188,2798,2799],{"class":237},"min ",[188,2801,821],{"class":194},[188,2803,2804],{"class":690}," 0",[188,2806,2807],{"class":194},"}`\"\n",[188,2809,2810,2813,2815,2817,2820],{"class":190,"line":934},[188,2811,2812],{"class":202}," class",[188,2814,209],{"class":194},[188,2816,212],{"class":194},[188,2818,2819],{"class":215},"w-full",[188,2821,1023],{"class":194},[188,2823,2824,2826,2829,2831,2834,2836,2838,2841],{"class":190,"line":955},[188,2825,2032],{"class":194},[188,2827,2828],{"class":202},"keyup",[188,2830,350],{"class":194},[188,2832,2833],{"class":202},"enter",[188,2835,209],{"class":194},[188,2837,212],{"class":194},[188,2839,2840],{"class":237},"apply",[188,2842,1023],{"class":194},[188,2844,2845],{"class":190,"line":976},[188,2846,2063],{"class":194},[188,2848,2849],{"class":190,"line":982},[188,2850,260],{"emptyLinePlaceholder":259},[188,2852,2853,2855,2857,2859,2861,2863,2866,2868,2870,2873,2875,2877],{"class":190,"line":992},[188,2854,937],{"class":194},[188,2856,188],{"class":198},[188,2858,898],{"class":202},[188,2860,209],{"class":194},[188,2862,212],{"class":194},[188,2864,2865],{"class":215},"text-muted",[188,2867,212],{"class":194},[188,2869,323],{"class":194},[188,2871,2872],{"class":237},"-",[188,2874,867],{"class":194},[188,2876,188],{"class":198},[188,2878,221],{"class":194},[188,2880,2881],{"class":190,"line":997},[188,2882,260],{"emptyLinePlaceholder":259},[188,2884,2885,2887],{"class":190,"line":1005},[188,2886,937],{"class":194},[188,2888,2753],{"class":198},[188,2890,2891,2893,2895,2897,2899],{"class":190,"line":1026},[188,2892,2758],{"class":202},[188,2894,209],{"class":194},[188,2896,212],{"class":194},[188,2898,2406],{"class":237},[188,2900,1023],{"class":194},[188,2902,2903,2905,2907,2909,2911],{"class":190,"line":1041},[188,2904,2771],{"class":202},[188,2906,209],{"class":194},[188,2908,212],{"class":194},[188,2910,2778],{"class":215},[188,2912,1023],{"class":194},[188,2914,2915,2917,2919,2921,2923,2925,2927,2930,2932],{"class":190,"line":1056},[188,2916,1145],{"class":194},[188,2918,2787],{"class":202},[188,2920,209],{"class":194},[188,2922,2001],{"class":194},[188,2924,2794],{"class":237},[188,2926,350],{"class":194},[188,2928,2929],{"class":237},"max ",[188,2931,821],{"class":194},[188,2933,2934],{"class":194}," ''}`\"\n",[188,2936,2937,2939,2941,2943,2945],{"class":190,"line":1076},[188,2938,2812],{"class":202},[188,2940,209],{"class":194},[188,2942,212],{"class":194},[188,2944,2819],{"class":215},[188,2946,1023],{"class":194},[188,2948,2949,2951,2953,2955,2957,2959,2961,2963],{"class":190,"line":1082},[188,2950,2032],{"class":194},[188,2952,2828],{"class":202},[188,2954,350],{"class":194},[188,2956,2833],{"class":202},[188,2958,209],{"class":194},[188,2960,212],{"class":194},[188,2962,2840],{"class":237},[188,2964,1023],{"class":194},[188,2966,2967],{"class":190,"line":1088},[188,2968,2063],{"class":194},[188,2970,2971],{"class":190,"line":1098},[188,2972,260],{"emptyLinePlaceholder":259},[188,2974,2975,2977],{"class":190,"line":1108},[188,2976,937],{"class":194},[188,2978,1002],{"class":198},[188,2980,2981,2984,2986,2988,2991],{"class":190,"line":1113},[188,2982,2983],{"class":202}," icon",[188,2985,209],{"class":194},[188,2987,212],{"class":194},[188,2989,2990],{"class":215},"i-lucide-arrow-right",[188,2992,1023],{"class":194},[188,2994,2995,2998,3000,3002,3005],{"class":190,"line":1121},[188,2996,2997],{"class":202}," color",[188,2999,209],{"class":194},[188,3001,212],{"class":194},[188,3003,3004],{"class":215},"neutral",[188,3006,1023],{"class":194},[188,3008,3009,3012,3014,3016,3019],{"class":190,"line":1142},[188,3010,3011],{"class":202}," aria-label",[188,3013,209],{"class":194},[188,3015,212],{"class":194},[188,3017,3018],{"class":215},"Apply price range",[188,3020,1023],{"class":194},[188,3022,3023,3025,3027,3029,3031,3033],{"class":190,"line":1165},[188,3024,2032],{"class":194},[188,3026,1062],{"class":202},[188,3028,209],{"class":194},[188,3030,212],{"class":194},[188,3032,2840],{"class":237},[188,3034,1023],{"class":194},[188,3036,3037],{"class":190,"line":1171},[188,3038,2063],{"class":194},[188,3040,3041,3043,3045],{"class":190,"line":1179},[188,3042,1307],{"class":194},[188,3044,895],{"class":198},[188,3046,221],{"class":194},[188,3048,3049,3051,3053],{"class":190,"line":1207},[188,3050,1447],{"class":194},[188,3052,895],{"class":198},[188,3054,221],{"class":194},[188,3056,3057,3059,3061],{"class":190,"line":1221},[188,3058,867],{"class":194},[188,3060,884],{"class":198},[188,3062,221],{"class":194},[178,3064,3067],{"className":180,"code":3065,"filename":3066,"language":182,"meta":183,"style":183},"\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",[185,3068,3069,3089,3101,3111,3117,3121,3140,3165,3194,3210,3226,3253,3259,3263,3291,3328,3336,3340,3348,3355,3377,3391,3414,3437,3451,3456,3469,3486,3501,3508,3513,3527,3534,3548,3569,3592,3613,3634,3648,3661,3665,3673,3677,3690,3709,3728,3733,3741,3745,3765,3770,3778,3786,3794,3803],{"__ignoreMap":183},[188,3070,3071,3073,3075,3077,3079,3081,3083,3085,3087],{"class":190,"line":191},[188,3072,195],{"class":194},[188,3074,199],{"class":198},[188,3076,203],{"class":202},[188,3078,206],{"class":202},[188,3080,209],{"class":194},[188,3082,212],{"class":194},[188,3084,216],{"class":215},[188,3086,212],{"class":194},[188,3088,221],{"class":194},[188,3090,3091,3093,3095,3097,3099],{"class":190,"line":224},[188,3092,266],{"class":202},[188,3094,1517],{"class":237},[188,3096,209],{"class":194},[188,3098,1522],{"class":274},[188,3100,1525],{"class":194},[188,3102,3103,3106,3108],{"class":190,"line":256},[188,3104,3105],{"class":198}," product",[188,3107,338],{"class":194},[188,3109,3110],{"class":316}," ProductFieldsFragment\n",[188,3112,3113,3115],{"class":190,"line":263},[188,3114,1540],{"class":194},[188,3116,278],{"class":237},[188,3118,3119],{"class":190,"line":281},[188,3120,260],{"emptyLinePlaceholder":259},[188,3122,3123,3125,3128,3130,3132,3134,3136,3138],{"class":190,"line":296},[188,3124,266],{"class":202},[188,3126,3127],{"class":237}," price ",[188,3129,209],{"class":194},[188,3131,311],{"class":274},[188,3133,326],{"class":237},[188,3135,652],{"class":194},[188,3137,344],{"class":202},[188,3139,637],{"class":194},[188,3141,3142,3144,3146,3148,3151,3153,3155,3157,3160,3162],{"class":190,"line":301},[188,3143,1713],{"class":202},[188,3145,2504],{"class":237},[188,3147,503],{"class":194},[188,3149,3150],{"class":237}," props",[188,3152,350],{"class":194},[188,3154,1377],{"class":237},[188,3156,350],{"class":194},[188,3158,3159],{"class":237},"priceRange",[188,3161,350],{"class":194},[188,3163,3164],{"class":237},"minVariantPrice\n",[188,3166,3167,3170,3173,3176,3178,3181,3183,3185,3188,3190,3192],{"class":190,"line":332},[188,3168,3169],{"class":227}," return",[188,3171,3172],{"class":194}," new",[188,3174,3175],{"class":237}," Intl",[188,3177,350],{"class":194},[188,3179,3180],{"class":274},"NumberFormat",[188,3182,326],{"class":198},[188,3184,1198],{"class":194},[188,3186,3187],{"class":215},"en-US",[188,3189,1198],{"class":194},[188,3191,539],{"class":194},[188,3193,637],{"class":194},[188,3195,3196,3199,3201,3203,3206,3208],{"class":190,"line":400},[188,3197,3198],{"class":198}," style",[188,3200,338],{"class":194},[188,3202,247],{"class":194},[188,3204,3205],{"class":215},"currency",[188,3207,1198],{"class":194},[188,3209,397],{"class":194},[188,3211,3212,3215,3217,3219,3221,3224],{"class":190,"line":473},[188,3213,3214],{"class":198}," currency",[188,3216,338],{"class":194},[188,3218,2504],{"class":237},[188,3220,350],{"class":194},[188,3222,3223],{"class":237},"currencyCode",[188,3225,397],{"class":194},[188,3227,3228,3230,3232,3234,3237,3239,3242,3244,3246,3248,3251],{"class":190,"line":481},[188,3229,717],{"class":194},[188,3231,468],{"class":198},[188,3233,350],{"class":194},[188,3235,3236],{"class":274},"format",[188,3238,326],{"class":198},[188,3240,3241],{"class":274},"Number",[188,3243,326],{"class":198},[188,3245,2447],{"class":237},[188,3247,350],{"class":194},[188,3249,3250],{"class":237},"amount",[188,3252,1801],{"class":198},[188,3254,3255,3257],{"class":190,"line":486},[188,3256,457],{"class":194},[188,3258,478],{"class":237},[188,3260,3261],{"class":190,"line":548},[188,3262,260],{"emptyLinePlaceholder":259},[188,3264,3265,3267,3270,3272,3274,3276,3278,3280,3282,3284,3286,3288],{"class":190,"line":554},[188,3266,266],{"class":202},[188,3268,3269],{"class":237}," image ",[188,3271,209],{"class":194},[188,3273,311],{"class":274},[188,3275,326],{"class":237},[188,3277,652],{"class":194},[188,3279,344],{"class":202},[188,3281,3150],{"class":237},[188,3283,350],{"class":194},[188,3285,1377],{"class":237},[188,3287,350],{"class":194},[188,3289,3290],{"class":237},"featuredImage)\n",[188,3292,3293,3295,3297,3299,3301,3303,3305,3307,3309,3312,3314,3316,3318,3320,3322,3324,3326],{"class":190,"line":560},[188,3294,266],{"class":202},[188,3296,2301],{"class":237},[188,3298,209],{"class":194},[188,3300,311],{"class":274},[188,3302,326],{"class":237},[188,3304,652],{"class":194},[188,3306,344],{"class":202},[188,3308,542],{"class":194},[188,3310,3311],{"class":215},"\u002Fproducts\u002F",[188,3313,520],{"class":194},[188,3315,1934],{"class":237},[188,3317,350],{"class":194},[188,3319,1377],{"class":237},[188,3321,350],{"class":194},[188,3323,533],{"class":237},[188,3325,536],{"class":194},[188,3327,478],{"class":237},[188,3329,3330,3332,3334],{"class":190,"line":566},[188,3331,867],{"class":194},[188,3333,199],{"class":198},[188,3335,221],{"class":194},[188,3337,3338],{"class":190,"line":571},[188,3339,260],{"emptyLinePlaceholder":259},[188,3341,3342,3344,3346],{"class":190,"line":577},[188,3343,195],{"class":194},[188,3345,884],{"class":198},[188,3347,221],{"class":194},[188,3349,3350,3352],{"class":190,"line":583},[188,3351,892],{"class":194},[188,3353,3354],{"class":198},"UPageCard\n",[188,3356,3357,3359,3361,3363,3365,3367,3369,3371,3373,3375],{"class":190,"line":589},[188,3358,1806],{"class":194},[188,3360,1148],{"class":202},[188,3362,209],{"class":194},[188,3364,212],{"class":194},[188,3366,1934],{"class":237},[188,3368,350],{"class":194},[188,3370,1377],{"class":237},[188,3372,350],{"class":194},[188,3374,1160],{"class":237},[188,3376,1023],{"class":194},[188,3378,3379,3381,3383,3385,3387,3389],{"class":190,"line":595},[188,3380,1806],{"class":194},[188,3382,2406],{"class":202},[188,3384,209],{"class":194},[188,3386,212],{"class":194},[188,3388,2406],{"class":237},[188,3390,1023],{"class":194},[188,3392,3393,3395,3398,3400,3402,3404,3406,3408,3410,3412],{"class":190,"line":601},[188,3394,1806],{"class":194},[188,3396,3397],{"class":202},"title",[188,3399,209],{"class":194},[188,3401,212],{"class":194},[188,3403,1934],{"class":237},[188,3405,350],{"class":194},[188,3407,1377],{"class":237},[188,3409,350],{"class":194},[188,3411,3397],{"class":237},[188,3413,1023],{"class":194},[188,3415,3416,3418,3421,3423,3425,3427,3429,3431,3433,3435],{"class":190,"line":607},[188,3417,1806],{"class":194},[188,3419,3420],{"class":202},"description",[188,3422,209],{"class":194},[188,3424,212],{"class":194},[188,3426,1934],{"class":237},[188,3428,350],{"class":194},[188,3430,1377],{"class":237},[188,3432,350],{"class":194},[188,3434,3420],{"class":237},[188,3436,1023],{"class":194},[188,3438,3439,3442,3444,3446,3449],{"class":190,"line":612},[188,3440,3441],{"class":202}," orientation",[188,3443,209],{"class":194},[188,3445,212],{"class":194},[188,3447,3448],{"class":215},"vertical",[188,3450,1023],{"class":194},[188,3452,3453],{"class":190,"line":618},[188,3454,3455],{"class":202}," reverse\n",[188,3457,3458,3460,3463,3465,3467],{"class":190,"line":624},[188,3459,1806],{"class":194},[188,3461,3462],{"class":202},"ui",[188,3464,209],{"class":194},[188,3466,212],{"class":194},[188,3468,329],{"class":194},[188,3470,3471,3474,3477,3479,3482,3484],{"class":190,"line":630},[188,3472,3473],{"class":198}," description",[188,3475,3476],{"class":194},": ",[188,3478,1198],{"class":194},[188,3480,3481],{"class":215},"line-clamp-2",[188,3483,1198],{"class":194},[188,3485,397],{"class":194},[188,3487,3488,3491,3493,3495,3497,3499],{"class":190,"line":640},[188,3489,3490],{"class":198}," footer",[188,3492,3476],{"class":194},[188,3494,1198],{"class":194},[188,3496,2819],{"class":215},[188,3498,1198],{"class":194},[188,3500,397],{"class":194},[188,3502,3503,3506],{"class":190,"line":662},[188,3504,3505],{"class":194}," }",[188,3507,1023],{"class":194},[188,3509,3510],{"class":190,"line":682},[188,3511,3512],{"class":194}," >\n",[188,3514,3515,3517,3519,3522,3525],{"class":190,"line":696},[188,3516,915],{"class":194},[188,3518,884],{"class":198},[188,3520,3521],{"class":194}," #",[188,3523,3524],{"class":202},"header",[188,3526,221],{"class":194},[188,3528,3529,3531],{"class":190,"line":714},[188,3530,937],{"class":194},[188,3532,3533],{"class":198},"NuxtImg\n",[188,3535,3536,3539,3541,3543,3546],{"class":190,"line":725},[188,3537,3538],{"class":202}," provider",[188,3540,209],{"class":194},[188,3542,212],{"class":194},[188,3544,3545],{"class":215},"shopify",[188,3547,1023],{"class":194},[188,3549,3550,3552,3555,3557,3559,3562,3564,3567],{"class":190,"line":746},[188,3551,1145],{"class":194},[188,3553,3554],{"class":202},"src",[188,3556,209],{"class":194},[188,3558,212],{"class":194},[188,3560,3561],{"class":237},"image",[188,3563,811],{"class":194},[188,3565,3566],{"class":237},"url",[188,3568,1023],{"class":194},[188,3570,3571,3573,3576,3578,3580,3582,3584,3587,3590],{"class":190,"line":774},[188,3572,1145],{"class":194},[188,3574,3575],{"class":202},"alt",[188,3577,209],{"class":194},[188,3579,212],{"class":194},[188,3581,3561],{"class":237},[188,3583,811],{"class":194},[188,3585,3586],{"class":237},"altText",[188,3588,3589],{"class":194}," ?? undefined",[188,3591,1023],{"class":194},[188,3593,3594,3596,3599,3601,3603,3605,3607,3609,3611],{"class":190,"line":781},[188,3595,1145],{"class":194},[188,3597,3598],{"class":202},"width",[188,3600,209],{"class":194},[188,3602,212],{"class":194},[188,3604,3561],{"class":237},[188,3606,811],{"class":194},[188,3608,3598],{"class":237},[188,3610,3589],{"class":194},[188,3612,1023],{"class":194},[188,3614,3615,3617,3620,3622,3624,3626,3628,3630,3632],{"class":190,"line":786},[188,3616,1145],{"class":194},[188,3618,3619],{"class":202},"height",[188,3621,209],{"class":194},[188,3623,212],{"class":194},[188,3625,3561],{"class":237},[188,3627,811],{"class":194},[188,3629,3619],{"class":237},[188,3631,3589],{"class":194},[188,3633,1023],{"class":194},[188,3635,3636,3639,3641,3643,3646],{"class":190,"line":827},[188,3637,3638],{"class":202}," sizes",[188,3640,209],{"class":194},[188,3642,212],{"class":194},[188,3644,3645],{"class":215},"xs:100vw sm:50vw md:33vw lg:33vw xl:33vw",[188,3647,1023],{"class":194},[188,3649,3650,3652,3654,3656,3659],{"class":190,"line":864},[188,3651,2812],{"class":202},[188,3653,209],{"class":194},[188,3655,212],{"class":194},[188,3657,3658],{"class":215},"rounded-sm",[188,3660,1023],{"class":194},[188,3662,3663],{"class":190,"line":874},[188,3664,2063],{"class":194},[188,3666,3667,3669,3671],{"class":190,"line":879},[188,3668,1307],{"class":194},[188,3670,884],{"class":198},[188,3672,221],{"class":194},[188,3674,3675],{"class":190,"line":889},[188,3676,260],{"emptyLinePlaceholder":259},[188,3678,3679,3681,3683,3685,3688],{"class":190,"line":912},[188,3680,915],{"class":194},[188,3682,884],{"class":198},[188,3684,3521],{"class":194},[188,3686,3687],{"class":202},"footer",[188,3689,221],{"class":194},[188,3691,3692,3694,3696,3698,3700,3702,3705,3707],{"class":190,"line":934},[188,3693,937],{"class":194},[188,3695,895],{"class":198},[188,3697,898],{"class":202},[188,3699,209],{"class":194},[188,3701,212],{"class":194},[188,3703,3704],{"class":215},"flex justify-between items-center w-full",[188,3706,212],{"class":194},[188,3708,221],{"class":194},[188,3710,3711,3713,3715,3717,3719,3721,3724,3726],{"class":190,"line":955},[188,3712,958],{"class":194},[188,3714,895],{"class":198},[188,3716,898],{"class":202},[188,3718,209],{"class":194},[188,3720,212],{"class":194},[188,3722,3723],{"class":215},"font-semibold",[188,3725,212],{"class":194},[188,3727,221],{"class":194},[188,3729,3730],{"class":190,"line":976},[188,3731,3732],{"class":237}," from {{ price }}\n",[188,3734,3735,3737,3739],{"class":190,"line":982},[188,3736,985],{"class":194},[188,3738,895],{"class":198},[188,3740,221],{"class":194},[188,3742,3743],{"class":190,"line":992},[188,3744,260],{"emptyLinePlaceholder":259},[188,3746,3747,3749,3751,3754,3756,3758,3761,3763],{"class":190,"line":997},[188,3748,958],{"class":194},[188,3750,1093],{"class":198},[188,3752,3753],{"class":202}," size",[188,3755,209],{"class":194},[188,3757,212],{"class":194},[188,3759,3760],{"class":215},"sm",[188,3762,212],{"class":194},[188,3764,221],{"class":194},[188,3766,3767],{"class":190,"line":1005},[188,3768,3769],{"class":237}," Add to Cart\n",[188,3771,3772,3774,3776],{"class":190,"line":1026},[188,3773,985],{"class":194},[188,3775,1093],{"class":198},[188,3777,221],{"class":194},[188,3779,3780,3782,3784],{"class":190,"line":1041},[188,3781,1101],{"class":194},[188,3783,895],{"class":198},[188,3785,221],{"class":194},[188,3787,3788,3790,3792],{"class":190,"line":1056},[188,3789,1307],{"class":194},[188,3791,884],{"class":198},[188,3793,221],{"class":194},[188,3795,3796,3798,3801],{"class":190,"line":1076},[188,3797,1447],{"class":194},[188,3799,3800],{"class":198},"UPageCard",[188,3802,221],{"class":194},[188,3804,3805,3807,3809],{"class":190,"line":1082},[188,3806,867],{"class":194},[188,3808,884],{"class":198},[188,3810,221],{"class":194},[178,3812,3816],{"className":3813,"code":3814,"filename":3815,"language":216,"meta":183,"style":183},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export const FILTER_FRAGMENT = `#graphql\n fragment FilterFields on Filter {\n id\n label\n type\n values {\n id\n label\n count\n input\n }\n }\n`\n","graphql\u002Ffilter.ts",[185,3817,3818,3835,3840,3845,3850,3855,3860,3865,3870,3875,3880,3884,3888],{"__ignoreMap":183},[188,3819,3820,3823,3826,3829,3831,3833],{"class":190,"line":191},[188,3821,3822],{"class":227},"export",[188,3824,3825],{"class":202}," const",[188,3827,3828],{"class":237}," FILTER_FRAGMENT ",[188,3830,209],{"class":194},[188,3832,542],{"class":194},[188,3834,545],{"class":215},[188,3836,3837],{"class":190,"line":224},[188,3838,3839],{"class":215}," fragment FilterFields on Filter {\n",[188,3841,3842],{"class":190,"line":256},[188,3843,3844],{"class":215}," id\n",[188,3846,3847],{"class":190,"line":263},[188,3848,3849],{"class":215}," label\n",[188,3851,3852],{"class":190,"line":281},[188,3853,3854],{"class":215}," type\n",[188,3856,3857],{"class":190,"line":296},[188,3858,3859],{"class":215}," values {\n",[188,3861,3862],{"class":190,"line":301},[188,3863,3864],{"class":215}," id\n",[188,3866,3867],{"class":190,"line":332},[188,3868,3869],{"class":215}," label\n",[188,3871,3872],{"class":190,"line":400},[188,3873,3874],{"class":215}," count\n",[188,3876,3877],{"class":190,"line":473},[188,3878,3879],{"class":215}," input\n",[188,3881,3882],{"class":190,"line":481},[188,3883,621],{"class":215},[188,3885,3886],{"class":190,"line":486},[188,3887,627],{"class":215},[188,3889,3890],{"class":190,"line":548},[188,3891,3892],{"class":194},"`\n",[178,3894,3897],{"className":3813,"code":3895,"filename":3896,"language":216,"meta":183,"style":183},"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","graphql\u002Fproduct.ts",[185,3898,3899,3914,3919,3923,3928,3933,3938,3943,3948,3953,3958,3963,3967,3972,3977,3982,3987,3991,3995,3999],{"__ignoreMap":183},[188,3900,3901,3903,3905,3908,3910,3912],{"class":190,"line":191},[188,3902,3822],{"class":227},[188,3904,3825],{"class":202},[188,3906,3907],{"class":237}," PRODUCT_FRAGMENT ",[188,3909,209],{"class":194},[188,3911,542],{"class":194},[188,3913,545],{"class":215},[188,3915,3916],{"class":190,"line":224},[188,3917,3918],{"class":215}," fragment ProductFields on Product {\n",[188,3920,3921],{"class":190,"line":256},[188,3922,3844],{"class":215},[188,3924,3925],{"class":190,"line":263},[188,3926,3927],{"class":215}," handle\n",[188,3929,3930],{"class":190,"line":281},[188,3931,3932],{"class":215}," title\n",[188,3934,3935],{"class":190,"line":296},[188,3936,3937],{"class":215}," description\n",[188,3939,3940],{"class":190,"line":301},[188,3941,3942],{"class":215}," featuredImage {\n",[188,3944,3945],{"class":190,"line":332},[188,3946,3947],{"class":215}," url\n",[188,3949,3950],{"class":190,"line":400},[188,3951,3952],{"class":215}," altText\n",[188,3954,3955],{"class":190,"line":473},[188,3956,3957],{"class":215}," height\n",[188,3959,3960],{"class":190,"line":481},[188,3961,3962],{"class":215}," width\n",[188,3964,3965],{"class":190,"line":486},[188,3966,621],{"class":215},[188,3968,3969],{"class":190,"line":548},[188,3970,3971],{"class":215}," priceRange {\n",[188,3973,3974],{"class":190,"line":554},[188,3975,3976],{"class":215}," minVariantPrice {\n",[188,3978,3979],{"class":190,"line":560},[188,3980,3981],{"class":215}," amount\n",[188,3983,3984],{"class":190,"line":566},[188,3985,3986],{"class":215}," currencyCode\n",[188,3988,3989],{"class":190,"line":571},[188,3990,615],{"class":215},[188,3992,3993],{"class":190,"line":577},[188,3994,621],{"class":215},[188,3996,3997],{"class":190,"line":583},[188,3998,627],{"class":215},[188,4000,4001],{"class":190,"line":589},[188,4002,3892],{"class":194},[144,4004,4005,4006,4009,4010,4013,4014,4017],{},"This example reuses the ",[185,4007,4008],{},"ProductCard"," component and the ",[185,4011,4012],{},"PRODUCT_FRAGMENT"," from the\n",[148,4015,4016],{"href":90},"collection page example",", so it can stay focused on the filtering itself.\nYou also need a collection with a few products, and filters turned on for it in Shopify's Search & Discovery app.",[4019,4020,4022],"h2",{"id":4021},"asking-shopify-for-the-filters","Asking Shopify for the filters",[144,4024,4025,4026,4028,4029,4031,4032,4034],{},"You don't hardcode the list of filters.\nThe ",[185,4027,814],{}," connection has a ",[185,4030,2543],{}," field that returns every filter the collection supports, along with its\n",[185,4033,1192],{},", its values, and how many products match each one:",[178,4036,4040],{"className":4037,"code":4038,"language":4039,"meta":183,"style":183},"language-graphql shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","products(first: $first, filters: $filters) {\n filters {\n ...FilterFields\n }\n nodes {\n ...ProductFields\n }\n}\n","graphql",[185,4041,4042,4072,4079,4087,4091,4098,4105,4109],{"__ignoreMap":183},[188,4043,4044,4046,4048,4051,4053,4056,4058,4060,4062,4064,4066,4068,4070],{"class":190,"line":191},[188,4045,814],{"class":274},[188,4047,326],{"class":237},[188,4049,4050],{"class":408},"first",[188,4052,338],{"class":194},[188,4054,4055],{"class":237}," $",[188,4057,4050],{"class":316},[188,4059,539],{"class":194},[188,4061,409],{"class":408},[188,4063,338],{"class":194},[188,4065,4055],{"class":237},[188,4067,2543],{"class":316},[188,4069,389],{"class":237},[188,4071,329],{"class":194},[188,4073,4074,4077],{"class":190,"line":224},[188,4075,4076],{"class":237}," filters ",[188,4078,329],{"class":194},[188,4080,4081,4084],{"class":190,"line":256},[188,4082,4083],{"class":194}," ...",[188,4085,4086],{"class":237},"FilterFields\n",[188,4088,4089],{"class":190,"line":263},[188,4090,627],{"class":194},[188,4092,4093,4096],{"class":190,"line":281},[188,4094,4095],{"class":237}," nodes ",[188,4097,329],{"class":194},[188,4099,4100,4102],{"class":190,"line":296},[188,4101,4083],{"class":194},[188,4103,4104],{"class":237},"ProductFields\n",[188,4106,4107],{"class":190,"line":301},[188,4108,627],{"class":194},[188,4110,4111],{"class":190,"line":332},[188,4112,1829],{"class":194},[144,4114,4115,4116,4119],{},"We pull the filter fields into a fragment of their own.\nThat keeps the query tidy, and it gives us a ",[185,4117,4118],{},"FilterFieldsFragment"," type to hand to the filter components later:",[178,4121,4122],{"className":3813,"code":3814,"filename":3815,"language":216,"meta":183,"style":183},[185,4123,4124,4138,4142,4146,4150,4154,4158,4162,4166,4170,4174,4178,4182],{"__ignoreMap":183},[188,4125,4126,4128,4130,4132,4134,4136],{"class":190,"line":191},[188,4127,3822],{"class":227},[188,4129,3825],{"class":202},[188,4131,3828],{"class":237},[188,4133,209],{"class":194},[188,4135,542],{"class":194},[188,4137,545],{"class":215},[188,4139,4140],{"class":190,"line":224},[188,4141,3839],{"class":215},[188,4143,4144],{"class":190,"line":256},[188,4145,3844],{"class":215},[188,4147,4148],{"class":190,"line":263},[188,4149,3849],{"class":215},[188,4151,4152],{"class":190,"line":281},[188,4153,3854],{"class":215},[188,4155,4156],{"class":190,"line":296},[188,4157,3859],{"class":215},[188,4159,4160],{"class":190,"line":301},[188,4161,3864],{"class":215},[188,4163,4164],{"class":190,"line":332},[188,4165,3869],{"class":215},[188,4167,4168],{"class":190,"line":400},[188,4169,3874],{"class":215},[188,4171,4172],{"class":190,"line":473},[188,4173,3879],{"class":215},[188,4175,4176],{"class":190,"line":481},[188,4177,621],{"class":215},[188,4179,4180],{"class":190,"line":486},[188,4181,627],{"class":215},[188,4183,4184],{"class":190,"line":548},[188,4185,3892],{"class":194},[144,4187,4188,4189,4191,4192,4194,4195,4197],{},"The ",[185,4190,2543],{}," argument on that same ",[185,4193,814],{}," field is what actually narrows the results.\nIt takes an array of ",[185,4196,317],{}," objects, so an empty array returns everything and a filled one applies each filter\non top of the last.",[4019,4199,4201],{"id":4200},"holding-the-applied-filters","Holding the applied filters",[144,4203,4204,4205,4207,4208,4210,4211,4213,4214,4216],{},"Every value comes with an ",[185,4206,1635],{}," field, which is a small JSON string that already is a valid ",[185,4209,317],{},".\nThe list filters hand that straight back, and the price filter builds one itself.\nEither way we end up with ",[185,4212,317],{}," objects, and we keep them in the URL so a filtered view is shareable and\nsurvives a refresh, the same way the ",[148,4215,150],{"href":90}," keeps its pagination cursor there.",[144,4218,4219,4220,338],{},"We read the list out of the query string and write it back on every change with a single writable ",[185,4221,4222],{},"computed",[178,4224,4226],{"className":3813,"code":4225,"language":216,"meta":183,"style":183},"const applied = computed\u003CProductFilter[]>({\n get: () => route.query.filters ? JSON.parse(route.query.filters as string) : [],\n set: filters => router.push({ query: filters.length ? { filters: JSON.stringify(filters) } : {} }),\n})\n",[185,4227,4228,4250,4300,4358],{"__ignoreMap":183},[188,4229,4230,4232,4234,4236,4238,4240,4242,4244,4246,4248],{"class":190,"line":191},[188,4231,266],{"class":202},[188,4233,306],{"class":237},[188,4235,209],{"class":194},[188,4237,311],{"class":274},[188,4239,195],{"class":194},[188,4241,317],{"class":316},[188,4243,320],{"class":237},[188,4245,323],{"class":194},[188,4247,326],{"class":237},[188,4249,329],{"class":194},[188,4251,4252,4254,4256,4258,4260,4262,4264,4266,4268,4270,4272,4274,4276,4278,4280,4282,4284,4286,4288,4290,4292,4294,4296,4298],{"class":190,"line":224},[188,4253,335],{"class":274},[188,4255,338],{"class":194},[188,4257,341],{"class":194},[188,4259,344],{"class":202},[188,4261,347],{"class":237},[188,4263,350],{"class":194},[188,4265,353],{"class":237},[188,4267,350],{"class":194},[188,4269,358],{"class":237},[188,4271,361],{"class":194},[188,4273,364],{"class":237},[188,4275,350],{"class":194},[188,4277,369],{"class":274},[188,4279,372],{"class":237},[188,4281,350],{"class":194},[188,4283,353],{"class":237},[188,4285,350],{"class":194},[188,4287,358],{"class":237},[188,4289,383],{"class":227},[188,4291,386],{"class":316},[188,4293,389],{"class":237},[188,4295,338],{"class":194},[188,4297,394],{"class":237},[188,4299,397],{"class":194},[188,4301,4302,4304,4306,4308,4310,4312,4314,4316,4318,4320,4322,4324,4326,4328,4330,4332,4334,4336,4338,4340,4342,4344,4346,4348,4350,4352,4354,4356],{"class":190,"line":256},[188,4303,403],{"class":274},[188,4305,338],{"class":194},[188,4307,409],{"class":408},[188,4309,344],{"class":202},[188,4311,414],{"class":237},[188,4313,350],{"class":194},[188,4315,419],{"class":274},[188,4317,326],{"class":237},[188,4319,424],{"class":194},[188,4321,427],{"class":198},[188,4323,338],{"class":194},[188,4325,409],{"class":237},[188,4327,350],{"class":194},[188,4329,436],{"class":237},[188,4331,361],{"class":194},[188,4333,234],{"class":194},[188,4335,409],{"class":198},[188,4337,338],{"class":194},[188,4339,364],{"class":237},[188,4341,350],{"class":194},[188,4343,451],{"class":274},[188,4345,454],{"class":237},[188,4347,457],{"class":194},[188,4349,460],{"class":194},[188,4351,463],{"class":194},[188,4353,241],{"class":194},[188,4355,468],{"class":237},[188,4357,397],{"class":194},[188,4359,4360,4362],{"class":190,"line":263},[188,4361,457],{"class":194},[188,4363,478],{"class":237},[144,4365,4366,4367,4370,4371,4373],{},"Because it's writable, the filter components can keep using ",[185,4368,4369],{},"v-model"," without knowing the state lives in the URL.\nSetting it pushes a new query, and ",[185,4372,2533],{}," on that query param refetches whenever it changes:",[178,4375,4377],{"className":3813,"code":4376,"language":216,"meta":183,"style":183},"const { data: collection } = await useStorefrontData(key, query, {\n variables: computed(() => ({\n handle: route.params.handle,\n first: 12,\n filters: applied.value,\n })),\n transform: data => data.collection,\n watch: [() => route.query.filters],\n})\n",[185,4378,4379,4410,4428,4446,4456,4470,4478,4496,4520],{"__ignoreMap":183},[188,4380,4381,4383,4385,4387,4389,4391,4393,4395,4397,4399,4402,4404,4406,4408],{"class":190,"line":191},[188,4382,266],{"class":202},[188,4384,234],{"class":194},[188,4386,493],{"class":198},[188,4388,338],{"class":194},[188,4390,498],{"class":237},[188,4392,457],{"class":194},[188,4394,503],{"class":194},[188,4396,506],{"class":227},[188,4398,509],{"class":274},[188,4400,4401],{"class":237},"(key",[188,4403,539],{"class":194},[188,4405,427],{"class":237},[188,4407,539],{"class":194},[188,4409,637],{"class":194},[188,4411,4412,4414,4416,4418,4420,4422,4424,4426],{"class":190,"line":224},[188,4413,643],{"class":198},[188,4415,338],{"class":194},[188,4417,311],{"class":274},[188,4419,326],{"class":237},[188,4421,652],{"class":194},[188,4423,344],{"class":202},[188,4425,657],{"class":237},[188,4427,329],{"class":194},[188,4429,4430,4432,4434,4436,4438,4440,4442,4444],{"class":190,"line":256},[188,4431,665],{"class":198},[188,4433,338],{"class":194},[188,4435,347],{"class":237},[188,4437,350],{"class":194},[188,4439,528],{"class":237},[188,4441,350],{"class":194},[188,4443,533],{"class":237},[188,4445,397],{"class":194},[188,4447,4448,4450,4452,4454],{"class":190,"line":263},[188,4449,685],{"class":198},[188,4451,338],{"class":194},[188,4453,691],{"class":690},[188,4455,397],{"class":194},[188,4457,4458,4460,4462,4464,4466,4468],{"class":190,"line":281},[188,4459,699],{"class":198},[188,4461,338],{"class":194},[188,4463,704],{"class":237},[188,4465,350],{"class":194},[188,4467,709],{"class":237},[188,4469,397],{"class":194},[188,4471,4472,4474,4476],{"class":190,"line":296},[188,4473,717],{"class":194},[188,4475,720],{"class":237},[188,4477,397],{"class":194},[188,4479,4480,4482,4484,4486,4488,4490,4492,4494],{"class":190,"line":301},[188,4481,728],{"class":274},[188,4483,338],{"class":194},[188,4485,493],{"class":408},[188,4487,344],{"class":202},[188,4489,493],{"class":237},[188,4491,350],{"class":194},[188,4493,741],{"class":237},[188,4495,397],{"class":194},[188,4497,4498,4500,4502,4504,4506,4508,4510,4512,4514,4516,4518],{"class":190,"line":332},[188,4499,749],{"class":198},[188,4501,338],{"class":194},[188,4503,754],{"class":237},[188,4505,652],{"class":194},[188,4507,344],{"class":202},[188,4509,347],{"class":237},[188,4511,350],{"class":194},[188,4513,353],{"class":237},[188,4515,350],{"class":194},[188,4517,769],{"class":237},[188,4519,397],{"class":194},[188,4521,4522,4524],{"class":190,"line":400},[188,4523,457],{"class":194},[188,4525,478],{"class":237},[4019,4527,4529],{"id":4528},"a-component-per-filter-type","A component per filter type",[144,4531,4532,4533,4535,4536,4538,4539,4541],{},"Each facet carries a ",[185,4534,1192],{},", so instead of one big block we render a component per type and let it own its own bit of\nUI.\nBoth components share the same ",[185,4537,1015],{}," list through ",[185,4540,4369],{},", so any of them can add or remove its own filters:",[178,4543,4547],{"className":4544,"code":4545,"language":4546,"meta":183,"style":183},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate\n v-for=\"facet in facets\"\n :key=\"facet.id\"\n>\n \u003CFilterPrice\n v-if=\"facet.type === 'PRICE_RANGE'\"\n v-model=\"applied\"\n :facet=\"facet\"\n \u002F>\n\n \u003CFilterList\n v-else\n v-model=\"applied\"\n :facet=\"facet\"\n \u002F>\n\u003C\u002Ftemplate>\n","html",[185,4548,4549,4555,4569,4583,4587,4593,4607,4620,4633,4638,4642,4648,4653,4665,4677,4681],{"__ignoreMap":183},[188,4550,4551,4553],{"class":190,"line":191},[188,4552,195],{"class":194},[188,4554,1118],{"class":198},[188,4556,4557,4560,4562,4564,4567],{"class":190,"line":224},[188,4558,4559],{"class":202}," v-for",[188,4561,209],{"class":194},[188,4563,212],{"class":194},[188,4565,4566],{"class":215},"facet in facets",[188,4568,1023],{"class":194},[188,4570,4571,4574,4576,4578,4581],{"class":190,"line":256},[188,4572,4573],{"class":202}," :key",[188,4575,209],{"class":194},[188,4577,212],{"class":194},[188,4579,4580],{"class":215},"facet.id",[188,4582,1023],{"class":194},[188,4584,4585],{"class":190,"line":263},[188,4586,221],{"class":194},[188,4588,4589,4591],{"class":190,"line":281},[188,4590,892],{"class":194},[188,4592,1176],{"class":198},[188,4594,4595,4598,4600,4602,4605],{"class":190,"line":296},[188,4596,4597],{"class":202}," v-if",[188,4599,209],{"class":194},[188,4601,212],{"class":194},[188,4603,4604],{"class":215},"facet.type === 'PRICE_RANGE'",[188,4606,1023],{"class":194},[188,4608,4609,4612,4614,4616,4618],{"class":190,"line":301},[188,4610,4611],{"class":202}," v-model",[188,4613,209],{"class":194},[188,4615,212],{"class":194},[188,4617,1015],{"class":215},[188,4619,1023],{"class":194},[188,4621,4622,4625,4627,4629,4631],{"class":190,"line":332},[188,4623,4624],{"class":202}," :facet",[188,4626,209],{"class":194},[188,4628,212],{"class":194},[188,4630,1155],{"class":215},[188,4632,1023],{"class":194},[188,4634,4635],{"class":190,"line":400},[188,4636,4637],{"class":194}," \u002F>\n",[188,4639,4640],{"class":190,"line":473},[188,4641,260],{"emptyLinePlaceholder":259},[188,4643,4644,4646],{"class":190,"line":481},[188,4645,892],{"class":194},[188,4647,1253],{"class":198},[188,4649,4650],{"class":190,"line":486},[188,4651,4652],{"class":202}," v-else\n",[188,4654,4655,4657,4659,4661,4663],{"class":190,"line":548},[188,4656,4611],{"class":202},[188,4658,209],{"class":194},[188,4660,212],{"class":194},[188,4662,1015],{"class":215},[188,4664,1023],{"class":194},[188,4666,4667,4669,4671,4673,4675],{"class":190,"line":554},[188,4668,4624],{"class":202},[188,4670,209],{"class":194},[188,4672,212],{"class":194},[188,4674,1155],{"class":215},[188,4676,1023],{"class":194},[188,4678,4679],{"class":190,"line":560},[188,4680,4637],{"class":194},[188,4682,4683,4685,4687],{"class":190,"line":566},[188,4684,867],{"class":194},[188,4686,884],{"class":198},[188,4688,221],{"class":194},[144,4690,4691],{},"Supporting another type later is just one more branch and one more small component.",[4019,4693,4695],{"id":4694},"the-list-filter","The list filter",[144,4697,4698,4701,4702,4704,4705,4707],{},[185,4699,4700],{},"LIST"," filters (availability, tags, and the like) are the checkbox kind.\nEach value's ",[185,4703,1635],{}," is the exact ",[185,4706,317],{}," to apply, so ticking a box adds that object to the list and unticking\nit takes it back out:",[178,4709,4710],{"className":180,"code":1463,"filename":1464,"language":182,"meta":183,"style":183},[185,4711,4712,4732,4752,4756,4768,4776,4782,4786,4818,4822,4850,4854,4906,4910,4932,4956,4960,4978,5016,5036,5040,5048,5052,5060,5068,5086,5090,5098,5102,5120,5126,5150,5168,5192,5226,5254,5258,5266,5274],{"__ignoreMap":183},[188,4713,4714,4716,4718,4720,4722,4724,4726,4728,4730],{"class":190,"line":191},[188,4715,195],{"class":194},[188,4717,199],{"class":198},[188,4719,203],{"class":202},[188,4721,206],{"class":202},[188,4723,209],{"class":194},[188,4725,212],{"class":194},[188,4727,216],{"class":215},[188,4729,212],{"class":194},[188,4731,221],{"class":194},[188,4733,4734,4736,4738,4740,4742,4744,4746,4748,4750],{"class":190,"line":224},[188,4735,228],{"class":227},[188,4737,231],{"class":227},[188,4739,234],{"class":194},[188,4741,238],{"class":237},[188,4743,241],{"class":194},[188,4745,244],{"class":227},[188,4747,247],{"class":194},[188,4749,250],{"class":215},[188,4751,253],{"class":194},[188,4753,4754],{"class":190,"line":256},[188,4755,260],{"emptyLinePlaceholder":259},[188,4757,4758,4760,4762,4764,4766],{"class":190,"line":263},[188,4759,266],{"class":202},[188,4761,1517],{"class":237},[188,4763,209],{"class":194},[188,4765,1522],{"class":274},[188,4767,1525],{"class":194},[188,4769,4770,4772,4774],{"class":190,"line":281},[188,4771,1530],{"class":198},[188,4773,338],{"class":194},[188,4775,1535],{"class":316},[188,4777,4778,4780],{"class":190,"line":296},[188,4779,1540],{"class":194},[188,4781,278],{"class":237},[188,4783,4784],{"class":190,"line":301},[188,4785,260],{"emptyLinePlaceholder":259},[188,4787,4788,4790,4792,4794,4796,4798,4800,4802,4804,4806,4808,4810,4812,4814,4816],{"class":190,"line":332},[188,4789,266],{"class":202},[188,4791,306],{"class":237},[188,4793,209],{"class":194},[188,4795,1557],{"class":274},[188,4797,195],{"class":194},[188,4799,317],{"class":316},[188,4801,320],{"class":237},[188,4803,323],{"class":194},[188,4805,326],{"class":237},[188,4807,424],{"class":194},[188,4809,1572],{"class":198},[188,4811,338],{"class":194},[188,4813,1578],{"class":1577},[188,4815,241],{"class":194},[188,4817,478],{"class":237},[188,4819,4820],{"class":190,"line":400},[188,4821,260],{"emptyLinePlaceholder":259},[188,4823,4824,4826,4828,4830,4832,4834,4836,4838,4840,4842,4844,4846,4848],{"class":190,"line":473},[188,4825,266],{"class":202},[188,4827,1593],{"class":237},[188,4829,209],{"class":194},[188,4831,657],{"class":194},[188,4833,1600],{"class":408},[188,4835,338],{"class":194},[188,4837,238],{"class":316},[188,4839,468],{"class":194},[188,4841,344],{"class":202},[188,4843,364],{"class":237},[188,4845,350],{"class":194},[188,4847,451],{"class":274},[188,4849,1617],{"class":237},[188,4851,4852],{"class":190,"line":481},[188,4853,260],{"emptyLinePlaceholder":259},[188,4855,4856,4858,4860,4862,4864,4866,4868,4870,4872,4874,4876,4878,4880,4882,4884,4886,4888,4890,4892,4894,4896,4898,4900,4902,4904],{"class":190,"line":486},[188,4857,266],{"class":202},[188,4859,1628],{"class":237},[188,4861,209],{"class":194},[188,4863,657],{"class":194},[188,4865,1635],{"class":408},[188,4867,338],{"class":194},[188,4869,386],{"class":316},[188,4871,468],{"class":194},[188,4873,344],{"class":202},[188,4875,704],{"class":237},[188,4877,350],{"class":194},[188,4879,709],{"class":237},[188,4881,350],{"class":194},[188,4883,1654],{"class":274},[188,4885,326],{"class":237},[188,4887,1600],{"class":408},[188,4889,344],{"class":202},[188,4891,1663],{"class":274},[188,4893,1666],{"class":237},[188,4895,1669],{"class":194},[188,4897,1663],{"class":274},[188,4899,1674],{"class":237},[188,4901,350],{"class":194},[188,4903,369],{"class":274},[188,4905,1681],{"class":237},[188,4907,4908],{"class":190,"line":548},[188,4909,260],{"emptyLinePlaceholder":259},[188,4911,4912,4914,4916,4918,4920,4922,4924,4926,4928,4930],{"class":190,"line":554},[188,4913,266],{"class":202},[188,4915,1692],{"class":237},[188,4917,209],{"class":194},[188,4919,657],{"class":194},[188,4921,1635],{"class":408},[188,4923,338],{"class":194},[188,4925,386],{"class":316},[188,4927,468],{"class":194},[188,4929,344],{"class":202},[188,4931,637],{"class":194},[188,4933,4934,4936,4938,4940,4942,4944,4946,4948,4950,4952,4954],{"class":190,"line":560},[188,4935,1713],{"class":202},[188,4937,1716],{"class":237},[188,4939,503],{"class":194},[188,4941,364],{"class":237},[188,4943,350],{"class":194},[188,4945,369],{"class":274},[188,4947,326],{"class":198},[188,4949,1635],{"class":237},[188,4951,389],{"class":198},[188,4953,383],{"class":227},[188,4955,1735],{"class":316},[188,4957,4958],{"class":190,"line":566},[188,4959,260],{"emptyLinePlaceholder":259},[188,4961,4962,4964,4966,4968,4970,4972,4974,4976],{"class":190,"line":571},[188,4963,1744],{"class":237},[188,4965,350],{"class":194},[188,4967,709],{"class":237},[188,4969,503],{"class":194},[188,4971,1753],{"class":274},[188,4973,326],{"class":198},[188,4975,1635],{"class":237},[188,4977,478],{"class":198},[188,4979,4980,4982,4984,4986,4988,4990,4992,4994,4996,4998,5000,5002,5004,5006,5008,5010,5012,5014],{"class":190,"line":577},[188,4981,1764],{"class":194},[188,4983,704],{"class":237},[188,4985,350],{"class":194},[188,4987,709],{"class":237},[188,4989,350],{"class":194},[188,4991,1600],{"class":274},[188,4993,326],{"class":198},[188,4995,1779],{"class":408},[188,4997,344],{"class":202},[188,4999,1663],{"class":274},[188,5001,326],{"class":198},[188,5003,1779],{"class":237},[188,5005,389],{"class":198},[188,5007,1792],{"class":194},[188,5009,1663],{"class":274},[188,5011,326],{"class":198},[188,5013,1600],{"class":237},[188,5015,1801],{"class":198},[188,5017,5018,5020,5022,5024,5026,5028,5030,5032,5034],{"class":190,"line":583},[188,5019,1806],{"class":194},[188,5021,754],{"class":198},[188,5023,1811],{"class":194},[188,5025,1015],{"class":237},[188,5027,350],{"class":194},[188,5029,709],{"class":237},[188,5031,539],{"class":194},[188,5033,1716],{"class":237},[188,5035,1824],{"class":198},[188,5037,5038],{"class":190,"line":589},[188,5039,1829],{"class":194},[188,5041,5042,5044,5046],{"class":190,"line":595},[188,5043,867],{"class":194},[188,5045,199],{"class":198},[188,5047,221],{"class":194},[188,5049,5050],{"class":190,"line":601},[188,5051,260],{"emptyLinePlaceholder":259},[188,5053,5054,5056,5058],{"class":190,"line":607},[188,5055,195],{"class":194},[188,5057,884],{"class":198},[188,5059,221],{"class":194},[188,5061,5062,5064,5066],{"class":190,"line":612},[188,5063,892],{"class":194},[188,5065,895],{"class":198},[188,5067,221],{"class":194},[188,5069,5070,5072,5074,5076,5078,5080,5082,5084],{"class":190,"line":618},[188,5071,915],{"class":194},[188,5073,144],{"class":198},[188,5075,898],{"class":202},[188,5077,209],{"class":194},[188,5079,212],{"class":194},[188,5081,1872],{"class":215},[188,5083,212],{"class":194},[188,5085,221],{"class":194},[188,5087,5088],{"class":190,"line":624},[188,5089,1881],{"class":237},[188,5091,5092,5094,5096],{"class":190,"line":630},[188,5093,1307],{"class":194},[188,5095,144],{"class":198},[188,5097,221],{"class":194},[188,5099,5100],{"class":190,"line":640},[188,5101,260],{"emptyLinePlaceholder":259},[188,5103,5104,5106,5108,5110,5112,5114,5116,5118],{"class":190,"line":662},[188,5105,915],{"class":194},[188,5107,895],{"class":198},[188,5109,898],{"class":202},[188,5111,209],{"class":194},[188,5113,212],{"class":194},[188,5115,1908],{"class":215},[188,5117,212],{"class":194},[188,5119,221],{"class":194},[188,5121,5122,5124],{"class":190,"line":682},[188,5123,937],{"class":194},[188,5125,1919],{"class":198},[188,5127,5128,5130,5132,5134,5136,5138,5140,5142,5144,5146,5148],{"class":190,"line":696},[188,5129,1124],{"class":227},[188,5131,209],{"class":194},[188,5133,212],{"class":194},[188,5135,709],{"class":237},[188,5137,1380],{"class":194},[188,5139,1934],{"class":237},[188,5141,350],{"class":194},[188,5143,1155],{"class":237},[188,5145,350],{"class":194},[188,5147,1943],{"class":237},[188,5149,1023],{"class":194},[188,5151,5152,5154,5156,5158,5160,5162,5164,5166],{"class":190,"line":714},[188,5153,1145],{"class":194},[188,5155,1148],{"class":202},[188,5157,209],{"class":194},[188,5159,212],{"class":194},[188,5161,709],{"class":237},[188,5163,350],{"class":194},[188,5165,1160],{"class":237},[188,5167,1023],{"class":194},[188,5169,5170,5172,5174,5176,5178,5180,5182,5184,5186,5188,5190],{"class":190,"line":725},[188,5171,1145],{"class":194},[188,5173,1970],{"class":202},[188,5175,209],{"class":194},[188,5177,212],{"class":194},[188,5179,1977],{"class":274},[188,5181,326],{"class":194},[188,5183,709],{"class":237},[188,5185,350],{"class":194},[188,5187,1635],{"class":237},[188,5189,468],{"class":194},[188,5191,1023],{"class":194},[188,5193,5194,5196,5198,5200,5202,5204,5206,5208,5210,5212,5214,5216,5218,5220,5222,5224],{"class":190,"line":746},[188,5195,1145],{"class":194},[188,5197,1996],{"class":202},[188,5199,209],{"class":194},[188,5201,2001],{"class":194},[188,5203,709],{"class":237},[188,5205,350],{"class":194},[188,5207,1996],{"class":237},[188,5209,457],{"class":194},[188,5211,657],{"class":215},[188,5213,520],{"class":194},[188,5215,709],{"class":237},[188,5217,350],{"class":194},[188,5219,2020],{"class":237},[188,5221,457],{"class":194},[188,5223,468],{"class":215},[188,5225,2027],{"class":194},[188,5227,5228,5230,5232,5234,5236,5238,5240,5242,5244,5246,5248,5250,5252],{"class":190,"line":774},[188,5229,2032],{"class":194},[188,5231,2035],{"class":202},[188,5233,338],{"class":194},[188,5235,1970],{"class":202},[188,5237,209],{"class":194},[188,5239,212],{"class":194},[188,5241,2046],{"class":274},[188,5243,326],{"class":194},[188,5245,709],{"class":237},[188,5247,350],{"class":194},[188,5249,1635],{"class":237},[188,5251,468],{"class":194},[188,5253,1023],{"class":194},[188,5255,5256],{"class":190,"line":781},[188,5257,2063],{"class":194},[188,5259,5260,5262,5264],{"class":190,"line":786},[188,5261,1307],{"class":194},[188,5263,895],{"class":198},[188,5265,221],{"class":194},[188,5267,5268,5270,5272],{"class":190,"line":827},[188,5269,1447],{"class":194},[188,5271,895],{"class":198},[188,5273,221],{"class":194},[188,5275,5276,5278,5280],{"class":190,"line":864},[188,5277,867],{"class":194},[188,5279,884],{"class":198},[188,5281,221],{"class":194},[4019,5283,5285],{"id":5284},"the-price-filter","The price filter",[144,5287,5288,5290,5291,5293,5294,5297],{},[185,5289,1201],{}," filters are different.\nThey come back as a single value whose ",[185,5292,1635],{}," holds the available range, something like ",[185,5295,5296],{},"{\"price\":{\"min\":0,\"max\":1000}}",".\nThat is no use as a checkbox, so we read those numbers as the bounds and show a from and to input instead.",[144,5299,5300,5301,5303],{},"When the shopper applies a range we build the ",[185,5302,317],{}," ourselves, drop any empty side, and swap out whatever\nprice filter was there before:",[178,5305,5307],{"className":180,"code":5306,"filename":2091,"language":182,"meta":183,"style":183},"\u003Cscript setup lang=\"ts\">\nimport type { ProductFilter } from '#shopify\u002Fstorefront'\n\nconst props = defineProps\u003C{\n facet: FilterFieldsFragment\n}>()\n\nconst applied = defineModel\u003CProductFilter[]>({ required: true })\n\nconst bounds = computed(() => JSON.parse(props.facet.values[0]?.input ?? '{}').price ?? {})\n\nconst from = ref('')\nconst to = ref('')\n\nconst apply = () => {\n const min = from.value === '' ? undefined : Number(from.value)\n const max = to.value === '' ? undefined : Number(to.value)\n const others = applied.value.filter(filter => !filter.price)\n\n applied.value = min === undefined && max === undefined\n ? others\n : [...others, { price: { min, max } }]\n}\n\nwatch(applied, (filters) => {\n const price = filters.find(filter => filter.price)?.price\n\n from.value = price?.min?.toString() ?? ''\n to.value = price?.max?.toString() ?? ''\n}, { immediate: true })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cp class=\"mb-2 text-sm font-semibold text-muted\">\n {{ props.facet.label }}\n \u003C\u002Fp>\n\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003CUInput\n v-model=\"from\"\n type=\"number\"\n :placeholder=\"`${bounds.min ?? 0}`\"\n class=\"w-full\"\n @keyup.enter=\"apply\"\n \u002F>\n\n \u003Cspan class=\"text-muted\">-\u003C\u002Fspan>\n\n \u003CUInput\n v-model=\"to\"\n type=\"number\"\n :placeholder=\"`${bounds.max ?? ''}`\"\n class=\"w-full\"\n @keyup.enter=\"apply\"\n \u002F>\n\n \u003CUButton\n icon=\"i-lucide-arrow-right\"\n color=\"neutral\"\n aria-label=\"Apply price range\"\n @click=\"apply\"\n \u002F>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[185,5308,5309,5329,5349,5353,5365,5373,5379,5383,5415,5419,5479,5483,5499,5515,5519,5533,5569,5605,5639,5643,5667,5673,5705,5709,5713,5731,5763,5767,5793,5819,5835,5843,5847,5855,5863,5881,5885,5893,5897,5915,5921,5933,5945,5967,5979,5997,6001,6005,6031,6035,6041,6053,6065,6085,6097,6115,6119,6123,6129,6141,6153,6165,6179,6183,6191,6199],{"__ignoreMap":183},[188,5310,5311,5313,5315,5317,5319,5321,5323,5325,5327],{"class":190,"line":191},[188,5312,195],{"class":194},[188,5314,199],{"class":198},[188,5316,203],{"class":202},[188,5318,206],{"class":202},[188,5320,209],{"class":194},[188,5322,212],{"class":194},[188,5324,216],{"class":215},[188,5326,212],{"class":194},[188,5328,221],{"class":194},[188,5330,5331,5333,5335,5337,5339,5341,5343,5345,5347],{"class":190,"line":224},[188,5332,228],{"class":227},[188,5334,231],{"class":227},[188,5336,234],{"class":194},[188,5338,238],{"class":237},[188,5340,241],{"class":194},[188,5342,244],{"class":227},[188,5344,247],{"class":194},[188,5346,250],{"class":215},[188,5348,253],{"class":194},[188,5350,5351],{"class":190,"line":256},[188,5352,260],{"emptyLinePlaceholder":259},[188,5354,5355,5357,5359,5361,5363],{"class":190,"line":263},[188,5356,266],{"class":202},[188,5358,1517],{"class":237},[188,5360,209],{"class":194},[188,5362,1522],{"class":274},[188,5364,1525],{"class":194},[188,5366,5367,5369,5371],{"class":190,"line":281},[188,5368,1530],{"class":198},[188,5370,338],{"class":194},[188,5372,1535],{"class":316},[188,5374,5375,5377],{"class":190,"line":296},[188,5376,1540],{"class":194},[188,5378,278],{"class":237},[188,5380,5381],{"class":190,"line":301},[188,5382,260],{"emptyLinePlaceholder":259},[188,5384,5385,5387,5389,5391,5393,5395,5397,5399,5401,5403,5405,5407,5409,5411,5413],{"class":190,"line":332},[188,5386,266],{"class":202},[188,5388,306],{"class":237},[188,5390,209],{"class":194},[188,5392,1557],{"class":274},[188,5394,195],{"class":194},[188,5396,317],{"class":316},[188,5398,320],{"class":237},[188,5400,323],{"class":194},[188,5402,326],{"class":237},[188,5404,424],{"class":194},[188,5406,1572],{"class":198},[188,5408,338],{"class":194},[188,5410,1578],{"class":1577},[188,5412,241],{"class":194},[188,5414,478],{"class":237},[188,5416,5417],{"class":190,"line":400},[188,5418,260],{"emptyLinePlaceholder":259},[188,5420,5421,5423,5425,5427,5429,5431,5433,5435,5437,5439,5441,5443,5445,5447,5449,5451,5453,5455,5457,5459,5461,5463,5465,5467,5469,5471,5473,5475,5477],{"class":190,"line":473},[188,5422,266],{"class":202},[188,5424,2210],{"class":237},[188,5426,209],{"class":194},[188,5428,311],{"class":274},[188,5430,326],{"class":237},[188,5432,652],{"class":194},[188,5434,344],{"class":202},[188,5436,364],{"class":237},[188,5438,350],{"class":194},[188,5440,369],{"class":274},[188,5442,2229],{"class":237},[188,5444,350],{"class":194},[188,5446,1155],{"class":237},[188,5448,350],{"class":194},[188,5450,2238],{"class":237},[188,5452,2241],{"class":690},[188,5454,2244],{"class":237},[188,5456,811],{"class":194},[188,5458,2249],{"class":237},[188,5460,821],{"class":194},[188,5462,247],{"class":194},[188,5464,2256],{"class":215},[188,5466,1198],{"class":194},[188,5468,468],{"class":237},[188,5470,350],{"class":194},[188,5472,2265],{"class":237},[188,5474,821],{"class":194},[188,5476,463],{"class":194},[188,5478,478],{"class":237},[188,5480,5481],{"class":190,"line":481},[188,5482,260],{"emptyLinePlaceholder":259},[188,5484,5485,5487,5489,5491,5493,5495,5497],{"class":190,"line":486},[188,5486,266],{"class":202},[188,5488,2282],{"class":237},[188,5490,209],{"class":194},[188,5492,2287],{"class":274},[188,5494,326],{"class":237},[188,5496,2292],{"class":194},[188,5498,478],{"class":237},[188,5500,5501,5503,5505,5507,5509,5511,5513],{"class":190,"line":548},[188,5502,266],{"class":202},[188,5504,2301],{"class":237},[188,5506,209],{"class":194},[188,5508,2287],{"class":274},[188,5510,326],{"class":237},[188,5512,2292],{"class":194},[188,5514,478],{"class":237},[188,5516,5517],{"class":190,"line":554},[188,5518,260],{"emptyLinePlaceholder":259},[188,5520,5521,5523,5525,5527,5529,5531],{"class":190,"line":560},[188,5522,266],{"class":202},[188,5524,2322],{"class":237},[188,5526,209],{"class":194},[188,5528,341],{"class":194},[188,5530,344],{"class":202},[188,5532,637],{"class":194},[188,5534,5535,5537,5539,5541,5543,5545,5547,5549,5551,5553,5555,5557,5559,5561,5563,5565,5567],{"class":190,"line":566},[188,5536,1713],{"class":202},[188,5538,2337],{"class":237},[188,5540,503],{"class":194},[188,5542,244],{"class":237},[188,5544,350],{"class":194},[188,5546,709],{"class":237},[188,5548,2348],{"class":194},[188,5550,2351],{"class":194},[188,5552,2354],{"class":194},[188,5554,2357],{"class":194},[188,5556,460],{"class":194},[188,5558,2362],{"class":274},[188,5560,326],{"class":198},[188,5562,2367],{"class":237},[188,5564,350],{"class":194},[188,5566,709],{"class":237},[188,5568,478],{"class":198},[188,5570,5571,5573,5575,5577,5579,5581,5583,5585,5587,5589,5591,5593,5595,5597,5599,5601,5603],{"class":190,"line":571},[188,5572,1713],{"class":202},[188,5574,2380],{"class":237},[188,5576,503],{"class":194},[188,5578,2385],{"class":237},[188,5580,350],{"class":194},[188,5582,709],{"class":237},[188,5584,2348],{"class":194},[188,5586,2351],{"class":194},[188,5588,2354],{"class":194},[188,5590,2357],{"class":194},[188,5592,460],{"class":194},[188,5594,2362],{"class":274},[188,5596,326],{"class":198},[188,5598,2406],{"class":237},[188,5600,350],{"class":194},[188,5602,709],{"class":237},[188,5604,478],{"class":198},[188,5606,5607,5609,5611,5613,5615,5617,5619,5621,5623,5625,5627,5629,5631,5633,5635,5637],{"class":190,"line":577},[188,5608,1713],{"class":202},[188,5610,2419],{"class":237},[188,5612,503],{"class":194},[188,5614,704],{"class":237},[188,5616,350],{"class":194},[188,5618,709],{"class":237},[188,5620,350],{"class":194},[188,5622,1600],{"class":274},[188,5624,326],{"class":198},[188,5626,1600],{"class":408},[188,5628,344],{"class":202},[188,5630,2440],{"class":194},[188,5632,1600],{"class":237},[188,5634,350],{"class":194},[188,5636,2447],{"class":237},[188,5638,478],{"class":198},[188,5640,5641],{"class":190,"line":583},[188,5642,260],{"emptyLinePlaceholder":259},[188,5644,5645,5647,5649,5651,5653,5655,5657,5659,5661,5663,5665],{"class":190,"line":589},[188,5646,1744],{"class":237},[188,5648,350],{"class":194},[188,5650,709],{"class":237},[188,5652,503],{"class":194},[188,5654,2337],{"class":237},[188,5656,2348],{"class":194},[188,5658,2357],{"class":194},[188,5660,2472],{"class":194},[188,5662,2380],{"class":237},[188,5664,2348],{"class":194},[188,5666,2479],{"class":194},[188,5668,5669,5671],{"class":190,"line":595},[188,5670,1764],{"class":194},[188,5672,2486],{"class":237},[188,5674,5675,5677,5679,5681,5683,5685,5687,5689,5691,5693,5695,5697,5699,5701,5703],{"class":190,"line":601},[188,5676,1806],{"class":194},[188,5678,754],{"class":198},[188,5680,1811],{"class":194},[188,5682,2497],{"class":237},[188,5684,539],{"class":194},[188,5686,234],{"class":194},[188,5688,2504],{"class":198},[188,5690,338],{"class":194},[188,5692,234],{"class":194},[188,5694,2337],{"class":237},[188,5696,539],{"class":194},[188,5698,2380],{"class":237},[188,5700,241],{"class":194},[188,5702,241],{"class":194},[188,5704,1824],{"class":198},[188,5706,5707],{"class":190,"line":607},[188,5708,1829],{"class":194},[188,5710,5711],{"class":190,"line":612},[188,5712,260],{"emptyLinePlaceholder":259},[188,5714,5715,5717,5719,5721,5723,5725,5727,5729],{"class":190,"line":618},[188,5716,2533],{"class":274},[188,5718,2536],{"class":237},[188,5720,539],{"class":194},[188,5722,657],{"class":194},[188,5724,2543],{"class":408},[188,5726,468],{"class":194},[188,5728,344],{"class":202},[188,5730,637],{"class":194},[188,5732,5733,5735,5737,5739,5741,5743,5745,5747,5749,5751,5753,5755,5757,5759,5761],{"class":190,"line":624},[188,5734,1713],{"class":202},[188,5736,2504],{"class":237},[188,5738,503],{"class":194},[188,5740,409],{"class":237},[188,5742,350],{"class":194},[188,5744,2564],{"class":274},[188,5746,326],{"class":198},[188,5748,1600],{"class":408},[188,5750,344],{"class":202},[188,5752,1716],{"class":237},[188,5754,350],{"class":194},[188,5756,2447],{"class":237},[188,5758,468],{"class":198},[188,5760,811],{"class":194},[188,5762,2583],{"class":237},[188,5764,5765],{"class":190,"line":630},[188,5766,260],{"emptyLinePlaceholder":259},[188,5768,5769,5771,5773,5775,5777,5779,5781,5783,5785,5787,5789,5791],{"class":190,"line":640},[188,5770,2592],{"class":237},[188,5772,350],{"class":194},[188,5774,709],{"class":237},[188,5776,503],{"class":194},[188,5778,2504],{"class":237},[188,5780,811],{"class":194},[188,5782,2605],{"class":237},[188,5784,811],{"class":194},[188,5786,2610],{"class":274},[188,5788,2613],{"class":198},[188,5790,821],{"class":194},[188,5792,2618],{"class":194},[188,5794,5795,5797,5799,5801,5803,5805,5807,5809,5811,5813,5815,5817],{"class":190,"line":662},[188,5796,2623],{"class":237},[188,5798,350],{"class":194},[188,5800,709],{"class":237},[188,5802,503],{"class":194},[188,5804,2504],{"class":237},[188,5806,811],{"class":194},[188,5808,2636],{"class":237},[188,5810,811],{"class":194},[188,5812,2610],{"class":274},[188,5814,2613],{"class":198},[188,5816,821],{"class":194},[188,5818,2618],{"class":194},[188,5820,5821,5823,5825,5827,5829,5831,5833],{"class":190,"line":682},[188,5822,2651],{"class":194},[188,5824,234],{"class":194},[188,5826,2656],{"class":198},[188,5828,338],{"class":194},[188,5830,1578],{"class":1577},[188,5832,241],{"class":194},[188,5834,478],{"class":237},[188,5836,5837,5839,5841],{"class":190,"line":696},[188,5838,867],{"class":194},[188,5840,199],{"class":198},[188,5842,221],{"class":194},[188,5844,5845],{"class":190,"line":714},[188,5846,260],{"emptyLinePlaceholder":259},[188,5848,5849,5851,5853],{"class":190,"line":725},[188,5850,195],{"class":194},[188,5852,884],{"class":198},[188,5854,221],{"class":194},[188,5856,5857,5859,5861],{"class":190,"line":746},[188,5858,892],{"class":194},[188,5860,895],{"class":198},[188,5862,221],{"class":194},[188,5864,5865,5867,5869,5871,5873,5875,5877,5879],{"class":190,"line":774},[188,5866,915],{"class":194},[188,5868,144],{"class":198},[188,5870,898],{"class":202},[188,5872,209],{"class":194},[188,5874,212],{"class":194},[188,5876,1872],{"class":215},[188,5878,212],{"class":194},[188,5880,221],{"class":194},[188,5882,5883],{"class":190,"line":781},[188,5884,1881],{"class":237},[188,5886,5887,5889,5891],{"class":190,"line":786},[188,5888,1307],{"class":194},[188,5890,144],{"class":198},[188,5892,221],{"class":194},[188,5894,5895],{"class":190,"line":827},[188,5896,260],{"emptyLinePlaceholder":259},[188,5898,5899,5901,5903,5905,5907,5909,5911,5913],{"class":190,"line":864},[188,5900,915],{"class":194},[188,5902,895],{"class":198},[188,5904,898],{"class":202},[188,5906,209],{"class":194},[188,5908,212],{"class":194},[188,5910,2742],{"class":215},[188,5912,212],{"class":194},[188,5914,221],{"class":194},[188,5916,5917,5919],{"class":190,"line":874},[188,5918,937],{"class":194},[188,5920,2753],{"class":198},[188,5922,5923,5925,5927,5929,5931],{"class":190,"line":879},[188,5924,2758],{"class":202},[188,5926,209],{"class":194},[188,5928,212],{"class":194},[188,5930,2367],{"class":237},[188,5932,1023],{"class":194},[188,5934,5935,5937,5939,5941,5943],{"class":190,"line":889},[188,5936,2771],{"class":202},[188,5938,209],{"class":194},[188,5940,212],{"class":194},[188,5942,2778],{"class":215},[188,5944,1023],{"class":194},[188,5946,5947,5949,5951,5953,5955,5957,5959,5961,5963,5965],{"class":190,"line":912},[188,5948,1145],{"class":194},[188,5950,2787],{"class":202},[188,5952,209],{"class":194},[188,5954,2001],{"class":194},[188,5956,2794],{"class":237},[188,5958,350],{"class":194},[188,5960,2799],{"class":237},[188,5962,821],{"class":194},[188,5964,2804],{"class":690},[188,5966,2807],{"class":194},[188,5968,5969,5971,5973,5975,5977],{"class":190,"line":934},[188,5970,2812],{"class":202},[188,5972,209],{"class":194},[188,5974,212],{"class":194},[188,5976,2819],{"class":215},[188,5978,1023],{"class":194},[188,5980,5981,5983,5985,5987,5989,5991,5993,5995],{"class":190,"line":955},[188,5982,2032],{"class":194},[188,5984,2828],{"class":202},[188,5986,350],{"class":194},[188,5988,2833],{"class":202},[188,5990,209],{"class":194},[188,5992,212],{"class":194},[188,5994,2840],{"class":237},[188,5996,1023],{"class":194},[188,5998,5999],{"class":190,"line":976},[188,6000,2063],{"class":194},[188,6002,6003],{"class":190,"line":982},[188,6004,260],{"emptyLinePlaceholder":259},[188,6006,6007,6009,6011,6013,6015,6017,6019,6021,6023,6025,6027,6029],{"class":190,"line":992},[188,6008,937],{"class":194},[188,6010,188],{"class":198},[188,6012,898],{"class":202},[188,6014,209],{"class":194},[188,6016,212],{"class":194},[188,6018,2865],{"class":215},[188,6020,212],{"class":194},[188,6022,323],{"class":194},[188,6024,2872],{"class":237},[188,6026,867],{"class":194},[188,6028,188],{"class":198},[188,6030,221],{"class":194},[188,6032,6033],{"class":190,"line":997},[188,6034,260],{"emptyLinePlaceholder":259},[188,6036,6037,6039],{"class":190,"line":1005},[188,6038,937],{"class":194},[188,6040,2753],{"class":198},[188,6042,6043,6045,6047,6049,6051],{"class":190,"line":1026},[188,6044,2758],{"class":202},[188,6046,209],{"class":194},[188,6048,212],{"class":194},[188,6050,2406],{"class":237},[188,6052,1023],{"class":194},[188,6054,6055,6057,6059,6061,6063],{"class":190,"line":1041},[188,6056,2771],{"class":202},[188,6058,209],{"class":194},[188,6060,212],{"class":194},[188,6062,2778],{"class":215},[188,6064,1023],{"class":194},[188,6066,6067,6069,6071,6073,6075,6077,6079,6081,6083],{"class":190,"line":1056},[188,6068,1145],{"class":194},[188,6070,2787],{"class":202},[188,6072,209],{"class":194},[188,6074,2001],{"class":194},[188,6076,2794],{"class":237},[188,6078,350],{"class":194},[188,6080,2929],{"class":237},[188,6082,821],{"class":194},[188,6084,2934],{"class":194},[188,6086,6087,6089,6091,6093,6095],{"class":190,"line":1076},[188,6088,2812],{"class":202},[188,6090,209],{"class":194},[188,6092,212],{"class":194},[188,6094,2819],{"class":215},[188,6096,1023],{"class":194},[188,6098,6099,6101,6103,6105,6107,6109,6111,6113],{"class":190,"line":1082},[188,6100,2032],{"class":194},[188,6102,2828],{"class":202},[188,6104,350],{"class":194},[188,6106,2833],{"class":202},[188,6108,209],{"class":194},[188,6110,212],{"class":194},[188,6112,2840],{"class":237},[188,6114,1023],{"class":194},[188,6116,6117],{"class":190,"line":1088},[188,6118,2063],{"class":194},[188,6120,6121],{"class":190,"line":1098},[188,6122,260],{"emptyLinePlaceholder":259},[188,6124,6125,6127],{"class":190,"line":1108},[188,6126,937],{"class":194},[188,6128,1002],{"class":198},[188,6130,6131,6133,6135,6137,6139],{"class":190,"line":1113},[188,6132,2983],{"class":202},[188,6134,209],{"class":194},[188,6136,212],{"class":194},[188,6138,2990],{"class":215},[188,6140,1023],{"class":194},[188,6142,6143,6145,6147,6149,6151],{"class":190,"line":1121},[188,6144,2997],{"class":202},[188,6146,209],{"class":194},[188,6148,212],{"class":194},[188,6150,3004],{"class":215},[188,6152,1023],{"class":194},[188,6154,6155,6157,6159,6161,6163],{"class":190,"line":1142},[188,6156,3011],{"class":202},[188,6158,209],{"class":194},[188,6160,212],{"class":194},[188,6162,3018],{"class":215},[188,6164,1023],{"class":194},[188,6166,6167,6169,6171,6173,6175,6177],{"class":190,"line":1165},[188,6168,2032],{"class":194},[188,6170,1062],{"class":202},[188,6172,209],{"class":194},[188,6174,212],{"class":194},[188,6176,2840],{"class":237},[188,6178,1023],{"class":194},[188,6180,6181],{"class":190,"line":1171},[188,6182,2063],{"class":194},[188,6184,6185,6187,6189],{"class":190,"line":1179},[188,6186,1307],{"class":194},[188,6188,895],{"class":198},[188,6190,221],{"class":194},[188,6192,6193,6195,6197],{"class":190,"line":1207},[188,6194,1447],{"class":194},[188,6196,895],{"class":198},[188,6198,221],{"class":194},[188,6200,6201,6203,6205],{"class":190,"line":1221},[188,6202,867],{"class":194},[188,6204,884],{"class":198},[188,6206,221],{"class":194},[144,6208,6209,6210,6212],{},"Because every component reads and writes the one ",[185,6211,1015],{}," list, a price range and a handful of tags all stack together\ninto a single query.",[4019,6214,6216],{"id":6215},"showing-the-products","Showing the products",[144,6218,6219,6220,6223,6224,6226],{},"The products are the ",[185,6221,6222],{},"nodes"," of the connection, so they drop straight into the ",[185,6225,4008],{}," from the collection page\nexample:",[178,6228,6230],{"className":4544,"code":6229,"language":4546,"meta":183,"style":183},"\u003Cdiv class=\"grid gap-4 sm:grid-cols-2\">\n \u003CProductCard\n v-for=\"product in products\"\n :key=\"product.id\"\n :product=\"product\"\n \u002F>\n\u003C\u002Fdiv>\n",[185,6231,6232,6251,6257,6271,6285,6298,6302],{"__ignoreMap":183},[188,6233,6234,6236,6238,6240,6242,6244,6247,6249],{"class":190,"line":191},[188,6235,195],{"class":194},[188,6237,895],{"class":198},[188,6239,898],{"class":202},[188,6241,209],{"class":194},[188,6243,212],{"class":194},[188,6245,6246],{"class":215},"grid gap-4 sm:grid-cols-2",[188,6248,212],{"class":194},[188,6250,221],{"class":194},[188,6252,6253,6255],{"class":190,"line":224},[188,6254,892],{"class":194},[188,6256,1364],{"class":198},[188,6258,6259,6262,6264,6266,6269],{"class":190,"line":256},[188,6260,6261],{"class":202}," v-for",[188,6263,209],{"class":194},[188,6265,212],{"class":194},[188,6267,6268],{"class":215},"product in products",[188,6270,1023],{"class":194},[188,6272,6273,6276,6278,6280,6283],{"class":190,"line":263},[188,6274,6275],{"class":202}," :key",[188,6277,209],{"class":194},[188,6279,212],{"class":194},[188,6281,6282],{"class":215},"product.id",[188,6284,1023],{"class":194},[188,6286,6287,6290,6292,6294,6296],{"class":190,"line":281},[188,6288,6289],{"class":202}," :product",[188,6291,209],{"class":194},[188,6293,212],{"class":194},[188,6295,1377],{"class":215},[188,6297,1023],{"class":194},[188,6299,6300],{"class":190,"line":296},[188,6301,4637],{"class":194},[188,6303,6304,6306,6308],{"class":190,"line":301},[188,6305,867],{"class":194},[188,6307,895],{"class":198},[188,6309,221],{"class":194},[144,6311,6312],{},"And that's the whole thing.\nShopify tells you which filters exist and what type each one is, every component turns that into the right piece of UI,\nand because the selection lives in the URL, the query re-runs whenever it changes and the filtered view is shareable.",[6314,6315,6316],"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 .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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":183,"searchDepth":224,"depth":224,"links":6318},[6319,6320,6321,6322,6323,6324],{"id":4021,"depth":224,"text":4022},{"id":4200,"depth":224,"text":4201},{"id":4528,"depth":224,"text":4529},{"id":4694,"depth":224,"text":4695},{"id":5284,"depth":224,"text":5285},{"id":6215,"depth":224,"text":6216},"How to create collection filters for your Shopify store in Nuxt","md",null,{},{"icon":97},{"title":94,"description":6325},"qnmbBBZQLaN2Aw_2OzEQ5l5KEWb3QLKXvu6nnJPEaaY",[6333,6335],{"title":89,"path":90,"stem":91,"description":6334,"icon":92,"children":-1},"How to create a collection page for your Shopify store in Nuxt",{"title":99,"path":100,"stem":101,"description":6336,"icon":102,"children":-1},"How to create a product page for your Shopify store in Nuxt",{"title":6338,"products":6339},"Men",{"filters":6340,"nodes":6415},[6341,6353,6360,6388],{"id":6342,"label":6343,"type":4700,"values":6344},"filter.v.availability","Availability",[6345,6349],{"id":6346,"label":6347,"count":400,"input":6348},"filter.v.availability.1","In stock","{\"available\":true}",{"id":6350,"label":6351,"count":263,"input":6352},"filter.v.availability.0","Out of stock","{\"available\":false}",{"id":6354,"label":6355,"type":1201,"values":6356},"filter.v.price","Price",[6357],{"id":6354,"label":6355,"count":6358,"input":6359},0,"{\"price\":{\"min\":0,\"max\":1000.0}}",{"id":6361,"label":6362,"type":4700,"values":6363},"filter.v.option.color","Color",[6364,6368,6372,6376,6380,6384],{"id":6365,"label":6366,"count":191,"input":6367},"filter.v.option.color.clay","Clay","{\"variantOption\":{\"name\":\"color\",\"value\":\"Clay\"}}",{"id":6369,"label":6370,"count":296,"input":6371},"filter.v.option.color.green","Green","{\"variantOption\":{\"name\":\"color\",\"value\":\"Green\"}}",{"id":6373,"label":6374,"count":296,"input":6375},"filter.v.option.color.ocean","Ocean","{\"variantOption\":{\"name\":\"color\",\"value\":\"Ocean\"}}",{"id":6377,"label":6378,"count":281,"input":6379},"filter.v.option.color.olive","Olive","{\"variantOption\":{\"name\":\"color\",\"value\":\"Olive\"}}",{"id":6381,"label":6382,"count":296,"input":6383},"filter.v.option.color.purple","Purple","{\"variantOption\":{\"name\":\"color\",\"value\":\"Purple\"}}",{"id":6385,"label":6386,"count":296,"input":6387},"filter.v.option.color.red","Red","{\"variantOption\":{\"name\":\"color\",\"value\":\"Red\"}}",{"id":6389,"label":6390,"type":4700,"values":6391},"filter.p.tag","More filters",[6392,6396,6400,6403,6407,6411],{"id":6393,"label":6394,"count":263,"input":6395},"filter.p.tag.accessories","accessories","{\"tag\":\"accessories\"}",{"id":6397,"label":6398,"count":224,"input":6399},"filter.p.tag.bottoms","bottoms","{\"tag\":\"bottoms\"}",{"id":6401,"label":168,"count":332,"input":6402},"filter.p.tag.men","{\"tag\":\"men\"}",{"id":6404,"label":6405,"count":263,"input":6406},"filter.p.tag.shoes","shoes","{\"tag\":\"shoes\"}",{"id":6408,"label":6409,"count":256,"input":6410},"filter.p.tag.tops","tops","{\"tag\":\"tops\"}",{"id":6412,"label":6413,"count":224,"input":6414},"filter.p.tag.unisex","unisex","{\"tag\":\"unisex\"}",[6416,6428,6439,6449,6459,6469,6479,6489,6498],{"id":6417,"handle":6418,"title":6419,"description":6420,"featuredImage":6421,"priceRange":6424},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003646222415","hoodie","Hoodie","This hoodie is the perfect choice for comfort and warmth. Meticulously crafted from 100% cotton, the hoodie features a soft, plush fleece interior and a unisex sizing design. Soft and lightweight, it's sure to be your go-to for chilly days.",{"url":6422,"altText":6327,"height":6423,"width":6423},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002F1_40204f34-47b3-4860-bc64-83f8d93ab59f.png?v=1786350456",2048,{"minVariantPrice":6425},{"amount":6426,"currencyCode":6427},"90.0","USD",{"id":6429,"handle":6430,"title":6431,"description":6432,"featuredImage":6433,"priceRange":6436},"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":6434,"altText":6327,"height":6435,"width":6435},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FWhiteleathersneakers01.jpg?v=1786350454",4096,{"minVariantPrice":6437},{"amount":6438,"currencyCode":6427},"180.0",{"id":6440,"handle":6441,"title":6442,"description":6443,"featuredImage":6444,"priceRange":6446},"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":6445,"altText":6327,"height":6435,"width":6435},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FGreyrunners.jpg?v=1786350452",{"minVariantPrice":6447},{"amount":6448,"currencyCode":6427},"30.0",{"id":6450,"handle":6451,"title":6452,"description":6453,"featuredImage":6454,"priceRange":6456},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003645927503","gray-leather-sneakers","Gray Leather Sneakers","These gray leather sneakers combine comfort and style for the perfect professional look. The breathable leather material ensures breathability and provides a comfortable fit, perfect for the office and other formal occasions. The handmade design is stylish and guaranteed to last.",{"url":6455,"altText":6327,"height":6435,"width":6435},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FGreyleathersneakers.jpg?v=1786350450",{"minVariantPrice":6457},{"amount":6458,"currencyCode":6427},"1000.0",{"id":6460,"handle":6461,"title":6462,"description":6463,"featuredImage":6464,"priceRange":6466},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003645698127","shorts","Shorts","These shorts are designed to help you reach peak performance. Constructed with high performance nylon fabric in a variety of shades, they are built to last and provide maximum comfort.",{"url":6465,"altText":6327,"height":6435,"width":6435},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FGreenShorts.jpg?v=1786350446",{"minVariantPrice":6467},{"amount":6468,"currencyCode":6427},"45.0",{"id":6470,"handle":6471,"title":6472,"description":6473,"featuredImage":6474,"priceRange":6476},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003645173839","canvas-sneakers","Canvas Sneakers","These high-quality canvas sneakers offer a comfortable fit and superior breathability, thanks to their cushioning midsoles and durable construction. An array of stylish colors adds to the appeal, making them perfect for casual wear. Slip them on and enjoy reliable performance and style that lasts.",{"url":6475,"altText":6327,"height":6435,"width":6435},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FGreenCanvasSneaker01.jpg?v=1786350436",{"minVariantPrice":6477},{"amount":6478,"currencyCode":6427},"40.0",{"id":6480,"handle":6481,"title":6482,"description":6483,"featuredImage":6484,"priceRange":6486},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003644977231","men-crewneck","Men's Crewneck","This high-quality crewneck is perfect for your everyday look. Made with 100% cotton, it's soft, comfortable, and undeniably stylish. Full sleeved for a classic look and effortlessly versatile, this cotton crewneck is a must-have in any wardrobe.",{"url":6485,"altText":6327,"height":6435,"width":6435},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FGreenMenscrew01.jpg?v=1786350432",{"minVariantPrice":6487},{"amount":6488,"currencyCode":6427},"120.0",{"id":6490,"handle":6491,"title":6492,"description":6493,"featuredImage":6494,"priceRange":6496},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003644551247","men-t-shirt","Men's T-shirt","Crafted from organic cotton, this classic T-shirt features a relaxed fit, crew neckline and timeless look. Enjoy the breathable comfort of 100% organic cotton.",{"url":6495,"altText":6327,"height":6435,"width":6435},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FGreenTshirt01.jpg?v=1786350422",{"minVariantPrice":6497},{"amount":6478,"currencyCode":6427},{"id":6499,"handle":6500,"title":6501,"description":6502,"featuredImage":6503,"priceRange":6505},"gid:\u002F\u002Fshopify\u002FProduct\u002F9003644452943","sweatpants","Sweatpants","Soft and comfortable sweatpants in stylish shades. They are perfect for lounging with their cozy stretch fabric that offers just the right amount of warmth. Enjoy the ultimate relaxation experience!",{"url":6504,"altText":6327,"height":6435,"width":6435},"https:\u002F\u002Fcdn.shopify.com\u002Fs\u002Ffiles\u002F1\u002F0703\u002F7150\u002F8303\u002Ffiles\u002FGreenSweatpants01.jpg?v=1786350420",{"minVariantPrice":6506},{"amount":6507,"currencyCode":6427},"35.0",1788560609194]