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.jsonfile. See Translation Keys for more information.
Updated almost 2 years ago