How does FoxSell Bundles integrate with Fish Wishlist?
Prerequisite
Stores must be using the FoxSell Bundles & Fish Wishlist to let customers add a bundle to their wishlist.
Key Benefits
Customers can save bundles for later: If a customer users the bundle builder they can save the bundle to their wishlist and purchase later.
Bundles appear as a single item in Wishlist: Customers can build multiple bundles to their list and save for later.
Add to Cart from Wishlist: When a Bundle is added to cart from wishlist, it will work the same way as if you added directly from the FoxSell Mix and Match widget.
How it works
Before you start, you should have FoxSell Bundles and Fish Wishlist apps active on your store.
Add a snippet to your theme called fish-foxsell.liquid
Paste this code into the file and save (it looks like a lot of code, but all you need to do is Copy and Paste).
<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>
To activate the integration, insert the following liquid tag to the theme template where FoxSell Bundles are active: `{% render 'fish-foxsell' %}`If you are using Dawn theme, you can insert this at the bottom of main-product.liquid
After you Save, you will see the "Add to List" button appear within the FoxSell Bundle widget on your site, as follows:
In case you need help with the setup, message us on chat support or email as at support@foxsell.app
Updated on: 12/05/2025
Thank you!