Merge pull request #1 from wilson-ecommerce/wilson-pdp

Wilson pdp
wilson-ecommerce · May 29, 2024 · 9d3a2db · 9d3a2db
2 parents f407d5e + 4fccd32
commit 9d3a2db
Show file tree

Hide file tree

Showing 52 changed files with 1,316 additions and 551 deletions.
diff --git a/README.md b/README.md
@@ -123,6 +123,7 @@ const storeDetails = {
         displayOutOfStock: true,
         allowAllProducts: false,
         currentCategoryUrlPath?: string;
+        currentCategoryId?: string;
         categoryName: '', // 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
@@ -187,8 +188,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 +267,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
@@ -13,6 +13,11 @@
     referrerpolicy="no-referrer"
   />
 
+  <script
+    type="text/javascript"
+    src="https://unpkg.com/@adobe/adobe-client-data-layer@2.0.2/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"
@@ -42,20 +47,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,7 +73,8 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
-        // currentCategoryUrlPath?: '', // current category url path
+        // currentCategoryUrlPath?: '', // current category url path, please prefer using currentCategoryId
+        // currentCategoryId?: '', // current category id
         // categoryName: '', // 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
@@ -84,7 +90,7 @@
         // addToCart?: (sku, options, quantity)=>{} // custom add to cart callback function. Called on addToCart action
       },
       context: {
-        customerGroup: '',
+        customerGroup: '0',
       },
       apiKey: '',
       environmentType: '',
@@ -102,44 +108,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.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/queries.ts b/src/api/queries.ts
@@ -57,15 +57,8 @@ const QUICK_SEARCH_QUERY = `
     ${Product}
 `;
 
-const PRODUCT_SEARCH_QUERY = `
-    query productSearch(
-        $phrase: String!
-        $pageSize: Int
-        $currentPage: Int = 1
-        $filter: [SearchClauseInput!]
-        $sort: [ProductSearchSortInput!]
-        $context: QueryContextInput
-    ) {
+const ProductSearchQueryFragment = `
+    fragment PRODUCT_SEARCH on Query {
         productSearch(
             phrase: $phrase
             page_size: $pageSize
@@ -96,9 +89,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 = `
@@ -199,4 +229,5 @@ export {
   PRODUCT_SEARCH_QUERY,
   QUICK_SEARCH_QUERY,
   REFINE_PRODUCT_QUERY,
+  CATEGORY_QUERY,
 };
diff --git a/src/api/search.ts b/src/api/search.ts
@@ -22,6 +22,7 @@ import {
 import { SEARCH_UNIT_ID } from '../utils/constants';
 import {
   ATTRIBUTE_METADATA_QUERY,
+  CATEGORY_QUERY,
   PRODUCT_SEARCH_QUERY,
   REFINE_PRODUCT_QUERY,
 } from './queries';
@@ -55,6 +56,7 @@ const getProductSearch = async ({
   sort = [],
   context,
   categorySearch = false,
+  categoryId,
 }: ProductSearchQuery & ClientProps): Promise<
   ProductSearchResponse['data']
 > => {
@@ -64,6 +66,7 @@ const getProductSearch = async ({
     currentPage,
     filter,
     sort,
+    categoryId,
     context,
   };
 
@@ -113,38 +116,41 @@ const getProductSearch = async ({
     sort
   );
 
-  const magentoStorefrontEvtPublish = window.magentoStorefrontEvents?.publish;
-
-  magentoStorefrontEvtPublish?.searchRequestSent &&
-    magentoStorefrontEvtPublish.searchRequestSent(SEARCH_UNIT_ID);
+  window.adobeDataLayer.push((dl : any) => {
+    dl.push({ event: 'search-request-sent', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
+  })
   // ======  end of data collection =====
 
-  const response = await fetch(apiUrl, {
+  const query = categorySearch && categoryId ? CATEGORY_QUERY : PRODUCT_SEARCH_QUERY;
+  const results = await fetch(apiUrl, {
     method: 'POST',
     headers,
     body: JSON.stringify({
-      query: PRODUCT_SEARCH_QUERY,
+      query: query.replace(/(?:\r\n|\r|\n|\t|[\s]{4})/g, ' ').replace(/\s\s+/g, ' '),
       variables: { ...variables },
     }),
-  });
+  }).then((res) => res.json());
 
-  const results = await response.json();
   // ======  initialize data collection =====
   updateSearchResultsCtx(
     SEARCH_UNIT_ID,
     searchRequestId,
     results?.data?.productSearch
   );
 
-  magentoStorefrontEvtPublish?.searchResponseReceived &&
-    magentoStorefrontEvtPublish.searchResponseReceived(SEARCH_UNIT_ID);
+  window.adobeDataLayer.push((dl : any) => {
+    dl.push({ event: 'search-response-received', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
+  });
 
-  if (categorySearch) {
-    magentoStorefrontEvtPublish?.categoryResultsView &&
-      magentoStorefrontEvtPublish.categoryResultsView(SEARCH_UNIT_ID);
+  if (categorySearch && categoryId) {
+    window.adobeDataLayer.push((dl : any) => {
+      dl.push({ categoryContext: results?.data?.categories?.[0] });
+      dl.push({ event: 'category-results-view', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
+    });
   } else {
-    magentoStorefrontEvtPublish?.searchResultsView &&
-      magentoStorefrontEvtPublish.searchResultsView(SEARCH_UNIT_ID);
+    window.adobeDataLayer.push((dl : any) => {
+      dl.push({ event: 'search-results-view', eventInfo: { ...dl.getState(), searchUnitId: SEARCH_UNIT_ID } })
+    });
   }
   // ======  end of data collection =====
 

diff --git a/src/components/AddToCartButton/AddToCartButton.tsx b/src/components/AddToCartButton/AddToCartButton.tsx
@@ -9,7 +9,7 @@ it.
 
 import { FunctionComponent } from 'preact';
 
-import CartIcon from '../../icons/cart.svg';
+import PlusIcon from '../../icons/plus.svg';
 
 export interface AddToCartButtonProps {
   onClick: (e: any) => any;
@@ -20,14 +20,11 @@ export const AddToCartButton: FunctionComponent<AddToCartButtonProps> = ({
   return (
     <div className="ds-sdk-add-to-cart-button">
       <button
-        className="flex items-center justify-center text-white text-sm rounded-full h-[32px] w-full p-sm"
-        style={{
-          'background-color': `#464646`,
-        }}
+        className="flex items-center justify-center h-[32px] w-full p-sm"
         onClick={onClick}
       >
-        <CartIcon className="w-[24px] pr-4" />
-        Add To Cart
+        <PlusIcon className="w-[14px] mr-xs" />
+        Quick Add
       </button>
     </div>
   );

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -37,7 +37,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
         switch (type) {
           case 'error':
             return (
-              <div className="rounded-md bg-red-50 p-4">
+              <div className="rounded-2 bg-red-50 p-4">
                 <div className="flex items-center">
                   <div className="flex-shrink-0 p-1">
                     <Error
@@ -60,7 +60,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
             );
           case 'warning':
             return (
-              <div className="rounded-md bg-yellow-50 p-4">
+              <div className="rounded-2 bg-yellow-50 p-4">
                 <div className="flex items-center">
                   <div className="flex-shrink-0 p-1">
                     <Warning
@@ -83,7 +83,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
             );
           case 'info':
             return (
-              <div className="rounded-md bg-blue-50 p-4">
+              <div className="rounded-2 bg-blue-50 p-4">
                 <div className="flex items-center">
                   <div className="flex-shrink-0 p-1">
                     <Info
@@ -117,7 +117,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
             );
           case 'success':
             return (
-              <div className="rounded-md bg-green-50 p-4">
+              <div className="rounded-2 bg-green-50 p-4">
                 <div className="flex items-center">
                   <div className="flex-shrink-0 p-1">
                     <Checkmark
@@ -139,7 +139,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
                     <div className="md:ml-6">
                       <button
                         type="button"
-                        className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 ring-off hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
+                        className="inline-flex rounded-2 bg-green-50 p-1.5 text-green-500 ring-off hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
                       >
                         <span className="sr-only">Dismiss</span>
                         <X