Myshop JS Library

MyShop Javascript Library

!The myshop javascript library as described below is only available in shops using version 3.5 or higher

The myShop javascript library is automatically included in each shop’s page, and enables most of the default functionality in your shop. This library has an interface which makes it possible to directly interact with it from within your own javascript.

This page will contain the possible interactions and examples in their use.

myshop

The myshop object provides access to most of myshop’s functions and data. Some of these are designed to be used externally also, in time more functions will be added and more information will become accessible. Using the myshop object will block other actions if called with myshop(). To make sure that your call doesn’t block other actions, use myshop('no').

Executing your script when the library is loaded

To make sure that your code is only executed when the myshop library is loaded, use the reserved function name myshop_onready, this function will be called when the myshop library (and the whole page) is loaded.

Persistent data storage

The myshop persistent data storage enables developers to store a variable in one page and read it back on another. The data is stored in customer’s session or profile if available.

• myshop().store(section, name, value)
  Store a variable to the myshop persistent data storage, storage is devided into sections, which should be named when storing a value. Upon restoring a value, a whole section can be retrieved and individual values can be queried from the section.
  Example storing a value to the persistent storage:

<script type="text/javascript">
    function storeValue(name, value){
        myshop('no').store('shop', name, value);
    }

    var test = 'working';
    storeValue('test', test);
</script>

• myshop().restore(section)
  Restore a section from the myshop persistent data storage, a restored section can be queried with the variable names it contains using get()
  Example restoring a value from the persistent storage:
  

<script type="text/javascript">
    function myshop_onready{
        var section = myshop('no').restore('shop').storage;
        var test = section.get('test');
        alert('test: '+test); /* Will show an alert box containing 'test: working' */
    }
</script>

• myshop().shoppingCart#
  The shoppingCart object can be found in the myshop object, using myshop().shoppingCart(). It provides access to the shoppingcart’s properties.
  

myshopEvent

The myshopEvent object can be used to bind your own handler to specific events in the flow of your webshop. The myshopEvent object is called using {myshopEvent()} and contains a set of class methods which bind a given function to certain events.

When an event triggers a custom handler, the handler is expected to return a boolean to indicate if the event should be further processed or not. For instance when handling the onNext event, return false means that the user will not navigate to the next page. Each event also sets a lock, preventing new events to interrupt the current one. Use myshopEvent().clearLock() to clear this lock and enable new events to be triggered.

• myshopEvent().onNext(function)
  The onNext event is called when the user navigates to the next page, for instance in the checkout.
  Example to check an email value in the address screen:

<script type="text/javascript">
    myshopEvent().onNext(function(){
        /* get a form value */
        var check = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
        var email = $('input[name="b_0"]').text();
        var ok = check.test(email);

        if(ok==false){
            alert('Your email adres is not correct, please enter a valid email address');
        }

        /* make sure to remove the action lock if the message is not blocking */
        myshopEvent().clearLock();

        return ok;
    });
</script>

• myshopEvent().onPrevious(function)
  The onPrevious event is called when the user navigates to the previous page, for instance in the checkout.
  Example to confirm leaving the shoppingcart page:
  

<script type="text/javascript">
    myshopEvent().onPrevious(function(){
        /* make sure to remove the action lock if the message is not blocking */
        myshopEvent().clearLock();

        return confirm('Are you sure you which to leave the shoppingcart and continue shopping?');
    });
</script>

• myshopEvent().onOrder(function)
  The onOrder event is called whenever a product is placed into the shoppingcart.
  Example to update the cart’s product counter and inform the user:
  

<script type="text/javascript">
    myshopEvent().onOrder(function(){
        /* get the shopping cart storage */
        var list = myshop('no').shoppingCart().storage;

        /* adjust the shoppingcart count and inform the customer */
        if(list){
            document.getElementById('cartCount').html(list.count);
        }
        alert('Your product has been added to the shoppingcart');

        /* make sure to remove the action lock if the message is not blocking */
        myshopEvent().clearLock();
        return true;
    });
</script>