adobe · pecaudt · Jan 29, 2024 · Jan 30, 2024 · Jan 30, 2024 · Jan 30, 2024
diff --git a/README.md b/README.md
@@ -123,7 +123,9 @@ const storeDetails = {
         displayOutOfStock: true,
         allowAllProducts: false,
         currentCategoryUrlPath?: string;
+        currentCategoryId?: string;
         categoryName: '', // name of category to display
+        categoryConfig: {} // Custom category config
         displaySearchBox: false, // display search box
         displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
         displayMode: '', // "" for search || "PAGE" for category search
@@ -133,6 +135,7 @@ const storeDetails = {
         listview: false; //add listview as an option - EXPERIMENTAL, default is false
         optimizeImages: true, // optimize images with Fastly
         imageBaseWidth: 200,
+        imageBackgroundColor: #fff // Background color for PLP product images
         resolveCartId?: resolveCartId // Luma specific addToCart method. Enabled with the extension
         refreshCart?: refreshCart // Luma specific addToCart method. Enabled with the extension
         addToCart?: (sku, options, quantity)=>{} // custom add to cart callback function. Called on addToCart action
@@ -187,8 +190,8 @@ Let's say as if I want to style an element with the theme's primary color. Norma
 Using Tailwind the following produces the exact same result:
 
 ```
-<div class="text-primary">
-  Yippee I am a primary color!
+<div class="text-brand-700">
+  Yippee I am a brand color!
 </div>
 
 ```
@@ -266,7 +269,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
     <div className="ds-sdk-product-item group relative flex flex-col max-w-sm justify-between h-full">
         ...
           <div className="flex flex-col">
-            <div className="ds-sdk-product-item__product-name mt-md text-sm text-primary">
+            <div className="ds-sdk-product-item__product-name mt-md text-sm text-brand-700">
               {htmlStringDecode(productView.name)}
             </div>
             <ProductPrice

diff --git a/dev-template.html b/dev-template.html
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 
 <head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Live Search PLP</title>
 
   <!-- reset css -->
@@ -13,6 +16,11 @@
     referrerpolicy="no-referrer"
   />
 
+  <script
+    type="text/javascript"
+    src="https://unpkg.com/@adobe/[email protected]/dist/adobe-client-data-layer.min.js"
+  ></script>
+
   <script
     type="text/javascript"
     src="https://unpkg.com/@adobe/magento-storefront-events-sdk@qa/dist/index.js"
@@ -31,8 +39,8 @@
     body {
       margin: 0 auto;
       max-width: 1280px;
-      padding-left: 20px;
-      padding-right: 20px;
+      /* padding-left: 20px;
+      padding-right: 20px; */
       font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
       font-style: normal;
       font-weight: 400;
@@ -42,20 +50,20 @@
       --color-primary: black;
     }
 
-    .ds-sdk-product-item__product-name {
+    /* .ds-sdk-product-item__product-name {
       text-transform: uppercase;
-    }
+    } */
   </style>
 
   <script type="text/javascript" src="search.js"></script>
 
   <script type="text/javascript">
     const root = document.querySelector('div.search-plp-root');
     const storeDetails = {
-      environmentId: '',
-      websiteCode: '',
-      storeCode: '',
-      storeViewCode: '',
+      environmentId: '331e4848-1413-4428-8e26-75924f47a8b8',
+      websiteCode: 'wil_us',
+      storeCode: 'wil_us',
+      storeViewCode: 'wil_us_en',
       config: {
         minQueryLength: '2',
         pageSize: 8,
@@ -68,8 +76,57 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
-        // currentCategoryUrlPath?: '', // current category url path
-        // categoryName: '', // name of category to display
+        currentCategoryUrlPath: 'sportswear/women', // current category url path, please prefer using currentCategoryId
+        currentCategoryId: '488', // current category id
+
+        /** FRANCHISE VIEW SETTINGS **/
+        // currentCategoryUrlPath: 'baseball', // current category url path, please prefer using currentCategoryId
+        // currentCategoryId: '107', // current category id
+        // categoryConfig: { 'pcm_display_by_franchise': '1' },
+        // categoriesExtraInfo: [
+        //   {
+        //     "url": "baseball/baseball-gloves",
+        //     "id": "677",
+        //   },
+        //   {
+        //     "url": "baseball/limited-edition",
+        //     "id": "5704",
+        //   },
+        //   {
+        //     "url": "baseball/baseball-gear-bags",
+        //     "id": "3134",
+        //   },
+        //   {
+        //     "url": "baseball/baseballs",
+        //     "id": "674",
+        //   },
+        //   {
+        //     "url": "baseball/baseball-protective-gear",
+        //     "id": "680",
+        //   },
+        //   {
+        //     "url": "baseball/baseball-apparel",
+        //     "id": "665",
+        //   },
+        //   {
+        //     "url": "baseball/stock-uniforms",
+        //     "id": "668",
+        //   },
+        //
+        //   {
+        //     "url": "baseball/baseball-accessories",
+        //     "id": "671",
+        //   },
+        // ],
+        /** END FRANCHISE VIEW SETTINGS **/
+
+        /** TEAM SPECIFIC PLP SETTINGS **/
+        // currentCategoryUrlPath: 'basketball/basketballs/chicago-bulls',
+        // currentCategoryId: '3197', // current category id
+        /** END TEAM SPECIFIC PLP **/
+
+        // preCheckedFilters: [{key: 'pim_axis_article_techspec_hand_code_pim_20786' , value: 'Right-hand throw'}],
+        // categoryName: 'Baseball', // name of category to display
         // displaySearchBox: false, // display search box
         // displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
         // displayMode: '', // "" for search || "PAGE" for category search
@@ -82,11 +139,14 @@
         // resolveCartId?: resolveCartId, // Luma specific addToCart method. Enabled with the extension
         // refreshCart?: refreshCart, // Luma specific addToCart method. Enabled with the extension
         // addToCart?: (sku, options, quantity)=>{} // custom add to cart callback function. Called on addToCart action
+        onCategoryChange: (category) => {
+          document.title = category;
+        },
       },
       context: {
-        customerGroup: '',
+        customerGroup: '0',
       },
-      apiKey: '',
+      apiKey: '95689dc242b0433da022462d27547b30',
       environmentType: '',
       // searchQuery: 'search_query', // Optional: providing searchQuery will override 'q' query param
       // route: ({ sku, urlKey  }) => {
@@ -102,44 +162,33 @@
       // Will result to `http://localhost:8081/v1/MT11`
     };
 
-    const mse = window.magentoStorefrontEvents;
-
-    mse.context.setMagentoExtension({
-      magentoExtensionVersion: '1.0.0',
-    });
-    mse.context.setSearchExtension({
-      version: '2.0.3',
-    });
-    mse.context.setShopper({ shopperId: 'logged-in' });
-
-    mse.context.setPage({
-      pageType: 'plp',
-      maxXOffset: 0,
-      maxYOffset: 0,
-      minXOffset: 0,
-      minYOffset: 0,
-      ping_interval: 5,
-      pings: 1,
-    });
-
-    mse.context.setStorefrontInstance({
-      environmentId: '',
-      instanceId: 'bbbbbb',
-      environment: 'ccccccc',
-      storeUrl: '',
-      websiteId: 123456,
-      websiteCode: '',
-      storeId: 123456,
-      storeCode: '',
-      storeViewId: 123456,
-      storeViewCode: '',
-      websiteName: '',
-      storeName: '',
-      storeViewName: '',
-      baseCurrencyCode: 'USD',
-      storeViewCurrencyCode: 'USD',
-      catalogExtensionVersion: '1.0.0',
-    });
+    window.adobeDataLayer = window.adobeDataLayer || [];
+    window.adobeDataLayer.push(
+      { 'magentoExtensionContext': { magentoExtensionVersion: '1.0.0' } },
+      { 'searchExtensionContext': { version: '2.0.3'} },
+      { 'shopperContext': { shopperId: 'logged-in' } },
+      { 'pageContext': { pageType: 'plp', maxXOffset: 0, maxYOffset: 0, minXOffset: 0, minYOffset: 0, ping_interval: 5, pings: 1 } },
+      {
+        'storefrontInstanceContext': {
+          environmentId: '',
+          instanceId: 'bbbbbb',
+          environment: 'ccccccc',
+          storeUrl: '',
+          websiteId: 123456,
+          websiteCode: '',
+          storeId: 123456,
+          storeCode: '',
+          storeViewId: 123456,
+          storeViewCode: '',
+          websiteName: '',
+          storeName: '',
+          storeViewName: '',
+          baseCurrencyCode: 'USD',
+          storeViewCurrencyCode: 'USD',
+          catalogExtensionVersion: '1.0.0',
+        }
+      }
+    );
 
     setTimeout(async () => {
       while (typeof window.LiveSearchPLP !== 'function') {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "lint:fix": "eslint '*/**/*.{ts,tsx}' --fix",
     "prettier:fix": "prettier 'src/**/*.{ts,tsx,json,md}' --write",
     "test": "jest --passWithNoTests --color --silent",
-    "cleanup": "rimraf dist"
+    "cleanup": "rimraf dist",
+    "copy-build-search": "cp -r dist/search.js"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",

diff --git a/src/api/fragments.ts b/src/api/fragments.ts
@@ -44,6 +44,12 @@ const ProductView = `
             inStock
             url
             urlKey
+            attributes(roles: ["visible_in_plp"]) {
+              label
+              name
+              roles
+              value
+            }
             images {
                 label
                 url
@@ -84,6 +90,7 @@ const ProductView = `
                     id
                     title
                     values {
+                        id
                         title
                         ... on ProductViewOptionValueSwatch {
                             id

diff --git a/src/api/queries.ts b/src/api/queries.ts
@@ -57,15 +57,15 @@ const QUICK_SEARCH_QUERY = `
     ${Product}
 `;
 
-const PRODUCT_SEARCH_QUERY = `
-    query productSearch(
-        $phrase: String!
-        $pageSize: Int
-        $currentPage: Int = 1
-        $filter: [SearchClauseInput!]
-        $sort: [ProductSearchSortInput!]
-        $context: QueryContextInput
-    ) {
+export const FranchiseQueryFragment = `
+  fragment FRANCHISE_QUERY on ProductSearchItem {
+    ...Product
+    ...ProductView
+  }
+`;
+
+const ProductSearchQueryFragment = `
+    fragment PRODUCT_SEARCH on Query {
         productSearch(
             phrase: $phrase
             page_size: $pageSize
@@ -96,9 +96,46 @@ const PRODUCT_SEARCH_QUERY = `
             }
         }
     }
+`;
+
+const PRODUCT_SEARCH_QUERY = `
+    query productSearch(
+        $phrase: String!
+        $pageSize: Int
+        $currentPage: Int = 1
+        $filter: [SearchClauseInput!]
+        $sort: [ProductSearchSortInput!]
+        $context: QueryContextInput
+    ) {
+        ...PRODUCT_SEARCH
+    }
+    ${Product}
+    ${ProductView}
+    ${Facet}
+    ${ProductSearchQueryFragment}
+`;
+
+const CATEGORY_QUERY = `
+    query categoryQuery(
+        $categoryId: String!
+        $phrase: String!
+        $pageSize: Int
+        $currentPage: Int = 1
+        $filter: [SearchClauseInput!]
+        $sort: [ProductSearchSortInput!]
+        $context: QueryContextInput
+    ) {
+        categories(ids: [$categoryId]) {
+            name
+            urlKey
+            urlPath
+        }
+        ...PRODUCT_SEARCH
+    }
     ${Product}
     ${ProductView}
     ${Facet}
+    ${ProductSearchQueryFragment}
 `;
 
 const REFINE_PRODUCT_QUERY = `
@@ -144,6 +181,11 @@ const REFINE_PRODUCT_QUERY = `
                     values {
                         id
                         title
+                        ... on ProductViewOptionValueSwatch {
+                            inStock
+                            type
+                            value
+                        }
                     }
                 }
                 priceRange {
@@ -199,4 +241,5 @@ export {
   PRODUCT_SEARCH_QUERY,
   QUICK_SEARCH_QUERY,
   REFINE_PRODUCT_QUERY,
+  CATEGORY_QUERY,
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,6 +44,12 @@ const ProductView = ` @@
                 inStock
                 url
                 urlKey
+                attributes(roles: ["visible_in_plp"]) {
+                  label
+                  name
+                  roles
+                  value
+                }
                 images {
                     label
                     url
@@ Expand Down Expand Up / @@ -84,6 +90,7 @@ const ProductView = ` @@
                         id
                         title
                         values {
+                            id
                             title
                             ... on ProductViewOptionValueSwatch {
                                 id
@@ Expand Down @@