Fish Wishlist integration for FoxSell Bundles • API Integrations • FoxSell Bundles Plus

Overview

If you use FoxSell Bundles (including the Mix and Match bundle widget) and Fish Wishlist, you can let customers save a configured bundle to their wishlist and return to it later.

Prerequisites

Your store has FoxSell Bundles installed and active.
Your store has Fish Wishlist installed and active.
You have access to your Shopify theme code (or a developer who can edit theme files).

Theme edits affect your storefront. If you’re not comfortable editing theme code, duplicate your theme first (Online Store → Themes → ⋯ → Duplicate) and test on the copy.

Key benefits

Customers can save bundles for later: shoppers can build a bundle in the FoxSell widget and store it in Fish Wishlist.
Bundles stay tidy in Wishlist: each bundle is saved as a single wishlist item (even if it contains multiple products/add-ons).
Add to cart works as expected: when a shopper adds the saved bundle to cart from Fish Wishlist, it behaves like adding from the FoxSell Mix and Match widget.

Set up the integration

In your Shopify admin, confirm FoxSell Bundles and Fish Wishlist are both installed and enabled on your live theme.

Go to Online Store → Themes, open your live theme, then click Edit code.

Under Snippets, click Add a new snippet and name it:

fish-foxsell.liquid

Open snippets/fish-foxsell.liquid and paste the script below.

This script inserts Fish Wishlist’s “Add to List” button next to FoxSell’s bundle Add to cart button, and keeps the wishlist button disabled until a valid bundle selection can be added.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    if(!FishWishlist) return
    const bundleAtcButton = document.querySelector('.fsb__bundle-add-to-cart')
    if(!bundleAtcButton) return
    const wishlistButton = FishWishlist.helpers.insertPDPButton({
      cssSelector: ".fsb__bundle-add-to-cart",
      insertPosition: "insertbefore",
      classes: { pdpButton: "fsb__button" }
    })
    if(!wishlistButton) return
    const observer = new MutationObserver((mutationsList) => {
      for (const mutation of mutationsList) {
        if (mutation.attributeName === 'disabled') {
          // Sync disabled state
          if(wishlistButton.dataset.isAdded == "true") return
          if(bundleAtcButton.disabled) wishlistButton.classList.add("disabled")
          else wishlistButton.classList.remove("disabled");
        }
      }
    });
    if(wishlistButton.dataset.isAdded != "true") wishlistButton.classList.add("disabled")
    observer.observe(bundleAtcButton, { attributes: true });
  })
  document.addEventListener("fishwishlist:item-removed-from-wishlist", function(e, d) {
    let bundleWishlistButton = document.querySelector('wishlist-button-pdp.fsb__button')
    let isBundleDisabled = document.querySelector('.fsb__bundle-add-to-cart').disabled
    if(isBundleDisabled) bundleWishlistButton.classList.add("disabled")
    else bundleWishlistButton.classList.remove("disabled")
  })
  document.addEventListener("fishwishlist:item-added-to-wishlist", function(e, d) {
    if(!FishAPI) return
    let variant = e?.detail?.variant
    let wishlistId = e?.detail?.wishlistId
    const bundleSideBar = document.querySelector('.fsb__sidebar')
    if(!bundleSideBar) return
    const container = bundleSideBar.closest('section')
    const wishlistButton = container.querySelector(`wishlist-button-pdp[data-variant-id="${variant.id}"]`)
    if(!wishlistButton) return
    const selectedVariants = [
      ...Object.entries(bundleSideBar.bundleItems).map(([id, variantData]) => ({
        variantId: parseInt(id, 10),
        quantity: variantData.quantity,
        category: variantData.category,
        type: "product",
        properties: {}
      })), ...Object.entries(bundleSideBar.addOnItems).map(([id, variantData]) => ({
        variantId: parseInt(id, 10),
        quantity: variantData.quantity,
        type: "addOns",
        properties: {}
      }))
    ]
    
    const readableProperties = {};
    [...Object.entries(bundleSideBar.bundleItems), ...Object.entries(bundleSideBar.addOnItems)].forEach(([id, variantData]) => {
      let d = variantData.title;
      readableProperties[d] = readableProperties[d] ? `x${parseInt(readableProperties[d].replace("x", "")) + variantData.quantity}` : readableProperties[d] = `x${variantData.quantity}`
    })
    
    properties = {
      ...readableProperties,
      '__foxsell:dynamic_add_on_bundle_id': `${bundleId}_${Date.now()}`,
      '__foxsell:dynamic_add_on_bundle_items': JSON.stringify(selectedVariants),
      "__foxsell:original_bundle_price": 10000
    }
    FishAPI.addProperties(e.detail.wishlistId, e.detail.variant.id, properties)
  })
</script>

In your theme file where the FoxSell bundle widget appears, add this line:

{% render 'fish-foxsell' %}

Dawn theme: place it near the bottom of sections/main-product.liquid so it loads on the product page.

Open a product page where the FoxSell bundle widget is visible.

You should see a Fish Wishlist “Add to List” button in the FoxSell bundle area.
The “Add to List” button should mirror the bundle Add to cart button’s enabled/disabled state until a valid bundle is configured.

What customers experience

Shoppers build a bundle in the FoxSell widget.
They click Add to List to save that specific bundle configuration to Fish Wishlist.
From the wishlist, they can add the saved bundle to cart later, and it behaves like adding from the FoxSell widget.

Troubleshooting

Confirm both apps are installed and enabled.
Confirm snippets/fish-foxsell.liquid exists and contains the script.
Confirm {% render 'fish-foxsell' %} is added to the same template where the FoxSell bundle widget loads (commonly the product template).
Make sure you’re testing on a product page that actually shows the FoxSell Mix and Match bundle widget.

This is expected when the bundle Add to cart button is disabled (for example, before the shopper completes the required bundle selection). Once the bundle can be added to cart, the wishlist button should enable automatically.

Need help?

If you’d like assistance setting this up, contact [email protected] or use the in-app chat.

Fish Wishlist integration