Updating cart widget based on webpage actions
Updated
by Binu Francis
If you've wanted to change cart widget behavior based on how your customers interact with your pages - the cart widget now offers the flexibility to embed some nifty Javascript snippets into your website, and make that happen!
This part isn't exactly as straightforward as dragging and dropping elements in the website builder. It might require some technical know-how around browser events and how to use them as a trigger for making changes on the Subbly cart widget. Not to worry! We'll help you along they way with examples and explanations.
Guide on how to add and execute JS scripts when something happens on the page
- Determine the event to use as a trigger - First, you'll need to determine which event you want to trigger your script. Some common events include clicking a button, submitting a form, or scrolling down the page. Determine which event makes the most sense for your use case.
- Create the script - Once you've determined the event you want to listen in on and use as a trigger, you can then create a script that will execute and make changes to your cart widget. This script will include the code that listens in information from your browser event capturing your customers' potential actions, and also the part that calls the cart widget and asks it to make changes.
- Add the script to your HTML file - Based on what triggers you're using for the script, you'll have to either place the script/code snippet within the head section of your webpage before </head> tag, or within a button, in case you want to use the button to execute the code, or a combination of both - like in the example below:
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
// Add your script code here
}
</script>Here, for your script to work, you'll need both these snippets added to your page, only difference being their placement within your page. As you can see, the first snippet will need to be added as a button inside your pages' <body> section. The second snippet will need to be added as a script within the <head> section of your website.You can also write the script in an external Javascript file, and have it load with your page by adding it as a source in the <head> section like shown below:<head>
<script src="myscript.js"></script>
</head> - Execute the script - When the event you've chosen to use as a trigger occurs, the script you've created in step 3 will execute. If you're using an event listener, you can attach the listener to the appropriate element on your page. For example, if you want the script to be executed when the user scrolls down the page, you could use a script that looks somewhat like so:
<script>
window.addEventListener('scroll', function() {
// Add your script code here
});
</script> - Test the script - Once you've added the script and attached it to the appropriate event, test it to make sure it's working correctly. Trigger the event and check if script is executed as expected.
That pretty much sums up the process, broadly. This will help you understand what the scripts are supposed to do, and how they're supposed to be programmed.
Examples of cart widget functions that can be triggered by page events
- Apply coupon to cart widget when customer submits a form
If there's a coupon you want to be applied to customers' cart when they submit a form - say they subscribe to your newsletter, you can first create a coupon and have that added in the script below that will apply the code as soon as customer submits the form.We'll use the form submit event as the trigger for the script in this caseAdd the following script within the <head> section of your page -<script>
Once you've added the script to your page, test it by submitting an entry on the form, then adding a product to your cart after, to see if the discount from the coupon is actually getting applied.
function applyCoupon(email) {
// Replace YOUR_COUPON_CODE with your actual coupon code
window.subblyCart.applyCoupon(YOUR_COUPON_CODE);
}
// Add an event listener to the subscribe form
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const email = document.querySelector('input[name="email"]').value;
applyCoupon(email);
});
</script> - Switch between languages and currencies in cart widget when it is changed on websiteBefore you can change the language in Subbly cart, you need to configure the languages in Subbly admin. Ensure that the language options and short codes you use on the HTML selector element match those that you've set up on your Subbly account. By default Subbly uses 2-character ISO standard: en, fr, es, etc.To switch between different languages on your cart widget, you'll need a language selector on your page(that you probably will also be using to change the website content language) such as a drop down menu, or radio buttons.
This will be used by your customers to make the language selection inputs, and the webpage will detect which language is being selected, so it can then in turn be also set as your cart widget's language. Here's an example of how a language selector should be coded -<select id="languageSelector">
The value parameter within each of these options should have the same language short codes as the ones that are defined for corresponding languages set within your storefront translation settings.
<option value="en">English</option>
<option value="fr">Français</option>
<option value="es">Español</option>
</select>
Once your language selector is set up, you can then add the following script to the <head> section of your page to be executed when customers switch between languages, and have their cart widget language changed.<script>
document.getElementById('languageSelector').addEventListener('change', function() {
const language = this.value;
window.addEventListener('subbly-cart-initialized', () => {
subblyCart.setLanguage(language)
}
});
</script>Make Sure that selector ID as in our example languageSelector is pasted correctly inside the script. If you don’t know the element ID, you can use developer tools by clicking right button of the mouse on the element, and choosing Inspect element.Here, we're using the subblyCart.setLanguage() function to switch the language on the cart widget when the event listener detects a change in the selector language.
Once added and saved, test the script by visiting your webpage, and switching the language selector to a different language, and triggering the cart widget either through the cart toggle, or by adding a product to cart. Check if the cart widget loads up in the selected language.
Similarly, you can switch between different store currencies, and use the script with minor changes as following<script>
window.addEventListener('subbly-cart-initialized', () => {
subblyCart.setCurrency('USD')
}
</script>
Here, we're calling the setCurrency() method, which changes the currency for the cart widget, instead of setLanguage() in the previous example. You'll also have to add the selector for currency on your page to getElementById() inside the script. - Pre-appying coupons and currencies from URL parameters
Using this script, you can pre-apply coupons to the cart widget - with the coupon code being passed as a parameter in the URL of the page. For example, if you want customers to visit https://www.yourstorename.com/shop/?coupon=BLACKFRIDAY and automatically have BLACKFRIDAY coupon applied to their cart when they add a product to their cart from the above page, you can do that using the script below -<script>
/*
Set coupon from the visited page URL query parameters, i.e.
[https://my.store.com/?coupon=MY_COUPON](https://my.store.com/?coupon=MY_COUPON)
*/
window.addEventListener('subbly-cart-initialized', () => {
const couponCode = new URLSearchParams(window.location.search).get('coupon')
couponCode && subblyCart.applyCoupon(couponCode)
})
</script>
Similarly, you can also pre-apply, or set the cart widget currency based on 'currency' parameter being added in the URL<script>
/*
Set currency from the visited page URL query parameters, i.e.
[https://my.store.com/?currency=GBP]
*/
window.addEventListener('subbly-cart-initialized', () => {
const currency = new URLSearchParams(window.location.search).get('currency')
currency && subblyCart.setCurrency(currency)
})
</script>
- Pre-apply coupon code from parameters added to checkout links
If you want to automatically apply a coupon to customers' cart when they're directly checkout out with a product, with the coupon code being passed as a parameter to the checkout link(example, https://subbly.co/checkout/buy/2400/?coupon=BLACKFRIDAY), you can do that using the following script -<script>
window.addEventListener('subbly-cart-initialized', () => {
const links = document.querySelectorAll('[href*="/checkout/buy/"]') || []
links.forEach((link) => {
let couponCode = new URL(link.href).searchParams.get('coupon')
if (couponCode) {
link.addEventListener('click', () => {
subblyCart.applyCoupon(couponCode)
})
}
})
})
</script>
If you're facing any problems while setting up these scripts, please feel free to contact support for assistance.
Did you find this resource helpful?
Return to top