The Appstle Subscriptions JavaScript API provides powerful tools to enhance the customer experience on your shop's cart page. This API lets you capture events when a customer switches between a one-time purchase and a subscription plan within the cart widget and take appropriate actions accordingly. This functionality is specifically designed to work on the cart page, where the cart widget is available.
Switching Between Purchase Types on the Cart Page
Custom JavaScript events are triggered when a customer interacts with the cart widget on the cart page and switches between a one-time purchase and a subscription. These events enable you to execute custom JavaScript code based on the customer's actions in the cart.
When a Customer Switches to a One-Time Purchase in the Cart
On the cart page, when a customer switches from a subscription plan to a one-time purchase within the cart widget, a custom JavaScript event called AppstleSubscription:SubscriptionWidget:SwitchedToOneTime is triggered. This event allows you to perform custom actions whenever the customer makes this switch.
Here is how you can configure a listener for this event on the cart page:
// This event will be fired when the customer switches to a one-time purchase in the cart widget
document.addEventListener('AppstleSubscription:SubscriptionWidget:SwitchedToOneTime', function(event) {
console.log('Switched to One-Time Purchase on Cart Page', event.detail);
// Do your custom actions here, specifically for the cart page
});
When a Customer Switches to a Subscription in the Cart
Similarly, when a customer switches from a one-time purchase to a subscription plan within the cart widget on the cart page, a custom JavaScript event called AppstleSubscription:SubscriptionWidget:SwitchedToSubscription is triggered. This event allows you to perform custom actions whenever the customer makes this switch.
Here is how you can configure a listener for this event on the cart page:
// This event will be fired when the customer switches to a subscription in the cart widget
document.addEventListener('AppstleSubscription:SubscriptionWidget:SwitchedToSubscription', function(event) {
console.log('Switched to Subscription on Cart Page', event.detail);
// Do your custom actions here, specifically for the cart page
});
Understanding the Event Details
When these events are triggered, the event.detail object contains important information about the line item involved in the switch. Specifically, it provides the line item value, and the line item key stores the item's ID. This allows you to identify which specific event the customer is interacting with, enabling you to perform precise and relevant custom actions.