Merge branch 'main' into pdp-metadata

hlxsites · Jul 10, 2024 · 93642bd · 93642bd
2 parents deefbea + 0c3cd2f
commit 93642bd
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 15 deletions.
diff --git a/blocks/product-details-custom/ProductDetailsCarousel.js b/blocks/product-details-custom/ProductDetailsCarousel.js
@@ -87,16 +87,6 @@ export default class Carousel extends Component {
     });
   }
 
-  renderLabel() {
-    const amasty = this.props.product?.amasty;
-    if (!amasty) {
-      return null;
-    }
-    return html`<div class="amasty-wrapper">
-      <div class=${amasty.position} style=${amasty.style} dangerouslySetInnerHTML=${{ __html: amasty.txt }} />
-    </div>`;
-  }
-
   static getDerivedStateFromProps(nextProps, state) {
     if (state.slide >= nextProps.product?.productImages?.length ?? 0) {
       return {
@@ -136,7 +126,6 @@ export default class Carousel extends Component {
                 </ul>
             </div>
             <div class="carousel-stage-wrapper">
-                ${this.renderLabel()}
                 ${!this.props.loading && html`
                     <div class="main-controls">
                         <button class="button" name="stage-prev" onClick=${() => this.updateSlide((index) => index - 1)}><${Icon} name="caret-left-fill" /></button>

diff --git a/blocks/product-details/product-details.css b/blocks/product-details/product-details.css
@@ -1 +1,7 @@
-/* stylelint-disable no-empty-source */
+.pdp-product__buttons { /* stylelint-disable-line selector-class-pattern */
+  display: flex;
+}
+
+.pdp-product__buttons > .dropin-button--primary { /* stylelint-disable-line selector-class-pattern */
+  flex-grow: 1;
+}
diff --git a/blocks/product-details/product-details.js b/blocks/product-details/product-details.js
@@ -247,6 +247,24 @@ export default async function decorate(block) {
                   },
                 };
               });
+
+              ctx.appendButton((next, state) => {
+                const adding = state.get('adding');
+                return ({
+                  disabled: adding,
+                  icon: 'Heart',
+                  variant: 'secondary',
+                  onClick: async () => {
+                    try {
+                      state.set('adding', true);
+                      const { addToWishlist } = await import('../../scripts/wishlist/api.js');
+                      await addToWishlist(next.values.sku);
+                    } finally {
+                      state.set('adding', false);
+                    }
+                  },
+                });
+              });
             },
           },
           useACDL: true,

diff --git a/blocks/product-list-page-custom/ProductList.js b/blocks/product-list-page-custom/ProductList.js
@@ -8,6 +8,7 @@ import {
 } from '../../scripts/commerce.js';
 
 const html = htm.bind(h);
+const searchUnitId = 'livesearch-plp';
 
 class ProductCard extends Component {
   constructor(props) {
@@ -49,7 +50,7 @@ class ProductCard extends Component {
   onProductClick(product) {
     window.adobeDataLayer.push((dl) => {
       // TODO: Remove eventInfo once collector is updated
-      dl.push({ event: 'search-product-click', eventInfo: { ...dl.getState(), searchUnitId: 'searchUnitId', sku: product.sku } });
+      dl.push({ event: 'search-product-click', eventInfo: { ...dl.getState(), searchUnitId, sku: product.sku } });
     });
   }
 

diff --git a/blocks/product-recommendations/product-recommendations.js b/blocks/product-recommendations/product-recommendations.js
@@ -132,9 +132,10 @@ const mapUnit = (unit) => ({
     rank: index,
     score: 0,
     productId: parseInt(product.externalId, 10) || 0,
-    type: '?',
-    queryType: product.__typename,
+    type: product.__typename,
+    queryType: 'primary',
   })),
+  pagePlacement: '',
 });
 
 async function loadRecommendation(block, context, visibility, filters) {

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -201,6 +201,9 @@ async function loadEager(doc) {
       minXOffset: 0,
       minYOffset: 0,
     },
+    shoppingCartContext: {
+      totalQuantity: 0,
+    },
   });
   if (pageType !== 'Product') {
     window.adobeDataLayer.push((dl) => {

diff --git a/scripts/wishlist/api.js b/scripts/wishlist/api.js
@@ -0,0 +1,103 @@
+import { getSignInToken, performMonolithGraphQLQuery } from '../commerce.js';
+
+const redirectToSignin = () => {
+  window.location = '/customer/login';
+};
+
+const getWishlistsQuery = `
+ query GetWishlists {
+  customer {
+    wishlists {
+      id
+      name
+      items_count
+      items_v2 {
+        items {
+          id
+          product {
+            uid
+            name
+            sku
+          }
+        }
+      }
+    }
+  }
+}
+`;
+
+const addProductToWishlistMutation = `
+mutation(
+  $wishlistId: ID!,
+  $sku: String!
+) {
+  addProductsToWishlist(
+    wishlistId: $wishlistId,
+    wishlistItems: [
+      {
+        sku: $sku
+        quantity: 1
+      }
+    ]
+  ) {
+    user_errors {
+      code
+      message
+    }
+    wishlist {
+      name
+    }
+  }
+}
+`;
+
+export async function getWishlists() {
+  const token = getSignInToken();
+  if (!token) {
+    redirectToSignin();
+  }
+
+  const wishlists = await performMonolithGraphQLQuery(
+    getWishlistsQuery,
+    {},
+    true,
+    token,
+  );
+
+  if (wishlists.errors?.find((error) => error.message === "The current customer isn't authorized.")) {
+    redirectToSignin();
+  }
+
+  return wishlists.data?.customer?.wishlists;
+}
+
+/**
+ * Adds a product to the specified wishlist
+ * @param product SKU of the product to add
+ * @param wishlistId Optionally pass a wishlist. If no option, the first wishlist will be used.
+ * @returns {Promise<void>}
+ */
+export async function addToWishlist(product, wishlistId) {
+  const token = getSignInToken();
+  if (!token) {
+    redirectToSignin();
+  }
+
+  const toWishlist = wishlistId ?? (await getWishlists())[0].id;
+
+  const response = await performMonolithGraphQLQuery(
+    addProductToWishlistMutation,
+    {
+      wishlistId: toWishlist,
+      sku: product,
+    },
+    false,
+    token,
+  );
+
+  if (response.user_errors) {
+    console.error(response.user_errors);
+  } else {
+    window.location = `/customer/wishlist?wishlist_id=${toWishlist}`;
+  }
+}