{"id":31950,"date":"2025-08-08T11:40:53","date_gmt":"2025-08-08T16:40:53","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=31950"},"modified":"2025-08-14T09:03:49","modified_gmt":"2025-08-14T14:03:49","slug":"how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/","title":{"rendered":"How to Create a Headless E-Commerce Search Experience With WP Engine\u2019s Smart Search AI and Nuxt.js"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>Have you ever tried to buy something on a website only to have its poor search feature send you somewhere else? My stoke for finding the perfect rock climbing, coding, or running gear definitely drops when I can&#8217;t easily find what I&#8217;m looking for.<\/p>\n\n\n\n<p>The search feature is an essential tool on any e-commerce site for converting visitors into customers. It helps users find and purchase products quickly and efficiently.<\/p>\n\n\n\n<p>This is where <a href=\"https:\/\/wpengine.com\/smart-search\/\"><strong>WP Engine&#8217;s Smart Search AI<\/strong> <\/a>steps in. It\u2019s a product for WP Engine customers that replaces WordPress\u2019s built-in search with an intelligent, AI-driven engine for both traditional and headless WordPress applications. Smart Search AI guides visitors to the most relevant content using semantic understanding to surface better results, even for <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/post-types\/#custom-post-types\">custom post types<\/a>.<\/p>\n\n\n\n<p>In this step-by-step guide, I will show you how to create a full headless WordPress e-commerce search experience with <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\">WooCommerce<\/a>, <a href=\"https:\/\/www.wpgraphql.com\/\">WPGraphQL<\/a>, and WP Engine Smart Search AI.\u00a0 By the end of this article, you will have created a starter e-commerce site with search functionality from start to finish.<br><br>If you prefer the video version of this article, you can access it here:<br><\/p>\n\n\n\n<iframe class=\"youtube-video\"  src=\"https:\/\/www.youtube.com\/embed\/Gc1WFvp9ezk\" title=\"How to Create a Headless E-Commerce Search Experience With WP Engine\u2019s Smart Search AI and Nuxt.js\" frameborder=\"0\" style=\"display: block; margin: auto; width: 100%; height: 400px;\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background is-layout-flow wp-container-core-group-is-layout-1 wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)\">\n<p class=\"has-large-font-size\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul id=\"Prerequisites\" class=\"wp-block-list\">\n<li id=\"Prerequisites\"><a href=\"#Prerequisites\">Prerequisites<\/a><\/li>\n\n\n\n<li><a href=\"#steps-for-setting-up\">Steps For Setting Up<\/a><\/li>\n\n\n\n<li><a href=\"#wrap-the-smart-search-endpoint\">Wrap The Smart Search Endpoint<\/a><\/li>\n\n\n\n<li><a href=\"#create-search-logic\">Create Search Logic<\/a><\/li>\n\n\n\n<li><a href=\"#our-components\">Our Components<\/a><\/li>\n\n\n\n<li><a href=\"#the-input-field\">The Input Field<\/a><\/li>\n\n\n\n<li><a href=\"#activity-filter\">Activity Filter<\/a><\/li>\n\n\n\n<li><a href=\"#price-range\">Price Range<\/a><\/li>\n\n\n\n<li><a href=\"#search-results-display\">Search Results Display<\/a><\/li>\n\n\n\n<li><a href=\"#search-bar\">Search Bar<\/a> <\/li>\n\n\n\n<li><a href=\"#add-search-bar-to-all-routes\">Add the Search Bar To All Routes<\/a><\/li>\n\n\n\n<li><a href=\"#svg-icons\">SVG Icons<\/a><\/li>\n\n\n\n<li><a href=\"#update-index-page\">Update The Index Page To Handle State<\/a><\/li>\n\n\n\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>To benefit from this article, you should be familiar with the basics of working with the command line, <a href=\"https:\/\/wpengine.com\/builders\/headless-roadmap\/\">headless WordPress<\/a> development, <a href=\"http:\/\/next.js\">Nuxt.js<\/a>, and the WP Engine <a href=\"https:\/\/wpengine.com\/support\/wp-engine-user-portal\/\">User Portal<\/a>.<br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"steps-for-setting-up\">Steps For Setting Up:<\/h3>\n\n\n\n<p>1. Set up <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\">an account on WP Engine<\/a> and get a WordPress install running.&nbsp; Log in to your WP Admin.  Alternatively, if you are not an existing customer of WP Engine, you can get a free headless platform sandbox account here to give it a try.<\/p>\n\n\n\n<div class=\"wp-block-group alignfull wpe-footer-cta has-base-color has-custom-cta-gradient-background has-text-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:100px;padding-bottom:100px\">\n<h2 class=\"wp-block-heading has-text-align-center has-max-48-font-size\" style=\"line-height:1.3\">WP Engine Headless Platform<\/h2>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\" style=\"line-height:1.3\">Build, deploy, and manage headless websites with the power of WordPress and the best of modern web development.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\" style=\"margin-top:40px\">\n<div class=\"wp-block-button is-style-fill-base\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpengine.com\/headless-wordpress\/\">Try Headless for Free<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<p>2. Once in WP Admin, go to<strong> Plugins <\/strong>in the left sidebar, click the <strong>Add New<\/strong> button, search for the WooCommerce* plugin, and install it. Follow the same process to install the <a href=\"https:\/\/www.wpgraphql.com\/\">WPGraphQL<\/a> plugin. Once both plugins are installed, activate them.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note<\/strong>: Don&#8217;t forget to save your WPGraphQL endpoint, which you can access on the WPGraphQL settings page:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdJ0M2mnBz8cTXc0mbhA55yqm5NAy6mpGEXSCEK0G0F9uvh6hj-1UCXLzLwU7IJ66UZuyblk9AZ3_X7KOm8REikSMdkme1UG06MNcxNFcOwzZuZwOTqEStQUI46fFCEpA3vmLKjQw?key=4mhb17E_T_TECE2aEykrmg\" alt=\"\"\/><\/figure>\n<\/blockquote>\n\n\n\n<p>3. Next, go to the <a href=\"https:\/\/github.com\/wp-graphql\/wp-graphql-woocommerce\/releases\">WooGraphQL releases page on the GitHub repo<\/a> and download the latest version.&nbsp; Once you download the latest version, go back to your WP Admin and upload it to the plugins page.<br><\/p>\n\n\n\n<p>4. We\u2019ll run a test to ensure that WooCommerce data can be accessed via GraphQL next.&nbsp; First, we need to add product data to our WooCommerce store.&nbsp; In the left sidebar, go to <strong>Products &gt; Add New Product:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfXBO7xJPBdljxPRn_ACNs8dSBTmidGCAnrM_2bwws-A_-EoZIGjjhj5idZ53lWIknDY-5i5dIwaEMMgASwkOmsVR3IwtmOxvnOvpiDYPqP8zEwnU1RzWlxMbxzOPPfnP_18JrjNw?key=4mhb17E_T_TECE2aEykrmg\" alt=\"\" style=\"width:410px;height:auto\"\/><\/figure>\n\n\n\n<p>Once you click on that, it will take you to a general Products page that shows all your products.&nbsp; At the top of the page, you will have the option to <strong>Add New Product<\/strong>, <strong>Import<\/strong>, or <strong>Export<\/strong>.&nbsp; This is where you can add, edit, and import products. Click on <strong>Import<\/strong>:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXewAhalN7QtylZDirKY4MTJKSv9gecsENAOkryZh5DNFtVOZCap9u3VTwVn85RU6y3mJZEvJvcbTlNg_zop0j4TOQK9Eyay06wM_0NZ_8ev5-WhLmaBpzFms3-qyrUoou8S_mTD?key=4mhb17E_T_TECE2aEykrmg\" alt=\"\"\/><\/figure>\n\n\n\n<p>This is where you can add all my dummy product data by going to<a href=\"https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm\/blob\/main\/products-sample.csv?plain=1\"> this .csv file in my repo<\/a>, downloading it, then uploading it into your WooCommerce<strong> Import Products<\/strong> page here:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcKd27lbtEa8oLtRwCEJZxeXdJeY2glZr3MjHJGatcig17hd1PDv6dfhL-TMgs2lZ_Axj39QV3Fss-eDS6iaR9Xi12qzcWXfdxngtgmA_sM2U3JVGzbgGazjWoOfpTGpI6wCR7k?key=4mhb17E_T_TECE2aEykrmg\" alt=\"\"\/><\/figure>\n\n\n\n<p>For this example, I added a product name, product description, regular price, SKU, product tag, product category, and product image.<br><br><br>5. Add a Smart Search license. Refer to the docs <a href=\"https:\/\/wpengine.com\/support\/wp-engine-smart-search\/#Enable\">here<\/a> to add a license. <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\"><a href=\"https:\/\/wpengine.com\/contact\/\" target=\"_blank\">Contact our sales departm<\/a><\/span>ent for a free trial demo.<\/p>\n\n\n\n<p>6. In the WP Admin, go to <strong>WP Engine Smart Search &gt; Settings<\/strong>.&nbsp; You will find your Smart Search URL and access token here.&nbsp; Copy and save it.&nbsp; We will need it for our environment variables for the frontend.&nbsp; You should see this page:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdwfxeZm5ezcjCWebdqnOzLgkClQf2rk6iVynfyg3Tu7OXCzwzFrdRHpChzWjI6l9hS2mEO8PzJAv-i1DXYGgX2F0u-fD7cOZp-ojx_KBcfeXnqSuXeYZ7kilYIev8_JxI38idong?key=4mhb17E_T_TECE2aEykrmg\" alt=\"\"\/><\/figure>\n\n\n\n<p>7. Next, navigate to <strong>Configuration<\/strong>, select the <strong>Semantic<\/strong> card, and add the <code>post_content<\/code>, <code>post_title<\/code>, and <code>post_excerpt<\/code> fields in the <strong>Semantic settings<\/strong> section. We are going to use these fields as our AI-powered field for similarity searches. Make sure to hit <strong>Save Configuration<\/strong> afterward.<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeZNBfPpnppOwaUkDCbaUnA1OHl-ywOSKS8t3-q8W151uUI4vXOCj5iLmm3jrf-ScEVq2qkMN469jEOMXkoSHOaeX5JztZ8LOryfMiNLXeB7w0zMZ2lceSjYb-9wtaKAGZ0WCfp9w?key=4mhb17E_T_TECE2aEykrmg\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeo4JMeFb4YFXiaE2aaEppDmPmpCG-gN1pm9NAvLQzr6tGA3k_XLDgyhnSgL8GYrF3_QHvWzwmKKo6wE63v5lBo8-xcjVPKo7t6oEW5hQfMohOs1IaAOk3aVys2YFEB1tirZ33v7g?key=4mhb17E_T_TECE2aEykrmg\" alt=\"\"\/><\/figure>\n\n\n\n<p>8. After saving the configuration, head on over to the <strong>Index data<\/strong> page, then click<strong> &#8220;<em>Index Now&#8221;<\/em><\/strong><em>.&nbsp; <\/em>It will give you this success message once completed<em> :<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdgr4QG6UXJEGlNbe8wFUIr0pcBoT2IincxEcJUg71tfLHmr_RXjgC16rMxXIuKFnPOx-gY88CvZjT1N0qm__1LurZEIusaSP4Boa9UMxhdXZny96HpPUyhJ2OOa2clDtx31ATCjg?key=4mhb17E_T_TECE2aEykrmg\" alt=\"\"\/><\/figure>\n\n\n\n<p><br>9. Now that we have indexed our data into Smart Search, let\u2019s make sure it works.&nbsp; Head over the the GraphQL IDE in your WP Admin. You can either access this via the left sidebar or the menu bar at the top of the page.&nbsp; Copy and paste the query below into the IDE:<br><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>query GetProducts($first: Int = <span class=\"hljs-number\">10<\/span>) {\n<\/span><\/span><span class='shcb-loc'><span>  products(first: $first) {\n<\/span><\/span><span class='shcb-loc'><span>    edges {\n<\/span><\/span><span class='shcb-loc'><span>      node {\n<\/span><\/span><span class='shcb-loc'><span>        name\n<\/span><\/span><span class='shcb-loc'><span>        description\n<\/span><\/span><span class='shcb-loc'><span>        image {\n<\/span><\/span><span class='shcb-loc'><span>          sourceUrl\n<\/span><\/span><span class='shcb-loc'><span>          altText\n<\/span><\/span><span class='shcb-loc'><span>        }\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This is a simple query that is asking for the first 10 products.&nbsp; It should give you the name, description, and image data of your products.&nbsp; Hit play, and you should get the results back:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeQQCuyh7wcW-ZOY0RbODs45D9HGYZy2YZRCtmVXk9EoREagmlryksuaoWf-17kwdmJjK1g2vpyL_So_LECDbErPkBFOBeFxYGlPrrZgAFWotLsz13mEGdCMsKuHz7FkLLkNGWI?key=4mhb17E_T_TECE2aEykrmg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Stoked!!! It works!<\/p>\n\n\n\n<p>10. We need to set the frontend up now.&nbsp; The <a href=\"http:\/\/nuxt.js\">Nuxt.js<\/a> frontend boilerplate will contain a project that already renders a home page with products and links to those product details pages.&nbsp; Clone down <a href=\"https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm\/tree\/starting-point-boilerplate\">the Nuxt repo starting point <\/a>by copying and pasting this command in your terminal<br><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>npx degit Fran-A-Dev\/smart-search-headlesswp-ecomm<span class=\"hljs-comment\">#starting-point-boilerplate my-project<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><br>Once you clone it down, navigate into the directory and install the project dependencies:<br><\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>cd my-project\n<\/span><\/span><span class='shcb-loc'><span>npm install\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n<p><br>11. Create a <code>.env.local<\/code> file inside the root of the Nuxt project. Open that file and paste in these environment variables<strong><em> (The environment variables are the ones you saved from steps 2 and 6) <\/em><\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>NUXT_PUBLIC_WORDPRESS_URL=\"<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">your<\/span> <span class=\"hljs-attr\">WP<\/span> <span class=\"hljs-attr\">url<\/span> <span class=\"hljs-attr\">here<\/span>&gt;<\/span>\"\n<\/span><\/span><span class='shcb-loc'><span>NUXT_PUBLIC_SMART_SEARCH_URL=\"<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">your<\/span> <span class=\"hljs-attr\">smart<\/span> <span class=\"hljs-attr\">search<\/span> <span class=\"hljs-attr\">url<\/span> <span class=\"hljs-attr\">here<\/span>&gt;<\/span>\"\n<\/span><\/span><span class='shcb-loc'><span>NUXT_PUBLIC_SMART_SEARCH_TOKEN=\"<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">your<\/span> <span class=\"hljs-attr\">smart<\/span> <span class=\"hljs-attr\">search<\/span> <span class=\"hljs-attr\">access<\/span> <span class=\"hljs-attr\">token<\/span> <span class=\"hljs-attr\">here<\/span>&gt;<\/span>\"\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><br>12. Next, let&#8217;s update how our Nuxt app will build and run the site.&nbsp; Go to your <a href=\"http:\/\/nuxt.config.ts\">nuxt.config.ts<\/a> file in the root and update it accordingly:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> defineNuxtConfig({\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">compatibilityDate<\/span>: <span class=\"hljs-string\">\"2024-11-01\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">devtools<\/span>: { <span class=\"hljs-attr\">enabled<\/span>: process.env.NODE_ENV === <span class=\"hljs-string\">\"development\"<\/span> },\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">modules<\/span>: &#91;<span class=\"hljs-string\">\"@nuxtjs\/tailwindcss\"<\/span>, <span class=\"hljs-string\">\"@nuxt\/image\"<\/span>],\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">nitro<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">compressPublicAssets<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>  },\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">css<\/span>: &#91;<span class=\"hljs-string\">\"~\/assets\/css\/main.css\"<\/span>],\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">build<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">transpile<\/span>: process.env.NODE_ENV === <span class=\"hljs-string\">\"production\"<\/span> ? &#91;<span class=\"hljs-string\">\"vue\"<\/span>] : &#91;],\n<\/span><\/span><span class='shcb-loc'><span>  },\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">image<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">domains<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">new<\/span> URL(process.env.NUXT_PUBLIC_WORDPRESS_URL || <span class=\"hljs-string\">\"\"<\/span>).hostname,\n<\/span><\/span><span class='shcb-loc'><span>    ].filter(<span class=\"hljs-built_in\">Boolean<\/span>),\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">quality<\/span>: <span class=\"hljs-number\">80<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">format<\/span>: &#91;<span class=\"hljs-string\">\"webp\"<\/span>, <span class=\"hljs-string\">\"jpg\"<\/span>, <span class=\"hljs-string\">\"png\"<\/span>],\n<\/span><\/span><span class='shcb-loc'><span>  },\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">app<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">head<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"Nuxt headlesswp e-commerce\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">meta<\/span>: &#91;{ <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"description\"<\/span>, <span class=\"hljs-attr\">content<\/span>: <span class=\"hljs-string\">\"Nuxt headlesswp e-commerce\"<\/span> }],\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">link<\/span>: &#91;\n<\/span><\/span><span class='shcb-loc'><span>        {\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">rel<\/span>: <span class=\"hljs-string\">\"stylesheet\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-attr\">href<\/span>: <span class=\"hljs-string\">\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>        },\n<\/span><\/span><span class='shcb-loc'><span>      ],\n<\/span><\/span><span class='shcb-loc'><span>    },\n<\/span><\/span><span class='shcb-loc'><span>  },\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-attr\">runtimeConfig<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">public<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">wordpressUrl<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">smartSearchUrl<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">smartSearchToken<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    },\n<\/span><\/span><span class='shcb-loc'><span>  },\n<\/span><\/span><span class='shcb-loc'><span>});\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><br>We are done with the setup steps to create the boilerplate starting point.&nbsp; In your terminal, run <code>npm run dev<\/code> and visit <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a> to make sure it works.&nbsp; You should see this:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdJModEeeSGaWzQ9g9LVz4il6FehURroY9dSKWQO-T0Et2biUjW3IHiRZshoZaJ1_7JEoCi5sfceua6xY13D2QggVeCJ7Ey00shNScp5FxF1RInaQxN-OVxEx9ikcQPDua1lIumhA?key=4mhb17E_T_TECE2aEykrmg\" alt=\"\"\/><\/figure>\n\n\n\n<p>And when you navigate to a product detail page by clicking on a details link, you should see the detail page:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXef-f69GCvgXYTEaCFtheZMZRvofMFTof1het-on_sv9gmadug8tW91sSb51_jFRf2naQ9FhDwC4cXssjAXAke9_GLiCBpF6flPaXMzwNlpWKlKSTRJ6yxhDhzuHRmbGedySBViQw?key=4mhb17E_T_TECE2aEykrmg\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wrap-the-smart-search-endpoint\">Wrap The Smart Search Endpoint<\/h2>\n\n\n\n<p>The first thing we need to do is wrap our GraphQL fetch logic\u2014both against the WP Engine Smart Search endpoint and our WordPress GraphQL API\u2014into a single reusable function. Create a folder called <code>composables<\/code> at the root.&nbsp; In that folder, create a file called<code> useSmartSearch.js<\/code> and paste in the code below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>export <span class=\"hljs-keyword\">const<\/span> useSmartSearch = () =&gt; {\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> config = useRuntimeConfig();\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">public<\/span>: { smartSearchUrl, smartSearchToken, wordpressUrl },\n<\/span><\/span><span class='shcb-loc'><span>  } = config;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  \n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> _post = async ({ url, token, query, variables }) =&gt; {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">if<\/span> (!url) <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> Error(<span class=\"hljs-string\">\"URL not configured\"<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">const<\/span> headers = { <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span> };\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">if<\/span> (token) headers.Authorization = `Bearer ${token}`;\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">try<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">return<\/span> await $fetch(url, {\n<\/span><\/span><span class='shcb-loc'><span>        method: <span class=\"hljs-string\">\"POST\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>        headers,\n<\/span><\/span><span class='shcb-loc'><span>        body: { query, variables },\n<\/span><\/span><span class='shcb-loc'><span>      });\n<\/span><\/span><span class='shcb-loc'><span>    } <span class=\"hljs-keyword\">catch<\/span> (err) {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">if<\/span> (process.dev) {\n<\/span><\/span><span class='shcb-loc'><span>        console.error(<span class=\"hljs-string\">\"GraphQL error:\"<\/span>, err);\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">throw<\/span> err;\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  };\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  \n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> getContext = (message, field = <span class=\"hljs-string\">\"post_content\"<\/span>, minScore = <span class=\"hljs-number\">0.8<\/span>) =&gt;\n<\/span><\/span><span class='shcb-loc'><span>    _post({\n<\/span><\/span><span class='shcb-loc'><span>      url: smartSearchUrl,\n<\/span><\/span><span class='shcb-loc'><span>      token: smartSearchToken,\n<\/span><\/span><span class='shcb-loc'><span>      query: `query GetContext($message: String!, $field: String!, $minScore: Float!) {\n<\/span><\/span><span class='shcb-loc'><span>        similarity(input: { nearest: { text: $message, field: $field }, minScore: $minScore }) {\n<\/span><\/span><span class='shcb-loc'><span>          total\n<\/span><\/span><span class='shcb-loc'><span>          docs { id data score }\n<\/span><\/span><span class='shcb-loc'><span>        }\n<\/span><\/span><span class='shcb-loc'><span>      }`,\n<\/span><\/span><span class='shcb-loc'><span>      variables: { message, field, minScore },\n<\/span><\/span><span class='shcb-loc'><span>    });\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  \n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> searchProducts = (\n<\/span><\/span><span class='shcb-loc'><span>    searchQuery,\n<\/span><\/span><span class='shcb-loc'><span>    { limit = <span class=\"hljs-number\">10<\/span>, strictMode = <span class=\"hljs-keyword\">false<\/span>, filter = <span class=\"hljs-keyword\">null<\/span> } = {}\n<\/span><\/span><span class='shcb-loc'><span>  ) =&gt; {\n<\/span><\/span><span class='shcb-loc'><span>    \n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">const<\/span> semanticSearchConfig = strictMode\n<\/span><\/span><span class='shcb-loc'><span>      ? <span class=\"hljs-string\">\"\"<\/span> \n<\/span><\/span><span class='shcb-loc'><span>      : <span class=\"hljs-string\">'semanticSearch: { searchBias: 10, fields: &#91;\"post_title\", \"post_content\"] }'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    let finalFilter = <span class=\"hljs-string\">\"post_type:product\"<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">if<\/span> (filter) {\n<\/span><\/span><span class='shcb-loc'><span>      finalFilter = `${finalFilter} <span class=\"hljs-keyword\">AND<\/span> ${filter}`;\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">return<\/span> _post({\n<\/span><\/span><span class='shcb-loc'><span>      url: smartSearchUrl,\n<\/span><\/span><span class='shcb-loc'><span>      token: smartSearchToken,\n<\/span><\/span><span class='shcb-loc'><span>      query: `query SearchProducts($query: String!, $limit: Int, $filter: String!) {\n<\/span><\/span><span class='shcb-loc'><span>        find(\n<\/span><\/span><span class='shcb-loc'><span>          query: $query\n<\/span><\/span><span class='shcb-loc'><span>          limit: $limit\n<\/span><\/span><span class='shcb-loc'><span>          filter: $filter\n<\/span><\/span><span class='shcb-loc'><span>          ${semanticSearchConfig}\n<\/span><\/span><span class='shcb-loc'><span>        ) {\n<\/span><\/span><span class='shcb-loc'><span>          total\n<\/span><\/span><span class='shcb-loc'><span>          documents { id score data }\n<\/span><\/span><span class='shcb-loc'><span>        }\n<\/span><\/span><span class='shcb-loc'><span>      }`,\n<\/span><\/span><span class='shcb-loc'><span>      variables: { query: searchQuery, limit, filter: finalFilter },\n<\/span><\/span><span class='shcb-loc'><span>    });\n<\/span><\/span><span class='shcb-loc'><span>  };\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  \n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> getProductDetails = (productIds) =&gt;\n<\/span><\/span><span class='shcb-loc'><span>    _post({\n<\/span><\/span><span class='shcb-loc'><span>      url: wordpressUrl,\n<\/span><\/span><span class='shcb-loc'><span>      token: <span class=\"hljs-keyword\">null<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>      query: `query GetProductDetails($ids: &#91;Int]!) {\n<\/span><\/span><span class='shcb-loc'><span>        products(where: { <span class=\"hljs-keyword\">include<\/span>: $ids }) {\n<\/span><\/span><span class='shcb-loc'><span>          edges { \n<\/span><\/span><span class='shcb-loc'><span>            node { \n<\/span><\/span><span class='shcb-loc'><span>              databaseId \n<\/span><\/span><span class='shcb-loc'><span>              name \n<\/span><\/span><span class='shcb-loc'><span>              image { sourceUrl altText } \n<\/span><\/span><span class='shcb-loc'><span>              ... on ProductWithPricing { regularPrice } \n<\/span><\/span><span class='shcb-loc'><span>            } \n<\/span><\/span><span class='shcb-loc'><span>          }\n<\/span><\/span><span class='shcb-loc'><span>        }\n<\/span><\/span><span class='shcb-loc'><span>      }`,\n<\/span><\/span><span class='shcb-loc'><span>      variables: { ids: productIds },\n<\/span><\/span><span class='shcb-loc'><span>    });\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">return<\/span> { getContext, searchProducts, getProductDetails };\n<\/span><\/span><span class='shcb-loc'><span>};\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This composable wraps all interactions with WP Engine\u2019s Smart Search and your WordPress GraphQL endpoint. <\/p>\n\n\n\n<p>It reads URLs and tokens from Nuxt\u2019s runtime config, provides a private <code>_post<\/code> helper for sending GraphQL requests<a href=\"https:\/\/nuxt.com\/docs\/4.x\/api\/utils\/dollarfetch\"> via $fetch<\/a>, and exposes three methods:<code> getContext<\/code> for server-side semantic similarity searches, <code>searchProducts<\/code> for both AI-driven semantic queries and strict filtering of products (by toggling <code>strictMode<\/code> or supplying a custom filter string), and <code>getProductDetails<\/code> to fetch full product data\u2014including images and pricing\u2014directly from WPGraphQL.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-search-logic\">Create Search Logic<\/h2>\n\n\n\n<p>The next piece brings together our Smart Search and WPGraphQL calls into a single logic layer. Create a file at <code>composables\/useSearchLogic.js<\/code> and paste in the code below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { useSmartSearch } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/useSmartSearch\"<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { ref } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"vue\"<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> useSearchLogic = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> { searchProducts, getProductDetails } = useSmartSearch();\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> resultsLimit = ref(<span class=\"hljs-number\">20<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> mapBasicResults = <span class=\"hljs-function\">(<span class=\"hljs-params\">documents<\/span>) =&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    documents.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">{ data, score }<\/span>) =&gt;<\/span> ({\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">id<\/span>: data.ID,\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">title<\/span>: data.post_title,\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">description<\/span>: data.post_content,\n<\/span><\/span><span class='shcb-loc'><span>      score,\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">image<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-attr\">price<\/span>: <span class=\"hljs-number\">0<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    }));\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> performSearch = <span class=\"hljs-keyword\">async<\/span> (query) =&gt; {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">if<\/span> (!query || !query.trim()) {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">return<\/span> { <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-literal\">false<\/span>, <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-string\">\"Empty query\"<\/span> };\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">const<\/span> startTime = <span class=\"hljs-built_in\">Date<\/span>.now();\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">try<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">const<\/span> { data } = <span class=\"hljs-keyword\">await<\/span> searchProducts(query, {\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">limit<\/span>: <span class=\"hljs-built_in\">Number<\/span>(resultsLimit.value)\n<\/span><\/span><span class='shcb-loc'><span>      });\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">if<\/span> (!data?.find) {\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">\"Invalid search response\"<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">const<\/span> basic = mapBasicResults(data.find.documents);\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">const<\/span> detailed = <span class=\"hljs-keyword\">await<\/span> fetchCompleteProductData(basic);\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">const<\/span> searchTime = <span class=\"hljs-built_in\">Date<\/span>.now() - startTime;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">return<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">results<\/span>: detailed,\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">total<\/span>: data.find.total,\n<\/span><\/span><span class='shcb-loc'><span>        searchTime,\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">query<\/span>: <span class=\"hljs-string\">`Text search: \"<span class=\"hljs-subst\">${query}<\/span>\"`<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>      };\n<\/span><\/span><span class='shcb-loc'><span>    } <span class=\"hljs-keyword\">catch<\/span> (error) {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">if<\/span> (process.dev) {\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Search error:\"<\/span>, error);\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">return<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-literal\">false<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-string\">`Search failed: <span class=\"hljs-subst\">${error.message || <span class=\"hljs-string\">\"Please try again.\"<\/span>}<\/span>`<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>      };\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  };\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> performActivitySearch = <span class=\"hljs-keyword\">async<\/span> (activityValue, priceFilter = <span class=\"hljs-literal\">null<\/span>) =&gt; {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">if<\/span> (!activityValue || !activityValue.trim()) {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">return<\/span> { <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-literal\">false<\/span>, <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-string\">\"No activity selected\"<\/span> };\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">const<\/span> startTime = <span class=\"hljs-built_in\">Date<\/span>.now();\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">try<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">let<\/span> query = <span class=\"hljs-string\">`product_cat.name.keyword:\"<span class=\"hljs-subst\">${getActivityLabel(<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\">        activityValue<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\">      )}<\/span>\"`<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">const<\/span> { data } = <span class=\"hljs-keyword\">await<\/span> searchProducts(query, {\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">limit<\/span>: <span class=\"hljs-built_in\">Number<\/span>(resultsLimit.value),\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">strictMode<\/span>: <span class=\"hljs-literal\">true<\/span>, \n<\/span><\/span><span class='shcb-loc'><span>      });\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">if<\/span> (!data?.find) {\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">\"Invalid search response\"<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">const<\/span> basic = mapBasicResults(data.find.documents);\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">const<\/span> detailed = <span class=\"hljs-keyword\">await<\/span> fetchCompleteProductData(basic);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">let<\/span> filteredResults = detailed;\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">if<\/span> (\n<\/span><\/span><span class='shcb-loc'><span>        priceFilter &amp;&amp;\n<\/span><\/span><span class='shcb-loc'><span>        (priceFilter.min !== <span class=\"hljs-literal\">undefined<\/span> || priceFilter.max !== <span class=\"hljs-literal\">undefined<\/span>)\n<\/span><\/span><span class='shcb-loc'><span>      ) {\n<\/span><\/span><span class='shcb-loc'><span>        filteredResults = detailed.filter(<span class=\"hljs-function\">(<span class=\"hljs-params\">product<\/span>) =&gt;<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-keyword\">const<\/span> price = product.price || <span class=\"hljs-number\">0<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-keyword\">const<\/span> { min = <span class=\"hljs-number\">0<\/span>, max = <span class=\"hljs-literal\">Infinity<\/span> } = priceFilter;\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-keyword\">return<\/span> price &gt;= min &amp;&amp; price &lt;= max;\n<\/span><\/span><span class='shcb-loc'><span>        });\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">const<\/span> searchTime = <span class=\"hljs-built_in\">Date<\/span>.now() - startTime;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-keyword\">return<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">results<\/span>: filteredResults,\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">total<\/span>: filteredResults.length,\n<\/span><\/span><span class='shcb-loc'><span>        searchTime,\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-attr\">query<\/span>: <span class=\"hljs-string\">`Activity: <span class=\"hljs-subst\">${getActivityLabel(activityValue)}<\/span><span class=\"hljs-subst\">${<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\">          priceFilter<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\">            ? <span class=\"hljs-string\">` | Price: $<span class=\"hljs-subst\">${priceFilter.min || <span class=\"hljs-number\">0<\/span>}<\/span> - $<span class=\"hljs-subst\">${<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-subst\">                priceFilter.max || <span class=\"hljs-string\">\"max\"<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-subst\">              }<\/span>`<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\">            : <span class=\"hljs-string\">\"\"<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\">        }<\/span>`<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">      };<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">    } <span class=\"hljs-keyword\">catch<\/span> (error) {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">      <span class=\"hljs-keyword\">if<\/span> (process.dev) {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">        <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Activity search error:\"<\/span>, error);<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">      }<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">      <span class=\"hljs-keyword\">return<\/span> {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">        <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-literal\">false<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">        <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-string\">`Search failed: <span class=\"hljs-subst\">${error.message || <span class=\"hljs-string\">\"Please try again.\"<\/span>}<\/span>`<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\">      };<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\">    }<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\">  };<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\">   <span class=\"hljs-keyword\">const<\/span> performPriceOnlySearch = <span class=\"hljs-keyword\">async<\/span> (<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\">    { min, max },<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\">    activityFilter = <span class=\"hljs-literal\">null<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\">  ) =&gt; {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\">    <span class=\"hljs-keyword\">const<\/span> startTime = <span class=\"hljs-built_in\">Date<\/span>.now();<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\">    <span class=\"hljs-keyword\">try<\/span> {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\">      <span class=\"hljs-keyword\">let<\/span> query = activityFilter<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\">        ? <span class=\"hljs-string\">`product_cat.name.keyword:\"<span class=\"hljs-subst\">${getActivityLabel(activityFilter)}<\/span>\"`<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">        : <span class=\"hljs-string\">\"*\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">      <span class=\"hljs-keyword\">const<\/span> { data } = <span class=\"hljs-keyword\">await<\/span> searchProducts(query, {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">        <span class=\"hljs-attr\">limit<\/span>: <span class=\"hljs-built_in\">Number<\/span>(resultsLimit.value),<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">        <span class=\"hljs-attr\">strictMode<\/span>: <span class=\"hljs-literal\">true<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">      });<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">      <span class=\"hljs-keyword\">if<\/span> (!data?.find) {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">        <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">\"Invalid search response\"<\/span>);<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">      }<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">      <span class=\"hljs-keyword\">const<\/span> basic = mapBasicResults(data.find.documents);<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">      <span class=\"hljs-keyword\">const<\/span> detailed = <span class=\"hljs-keyword\">await<\/span> fetchCompleteProductData(basic);<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">    <\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">      <span class=\"hljs-keyword\">const<\/span> filteredResults = detailed.filter(<span class=\"hljs-function\">(<span class=\"hljs-params\">product<\/span>) =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">const<\/span> price = product.price || <span class=\"hljs-number\">0<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">return<\/span> price &gt;= min &amp;&amp; price &lt;= max;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\">      });<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\">      <span class=\"hljs-keyword\">const<\/span> searchTime = <span class=\"hljs-built_in\">Date<\/span>.now() - startTime;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\">      <span class=\"hljs-keyword\">return<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\">        <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-literal\">true<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\">        <span class=\"hljs-attr\">results<\/span>: filteredResults,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\">        <span class=\"hljs-attr\">total<\/span>: filteredResults.length,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\">        searchTime,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\">        <span class=\"hljs-attr\">query<\/span>: <span class=\"hljs-string\">`<span class=\"hljs-subst\">${<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\">          activityFilter<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\">            ? <span class=\"hljs-string\">`Activity: <span class=\"hljs-subst\">${getActivityLabel(activityFilter)}<\/span> | `<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">            : <span class=\"hljs-string\">\"\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\">        }<\/span>Price: $<span class=\"hljs-subst\">${min}<\/span> - $<span class=\"hljs-subst\">${max}<\/span>`<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\">      };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\">    } <span class=\"hljs-keyword\">catch<\/span> (error) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\">      <span class=\"hljs-keyword\">if<\/span> (process.dev) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\">        <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Price search error:\"<\/span>, error);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\">      }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\">      <span class=\"hljs-keyword\">return<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\">        <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-literal\">false<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\">        <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-string\">`Search failed: <span class=\"hljs-subst\">${error.message || <span class=\"hljs-string\">\"Please try again.\"<\/span>}<\/span>`<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\">      };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\">    }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\">  };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\">  <span class=\"hljs-keyword\">const<\/span> fetchCompleteProductData = <span class=\"hljs-keyword\">async<\/span> (products) =&gt; {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\">    <span class=\"hljs-keyword\">if<\/span> (!products.length) <span class=\"hljs-keyword\">return<\/span> &#91;];<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\">    <span class=\"hljs-keyword\">try<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\">      <span class=\"hljs-keyword\">const<\/span> productMap = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Map<\/span>();<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\">      products.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">prod<\/span>) =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\">        productMap.set(prod.id, prod);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\">      });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\">      <span class=\"hljs-keyword\">const<\/span> productIds = <span class=\"hljs-built_in\">Array<\/span>.from(productMap.keys());<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\">      <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> getProductDetails(productIds);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\">      <span class=\"hljs-keyword\">const<\/span> edges = response?.data?.products?.edges || &#91;];<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\">      <span class=\"hljs-keyword\">const<\/span> graphqlDataMap = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Map<\/span>();<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\">      edges.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">edge<\/span>) =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">if<\/span> (edge?.node?.databaseId) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          graphqlDataMap.set(edge.node.databaseId, edge.node);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">      });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-keyword\">const<\/span> enrichedProducts = &#91;];<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">const<\/span> &#91;productId, basicProduct] <span class=\"hljs-keyword\">of<\/span> productMap) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">const<\/span> graphqlNode = graphqlDataMap.get(productId);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">if<\/span> (!graphqlNode) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          enrichedProducts.push({<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">            ...basicProduct,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">            <span class=\"hljs-attr\">image<\/span>: <span class=\"hljs-string\">\"\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">            <span class=\"hljs-attr\">price<\/span>: <span class=\"hljs-number\">0<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">            <span class=\"hljs-attr\">formattedPrice<\/span>: <span class=\"hljs-string\">\"$0.00\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">            <span class=\"hljs-attr\">hasImage<\/span>: <span class=\"hljs-literal\">false<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">            <span class=\"hljs-attr\">isAvailable<\/span>: <span class=\"hljs-literal\">false<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          <span class=\"hljs-keyword\">continue<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">const<\/span> imageData = graphqlNode.image;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">const<\/span> imageUrl = imageData?.sourceUrl || <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">const<\/span> imageAlt = imageData?.altText || basicProduct.title || <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">const<\/span> rawPrice = graphqlNode.regularPrice || <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">let<\/span> priceValue = <span class=\"hljs-number\">0<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">let<\/span> formattedPrice = <span class=\"hljs-string\">\"$0.00\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">if<\/span> (rawPrice) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          <span class=\"hljs-keyword\">const<\/span> numericPrice = rawPrice.replace(<span class=\"hljs-regexp\">\/&#91;^0-9.]\/g<\/span>, <span class=\"hljs-string\">\"\"<\/span>);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          priceValue = numericPrice ? <span class=\"hljs-built_in\">parseFloat<\/span>(numericPrice) : <span class=\"hljs-number\">0<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          <span class=\"hljs-keyword\">if<\/span> (priceValue &gt; <span class=\"hljs-number\">0<\/span>) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">            formattedPrice = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Intl<\/span>.NumberFormat(<span class=\"hljs-string\">\"en-US\"<\/span>, {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">              <span class=\"hljs-attr\">style<\/span>: <span class=\"hljs-string\">\"currency\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">              <span class=\"hljs-attr\">currency<\/span>: <span class=\"hljs-string\">\"USD\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">            }).format(priceValue);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">const<\/span> productName = graphqlNode.name || basicProduct.title;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">const<\/span> productSlug = graphqlNode.slug || <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-keyword\">const<\/span> productDescription =<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          graphqlNode.description || basicProduct.description || <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        enrichedProducts.push({<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          ...basicProduct,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          <span class=\"hljs-attr\">title<\/span>: productName,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          <span class=\"hljs-attr\">description<\/span>: productDescription,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          <span class=\"hljs-attr\">slug<\/span>: productSlug,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          <span class=\"hljs-attr\">image<\/span>: imageUrl,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          imageAlt,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          <span class=\"hljs-attr\">hasImage<\/span>: <span class=\"hljs-built_in\">Boolean<\/span>(imageUrl),<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          <span class=\"hljs-attr\">price<\/span>: priceValue,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          formattedPrice,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          rawPrice,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          <span class=\"hljs-attr\">isAvailable<\/span>: priceValue &gt; <span class=\"hljs-number\">0<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">          <span class=\"hljs-attr\">hasCompleteData<\/span>: <span class=\"hljs-literal\">true<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">      }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-keyword\">return<\/span> enrichedProducts;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">    } <span class=\"hljs-keyword\">catch<\/span> (error) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-keyword\">if<\/span> (process.dev) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Error fetching product details:\"<\/span>, error);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">      }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-keyword\">return<\/span> products.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">prod<\/span>) =&gt;<\/span> ({<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">        ...prod,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-attr\">image<\/span>: <span class=\"hljs-string\">\"\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-attr\">price<\/span>: <span class=\"hljs-number\">0<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-attr\">formattedPrice<\/span>: <span class=\"hljs-string\">\"$0.00\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-attr\">hasImage<\/span>: <span class=\"hljs-literal\">false<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-attr\">isAvailable<\/span>: <span class=\"hljs-literal\">false<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-attr\">hasCompleteData<\/span>: <span class=\"hljs-literal\">false<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-string\">\"Failed to fetch complete data\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      }));<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">const<\/span> getActivityLabel = <span class=\"hljs-function\">(<span class=\"hljs-params\">activityValue<\/span>) =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-keyword\">const<\/span> labels = {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">coding<\/span>: <span class=\"hljs-string\">\"coding\"<\/span>, <span class=\"hljs-comment\">\/\/ matches exactly<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">running<\/span>: <span class=\"hljs-string\">\"Running\"<\/span>, <span class=\"hljs-comment\">\/\/ matches exactly (note capital R)<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-string\">\"rock-climbing\"<\/span>: <span class=\"hljs-string\">\"climbing\"<\/span>, <span class=\"hljs-comment\">\/\/ maps to \"climbing\" in index<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-keyword\">return<\/span> labels&#91;activityValue] || activityValue;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">const<\/span> performCombinedSearch = <span class=\"hljs-keyword\">async<\/span> (activityValue, priceFilter) =&gt; {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-keyword\">return<\/span> performActivitySearch(activityValue, priceFilter);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">return<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    performSearch,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    performActivitySearch,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    performPriceOnlySearch,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    performCombinedSearch,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    fetchCompleteProductData,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    getActivityLabel,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-string\"><span class=\"hljs-subst\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This code block glues together two back-end services: WP Engine Smart Search for all your full-text, semantic, and strict \u201cfind\u201d queries (including category and range filters) and WPGraphQL for authoritative product details.&nbsp;<\/p>\n\n\n\n<p>Each of its methods (<code>performSearch<\/code>, <code>performActivitySearch<\/code>, <code>performPriceOnlySearch<\/code>, and <code>performCombinedSearch<\/code>) constructs a single GraphQL find call that tells Smart Search exactly how to filter (via its query, filter, <code>semanticSearch<\/code>, or<code> strictMode<\/code> inputs). <\/p>\n\n\n\n<p>Smart Search returns only the IDs, scores, and minimal data you need; then <code>fetchCompleteProductData<\/code> issues one batched WPGraphQL request to pull down images, prices, and slugs, merging them back into your UI payload.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s a detailed breakdown:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Initialization<\/strong><strong><br><\/strong>\n<ul class=\"wp-block-list\">\n<li>It pulls in two low-level operations from useSmartSearch:<br>\n<ul class=\"wp-block-list\">\n<li><code>searchProducts<\/code>(query, options) to run any \u201cfind\u201d query against the Smart Search API.<br><\/li>\n\n\n\n<li><code>getProductDetails<\/code>(ids) to fetch full WPGraphQL product data (images, pricing) by database ID.<br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>It also defines a reactive <code>resultsLimit <\/code>(default 20) to control page size.<br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Mapping Basic Results<\/strong><strong><br><\/strong>\n<ul class=\"wp-block-list\">\n<li><code>mapBasicResults<\/code> takes the raw documents array returned by Smart Search\u2014which each contains a data map and a relevance score\u2014and converts it to a minimal product stub <code>{ id, title, description, score, image: \"\", price: 0 }.<\/code><br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Text\u2010Query Search (<\/strong><code>performSearch<\/code><strong>)<br><\/strong>\n<ul class=\"wp-block-list\">\n<li>Validates the input query, records start time, then calls <code>searchProducts(query, { limit })<\/code>.<br><\/li>\n\n\n\n<li>Throws if the API response is malformed.<br><\/li>\n\n\n\n<li>Builds basic stubs via <code>mapBasicResults<\/code>, then immediately calls <code>fetchCompleteProductData<\/code> to enrich each result with image URLs and numeric pricing.<br><\/li>\n\n\n\n<li>Returns <code>{ success, results, total, searchTime, query }<\/code>.<br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Category\/Activity Search (<\/strong><code>performActivitySearch<\/code><strong>)<br><\/strong>\n<ul class=\"wp-block-list\">\n<li>Ensures a non-empty activity value, then issues a <code>searchProducts<\/code> request where the query is simply the exact category name (e.g. &#8220;Running&#8221;) and <code>strictMode: true<\/code> to disable semantic fuzziness.<br><\/li>\n\n\n\n<li>Enriches with full product data, then optionally applies a client-side price filter if one was passed in.<br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Price\u2010Only Search (<\/strong><code>performPriceOnlySearch<\/code><strong>)<br><\/strong>\n<ul class=\"wp-block-list\">\n<li>Builds a \u201ccatch-all\u201d query (&#8220;*&#8221; or scoped to a category) with <code>strictMode: true.<\/code><br><\/li>\n\n\n\n<li>Fetches the matching products, enriches them, then filters the enriched list on the client by the given <code>{ min, max }<\/code> range.<br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Data Enrichment (<\/strong><code>fetchCompleteProductData<\/code><strong>)<br><\/strong>\n<ul class=\"wp-block-list\">\n<li>Given an array of basic stubs, batches a WPGraphQL call for all their IDs.<br><\/li>\n\n\n\n<li>Maps the GraphQL response nodes back onto your stubs, filling in image, price, and formatting into <code>formattedPrice<\/code>, flagging missing\/failed items.<br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Utility and Labels<\/strong><strong><br><\/strong>\n<ul class=\"wp-block-list\">\n<li><code>getActivityLabel<\/code> maps your UI\u2019s \u201cactivity\u201d values (e.g., &#8220;rock-climbing&#8221;) to the exact category names in your Smart Search index.<br><\/li>\n\n\n\n<li>A tiny wrapper, <code>performCombinedSearch<\/code> simply delegates to <code>performActivitySearch<\/code>so you can hook into a unified API.<br><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"our-components\">Our Components<\/h2>\n\n\n\n<p>It is time to build all the components that will allow our e-commerce site to have a user experience with data rendered on the browser.&nbsp; At the root of the project, create a folder called <code>components<\/code>.&nbsp; We will be staying in the <code>components<\/code> folder for all of this section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"input-field\">The Input Field<\/h3>\n\n\n\n<p>First, let&#8217;s make the Input field for our users to type into for searching.<\/p>\n\n\n\n<p>Create a file at <code>components\/SearchInput.vue<\/code> and paste in the code below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"search-input\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Search Input Container --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"search-container mb-6\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"relative\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">v-model<\/span>=<span class=\"hljs-string\">\"searchQuery\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          @<span class=\"hljs-attr\">input<\/span>=<span class=\"hljs-string\">\"handleInput\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          @<span class=\"hljs-attr\">keyup.enter<\/span>=<span class=\"hljs-string\">\"handleSubmit\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">:placeholder<\/span>=<span class=\"hljs-string\">\"placeholder\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"w-full px-4 py-3 pl-12 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-comment\">&lt;!-- Search Icon --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SearchIcon<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-comment\">&lt;!-- Clear Button --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"searchQuery\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"handleClear\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"absolute inset-y-0 right-0 pr-3 flex items-center hover:text-gray-600\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CloseIcon<\/span> <span class=\"hljs-attr\">customClass<\/span>=<span class=\"hljs-string\">\"h-5 w-5 text-gray-400\"<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> { ref, watch } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> SearchIcon <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/icons\/SearchIcon.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> CloseIcon <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/icons\/CloseIcon.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Props<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> props = defineProps({<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  <span class=\"hljs-attr\">initialQuery<\/span>: {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-string\">\"\"<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  },<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  <span class=\"hljs-attr\">placeholder<\/span>: {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-string\">\"Search products...\"<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  },<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">});<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Emits<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> emit = defineEmits(&#91;<span class=\"hljs-string\">\"search\"<\/span>, <span class=\"hljs-string\">\"clear\"<\/span>, <span class=\"hljs-string\">\"input\"<\/span>]);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Reactive data<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> searchQuery = ref(props.initialQuery);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Debounce timer<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">let<\/span> searchTimeout = <span class=\"hljs-literal\">null<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Methods<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> handleInput = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  clearTimeout(searchTimeout);<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  searchTimeout = setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">    emit(<span class=\"hljs-string\">\"input\"<\/span>, searchQuery.value);<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">  }, <span class=\"hljs-number\">300<\/span>); <span class=\"hljs-comment\">\/\/ 300ms debounce<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> handleSubmit = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"search\"<\/span>, searchQuery.value);<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> handleClear = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  searchQuery.value = <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"clear\"<\/span>);<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Watch for external changes to search query<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">watch(<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> props.initialQuery,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  (newQuery) =&gt; {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    searchQuery.value = newQuery;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  }<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">);<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Expose methods for parent component<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">defineExpose({<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">clearQuery<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    searchQuery.value = <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  },<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">setQuery<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">query<\/span>) =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    searchQuery.value = query;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  },<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">searchQuery<\/span>: searchQuery,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">});<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><span class=\"hljs-selector-class\">.search-container<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">800px<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>SearchInput.vue<\/code> component renders a styled text input with a built\u2011in search icon and \u201cclear\u201d button. It accepts two props\u2014<code>initialQuery<\/code> to seed the field and placeholder for the hint text\u2014and binds its value to a reactive<code> searchQuery <\/code>via <code><a href=\"https:\/\/vuejs.org\/guide\/components\/v-model\">v\u2011model<\/a><\/code>.&nbsp;<\/p>\n\n\n\n<p>As the user types, it debounces input by 300\u202fms before emitting an &#8220;input&#8221; event, fires a &#8220;search&#8221; event on Enter, and shows a clear button that resets the field and emits &#8220;clear&#8221;. It also watches <code>initialQuery<\/code> for external changes and exposes <code>clearQuery<\/code> and <code>setQuery<\/code> methods so parent components can programmatically control the input.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"activity-filter\">Activity Filter<\/h3>\n\n\n\n<p>&nbsp;Next, let&#8217;s make the filter to allow users to select an activity.&nbsp; Create a file at <code>components\/ActivityFilter.vue<\/code> &nbsp;and paste in the code below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"activity-filter mb-6\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex items-center justify-between mb-4\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-lg font-medium text-gray-900\"<\/span>&gt;<\/span>Filter by Activity<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"selectedActivity\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"clearFilter\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-sm text-blue-600 hover:text-blue-800\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        Clear Filter\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex flex-wrap gap-3\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"activity in activities\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">:key<\/span>=<span class=\"hljs-string\">\"activity.value\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"selectActivity(activity.value)\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">:aria-pressed<\/span>=<span class=\"hljs-string\">\"selectedActivity === activity.value\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">:class<\/span>=<span class=\"hljs-string\">\"&#91;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"hljs-string\">          'px-4 py-2 rounded-full border text-sm font-medium transition-colors',<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"hljs-string\">          selectedActivity === activity.value<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"hljs-string\">            ? 'bg-blue-600 text-white border-blue-600'<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"hljs-string\">            : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50',<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"hljs-string\">        ]\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        {{ activity.label }}\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"selectedActivity\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">    &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex items-center justify-between\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-sm text-blue-800\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Active Filter:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          {{ getActivityLabel(selectedActivity) }}\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"clearFilter\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-blue-600 hover:text-blue-800\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Clear activity filter\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CloseIcon<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> { ref } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> CloseIcon <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/icons\/CloseIcon.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> props = defineProps({<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  <span class=\"hljs-attr\">initialActivity<\/span>: {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-string\">\"\"<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  },<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">});<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> emit = defineEmits(&#91;<span class=\"hljs-string\">\"activity-selected\"<\/span>, <span class=\"hljs-string\">\"activity-cleared\"<\/span>]);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> selectedActivity = ref(props.initialActivity);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> activities = &#91;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  { <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-string\">\"coding\"<\/span>, <span class=\"hljs-attr\">label<\/span>: <span class=\"hljs-string\">\"Coding\"<\/span> },<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  { <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-string\">\"running\"<\/span>, <span class=\"hljs-attr\">label<\/span>: <span class=\"hljs-string\">\"Running\"<\/span> },<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  { <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-string\">\"rock-climbing\"<\/span>, <span class=\"hljs-attr\">label<\/span>: <span class=\"hljs-string\">\"Rock Climbing\"<\/span> },<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">];<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">selectActivity<\/span>(<span class=\"hljs-params\">activity<\/span>) <\/span>{<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  selectedActivity.value = activity;<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"activity-selected\"<\/span>, activity);<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">}<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">clearFilter<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">  selectedActivity.value = <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"activity-cleared\"<\/span>);<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">}<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getActivityLabel<\/span>(<span class=\"hljs-params\">value<\/span>) <\/span>{<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">const<\/span> activity = activities.find(<span class=\"hljs-function\">(<span class=\"hljs-params\">a<\/span>) =&gt;<\/span> a.value === value);<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">return<\/span> activity ? activity.label : value;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">}<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">defineExpose({<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">clearActivity<\/span>: clearFilter,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">setActivity<\/span>: selectActivity,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">});<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>ActivityFilter.vue<\/code> component renders a set of pill\u2011style buttons\u2014\u201cCoding,\u201d \u201cRunning,\u201d and \u201cRock Climbing\u201d\u2014allowing users to select one activity at a time. It accepts an <code>initialActivity<\/code> prop to pre\u2011select a button and emits activity\u2011selected with the chosen value whenever a button is clicked.&nbsp;<\/p>\n\n\n\n<p>A \u201cClear Filter\u201d button appears when a selection exists, resetting the state and emitting activity\u2011cleared. We use<a href=\"https:\/\/vuejs.org\/api\/reactivity-core.html#ref\"> Vue\u2019s ref for reactive state<\/a>, simple methods to update and clear the selection, and <code>defineExpose<\/code> to let parent components programmatically set or clear the filter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"price-range\">Price Range<\/h3>\n\n\n\n<p>Now, let&#8217;s give users the ability to slide a range within pricing.&nbsp; Create a file at <code>components\/PriceFilter.vue<\/code> and paste this code block in:<br><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"price-filter mb-6\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex items-center justify-between mb-4\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-lg font-medium text-gray-900\"<\/span>&gt;<\/span>Filter by Price<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"priceRange.min &gt; 0 || priceRange.max &lt; maxPrice\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"clearFilter\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-sm text-blue-600 hover:text-blue-800\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        Reset Price\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"px-3\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex justify-between items-center mb-4\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-sm font-medium text-gray-700\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          &gt;<\/span>${{ priceRange.min }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-sm text-gray-500\"<\/span>&gt;<\/span>to<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-sm font-medium text-gray-700\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          &gt;<\/span>${{ priceRange.max }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"relative\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"h-2 bg-gray-200 rounded-lg relative\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">            <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"absolute h-2 bg-blue-500 rounded-lg\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">            <span class=\"hljs-attr\">:style<\/span>=<span class=\"hljs-string\">\"{ left: percentLeft, width: percentWidth }\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">v-model.number<\/span>=<span class=\"hljs-string\">\"priceRange.min\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          @<span class=\"hljs-attr\">input<\/span>=<span class=\"hljs-string\">\"handlePriceChange\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"range\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">:min<\/span>=<span class=\"hljs-string\">\"0\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">:max<\/span>=<span class=\"hljs-string\">\"maxPrice\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">:step<\/span>=<span class=\"hljs-string\">\"10\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Minimum price\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"absolute w-full h-2 bg-transparent appearance-none cursor-pointer slider-thumb\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">v-model.number<\/span>=<span class=\"hljs-string\">\"priceRange.max\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          @<span class=\"hljs-attr\">input<\/span>=<span class=\"hljs-string\">\"handlePriceChange\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"range\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">:min<\/span>=<span class=\"hljs-string\">\"0\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">:max<\/span>=<span class=\"hljs-string\">\"maxPrice\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">:step<\/span>=<span class=\"hljs-string\">\"10\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Maximum price\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"absolute w-full h-2 bg-transparent appearance-none cursor-pointer slider-thumb\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"priceRange.min &gt; 0 || priceRange.max &lt; maxPrice\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"applyFilter\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        Apply Price Filter (${{ priceRange.min }} - ${{ priceRange.max }})\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"actionscript\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-meta-keyword\">import<\/span> { ref, computed, toRef, onUnmounted } from \"vue\";<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-keyword\">const<\/span> props = defineProps({<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\">  initialMin: { type: Number, <span class=\"hljs-keyword\">default<\/span>: <span class=\"hljs-number\">0<\/span> },<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\">  initialMax: { type: Number, <span class=\"hljs-keyword\">default<\/span>: <span class=\"hljs-number\">1000<\/span> },<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\">  maxPrice: { type: Number, <span class=\"hljs-keyword\">default<\/span>: <span class=\"hljs-number\">1000<\/span> },<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\">});<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-keyword\">const<\/span> emit = defineEmits(&#91;<span class=\"hljs-string\">\"price-changed\"<\/span>, <span class=\"hljs-string\">\"price-applied\"<\/span>, <span class=\"hljs-string\">\"price-cleared\"<\/span>]);<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-keyword\">const<\/span> priceRange = ref({ min: props.initialMin, max: props.initialMax });<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-keyword\">const<\/span> maxPrice = toRef(props, <span class=\"hljs-string\">\"maxPrice\"<\/span>);<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\">let priceTimeout;<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-keyword\">const<\/span> percentLeft = computed(<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\">  () =&gt; `${(priceRange.value.min \/ maxPrice.value) * <span class=\"hljs-number\">100<\/span>}%`<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\">);<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-keyword\">const<\/span> percentWidth = computed(<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\">  () =&gt;<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\">    `${((priceRange.value.max - priceRange.value.min) \/ maxPrice.value) * <span class=\"hljs-number\">100<\/span>}%`<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\">);<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handlePriceChange<\/span><span class=\"hljs-params\">()<\/span> <\/span>{<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">  let { min, max } = priceRange.value;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">if<\/span> (min &gt; max) {<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">    min = max;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">  } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (max &lt; min) {<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">    max = min;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">  }<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">  priceRange.value.min = min;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">  priceRange.value.max = max;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"price-changed\"<\/span>, { min, max });<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">  clearTimeout(priceTimeout);<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">  priceTimeout = setTimeout(() =&gt; {<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">    <span class=\"hljs-keyword\">if<\/span> (priceRange.value.min &gt; <span class=\"hljs-number\">0<\/span> || priceRange.value.max &lt; maxPrice.value) {<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">      emit(<span class=\"hljs-string\">\"price-applied\"<\/span>, {<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">        min: priceRange.value.min,<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">        max: priceRange.value.max,<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">      });<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">    }<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">  }, <span class=\"hljs-number\">1000<\/span>);<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\">}<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">clearFilter<\/span><span class=\"hljs-params\">()<\/span> <\/span>{<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\">  priceRange.value.min = <span class=\"hljs-number\">0<\/span>;<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\">  priceRange.value.max = maxPrice.value;<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"price-cleared\"<\/span>);<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\">}<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">applyFilter<\/span><span class=\"hljs-params\">()<\/span> <\/span>{<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"price-applied\"<\/span>, {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    min: priceRange.value.min,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    max: priceRange.value.max,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  });<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">}<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">onUnmounted(() =&gt; {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  clearTimeout(priceTimeout);<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">});<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">defineExpose({ clearPrice: clearFilter });<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><span class=\"hljs-selector-class\">.slider-thumb<\/span><span class=\"hljs-selector-pseudo\">::-webkit-slider-thumb<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><span class=\"hljs-selector-class\">.slider-thumb<\/span><span class=\"hljs-selector-pseudo\">::-moz-range-thumb<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">appearance<\/span>: none;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">20px<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">20px<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#3b82f6<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">cursor<\/span>: pointer;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#ffffff<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.2<\/span>);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">position<\/span>: relative;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">z-index<\/span>: <span class=\"hljs-number\">1<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><span class=\"hljs-selector-class\">.slider-thumb<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span><span class=\"hljs-selector-pseudo\">::-webkit-slider-thumb<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><span class=\"hljs-selector-class\">.slider-thumb<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span><span class=\"hljs-selector-pseudo\">::-moz-range-thumb<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#2563eb<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><span class=\"hljs-selector-class\">.slider-thumb<\/span><span class=\"hljs-selector-pseudo\">:active<\/span><span class=\"hljs-selector-pseudo\">::-webkit-slider-thumb<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><span class=\"hljs-selector-class\">.slider-thumb<\/span><span class=\"hljs-selector-pseudo\">:active<\/span><span class=\"hljs-selector-pseudo\">::-moz-range-thumb<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#1d4ed8<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"actionscript\"><span class=\"hljs-meta\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>PriceFilter.vue<\/code> component provides a dual\u2011thumb price slider with live updates, preset buttons, and clear\/apply controls. It accepts <code>initialMin<\/code>, <code>initialMax<\/code>, and <code>maxPrice<\/code> props to initialize its reactive <code>priceRange<\/code> and dynamically computes the filled\u2011track positions (<code>percentLeft<\/code> and <code>percentWidth<\/code>).&nbsp;<\/p>\n\n\n\n<p>As the user drags either thumb, <code>handlePriceChange<\/code> clamps the values so <code>min \u2264 max<\/code>, emits a price\u2011changed event immediately, then debounces a price\u2011applied event by 1\u202fsecond of inactivity. Clicking a preset button jumps to that range and fires price\u2011applied at once, while the \u201cReset Price\u201d and \u201cApply Price Filter\u201d buttons emit price\u2011cleared and price\u2011applied.&nbsp;<\/p>\n\n\n\n<p>It cleans up its debounce timer on unmount and exposes <code>clearPrice<\/code> and <code>setPrice<\/code> methods so parent components can programmatically reset or set the range.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"search-results-display\">Search Results Display<\/h3>\n\n\n\n<p>The next thing we need to do is display the search results.&nbsp; Create a file at <code>components\/SearchResults.vue<\/code> and paste this code block in:<br><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"search-results\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Loading State --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"isLoading\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-center py-6\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"inline-flex items-center\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">LoadingSpinner<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-lg\"<\/span>&gt;<\/span>Searching...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Search Results --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-else-if<\/span>=<span class=\"hljs-string\">\"results.length &gt; 0\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"search-results-content\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-comment\">&lt;!-- Results Header --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"mb-6 flex justify-between items-center\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-lg font-medium text-gray-700\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          Found {{ totalResults }} products\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"searchTime\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-sm text-gray-500\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">            &gt;<\/span>({{ searchTime }}ms)<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"clearResults\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-sm text-gray-600 hover:text-gray-800\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          Clear Results\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-comment\">&lt;!-- Products Grid --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"product in results\"<\/span> <span class=\"hljs-attr\">:key<\/span>=<span class=\"hljs-string\">\"product.id\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ProductCard<\/span> <span class=\"hljs-attr\">:product<\/span>=<span class=\"hljs-string\">\"product\"<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- No Results --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-else-if<\/span>=<span class=\"hljs-string\">\"hasSearched &amp;&amp; !isLoading\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-center py-12\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-gray-500\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">NoResultsIcon<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-xl font-medium text-gray-900 mb-2\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          No products found\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-gray-600\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          Try adjusting your search terms or search options\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Error State --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"error\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bg-red-50 border border-red-200 rounded-lg p-4 mb-6\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">    &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ErrorIcon<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ml-3\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-sm font-medium text-red-800\"<\/span>&gt;<\/span>Search Error<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-sm text-red-700 mt-1\"<\/span>&gt;<\/span>{{ error }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> ProductCard <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/ProductCard.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> LoadingSpinner <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/icons\/LoadingSpinner.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> NoResultsIcon <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/icons\/NoResultsIcon.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> ErrorIcon <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/icons\/ErrorIcon.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Props<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> props = defineProps({<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  <span class=\"hljs-attr\">results<\/span>: {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">Array<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> &#91;],<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  },<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">totalResults<\/span>: {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">Number<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-number\">0<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  },<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">isLoading<\/span>: {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">Boolean<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-literal\">false<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  },<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">hasSearched<\/span>: {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">Boolean<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-literal\">false<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  },<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">error<\/span>: {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-string\">\"\"<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  },<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">searchTime<\/span>: {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">Number<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-number\">0<\/span>,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  },<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">});<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Emits<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> emit = defineEmits(&#91;<span class=\"hljs-string\">\"clear-results\"<\/span>]);<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Methods<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> clearResults = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"clear-results\"<\/span>);<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><span class=\"hljs-selector-class\">.search-results-content<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">animation<\/span>: fadeIn <span class=\"hljs-number\">0.3s<\/span> ease-out;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">}<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><span class=\"hljs-keyword\">@keyframes<\/span> fadeIn {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-selector-tag\">from<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">    <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  }<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-selector-tag\">to<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">    <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">1<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  }<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">}<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>SearchResults.vue<\/code> component handles all the display states for your product search: it shows a spinning loader when <code>isLoading<\/code> is true; once results arrive <code>(results.length &gt; 0)<\/code>, it renders a header with the total count and search time alongside a \u201cClear Results\u201d button, then lays out each product via a <code>&lt;ProductCard&gt;<\/code> grid; if the search has been performed but yielded no hits, it displays a&nbsp; \u201cNo products found\u201d message; and if an error string is present, it surfaces a styled error banner with the message.&nbsp;<\/p>\n\n\n\n<p>By accepting props for results,<code> totalResults<\/code>, <code>isLoading<\/code>, <code>hasSearched<\/code>, <code>error<\/code>, and <code>searchTime<\/code>, and emitting a single clear-results event, it holds all the UI you need to reflect loading, success, empty, and error conditions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"search-bar\">Search Bar<\/h3>\n\n\n\n<p>The next thing we need to make is the search bar, which will bring in the previous four components we just built.&nbsp; Create a file at <code>components\/SearchBar.vue<\/code> and paste this code block in:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"search-bar\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Search Input Component --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SearchInput<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"searchInputRef\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:initial-query<\/span>=<span class=\"hljs-string\">\"initialQuery\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:placeholder<\/span>=<span class=\"hljs-string\">\"placeholder\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      @<span class=\"hljs-attr\">input<\/span>=<span class=\"hljs-string\">\"handleSearchInput\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      @<span class=\"hljs-attr\">search<\/span>=<span class=\"hljs-string\">\"handleSearchSubmit\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      @<span class=\"hljs-attr\">clear<\/span>=<span class=\"hljs-string\">\"handleSearchClear\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">    \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Activity Filter Component --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ActivityFilter<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"activityFilterRef\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:initial-activity<\/span>=<span class=\"hljs-string\">\"selectedActivity\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      @<span class=\"hljs-attr\">activity-selected<\/span>=<span class=\"hljs-string\">\"handleActivitySelected\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      @<span class=\"hljs-attr\">activity-cleared<\/span>=<span class=\"hljs-string\">\"handleActivityCleared\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">    \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Price Filter Component --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">PriceFilter<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"priceFilterRef\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:initial-min<\/span>=<span class=\"hljs-string\">\"priceRange.min\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:initial-max<\/span>=<span class=\"hljs-string\">\"priceRange.max\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:max-price<\/span>=<span class=\"hljs-string\">\"maxPrice\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      @<span class=\"hljs-attr\">price-changed<\/span>=<span class=\"hljs-string\">\"handlePriceChanged\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      @<span class=\"hljs-attr\">price-applied<\/span>=<span class=\"hljs-string\">\"handlePriceApplied\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      @<span class=\"hljs-attr\">price-cleared<\/span>=<span class=\"hljs-string\">\"handlePriceCleared\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">    \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Search Results Component --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SearchResults<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:results<\/span>=<span class=\"hljs-string\">\"searchResults\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:total-results<\/span>=<span class=\"hljs-string\">\"totalResults\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:is-loading<\/span>=<span class=\"hljs-string\">\"isLoading\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:has-searched<\/span>=<span class=\"hljs-string\">\"hasSearched\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:error<\/span>=<span class=\"hljs-string\">\"error\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">:search-time<\/span>=<span class=\"hljs-string\">\"searchTime\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      @<span class=\"hljs-attr\">clear-results<\/span>=<span class=\"hljs-string\">\"handleClearResults\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">    \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> { ref, onMounted, onUnmounted } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> SearchInput <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/SearchInput.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> ActivityFilter <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/ActivityFilter.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> PriceFilter <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/PriceFilter.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> SearchResults <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/SearchResults.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> { useSearchLogic } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/composables\/useSearchLogic\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Props<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> props = defineProps({<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  <span class=\"hljs-attr\">initialQuery<\/span>: {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-string\">\"\"<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  },<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  <span class=\"hljs-attr\">placeholder<\/span>: {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-attr\">default<\/span>: <span class=\"hljs-string\">\"Search products...\"<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  },<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">});<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Emits<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> emit = defineEmits(&#91;<span class=\"hljs-string\">\"search-results\"<\/span>, <span class=\"hljs-string\">\"search-start\"<\/span>, <span class=\"hljs-string\">\"search-complete\"<\/span>]);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Use search logic composable<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  performSearch,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  performActivitySearch,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  performPriceOnlySearch,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  performCombinedSearch,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">} = useSearchLogic();<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Component refs<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> searchInputRef = ref(<span class=\"hljs-literal\">null<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> activityFilterRef = ref(<span class=\"hljs-literal\">null<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> priceFilterRef = ref(<span class=\"hljs-literal\">null<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Reactive data<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> searchResults = ref(&#91;]);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> totalResults = ref(<span class=\"hljs-number\">0<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> isLoading = ref(<span class=\"hljs-literal\">false<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> hasSearched = ref(<span class=\"hljs-literal\">false<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> error = ref(<span class=\"hljs-string\">\"\"<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> searchTime = ref(<span class=\"hljs-number\">0<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Filter states<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> selectedActivity = ref(<span class=\"hljs-string\">\"\"<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> priceRange = ref({<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  <span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">0<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">1000<\/span>,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">});<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> maxPrice = ref(<span class=\"hljs-number\">1000<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Search Input Event Handlers<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> handleSearchInput = <span class=\"hljs-keyword\">async<\/span> (query) =&gt; {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  <span class=\"hljs-keyword\">if<\/span> (query.trim()) {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-keyword\">await<\/span> executeSearch(query, <span class=\"hljs-string\">\"semantic-search\"<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  } <span class=\"hljs-keyword\">else<\/span> {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    clearResults();<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  }<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">};<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> handleSearchSubmit = <span class=\"hljs-keyword\">async<\/span> (query) =&gt; {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  <span class=\"hljs-keyword\">if<\/span> (query.trim()) {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">    <span class=\"hljs-keyword\">await<\/span> executeSearch(query, <span class=\"hljs-string\">\"semantic-search\"<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">  }<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\">};<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> handleSearchClear = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  clearResults();<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  clearAllFilters();<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">};<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Activity Filter Event Handlers<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> handleActivitySelected = <span class=\"hljs-keyword\">async<\/span> (activityValue) =&gt; {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  selectedActivity.value = activityValue;<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  searchInputRef.value?.clearQuery();<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  <span class=\"hljs-comment\">\/\/ Check if price filter is active<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">const<\/span> hasPriceFilter =<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    priceRange.value.min &gt; <span class=\"hljs-number\">0<\/span> || priceRange.value.max &lt; maxPrice.value;<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">if<\/span> (hasPriceFilter) {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-comment\">\/\/ Use combined search for activity + price<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-keyword\">await<\/span> executeCombinedSearch(activityValue, priceRange.value);<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  } <span class=\"hljs-keyword\">else<\/span> {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-comment\">\/\/ Use activity-only search<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-keyword\">await<\/span> executeActivitySearch(activityValue);<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  }<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">};<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> handleActivityCleared = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">  selectedActivity.value = <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">  clearResults();<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Price Filter Event Handlers<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> handlePriceChanged = <span class=\"hljs-function\">(<span class=\"hljs-params\">priceData<\/span>) =&gt;<\/span> {<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  priceRange.value = priceData;<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> handlePriceApplied = <span class=\"hljs-keyword\">async<\/span> (priceData) =&gt; {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  priceRange.value = priceData;<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-comment\">\/\/ Check if activity filter is active<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">if<\/span> (selectedActivity.value) {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-comment\">\/\/ Use combined search for activity + price<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-keyword\">await<\/span> executeCombinedSearch(selectedActivity.value, priceData);<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  } <span class=\"hljs-keyword\">else<\/span> {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-comment\">\/\/ Use price-only search<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-keyword\">await<\/span> executePriceFilter();<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  }<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> handlePriceCleared = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  priceRange.value = { <span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">max<\/span>: maxPrice.value };<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-comment\">\/\/ Re-run current search without price filter<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">if<\/span> (searchInputRef.value?.searchQuery?.trim()) {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    executeSearch(searchInputRef.value.searchQuery, <span class=\"hljs-string\">\"semantic-search\"<\/span>);<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (selectedActivity.value) {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-comment\">\/\/ Re-run activity search without price filter<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    executeActivitySearch(selectedActivity.value);<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  }<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Results Event Handlers<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> handleClearResults = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  clearResults();<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  clearAllFilters();<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Core Search Execution Methods<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> executeSearch = <span class=\"hljs-keyword\">async<\/span> (query, type) =&gt; {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  isLoading.value = <span class=\"hljs-literal\">true<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  error.value = <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  hasSearched.value = <span class=\"hljs-literal\">true<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"search-start\"<\/span>, { query, type });<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">const<\/span> result = <span class=\"hljs-keyword\">await<\/span> performSearch(query);<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">if<\/span> (result.success) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    searchResults.value = result.results;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    totalResults.value = result.total;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    searchTime.value = result.searchTime;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    emit(<span class=\"hljs-string\">\"search-results\"<\/span>, {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">results<\/span>: searchResults.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">total<\/span>: totalResults.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      query,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      type,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">time<\/span>: searchTime.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    });<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  } <span class=\"hljs-keyword\">else<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    error.value = result.error;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    searchResults.value = &#91;];<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    totalResults.value = <span class=\"hljs-number\">0<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  }<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  isLoading.value = <span class=\"hljs-literal\">false<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"search-complete\"<\/span>, {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">success<\/span>: result.success,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">resultsCount<\/span>: searchResults.value.length,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  });<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> executeActivitySearch = <span class=\"hljs-keyword\">async<\/span> (activityValue) =&gt; {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  isLoading.value = <span class=\"hljs-literal\">true<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  error.value = <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  hasSearched.value = <span class=\"hljs-literal\">true<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"search-start\"<\/span>, { <span class=\"hljs-attr\">query<\/span>: activityValue, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"activity-filter\"<\/span> });<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">const<\/span> result = <span class=\"hljs-keyword\">await<\/span> performActivitySearch(activityValue);<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">if<\/span> (result.success) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    searchResults.value = result.results;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    totalResults.value = result.total;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    searchTime.value = result.searchTime;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    emit(<span class=\"hljs-string\">\"search-results\"<\/span>, {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">results<\/span>: searchResults.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">total<\/span>: totalResults.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">query<\/span>: result.query,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"activity-filter\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">time<\/span>: searchTime.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    });<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  } <span class=\"hljs-keyword\">else<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    error.value = result.error;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    searchResults.value = &#91;];<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    totalResults.value = <span class=\"hljs-number\">0<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  }<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  isLoading.value = <span class=\"hljs-literal\">false<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"search-complete\"<\/span>, {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">success<\/span>: result.success,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">resultsCount<\/span>: searchResults.value.length,<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  });<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> executePriceFilter = <span class=\"hljs-keyword\">async<\/span> () =&gt; {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">await<\/span> executePriceOnlySearch();<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> executePriceOnlySearch = <span class=\"hljs-keyword\">async<\/span> () =&gt; {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  isLoading.value = <span class=\"hljs-literal\">true<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  error.value = <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  hasSearched.value = <span class=\"hljs-literal\">true<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">const<\/span> query = <span class=\"hljs-string\">`Price: $<span class=\"hljs-subst\">${priceRange.value.min}<\/span> - $<span class=\"hljs-subst\">${priceRange.value.max}<\/span>`<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  emit(<span class=\"hljs-string\">\"search-start\"<\/span>, { query, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"price-filter\"<\/span> });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  <span class=\"hljs-comment\">\/\/ Pass activity filter if active<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  <span class=\"hljs-keyword\">const<\/span> result = <span class=\"hljs-keyword\">await<\/span> performPriceOnlySearch(<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    priceRange.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    selectedActivity.value || <span class=\"hljs-literal\">null<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  );<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  <span class=\"hljs-keyword\">if<\/span> (result.success) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    searchResults.value = result.results;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    totalResults.value = result.total;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    searchTime.value = result.searchTime;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    emit(<span class=\"hljs-string\">\"search-results\"<\/span>, {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">      <span class=\"hljs-attr\">results<\/span>: searchResults.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">      <span class=\"hljs-attr\">total<\/span>: totalResults.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">      <span class=\"hljs-attr\">query<\/span>: result.query,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">      <span class=\"hljs-attr\">type<\/span>: selectedActivity.value ? <span class=\"hljs-string\">\"combined-filter\"<\/span> : <span class=\"hljs-string\">\"price-filter\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">      <span class=\"hljs-attr\">time<\/span>: searchTime.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  } <span class=\"hljs-keyword\">else<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    error.value = result.error;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    searchResults.value = &#91;];<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    totalResults.value = <span class=\"hljs-number\">0<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  isLoading.value = <span class=\"hljs-literal\">false<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  emit(<span class=\"hljs-string\">\"search-complete\"<\/span>, {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    <span class=\"hljs-attr\">success<\/span>: result.success,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    <span class=\"hljs-attr\">resultsCount<\/span>: searchResults.value.length,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">};<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-keyword\">const<\/span> executeCombinedSearch = <span class=\"hljs-keyword\">async<\/span> (activityValue, priceData) =&gt; {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  isLoading.value = <span class=\"hljs-literal\">true<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  error.value = <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  hasSearched.value = <span class=\"hljs-literal\">true<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">  <span class=\"hljs-keyword\">const<\/span> query = <span class=\"hljs-string\">`Activity: <span class=\"hljs-subst\">${activityValue}<\/span> | Price: $<span class=\"hljs-subst\">${priceData.min}<\/span> - $<span class=\"hljs-subst\">${priceData.max}<\/span>`<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">  emit(<span class=\"hljs-string\">\"search-start\"<\/span>, { query, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"combined-filter\"<\/span> });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">  <span class=\"hljs-keyword\">const<\/span> result = <span class=\"hljs-keyword\">await<\/span> performCombinedSearch(activityValue, priceData);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">  <span class=\"hljs-keyword\">if<\/span> (result.success) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">    searchResults.value = result.results;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">    totalResults.value = result.total;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">    searchTime.value = result.searchTime;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">    emit(<span class=\"hljs-string\">\"search-results\"<\/span>, {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">      <span class=\"hljs-attr\">results<\/span>: searchResults.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">      <span class=\"hljs-attr\">total<\/span>: totalResults.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">      <span class=\"hljs-attr\">query<\/span>: result.query,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">      <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"combined-filter\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">      <span class=\"hljs-attr\">time<\/span>: searchTime.value,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">    });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">  } <span class=\"hljs-keyword\">else<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">    error.value = result.error;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">    searchResults.value = &#91;];<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">    totalResults.value = <span class=\"hljs-number\">0<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">  }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">  isLoading.value = <span class=\"hljs-literal\">false<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">  emit(<span class=\"hljs-string\">\"search-complete\"<\/span>, {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">    <span class=\"hljs-attr\">success<\/span>: result.success,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">    <span class=\"hljs-attr\">resultsCount<\/span>: searchResults.value.length,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">  });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\">};<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-comment\">\/\/ Utility Methods<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-keyword\">const<\/span> clearResults = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\">  searchResults.value = &#91;];<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\">  totalResults.value = <span class=\"hljs-number\">0<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\">  hasSearched.value = <span class=\"hljs-literal\">false<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\">  error.value = <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\">  searchTime.value = <span class=\"hljs-number\">0<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> clearAllFilters = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\">  selectedActivity.value = <span class=\"hljs-string\">\"\"<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\">  priceRange.value = { <span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">max<\/span>: maxPrice.value };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\">  searchInputRef.value?.clearQuery();<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\">  activityFilterRef.value?.clearActivity();<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\">  priceFilterRef.value?.clearPrice();<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Handle clear search from home link<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> handleClearFromHome = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  clearResults();<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  clearAllFilters();<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-comment\">\/\/ Emit empty search results to reset the parent state<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  emit(<span class=\"hljs-string\">\"search-results\"<\/span>, {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">results<\/span>: &#91;],<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">total<\/span>: <span class=\"hljs-number\">0<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">query<\/span>: <span class=\"hljs-string\">\"\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"clear\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">time<\/span>: <span class=\"hljs-number\">0<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  });<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Listen for clear search event from home link<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">onMounted(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">if<\/span> (process.client) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-built_in\">window<\/span>.addEventListener(<span class=\"hljs-string\">\"clear-search-from-home\"<\/span>, handleClearFromHome);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">});<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">onUnmounted(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">if<\/span> (process.client) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-built_in\">window<\/span>.removeEventListener(<span class=\"hljs-string\">\"clear-search-from-home\"<\/span>, handleClearFromHome);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">});<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><span class=\"hljs-comment\">\/* Main container styles *\/<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\"><span class=\"hljs-string\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This is our top\u2011level orchestration component that stitches together four child pieces\u2014<code>SearchInput, ActivityFilter, PriceFilter, and SearchResults<\/code>\u2014with the shared<code> useSearchLogic <\/code>composable.&nbsp;<\/p>\n\n\n\n<p>It maintains reactive state for query text, selected activity, price range, loading status, results, errors, and timing; wires each child\u2019s events into handlers that call <code>performSearch, performActivitySearch<\/code>, or <code>executePriceFilter<\/code>; and emits high\u2011level lifecycle events (search-start, search-results, search-complete) for parent components.&nbsp;<\/p>\n\n\n\n<p>It also listens for a global <code>clear-search-from-home browser<\/code> event to reset all filters and results, ensuring the entire search UI can be programmatically cleared from elsewhere in the app.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"add-search-bar-to-all-routes\">Add the Search Bar To All Routes<\/h4>\n\n\n\n<p>The next step is to make our search bar accessible on all product routes. To do that, we can add it to the product layout.<br>Navigate to the <code>layouts\/products.vue<\/code> file and paste this code in:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">header<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"shadow-sm bg-white\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container mx-auto p-4\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">NuxtLink<\/span> <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">\"\/\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"font-bold\"<\/span>&gt;<\/span>Nuxt Headless WP Demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">NuxtLink<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Search Bar Section --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bg-gray-50 border-b\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container mx-auto p-4\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SearchBar<\/span> @<span class=\"hljs-attr\">search-results<\/span>=<span class=\"hljs-string\">\"handleSearchResults\"<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container mx-auto p-4\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">slot<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">footer<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container mx-auto p-4 flex justify-between border-t-2\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex gap-4\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">footer<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> SearchBar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/SearchBar.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Handle search results from SearchBar and emit to pages<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> handleSearchResults = <span class=\"hljs-function\">(<span class=\"hljs-params\">searchData<\/span>) =&gt;<\/span> {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  <span class=\"hljs-comment\">\/\/ Dispatch custom event that pages can listen to<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">if<\/span> (process.client) {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-keyword\">const<\/span> event = <span class=\"hljs-keyword\">new<\/span> CustomEvent(<span class=\"hljs-string\">\"layout-search-results\"<\/span>, {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">detail<\/span>: searchData,<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    });<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">    <span class=\"hljs-built_in\">window<\/span>.dispatchEvent(event);<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  }<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">};<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-tag\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\"><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><span class=\"hljs-selector-class\">.router-link-exact-active<\/span> {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#12b488<\/span>;<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\">}<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"css\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This updated layout file allows us to have our Search Bar on all product routes.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"svg-icons\">SVG Icons<\/h3>\n\n\n\n<p>Next, let&#8217;s make seven icon components to extract the inline SVG elements into separate Vue components to have good code readability and keep it neat.<\/p>\n\n\n\n<p>All seven components are simple, reusable Vue components that render styled SVG icons for the different icons we need.  Create a <code>icons<\/code> folder in the <code>components directory<\/code>.  In that icons folder, create the files below.  I linked each component to the code block you need to copy and paste into that file in my final GitHub repo for this article.  Go ahead and click each file to get the code you need to paste into your own project.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><a href=\"https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm\/blob\/main\/components\/icons\/CloseIcon.vue\">CloseIcon.vue<\/a><\/code><\/li>\n\n\n\n<li><code><a href=\"https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm\/blob\/main\/components\/icons\/EmptyBoxIcon.vue\">EmptyBoxIcon.vue<\/a><\/code><\/li>\n\n\n\n<li><code><a href=\"https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm\/blob\/main\/components\/icons\/ErrorIcon.vue\">ErrorIcon.vue<\/a> <\/code><\/li>\n\n\n\n<li><code><a href=\"https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm\/blob\/main\/components\/icons\/ImagePlaceholderIcon.vue\">ImagePlaceholderIcon.vue<\/a><\/code><\/li>\n\n\n\n<li><code><a href=\"https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm\/blob\/main\/components\/icons\/LoadingSpinner.vue\">LoadingSpinner.vue<\/a> <\/code><\/li>\n\n\n\n<li><code><a href=\"https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm\/blob\/main\/components\/icons\/NoResultsIcon.vue\">NoResultsIcon.vue<\/a> <\/code><\/li>\n\n\n\n<li><code><a href=\"https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm\/blob\/main\/components\/icons\/SearchIcon.vue\">SearchIcon.vue<\/a><\/code><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note<\/strong>: Update the <code>pages\/index.vue<\/code> component with <a href=\"https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm\/blob\/main\/pages\/index.vue\">this code here<\/a>.  This imports the SVG components that the index page needs as well as handling the state.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"update-index-page\">Update The Index Page To Handle State<\/h2>\n\n\n\n<p>Lastly, let&#8217;s update our <code>index.vue<\/code> file so that the index page can handle search state.&nbsp; Go to<code> pages\/index.vue<\/code> and paste this code in:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Loading State --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-if<\/span>=<span class=\"hljs-string\">\"pending\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-center py-12\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"inline-flex items-center\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">LoadingSpinner<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">          <span class=\"hljs-attr\">customClass<\/span>=<span class=\"hljs-string\">\"animate-spin -ml-1 mr-3 h-8 w-8 text-blue-500\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">        \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-lg\"<\/span>&gt;<\/span>Loading products...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Error State --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-else-if<\/span>=<span class=\"hljs-string\">\"error\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-center py-12\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-red-600\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ErrorIcon<\/span> <span class=\"hljs-attr\">customClass<\/span>=<span class=\"hljs-string\">\"mx-auto h-16 w-16 text-red-400 mb-4\"<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-xl font-medium text-gray-900 mb-2\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          Failed to load products\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-gray-600 mb-4\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          {{ error.message || \"Please try again later\" }}\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"refresh()\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn\"<\/span>&gt;<\/span>Try Again<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- Default Products (shown when no search active) --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-else-if<\/span>=<span class=\"hljs-string\">\"!searchActive &amp;&amp; products?.length\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"default-products\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-2xl font-bold mb-6\"<\/span>&gt;<\/span>All Products<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"grid grid-cols-4 gap-5\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"p in products\"<\/span> <span class=\"hljs-attr\">:key<\/span>=<span class=\"hljs-string\">\"p.id\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ProductCard<\/span> <span class=\"hljs-attr\">:product<\/span>=<span class=\"hljs-string\">\"p\"<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-comment\">&lt;!-- No Products State --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">v-else-if<\/span>=<span class=\"hljs-string\">\"!searchActive &amp;&amp; !products?.length\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">      <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-center py-12\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">    &gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-gray-500\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">EmptyBoxIcon<\/span> \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-xl font-medium text-gray-900 mb-2\"<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>          No products available\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-gray-600\"<\/span>&gt;<\/span>Check back later for new products<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">setup<\/span>&gt;<\/span><span class=\"javascript\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> { ref, onMounted, onUnmounted } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> ProductCard <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/ProductCard.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> LoadingSpinner <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/icons\/LoadingSpinner.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> ErrorIcon <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/icons\/ErrorIcon.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">import<\/span> EmptyBoxIcon <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/components\/icons\/EmptyBoxIcon.vue\"<\/span>;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Search state<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> searchActive = ref(<span class=\"hljs-literal\">false<\/span>);<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-comment\">\/\/ Handle search results from layout SearchBar<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-keyword\">const<\/span> handleSearchResults = <span class=\"hljs-function\">(<span class=\"hljs-params\">event<\/span>) =&gt;<\/span> {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">const<\/span> searchData = event.detail;<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">  searchActive.value = searchData.results.length &gt; <span class=\"hljs-number\">0<\/span> || searchData.query.trim();<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\">};<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Handle home link click to reset search<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> handleResetSearch = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">  searchActive.value = <span class=\"hljs-literal\">false<\/span>;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-comment\">\/\/ Also clear the search in the SearchBar component<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">const<\/span> searchBarEvent = <span class=\"hljs-keyword\">new<\/span> CustomEvent(<span class=\"hljs-string\">\"clear-search-from-home\"<\/span>);<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-built_in\">window<\/span>.dispatchEvent(searchBarEvent);<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">};<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Listen for search results from layout and reset search event<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\">onMounted(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">if<\/span> (process.client) {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-built_in\">window<\/span>.addEventListener(<span class=\"hljs-string\">\"layout-search-results\"<\/span>, handleSearchResults);<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-built_in\">window<\/span>.addEventListener(<span class=\"hljs-string\">\"reset-search\"<\/span>, handleResetSearch);<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  }<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">});<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">onUnmounted(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-keyword\">if<\/span> (process.client) {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-built_in\">window<\/span>.removeEventListener(<span class=\"hljs-string\">\"layout-search-results\"<\/span>, handleSearchResults);<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-built_in\">window<\/span>.removeEventListener(<span class=\"hljs-string\">\"reset-search\"<\/span>, handleResetSearch);<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  }<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">});<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-comment\">\/\/ Fetch the products from WooCommerce via GraphQL<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">const<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">data<\/span>: products,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  pending,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  error,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  refresh,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">} = <span class=\"hljs-keyword\">await<\/span> useFetch(useRuntimeConfig().public.wordpressUrl, {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">headers<\/span>: {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-string\">\"Content-Type\"<\/span>: <span class=\"hljs-string\">\"application\/json\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  },<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">body<\/span>: {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">query<\/span>: <span class=\"hljs-string\">`<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">      query GetProducts($first: Int = 10) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">        products(first: $first) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">          edges {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">            node {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">              databaseId<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">              name<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">              image {<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">                sourceUrl<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">                altText<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">              }<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">            }<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">          }<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">        }<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">      }<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-string\">    `<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-attr\">variables<\/span>: {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">first<\/span>: <span class=\"hljs-number\">10<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    },<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  },<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">transform<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">data<\/span>) =&gt;<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    <span class=\"hljs-keyword\">return<\/span> data.data.products.edges.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">edge<\/span>) =&gt;<\/span> ({<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">id<\/span>: edge.node.databaseId,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">title<\/span>: edge.node.name,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">image<\/span>: edge.node.image?.sourceUrl || <span class=\"hljs-string\">\"\/placeholder.jpg\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    }));<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  },<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">key<\/span>: <span class=\"hljs-string\">\"products-list\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">});<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">definePageMeta({<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">layout<\/span>: <span class=\"hljs-string\">\"products\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">});<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">useHead({<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"Nuxt headlesswp eCommerce | All Products\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  <span class=\"hljs-attr\">meta<\/span>: &#91;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"description\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">      <span class=\"hljs-attr\">content<\/span>:<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">        <span class=\"hljs-string\">\"Browse our complete collection of products in our headless WordPress eCommerce store\"<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">    },<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">  ],<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\">});<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\"><span class=\"javascript\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><span class=\"hljs-function\"><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here is what we added to the <code>index.vue<\/code> file and what it does:<br><br><code>searchActive ref<\/code>: Tracks whether a search is in effect so you can suppress the default \u201cAll Products\u201d grid when search results exist.<br><\/p>\n\n\n\n<p><strong>Event handlers (<\/strong><code>handleSearchResults, handleResetSearch<\/code><strong>)<\/strong>: Listen for custom events emitted by the shared <code>SearchBar<\/code> in the layout, updating <code>searchActive<\/code> (and clearing the bar) when searches start or are reset.<br><\/p>\n\n\n\n<p><strong>Lifecycle hooks<\/strong>: Hook into <code>onMounted\/onUnmounted<\/code> to register and clean up those global event listeners.<br><\/p>\n\n\n\n<p><strong>pending, error, refresh from <\/strong><code>useFetch<\/code>:  Expose loading\/error UI states and a manual retry button.<br><\/p>\n\n\n\n<p><strong>Expanded template logic<\/strong>: Four mutually exclusive branches to render \u201cloading,\u201d \u201cerror,\u201d \u201cdefault products,\u201d or \u201cno products\u201d based on fetch status and search activity.<\/p>\n\n\n\n<p>We are now ready to test this in the browser.&nbsp; Run <code>npm run dev<\/code> in your terminal.&nbsp; When visiting <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a>, you should now see a search bar and filters on your home page. Test the search and try the filters.&nbsp; This is the experience you should get:<br><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1728\" height=\"1118\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/08\/Nuxt-Headless-Woo.gif\" alt=\"\" class=\"wp-image-31953\"\/><\/figure>\n\n\n\n<p>Search STOKE!!!&nbsp;<\/p>\n\n\n\n<p>Here is the final repo for reference:<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm\">https:\/\/github.com\/Fran-A-Dev\/smart-search-headlesswp-ecomm<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>We hope this article helped you understand how to create a filtered product experience in <a href=\"http:\/\/nuxt.js\">Nuxt.js<\/a> with WP Engine Smart Search AI. By surfacing relevant products faster\u2014with semantic, activity, and price-aware filtering\u2014you give customers the ability to zero in on what they want, spend less time searching, and thus have a seamless purchasing experience.&nbsp;<\/p>\n\n\n\n<p>If you\u2019re building headless commerce, this kind of search-driven discovery can stoke engagement and revenue. We\u2019d love to hear what you build next\u2014drop into <a href=\"https:\/\/wpeng.in\/devrel-discord\/\">the Headless WordPress Discord<\/a> and share your projects or feedback.&nbsp; Happy Coding!<\/p>\n\n\n\n<p><strong><em>* WP Engine is a proud member and supporter of the community of WordPress\u00ae users. The WordPress\u00ae trademarks are the intellectual property of the WordPress Foundation, and the Woo\u00ae and WooCommerce\u00ae trademarks are the intellectual property of WooCommerce, Inc. Uses of the WordPress\u00ae, Woo\u00ae, and WooCommerce\u00ae names in this website are for identification purposes only and do not imply an endorsement by WordPress Foundation or WooCommerce, Inc. WP Engine is not endorsed or owned by, or affiliated with, the WordPress Foundation or WooCommerce, Inc.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever tried to buy something on a website only to have its poor search feature send you somewhere else? My stoke for finding the perfect rock climbing, coding, [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-31950","post","type-post","status-publish","format-standard","hentry","category-headless"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Headless E-Commerce Search Experience With WP Engine\u2019s Smart Search AI and Nuxt.js - Builders<\/title>\n<meta name=\"description\" content=\"Create a headless e-commerce product search with WP Engine Smart Search AI and Nuxt.js\u2014deliver fast, semantic, filterable results that help customers find and buy more in less time.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Headless E-Commerce Search with WP Engine Smart Search AI &amp; Nuxt.js\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a fast, semantic product search in your headless WordPress store using WP Engine\u2019s Smart Search AI and Nuxt.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-08T16:40:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-14T14:03:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/08\/WPE-Builders-YouTube-ScreenshotOrange-1920x1080-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Francis Agulto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Francis Agulto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/\"},\"author\":{\"name\":\"Francis Agulto\",\"@id\":\"https:\/\/wpengine.com\/builders\/#\/schema\/person\/bcdcb4ac0b215c34b6b30e440a24dc54\"},\"headline\":\"How to Create a Headless E-Commerce Search Experience With WP Engine\u2019s Smart Search AI and Nuxt.js\",\"datePublished\":\"2025-08-08T16:40:53+00:00\",\"dateModified\":\"2025-08-14T14:03:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/\"},\"wordCount\":2740,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/wpengine.com\/builders\/#organization\"},\"image\":{\"@id\":\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdJ0M2mnBz8cTXc0mbhA55yqm5NAy6mpGEXSCEK0G0F9uvh6hj-1UCXLzLwU7IJ66UZuyblk9AZ3_X7KOm8REikSMdkme1UG06MNcxNFcOwzZuZwOTqEStQUI46fFCEpA3vmLKjQw?key=4mhb17E_T_TECE2aEykrmg\",\"articleSection\":[\"Headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/\",\"url\":\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/\",\"name\":\"How to Create a Headless E-Commerce Search Experience With WP Engine\u2019s Smart Search AI and Nuxt.js - Builders\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/builders\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdJ0M2mnBz8cTXc0mbhA55yqm5NAy6mpGEXSCEK0G0F9uvh6hj-1UCXLzLwU7IJ66UZuyblk9AZ3_X7KOm8REikSMdkme1UG06MNcxNFcOwzZuZwOTqEStQUI46fFCEpA3vmLKjQw?key=4mhb17E_T_TECE2aEykrmg\",\"datePublished\":\"2025-08-08T16:40:53+00:00\",\"dateModified\":\"2025-08-14T14:03:49+00:00\",\"description\":\"Create a headless e-commerce product search with WP Engine Smart Search AI and Nuxt.js\u2014deliver fast, semantic, filterable results that help customers find and buy more in less time.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#primaryimage\",\"url\":\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdJ0M2mnBz8cTXc0mbhA55yqm5NAy6mpGEXSCEK0G0F9uvh6hj-1UCXLzLwU7IJ66UZuyblk9AZ3_X7KOm8REikSMdkme1UG06MNcxNFcOwzZuZwOTqEStQUI46fFCEpA3vmLKjQw?key=4mhb17E_T_TECE2aEykrmg\",\"contentUrl\":\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdJ0M2mnBz8cTXc0mbhA55yqm5NAy6mpGEXSCEK0G0F9uvh6hj-1UCXLzLwU7IJ66UZuyblk9AZ3_X7KOm8REikSMdkme1UG06MNcxNFcOwzZuZwOTqEStQUI46fFCEpA3vmLKjQw?key=4mhb17E_T_TECE2aEykrmg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/builders\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Headless E-Commerce Search Experience With WP Engine\u2019s Smart Search AI and Nuxt.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/builders\/#website\",\"url\":\"https:\/\/wpengine.com\/builders\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\/\/wpengine.com\/builders\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/builders\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wpengine.com\/builders\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\/\/wpengine.com\/builders\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/wpebuilders\",\"https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/builders\/#\/schema\/person\/bcdcb4ac0b215c34b6b30e440a24dc54\",\"name\":\"Francis Agulto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/builders\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c24a68b84c9ad2b53c633d14917d8298?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c24a68b84c9ad2b53c633d14917d8298?s=96&d=mm&r=g\",\"caption\":\"Francis Agulto\"},\"description\":\"Fran Agulto is a Developer Advocate at WP Engine. He is a lover of all things headless WordPress, Rock Climbing, and overall being stoked for people that love what they do and share that stoke with others! Follow me on Twitter for cool stoked headless WP!\",\"url\":\"https:\/\/wpengine.com\/builders\/author\/francis-agultowpengine-com-2-2-2-2-2-2-2-2-2-2-2-3\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Headless E-Commerce Search Experience With WP Engine\u2019s Smart Search AI and Nuxt.js - Builders","description":"Create a headless e-commerce product search with WP Engine Smart Search AI and Nuxt.js\u2014deliver fast, semantic, filterable results that help customers find and buy more in less time.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/","og_locale":"en_US","og_type":"article","og_title":"Build a Headless E-Commerce Search with WP Engine Smart Search AI & Nuxt.js","og_description":"Learn how to create a fast, semantic product search in your headless WordPress store using WP Engine\u2019s Smart Search AI and Nuxt.js.","og_url":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/","og_site_name":"Builders","article_published_time":"2025-08-08T16:40:53+00:00","article_modified_time":"2025-08-14T14:03:49+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/08\/WPE-Builders-YouTube-ScreenshotOrange-1920x1080-1.png","type":"image\/png"}],"author":"Francis Agulto","twitter_card":"summary_large_image","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Francis Agulto","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/"},"author":{"name":"Francis Agulto","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/bcdcb4ac0b215c34b6b30e440a24dc54"},"headline":"How to Create a Headless E-Commerce Search Experience With WP Engine\u2019s Smart Search AI and Nuxt.js","datePublished":"2025-08-08T16:40:53+00:00","dateModified":"2025-08-14T14:03:49+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/"},"wordCount":2740,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdJ0M2mnBz8cTXc0mbhA55yqm5NAy6mpGEXSCEK0G0F9uvh6hj-1UCXLzLwU7IJ66UZuyblk9AZ3_X7KOm8REikSMdkme1UG06MNcxNFcOwzZuZwOTqEStQUI46fFCEpA3vmLKjQw?key=4mhb17E_T_TECE2aEykrmg","articleSection":["Headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/","url":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/","name":"How to Create a Headless E-Commerce Search Experience With WP Engine\u2019s Smart Search AI and Nuxt.js - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdJ0M2mnBz8cTXc0mbhA55yqm5NAy6mpGEXSCEK0G0F9uvh6hj-1UCXLzLwU7IJ66UZuyblk9AZ3_X7KOm8REikSMdkme1UG06MNcxNFcOwzZuZwOTqEStQUI46fFCEpA3vmLKjQw?key=4mhb17E_T_TECE2aEykrmg","datePublished":"2025-08-08T16:40:53+00:00","dateModified":"2025-08-14T14:03:49+00:00","description":"Create a headless e-commerce product search with WP Engine Smart Search AI and Nuxt.js\u2014deliver fast, semantic, filterable results that help customers find and buy more in less time.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#primaryimage","url":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdJ0M2mnBz8cTXc0mbhA55yqm5NAy6mpGEXSCEK0G0F9uvh6hj-1UCXLzLwU7IJ66UZuyblk9AZ3_X7KOm8REikSMdkme1UG06MNcxNFcOwzZuZwOTqEStQUI46fFCEpA3vmLKjQw?key=4mhb17E_T_TECE2aEykrmg","contentUrl":"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdJ0M2mnBz8cTXc0mbhA55yqm5NAy6mpGEXSCEK0G0F9uvh6hj-1UCXLzLwU7IJ66UZuyblk9AZ3_X7KOm8REikSMdkme1UG06MNcxNFcOwzZuZwOTqEStQUI46fFCEpA3vmLKjQw?key=4mhb17E_T_TECE2aEykrmg"},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/how-to-create-a-headless-e-commerce-search-experience-with-wp-engines-smart-search-ai-and-nuxt-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"How to Create a Headless E-Commerce Search Experience With WP Engine\u2019s Smart Search AI and Nuxt.js"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/bcdcb4ac0b215c34b6b30e440a24dc54","name":"Francis Agulto","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c24a68b84c9ad2b53c633d14917d8298?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c24a68b84c9ad2b53c633d14917d8298?s=96&d=mm&r=g","caption":"Francis Agulto"},"description":"Fran Agulto is a Developer Advocate at WP Engine. He is a lover of all things headless WordPress, Rock Climbing, and overall being stoked for people that love what they do and share that stoke with others! Follow me on Twitter for cool stoked headless WP!","url":"https:\/\/wpengine.com\/builders\/author\/francis-agultowpengine-com-2-2-2-2-2-2-2-2-2-2-2-3\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=31950"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31950\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=31950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=31950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=31950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}