Integration with Boost Search App

1. Go to Theme >> Edit Code >> Assets >> find boost-sd-custom.js file and paste the below code within it.

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]);

2. Find boost-sd-custom.css in assets file and paste below code within it.

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

If you are unable to set up it and getting any issue then feel free to contact us at support@scriptengine.net so our support team will help you to set up everything perfectly.