Hide a Bundle when Bundle product is out of stock

If you don't want to display your Bundles if they contain at least 1 product that is out of stock you need to use the code below in your theme, we don't have this option in the app at the moment, but this code provides this feature, making invisible the Bundles that contains out of stock products:

<script>
var targetNode = document.body;
// Create an observer instance
var observer = new MutationObserver(function(mutationsList, observer) {
// Loop through the mutations and check if the #revy-bundles-wrapper element has been added
for (var mutation of mutationsList) {
if (mutation.type === 'childList') {
var addedNodes = mutation.addedNodes;
for (var i = 0; i < addedNodes.length; i++) {
if (addedNodes.id === 'revy-bundles-wrapper') {
// Check if the element contains .revy-bundle-sold-out-text and hide it if necessary
var soldOutText = addedNodes.querySelector('.revy-bundle-sold-out-text');
if (soldOutText) {
addedNodes.style.display = 'none';
}
}
}
}
}
});
// Options for the observer (which mutations to observe)
var config = { childList: true, subtree: true };
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
</script>

If you need any help with this code or have any questions please let us know at [email protected] 😊, we will help you as soon as possible!