The Appstle Subscriptions JavaScript API documentation explains how to use various JavaScript events and methods in the Appstle Subscriptions app. For example, when your customer selects or removes a subscription plan in your shop, this API allows you to capture these events and take actions accordingly. You can also use this API to customize the customer experience in your shop.
When a Subscription Plan is Selected
When a subscription plan is selected in the subscription widget, a custom JavaScript event called AppstleSubscription:SubscriptionWidget:SellingPlanSelected will be triggered on the document. You can use this event to execute custom JavaScript code when a subscription plan is selected.
Here is how you can configure a listener for this event:
// This event will be fired when a subscription plan is selected
document.addEventListener('AppstleSubscription:SubscriptionWidget:SellingPlanSelected', function() {
console.log('selling plan', jQuery('.appstle_sub_widget input[name=selling_plan]:checked').val());
// Do your custom actions here
});
When a Subscription Plan is DeSelected
When a subscription plan is removed in the subscription widget, a custom JavaScript event called AppstleSubscription:SubscriptionWidget:SellingPlanDeSelected will be triggered on the document. You can use this event to execute custom JavaScript code when a subscription plan is removed.
Here is how you can configure a listener for this event:
// This event will be fired when a subscription plan is DeSelected
document.addEventListener('AppstleSubscription:SubscriptionWidget:SellingPlanDeSelected', function() {
console.log('selling plan', jQuery('.appstle_sub_widget input[name=selling_plan]:checked').val());
// Do your custom actions here
});
Example Usage
Subscription Plan Selected Event
When the customer selects a subscription plan, the following code will log the selected selling plan's value to the console and perform any custom actions defined in the function:
document.addEventListener('AppstleSubscription:SubscriptionWidget:SellingPlanSelected', function() {
console.log('selling plan', jQuery('.appstle_sub_widget input[name=selling_plan]:checked').val());
// Do your custom actions here
});
Subscription Plan DeSelected Event
When the customer removes a subscription plan, the following code will log the current selling plan's value (if any) to the console and perform any custom actions defined in the function:
document.addEventListener('AppstleSubscription:SubscriptionWidget:SellingPlanDeSelected', function() {
console.log('selling plan', jQuery('.appstle_sub_widget input[name=selling_plan]:checked').val());
// Do your custom actions here
}); Initializing the Subscription Widget with appstleInit()
Before you can use these custom events or display the subscription widget on your shop, it is crucial to initialize the Appstle subscription widget properly. This is done using the appstleInit() function.
Explanation of appstleInit():
appstleInit() is the function that sets up and initializes the subscription widget on your store. Without calling this function, the widget will not be displayed or function properly. This function is typically called once the page has loaded, ensuring that all required elements and configurations for the subscription widget are ready.
Key Points:
When to Call
appstleInit(): This function should be called after the page is fully loaded, which ensures that all necessary DOM elements and resources are ready. Typically, you can attach this function to theDOMContentLoadedevent or equivalent.Widget Configuration: In the
appstleInit()function, you can configure various options for the subscription widget, such as your shop domain, widget type, and auto-initialization settings.Custom Actions: You can extend this function with custom logic that modifies the behavior of the subscription widget based on your store's unique requirements.
By using these events, you can customize the behavior and appearance of the subscription widget in your shop, providing a more tailored experience for your customers.