Javascript Events Reference

Updated on 28th January 2023 in Existing Websites

The following guide requires knowledge of code and javascript, we suggest passing this onto your developer if you're not familiar with it

When using our embeds, Shoprocket automatically triggers events when users take actions within your store. You can listen for these events in your own website/application and create custom behaviours or setup tracking for logs and marketing performance purposes.

Before trying to register a listener to a Shoprocket event, you should wait for Shoprocket to be ready, you can do this like so:

Wait for Shoprocket to be ready

<script type="text/javascript">
    window.addEventListener('shoprocket_ready', () => {
        // Shoprocket is ready, you can add your code here
    });
</script>

The full list of Shoprocket events available:

In this example, we are simply logging the event response to console so that you can see what data is returned

<script type="text/javascript">
    window.addEventListener('shoprocket_ready', () => {
        // Listen for a page view
        Shoprocket.events.listen('page.viewed', (event) => {
            console.log(event);
        });
        // Listen for a product view
        Shoprocket.events.listen('product.viewed', (event) => {
            console.log(event);
        });
        // listen for item added to cart
        Shoprocket.events.listen('cart.item_added', (event) => {
            Shoprocket.toggleCart();
        });
        // Listen for an item being removed from cart
        Shoprocket.events.listen('cart.item_removed', (event) => {
            console.log(event);
        });
        // Listen for cart being opened
        Shoprocket.events.listen('cart.opened', (event) => {
            console.log(event);
        });
        // Listening for cart being closed
        Shoprocket.events.listen('cart.closed', (event) => {
            console.log(event);
        });
        // Listen for cart item quantity change
        Shoprocket.events.listen('cart.quantity_updated', (event) => {
            console.log(event);
        });
        // Listen for the address section viewed in cart
        Shoprocket.events.listen('cart.address_viewed', (event) => {
            console.log(event);
        });
        // Listen for the shipping options section viewed in cart
        Shoprocket.events.listen('cart.shipping_viewed', (event) => {
            console.log(event);
        });
        // Listen for shipping stage of checkout bypassed (free shipping or digital goods only)
        Shoprocket.events.listen('cart.shipping_bypassed', (event) => {
            console.log(event);
        });
        // Listen for payment methods section viewed
        Shoprocket.events.listen('cart.payment_methods_viewed', (event) => {
            console.log(event);
        });
        // Listen for cart payment method selection
        Shoprocket.events.listen('cart.payment_method_selected', (event) => {
            console.log(event);
        });
        // Listen for order summary section viewed (pre order placed)
        Shoprocket.events.listen('cart.summary_viewed', (event) => {
            console.log(event);
        });
        // Listen for an order being initialized 
        Shoprocket.events.listen('order.initialized', (event) => {
            console.log(event);
        });
        // Listen for order update (post order placed)
        Shoprocket.events.listen('order.updated', (event) => {
            console.log(event);
        });
        // Listen for order payment status (post order placed)
        Shoprocket.events.listen('order.payment_status', (event) => {
            console.log(event);
        });
    });
</script>

Can’t find what you’re looking for?

Chat with us 👋

or contact us on [email protected]


as featured in