<span class="swym-collections-social-count swym-hide-social-count" onclick="event.target.parentElement.querySelector('#swym-collections').click()" data-product-id="{{ <product.id OR card_product.id based on what is used in your code> }}"></span>

<script defer>
  (function() {
    function swymCallbackFn(swat) {
      // Step 1: Collect all product IDs from the buttons
      const productIdArray = [];
			const allSwymCollectionsButtons = document.querySelectorAll('.swym-collections-social-count');
			allSwymCollectionsButtons.forEach((button) => {
  		const productId = button.getAttribute('data-product-id');
  		if (productId) { // Only push if productId is not an empty string
    		productIdArray.push(productId);
  		}
			});
      // Step 2: Function to fetch social count for a given product ID
      function fetchSocialCount(productId) {
        return new Promise((resolve, reject) => {
          swat.wishlist.getSocialCount(
            { empi: productId },
            (data) => resolve({ productId, count: data }),
            (error) => reject({ productId, error })
          );
        });
      }
      // Step 3: Generate an array of promises for fetching social counts
      function generateFetchBody() {
        return productIdArray.map((productId) => fetchSocialCount(productId));
      }
      // Step 4: Execute all fetch requests simultaneously and update the buttons
      Promise.all(generateFetchBody())
        .then((results) => {
          console.log(results, 'results');
          results.forEach((result) => {
            // Find all buttons with the same product ID and update their counts
            const buttons = document.querySelectorAll(`.swym-collections-social-count[data-product-id="${result.productId}"]`);
            buttons.forEach((button) => {
              result.count.data.count ? (button.textContent = result.count.data.count) : (button.textContent = '');
              button.classList.remove('swym-hide-social-count');
            });
            console.log(result, 'result');
          });
        })
        .catch((error) => {
          console.error('Error fetching social counts:', error);
        });
      // Step 5: Update the social count when a product is added to the wishlist
      swat.evtLayer.addEventListener(swat.JSEvents.addedToWishlist, function(product) {
        let productId = product.detail.d.empi;
        let buttonsToUpdate = document.querySelectorAll(`.swym-collections-social-count[data-product-id="${productId}"]`);
        buttonsToUpdate.forEach((buttonToIncrease) => {
          let updatedNumber = Number(buttonToIncrease.textContent) + 1;
          buttonToIncrease.textContent = updatedNumber;
        });
      });
    }
    // Step 6: Ensure the callback function is registered
    if (!window.SwymCallbacks) {
      window.SwymCallbacks = [];
    }
    window.SwymCallbacks.push(swymCallbackFn);
  })();
</script>

<swym-sfl-line-button>
  <button
    id="swym-custom-sfl-btn"
    class="swym-sfl-line-button link"
    type="button"
    data-variant-id="{{ item.variant.id }}" // Insert tag that fetches the variant ID
    data-product-id="{{ item.product_id }}" // Insert tag that fetches the product ID
    data-product-url="{{ shop.url }}{{ item.url }}" // Insert tag that fetches the variant URL
    data-quantity="{{ item.quantity }}" // Insert tag that fetches the count to Save for later
    style="<Insert your custom styling here>"
  >
    Save For Later 
  </button>
</swym-sfl-line-button>

<script>
(function() {
  function sflInit(swat) {
      swat.SaveForLater.init(
          sfl => {
              swat.sfl = sfl;
              swat.sflLid = sfl.listid;
              swat.SaveForLater.fetch(swat.sflLid, function(response){
                  swat.sfl.listcontents = response.items;
              }, err => console.error(err))
          },
          err => console.error(err)
      )
  }
  if (!window.SwymCallbacks) window.SwymCallbacks = [];
  window.SwymCallbacks.push(sflInit);
  class SwymSflLineButton extends HTMLElement {
      constructor() {
        super();
          this.button = this.querySelector('button');
          if(this.button) this.button.addEventListener('click', this._addToSFL.bind(this));
      }
      _addToSFL(evt){
        const product = [{
          'du': this.button.dataset.productUrl,
          'empi': this.button.dataset.productId,
          'epi': this.button.dataset.variantId,
          'qty': this.button.dataset.quantity
        }]
        const cartRemoveButton = this.button.closest('.cart-item').querySelector('cart-remove-button'); // Please modify these selectors according to your store
        _swat.SaveForLater.add(_swat.sflLid, product, res => console.log(res), err => console.error(err));
        cartRemoveButton.dispatchEvent(new CustomEvent('click'));
      }
    }
    customElements.define('swym-sfl-line-button', SwymSflLineButton);
})();
</script>

<script defer>
    // Executed after SWYM has loaded all necessary resources.
  (function() {
    function onSwymLoadCallback(swat) {
        swat.fetch(async (wishlist) => {
            let wishlistedProducts = await fetchProductData(wishlist);
            console.log("Wishlist items with product details:", wishlistedProducts);
            // Example to fetch "Availability status" for the first product in the array
            console.log(wishlistedProducts[0].productData.available);
        });

        async function fetchProductData(wishlist) {
            let fetchedProducts = await Promise.all(wishlist.map(async (listItem) => {
                let response = await fetch(listItem.du.split('?')[0] + '.js');
                let productData = await response.json();
                listItem.productData = productData;
                return listItem;
            }));
            return fetchedProducts;
        }
    }

    if (!window.SwymCallbacks) {
        window.SwymCallbacks = [];
    }
    window.SwymCallbacks.push(onSwymLoadCallback);
 })();
</script>

<script defer>
  function onSwymLoadCallback(swat) {
    // Define success callback
let onSuccess = function(lists) {
  // Successfully fetched all lists 
  console.log("Fetched all Lists", lists);
}
// Define error callback
let onError = function(error) {
  // Error is an xhrObject
  console.log("Error while fetching all Lists", error);
}
// Call `fetchLists` function
swat.fetchLists({
  callbackFn: onSuccess,
  errorFn: onError
});
  }
  if (!window.SwymCallbacks) {
    window.SwymCallbacks = [];
  }
  window.SwymCallbacks.push(onSwymLoadCallback);
</script>