Use the wishlist with the Boost search app

If you use the Boost search app, add the code below to Boost's files in your theme. The wishlist button then shows on the image of each product that Boost lists.

Add the script

1. In your Shopify admin, go to Online Store › Themes, click … next to your current theme, then Edit code.

2. In the assets folder, open boost-sd-custom.js.

3. Paste this code into the file and click Save:

   const customize = {
     customizeProductItem: (componentRegistry) => {
       componentRegistry.useComponentPlugin('ProductItem', {
         name: 'Modify Wishlist',
         enabled: true,
         apply: () => ({
           afterRender(element){
             let data = element?.getParams()?.props?.product;
             let availableVariants = data.variants.filter(function(e) {
               return e.available;
             })
             let firstAvailableVariants = typeof availableVariants[0] !== 'undefined' ? availableVariants[0] : data.variants[0];
   
             const wishlistHtml = document.createElement('div');
             wishlistHtml.classList.add('wishlist-engine');
             wishlistHtml.setAttribute('data-product_id', data.id);
             wishlistHtml.setAttribute('data-variant_id', firstAvailableVariants.id);
             wishlistHtml.setAttribute('data-full_button', 'false');
   
             let productItem = document.querySelector('[data-product-id="'+ data.id +'"]');
             productItem.querySelector('.boost-sd__product-image-wrapper').appendChild(wishlistHtml);
           }
         }),
       });
     }
   }
   
   window.__BoostCustomization__ = (window.__BoostCustomization__ ?? []).concat([customize.customizeProductItem]);

Add the styles

This code places the button in the top right corner of the product image.

1. In the assets folder, open boost-sd-custom.css.

2. Paste this code into the file and click Save:

   .boost-sd__product-list .wishlist-engine {
     display: block !important;
     position: absolute;
     z-index: 3;
     top: 5px;
     right: 5px;
   }