Facet API added

nodejs-retail/App.js

@@ -11,7 +11,10 @@ app.use(bodyParser.json());
 const searchService = require('./samples/interactive-tutorials/search/search-simple-query');
 
 app.get('/search', (req, res) => {
-    searchService(req.query.text)
+    const { text, facets } = req.query
+    const facetArray= facets && facets.split(',') || []; 
+    const facetObj = facetArray.map((facet) => ({ facetKey: { key: facet }}));
+    searchService(text, facetObj)
         .then(result => {
             return res.send(result);
         })

nodejs-retail/samples/interactive-tutorials/search/search-simple-query.js

@@ -14,7 +14,7 @@
 
 'use strict';
 
-async function main(searchQuery) {
+async function main(searchQuery, facets, filters) {
   // Call Retail API to search for a products in a catalog using only search query.
 
   // Imports the Google Cloud client library.
@@ -29,7 +29,10 @@ async function main(searchQuery) {
   const placement = `projects/${projectId}/locations/global/catalogs/default_catalog/placements/default_search`;
 
   // Raw search query.
-  const query = searchQuery; //TRY DIFFERENT QUERY PHRASES      
+  const query = searchQuery; //TRY DIFFERENT QUERY PHRASES   
+  const facetSpecs = facets ? facets : [];
+  // const filter = filters; // TRY DIFFERENT FILTER EXPRESSIONS
+  const filter = '(availability: ANY("OUT_OF_STOCK") AND brands: ANY("Google"))'; // TRY DIFFERENT FILTER EXPRESSIONS
 
   // A unique identifier for tracking visitors.
   const visitorId = '12345';
@@ -44,15 +47,15 @@ async function main(searchQuery) {
   };
 
   const callSearch = async () => {
-    // console.log('Search start');
     // Construct request
     const request = {
       placement,
       query,
+      facetSpecs,
+      // filter,
       visitorId,
       pageSize,
     };
-    // console.log('Search request: ', request);
 
     // Run request
     const response = await retailClient.search(request, {
@@ -60,13 +63,10 @@ async function main(searchQuery) {
     });
     const searchResponse = response[IResponseParams.ISearchResponse];
     if (searchResponse.totalSize === 0) {
-        console.log('The search operation returned no matching results.');
         return [];
     } else {
-      console.log('Search result: ', JSON.stringify(searchResponse, null, 4));
       return JSON.stringify(searchResponse, null, 4);
     }
-    // console.log('Search end');
   };
 
   return callSearch();

ulta-beauty/src/components/search-results.css

+.verticalCheckBox > .ant-checkbox-wrapper {
+    display: flex;
+    margin-inline-start: 0;
+}
\ No newline at end of file

ulta-beauty/src/components/search-results.js

-import React from 'react';
+import React, { useState } from 'react';
+import './search-results.css';
 
-import { Typography, Col, Row, Card, Select } from 'antd';
+import { Typography, Col, Row, Card, Select, Checkbox, Collapse } from 'antd';
 import { LinkOutlined, FilterFilled  } from '@ant-design/icons';
 const { Meta } = Card;
+const { Panel } = Collapse;
 
-const SearchResults = ({ searchResults }) => {
+const SearchResults = ({ searchResults, facets, onSelectFacet }) => {
 
     const availabilityMap = new Map();
     availabilityMap.set('IN_STOCK', 'In Stock');
     availabilityMap.set('OUT_OF_STOCK', 'Out of Stock');
+    // const [filters, setFilters] = useState('()');
 
+    const facetOptions = [
+        {
+            value: 'brands',
+            label: 'Brands'
+        },
+        {
+            value: 'colorFamilies',
+            label: 'Color Family'
+        },
+        {
+            value: 'colors',
+            label: 'Colors'
+        },
+        {
+            value: 'availability',
+            label: 'Availability'
+        }
+    ];
+    const facetMap = new Map();
+    facetOptions.forEach(facet => facetMap.set(facet.value, facet.label));
+
+    const onChangeHandler = (value) => {
+        if (value) {
+            onSelectFacet(value)
+        }
+    };
+
+    const onChangeCheckboxHandler = (filterValue, filterKey) => {
+        console.log('filterValue', filterValue);
+        console.log('filterKey', filterKey);
+
+      };
+      
     return (
         <>
             {searchResults.length > 0 &&
@@ -27,18 +63,23 @@ const SearchResults = ({ searchResults }) => {
                                 Add Facets to filter
                             </Typography.Title>
                             <Select
-                                defaultValue=""
+                                mode="multiple"
+                                allowClear
                                 style={{ width:'100%' }}
-                                onChange={() => {}}
-                                options={[
-                                    {
-                                        value: 'hoodie',
-                                        label: 'Hoodie',
-                                    },
-                                ]}
+                                placeholder="Select facets to filter"
+                                onChange={(val) => onChangeHandler(val)}
+                                options={facetOptions}
                             />
+                            { facets.length > 0 && facets.map((facet, i) =>
+                                <Collapse ghost>
+                                    <Panel header={facetMap.get(facet.key)} key={i} style={{ fontSize: '0.9rem', color: '#000000 ' }}>
+                                        <Checkbox.Group class="verticalCheckBox" options={[...facet.values.map((f) => ({label: f.value, value: f.value}) )]}
+                                            onChange={(val) => onChangeCheckboxHandler(val, facet.key)} />
+                                    </Panel>
+                                </Collapse>
+                            )}
                         </div>
-                    </Col>
+                    </Col>  
                     <Col span={19}>
                         <Row>
                             {

ulta-beauty/src/components/search.js

@@ -8,21 +8,24 @@ const Search = () => {
 
     const [searchText, setSearchText] = useState({ text: '' });
     const [searchResults, setSearchResults] = useState([]);
+    const [facets, setfacets] = useState([]);
 
     const handleOnChange = (e) => {
         setSearchText(prevState => ({
             ...prevState,
-            text: e.target.value
+            text: e.target.value,
         }));
     };
 
     const handleOnSearch = async (value) => {
-        const { text } = value;
+        const { text, facets } = value;
         if (text) {
-            const searchResults = await fetch(`http://localhost:3002/search?text=${text}`)
+            const url =  `http://localhost:3002/search?text=${text}${facets && facets.length? `&facets=${facets}` : ''}`;  
+            const searchResults = await fetch(url)
                 .then(res => res.json())
                 .catch(err => console.log(err));
             setSearchResults(searchResults.results.length ? [...searchResults.results] : []);
+            setfacets(searchResults.facets.length ? [...searchResults.facets] : []);
         }
     }
 
@@ -32,6 +35,7 @@ const Search = () => {
             text: ''
         }));
         setSearchResults([]);
+        setfacets([]);
     }
 
     return (
@@ -76,7 +80,7 @@ const Search = () => {
                             </Col>
                         </Row>
                     </div>
-                    <SearchResults searchResults={searchResults} />
+                    <SearchResults searchResults={searchResults} facets={facets} onSelectFacet={(val) => handleOnSearch({ text: searchText.text, facets: val  } )} />
                 </>
             }
             {searchResults.length === 0 &&