Liquid File: bc-sf-filter.js


'productGridItemHtml': '<div class="grid__item small--one-half medium-up--one-fifth">' +

    '<a href="{{itemUrl}}" class="product-card">' +

        '<div class="product-card__image-wrapper">' +

            '<img src="{{itemThumbUrl}}" alt="{{itemTitle}}" class="product-card__image">' +

              '<span style="right: 6px !important; top: 26px !important; font-size: 18px !important; position: absolute !important; display:inline-block;"> <span class="custom-pin-button" onClick="activatePinSave(this)" style="box-sizing: border-box; cursor: pointer; border-radius: 3px;display:inline-block; ..... (a lot of text)' +

    '</div>' +

        '<div class="product-card__info">' +

            '{{itemVendor}}' +

            '<div class="product-card__name">{{itemTitle}}</div>' +

            '<div class="product-card__price">{{itemPrice}}</div>' +

            '{{itemSoldOutLabel}}' +

        '</div>' +

        '{{itemSaleLabel}}' +

        '<div class="product-card__overlay">' +

            '<span class="btn product-card__overlay-btn {{btnSmallClass}}">' + bcSfFilterConfig.label.view + '</span>' +

            '<span style="right: 6px !important; top: 26px !important; font-size: 18px !important; position: absolute !important; display:inline-block;"> ........ (a lot of text)' +

    '</div>' +

    '{{itemWishlist}}' +

    '</a>' +

    '</div>',


   1. Add the bold text only itemWishlist ('{{itemWishlist}}' +) as shown above in the file bc-sf-filter.js in the object bcSfFilterTemplate (Search for this element and add where you want to place the button on the collection pages) (Reference Screenshot below)


"Here the code is added to place the button on the image"


   2. Then search for buildProductGridItem and then search for var itemHtml = bcSfFilterTemplate.productGridItemHtml; add the code given below right after var itemHtml = bcSfFilterTemplate.productGridItemHtml;


Note that : If first variant is not defined, please add the below to the product build(see image below):


var firstVariant =  data.variants[0];



Code to be added (Reference Screenshot below) 


    // Swym Wishlist product data code

    //var itemWishlistHtml = '<style>.swym-button.swym-add-to-wishlist-view-product:not(.swym-loaded){display: none;}</style>';

    var itemWishlistHtml = '<script class="swym-product-view-snippet">';

    itemWishlistHtml += 'if(!window.SwymViewProducts){'

    itemWishlistHtml += 'window.SwymViewProducts = {};'

    itemWishlistHtml += '}';

    itemWishlistHtml += 'if(!window.SwymWatchProducts){';

    itemWishlistHtml += 'window.SwymWatchProducts = {};';

    itemWishlistHtml += '}';

    itemWishlistHtml += '(function(et){';

    itemWishlistHtml += 'var collections = ' + JSON.stringify(data.collections[0].title) + ';';

    itemWishlistHtml += 'var variants = [], currentVariant, variantPrice = ' + (data.price_min / 100) + ', stk;';

    itemWishlistHtml += 'if (variants.length == 0){';

    itemWishlistHtml += 'currentVariant = ' + JSON.stringify(firstVariant.id) + ';variants.push({ ' + JSON.stringify(firstVariant.title) + ' :' + JSON.stringify(firstVariant.id) + '});variantPrice = ' + (firstVariant.price / 100) + ';';

    itemWishlistHtml += 'stk = ' + firstVariant.inventory_quantity + ';';

    itemWishlistHtml += '}';

    itemWishlistHtml += 'var product_data = {';

    itemWishlistHtml += 'empi:' + JSON.stringify(data.id) + ',epi : currentVariant,';

    itemWishlistHtml += 'dt :' + JSON.stringify(data.title) + ',du  :"' + bcSfFilterConfig.shop.url + '{{itemUrl}}",';

    itemWishlistHtml += 'ct     :collections,pr     : variantPrice, stk: stk,';

    itemWishlistHtml += 'iu :' + JSON.stringify(this.getFeaturedImage(images)) + ',variants:variants';

    itemWishlistHtml += '};';

    itemWishlistHtml += 'SwymViewProducts[' + JSON.stringify(data.handle) + '] = SwymViewProducts[' + JSON.stringify(data.id) + '] = product_data;';

    itemWishlistHtml += 'var o = {};';

    for (var k in data.variants) {

        var variant = data['variants'][k]

        itemWishlistHtml += 'o[' + JSON.stringify(variant.id) + '] = {"id": ' + JSON.stringify(variant.id) + ',"inventory_management": ' + JSON.stringify(variant.inventory_management) + ',"inventory_quantity": ' + JSON.stringify(variant.inventory_quantity) + ',"title": ' + JSON.stringify(variant.title) + ', "inventory_policy": ' + JSON.stringify(variant.inventory_policy) + '};';

    }

    itemWishlistHtml += 'SwymWatchProducts[' + JSON.stringify(data.handle) + '] = SwymWatchProducts[' + JSON.stringify(data.id) + '] = o;';

    itemWishlistHtml += '})();';

    itemWishlistHtml += '</script>';

    itemWishlistHtml += '<button class="swym-button swym-add-to-wishlist-view-product product_{{itemId}}" data-swaction="addToWishlist" data-product-id="' + JSON.stringify(data.id)  +'"></button>';

    itemHtml = itemHtml.replace(/{{itemWishlist}}/g, itemWishlistHtml);


    

3. Add the following code inside the function buildExtrasProductList even if the function is empty(Reference Screenshot below).


      if (window._swat) {

        window._swat.initializeActionButtons("#bc-sf-filter-products");

      } else {

        window.SwymCallbacks = window.SwymCallbacks || [];

        window.SwymCallbacks.push(function() {

          window._swat.initializeActionButtons("#bc-sf-filter-products");

        });

      }


Note: Verify the container selector on the store collections page(window._swat.initializeActionButtons("<<container selector>>");)


    4. Add the following text in swymSnippet.liquid (Reference Screenshot below)


Liquid File: swymSnippet.liquid


    <script>

      if(window._swat){

        window._swat.initializeActionButtons("#bc-sf-filter-products");

      }else{

        window.SwymCallbacks = window.SwymCallbacks || [];

        window.SwymCallbacks.push(function(){

          window._swat.initializeActionButtons("#bc-sf-filter-products");

        });

      }

    </script>