JavaScript events for enhanced customer experience

Loop has introduced 31 unique JavaScript (JS) custom events that are triggered by various actions within the customer portal and bundle builder screen. This new functionality allows store developers to curate customized experiences for users by leveraging these events.

This article will cover the following topics:

• Popular use cases for custom events
• Setting up event listeners
• List of custom events

Popular use cases for custom events

These custom events can be utilized for a variety of purposes, such as:

• Sending contextual communications: Trigger cart abandonment emails when a customer adds an item on their bundle builder page but doesn't actually add the bundle to the cart.
• Triggering surveys or forms: Automatically display a Net Promoter Score (NPS) form when a customer adds a product from the upsell section.
• Tracking behavioural data: Monitor how users interact with the portal by tracking actions like product additions, updates, or deletions.

Setting up event listeners

To begin using these JS events, developers need to set up event listeners in their code. These listeners will detect when specific actions occur and trigger corresponding custom flows. Here's a basic example of how you can set up an event listener:

window.addEventListener('loopAddAsOneTime', () => {
  // Insert code here to trigger the custom experience
});

This sample code listens for the loopAddAsOneTime event. When this event is triggered, it will execute the function defined inside the event listener, where you can place code to initiate any custom behaviour.

List of custom events

The JS events you can utilize are categorized into four groups based on the type of interaction they represent:

Customer portal events

1. Product-based events
   1. loopAddAsOneTime : Triggered when a product is added as a one-time purchase.
   2. loopAddAsSubscription : Triggered when a product is added on a subscription basis.
   3. loopRemoveForOneTime : Triggered when a one-time product is removed.
   4. loopRemoveFromSubscription : Triggered when a subscription product is removed.
   5. loopProductSwap : Triggered when a product swap is made.

   6. loopUpdateProductQuantity : Triggered when the quantity of a product is updated.

      
      
2. Subscription-based events
   1. loopAddDiscount : Triggered when a discount is applied to a subscription.
   2. loopRemoveDiscount : Triggered when a discount is removed.
   3. loopChangeSubscriptionPlan : Triggered when a subscription plan is changed.
   4. loopChangeDeliveryMethodRequested : Triggered when a change in delivery method is requested.
   5. loopEditDeliveryDetails : Triggered when delivery details are edited.
   6. loopUpdatePaymentMethodRequested : Triggered when an update to the payment method is requested.
   7. loopCancelSubscription : Triggered when a subscription is canceled.
   8. loopReactivateSubscription : Triggered when a subscription is reactivated.
   9. loopPauseSubscription : Triggered when a subscription is paused.

   10. loopResumeSubscription : Triggered when a subscription is resumed.

       
       
3. Order-based events
   1. loopOrderNow : Triggered when an order is placed immediately.
   2. loopSkipNextScheduledOrder : Triggered when the next scheduled order is skipped.
   3. loopSkipFutureScheduledOrder : Triggered when future scheduled orders are skipped.
   4. loopRescheduleNextOrder : Triggered when the next order is rescheduled.
   5. loopDelayNextOrder : Triggered when the next order is delayed.

   6. loopUnskipOrder : Triggered when a previously skipped order is reinstated.

      
      
4. Bundle-based events
   1. loopBundleAddAsOneTime : Triggered when a bundle is added as a one-time purchase.
   2. loopBundleAddAsSubscription : Triggered when a bundle is added on a subscription basis.
   3. loopBundleRemoveForOneTime : Triggered when a one-time bundle is removed.
   4. loopBundleRemoveFromSubscription : Triggered when a subscription bundle is removed.
   5. loopBundleVariantChange : Triggered when a variant within a bundle is changed.
   6. loopPresetBundleUpdateQuantity : Triggered when the quantity of a preset bundle is updated.

Storefront events

1. Build your bundle events
   1. loopItemAddToBundleSuccessEvent : Triggered when an item is added to the bundle on the bundle builder page.
   2. loopByobAddToCartSuccessEvent : Triggered when a build your bundle is successfully added to the cart through the Loop bundle page
2. Preset bundle event
   1. loopPresetAddToCartSuccessEvent : Triggered when a preset bundle is successfully added to the cart from its product details page

By integrating these JS events into your development strategy, you can enhance user interactions and tailor the customer experience in Loop's customer portal to better meet the needs of your audience.

Need help?

No need to fret; we’re here to jump in and help you out. Reach out to us at support@loopwork.co or feel free to ping us on chat by clicking the support beacon on the bottom right.

Thanks!

Loop Subscription Team 🙂