ReCharge is changing the price of the offer

Modified on Wed, 21 Aug, 2024 at 11:54 AM

If you use the ReCharge Subscription app on your Shopify store, in some circumstances it can overwrite the price of SellUp widget. This is because the ReCharge app is looking for CSS classes in the product form and updating them when switching between One Time & Subscription.

Solution

The CSS of SellUp can be changed so that ReCharge does not overwrite it.

Step 1) Create a custom JS file in your theme under assets called sellup-price-change.js

Step 2) Paste the following JS inside this file and click save.

// Function to change classes
function changeClasses() {
    var detailPriceDiv = document.querySelector('.detail_price');
    if (detailPriceDiv) {
        var priceElements = detailPriceDiv.getElementsByClassName('price');
        // Convert to array to avoid issues with live HTMLCollection
        var elementsArray = Array.from(priceElements);
        elementsArray.forEach(function(element) {
            element.classList.remove('price');
            element.classList.add('sellup-cost');
        });
        // Disconnect the observer once we've made the changes
        observer.disconnect();
    }
}

// Create a MutationObserver instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'childList') {
            for (var i = 0; i < mutation.addedNodes.length; i++) {
                var node = mutation.addedNodes[i];
                if (node.nodeType === Node.ELEMENT_NODE && (node.classList.contains('detail_price') || node.querySelector('.detail_price'))) {
                    changeClasses();
                    return;
                }
            }
        }
    });
});

// Configure and start the observer
observer.observe(document.body, {
    childList: true,
    subtree: true
});

// Also run on initial load, in case the element is already there
document.addEventListener('DOMContentLoaded', changeClasses);

Step 3) Load the JS on a product template. E.g templates > product.liquid by adding the following line to template at the top then click save

<script src="{{ 'sellup-price-change.js' | asset_url }}" async></script>

Was this article helpful?