<img src="abc.png" />
    
call to replace anchor tags contains '/admin' in href

Startup Scripts

Startup scripts contain logic to add behavior to storefronts. Startup scripts make it possible to add behaviors that are standard across different themes. Following are some of the few examples:

  • Add some conditions before product is added to cart
  • Execute javascript tag on the switch to a specific page.
  • Execute some logic before the page is rendered. 
  • Redirect to another page on specific conditions.
Third party apps use startup controllers to capture events and perform tasks on those events. 

StoreHippo uses Single Page Architecture so startup scripts are executed only once. Once loaded, when a user switches pages, then scripts are not executed. If you want to write code for the specific page then you need to handle that through page events.

Events

StoreHippo triggers various events on different actions on your store. You can use these events and bind a handler to these events.

ms.bind

(eventName, callback)

Use this global function to bind to a particular event. The callback function is invoked when the even is triggered. The event object is passed to the callback function as the only argument.

Example
ms.bind('ms.page_change_start", function(event) {

    // code here
});

ms.trigger

(eventName, data)

Used to trigger an event. data is the object containing the data that need to pass to the event handlers.

Example

There are standard events that are triggered in default theme automatically. like
ms.trigger("ms.page_change_start")
ms.trigger("ms.page_render_start")

Event Object

The event object contains following properties:

page object containing the information about the current page
widget object containing the information about the widget from which this event originated.
element that triggered the event.
data data passed at the time of triggering of the event.

Standard Events 

ms.page_change_start Triggered when page change is started. call event.stopPropagation to prevent it to happen.
ms.page_not_found Triggered when page is not found.
ms.message Triggered automatically whevever API response contains messages. Can be triggered manually to display messages to customers.
ms.cart.transaction_failed
 
Triggered when the transaction for the order failed. Data contains cart and transaction objects. 
ms.cart.order_success Triggered when the order is successfully created. Data contains the order object. 
 
Examples :
1. to prevent the state change on particular url ("/page/test"):
ms.bind("ms.page_change_start", function (event) {
     if (event.data && event.data.to && event.data.to.indexOf("/page/test") > -1) {
        event.preventDefault();
    }
});

2. to add script on particular page:
ms.bind("ms.page_change_start", function (event) {
     if (event.data && event.data.to && event.data.to.indexOf("/checkout") > -1) {
      // append script in head here 
         var s = document.createElement("script");
         s.type = "text/javascript";
         s.src = "http://somedomain.com/somescript";
         $("head").append(s);
 }
});

3. 
Custom code when use goes to Product Page
ms.bind("ms.page_change_start", function (event) {
    if (event.data && event.data.to && event.data.to.indexOf("/product") > -1) {
        var productInterval = setInterval(function () {
            //check if the product object is resolved or not and available for use
            if (window.ms.widgets && window.ms.widgets["ms.product"]) {
                var product = window.ms.widgets["ms.product"].product;
                if (product && product.name) {
                    
                    //run your custom code with the product object
                    
                    clearInterval(productInterval);
                }
            }
        }, 1000)
    }
});

API

Storehipp provide the REST API. You can call storehippo api in frontend theme using ms.api.

ms.api

Example: To list products

ms.api.call({command : "list", entity : "ms.products"}, function(err, response){

    if(err){
        // handle error
    } else {
        console.log("Response ", response);
    }
})

Hooks

Besides Events, you can also use front end API hooks to intercept the request and response of API hooks.

ms.api.addPrehook

Example: Restrict user to enter at least 5 items of any product
ms.api.addPrehook({entity: 'ms.carts', command: 'addItem'}, function(req, res, next) {
   if(req.cart.item.quantity < 5) {
    // show a message to your user    
    ms.trigger('ms.message', {msg: 'min_quantity_required', data: {quantity: 
    req.cart.item.quantity}, level: 'error'});
    res.send();
   }
});

ms.api.addPosthook

  Example: Calculate the total weight of the cart items
ms.api.addPosthook({entity: 'ms.carts', command: 'addItem'}, function(req, res, next) {
     if(res.data && res.data.cart) {
          res.data.cart.total_weight = 0;
          res.data.cart.items.forEach(function(item) {
             res.data.cart.total_weight += item.weight;
          });
    }
    next();
});


Example: Custom code when product is added to cart
ms.api.addPosthook({entity: "ms.carts", command: "addItem"}, function (req, res, next) {
    var addedItem  = res.data.product;

    window._izq.push(["event","Buy Now",{
        "Category":addedItem.product.categories[0],
        "Product Name":addedItem.name,
        "Price":addedItem.price,
        "Quantity":addedItem.quantity
    }]);

    next();
});


Example: Custom code when user is logged out

ms.api.addPosthook({entity: "ms.users", command: "logout"}, function (req, res, next) {
    
    //put your custom code here or call your API
    next();
});

NOTE:: the next() call need to be there to pass control to the next code in line.

2018-02-01T07:02:25.093Z