Localize subscription widget text

Translate subscription widget

You can translate the subscription widget to a different language, or use verbiage that aligns with your brand. With a script, you'll create a RCA_LOCALES object. This object contains key-value pairs that correspond to the widget text and will update the text shown to customers. The following steps let you change the widget subscription text.

Navigate to Storefront > Script Manager and create a new script. Select All Pages as the location with Essential as the category. Select the option to load the script in the Header.

Paste the following code in the Script field and adjust the values of each label with your preferred text.

<script>
let RCA_LOCALES = {
    lang: "en",
    locales: {
        en: {
            "accounts": {
                "manage_subscriptions_label": "Manage Subscriptions"
            },
            "products": {
                "one_time_purchase_label": "One-Time Purchase",
                "subscription_label": "Subscription",
                "subscribe_and_save_label": "Subscribe & Save",
                "subscribe_and_save_extended_label": "on every recurring order",
                "subscribe_and_save_frequency_label": "Delivery"
            },
            "cart": {
                "cart_sub_save_frequency_text": "Subscribe & Save: Every",
                "cart_sub_frequency_text": "Subscription: Every"
            }
        }
    }
}
</script>

Add content to subscription widget

If you'd like to add content to the subscription widget, you can do so with a script. The following script is an example for changing the widget to fit your needs. The script adds subtext and a strikethrough price to the widget. You can add it in the Scripts Manager in the Footer of Product pages.

<script>
function insertCustomStyles(){
    const styles = `
        #recharge-subscription .rca-subscription-form__button.rca-custom-selector-opened {
            align-items: start;
            height: 100% !important;
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        #rca-linetrought-price {
            margin-right: 5px;
            opacity: 0.5;
            text-decoration: line-through;
        }
    `;

    const styleSheet = document.createElement('style');
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);
}

function widgetCustomText(){
    const subscriptionButton = document.querySelector('.rca-subscription-form__button--subscription');
    const oneTimeButton = document.querySelector('.rca-subscription-form__button--otp');
    const targetContainer = document.querySelector('.rca-subscription-form-buttons-subscription-text');
    const productID = parseInt(document.querySelector('[data-entity-id]').dataset.entityId);
    const discountAmount = RCA_DATA.getProductByBCProductID( productID ).subscriptions[0].discount_amount;

    const widgetCustomSettings = {
        showLineTroughtPrice : true,
        text: `Save ${discountAmount}% now when you subscribe to repeat deliveries of this product. No fees, edit or cancel anytime.`
    }

    const textContainer = document.createElement('span');
    textContainer.innerHTML = widgetCustomSettings.text;
    textContainer.style.display = 'block';
    textContainer.style.fontSize = '12px';
    textContainer.style.width = '14s0%';
    textContainer.style.marginTop = '4px';
    textContainer.id = 'rca-sub-text-subscription';


   
    /**
     * Add the custom elements when clik on the subscription price
     */
    subscriptionButton.addEventListener('click', function(e){

        targetContainer.parentNode.classList.add('rca-custom-selector-opened');
        targetContainer.appendChild(textContainer);

        if( widgetCustomSettings.showLineTroughtPrice ){
            const oneTimePrice = document.querySelector('.rca-subscription-form__button--otp .rca-subscription-form__button-price').innerText;
            const lineTroughContainer = document.createElement('span');
            lineTroughContainer.id = 'rca-linetrought-price';
            lineTroughContainer.innerText = oneTimePrice;

            const subscriptionTarget = document.querySelector('.rca-custom-selector-opened .rca-subscription-form__button-price');
            subscriptionTarget.prepend(lineTroughContainer);
        }
    }); 
    
    oneTimeButton.addEventListener('click', function(e){
        //Reset the adapter to default
        const subText = document.querySelector('#rca-sub-text-subscription');
        const duplicatePrice = document.querySelector('#rca-linetrought-price');
        if( subText && duplicatePrice ){
            duplicatePrice.remove();
            subText.remove();
        }
    });
}

// Wait for RCA_DATA to be defined
let checkExist = setInterval(function () {
    const targetElement = document.querySelector('.rca-subscription-form__button--subscription');
    if (typeof RCA_DATA !== 'undefined' && RCA_DATA && targetElement) {
        clearInterval(checkExist);
        insertCustomStyles();
        widgetCustomText();
    }
}, 20);
// Stop checking for RCA_DATA. It either loaded or clearly is not here.
setTimeout(clearInterval, 10000, checkExist)
</script>

The widget should now look like this:

📘
Note
Localization of the storefront as a whole can be done by manipulating the BigCommerce Stencil en.json file. See Translation Keys for more information.

Translate subscription widget

Add content to subscription widget

Need Help? Contact Us