Javascript for your theme

Note: To understand this chapter you should be familiar with Surikata.io's core Javascript API and Javascript API of Plugins.

Once you've understood how the Surikata.io's core API and API for plugins work and what API offer the default plugins, you can read about how to create the Javascript code for your theme.

You should have some knowledge of Javascript.

Javascipt API of the Basic theme

The best place to start learning is most probably the Javascript file of the Basic theme.

Download the Javascript file of the Basic theme

We'll explain the principles on the functionality for adding a product to the shopping cart.

We have this piece of code:

function ThemeBasicCart() { PluginWAICustomerCart.call(this); }
ThemeBasicCart.prototype = Object.create(PluginWAICustomerCart.prototype);

ThemeBasicCart.prototype.updateHeaderOverview = function (html) {
  // code for updating the header's overview of the cart
}

var ThemeBasicCart = new ThemeBasicCart();

Let's break it down piece by piece.

Create a theme-dependent class

We need a class that inherits a functionality from WAI/Customer/Cart plugin.

function ThemeBasicCart() { PluginWAICustomerCart.call(this); }
ThemeBasicCart.prototype = Object.create(PluginWAICustomerCart.prototype);

This code declares a class called ThemeBasicCart which inherits all its functionality from the plugin WAI/Customer/Cart.

Note: See the naming convention, the class for this plugin WAI/Customer/Cart is called PluginWAICustomerCart.

Do not try to understand this piece of code in much detail. When you will need to create your own class that inherits functionality of some plugin, just make it copy&paste and modify.

Implement theme-dependent methods

The WAI/Customer/Cart plugin exposes its API which requires some methods to be implemented. These methods are theme-dependent, this means - they use DOM elements specific to the theme and implement a visualisation that is also specific to the theme.

For example, we need to update the notification badge of the shopping cart icon in the upper right corner showing number of products in the shopping cart. This is kind of a "standard basic functionality", isn't it?

For this purpose, once we've created our class that inherits its functionality from WAI/Customer/Cart plugin, we only need to implement the updateHeaderOverview method like this:

ThemeBasicCart.prototype.updateHeaderOverview = function (html) {
  $('#minicart').html(html);

  let count = $('#navigationCart li').length;

  $('.cart-info a').fadeOut(function () {
    $('.cart-info a').attr('cart-count', count).fadeIn();
  })
}

This method receives an argument html which is an HTML string rendered by the Cart/Overview.twig template. As we must have created this template file before, we know it's structure. So we can process this HTML using jQuery, extract the number of products and update the icon.

Create an object to be used in TWIG template

Once we have our theme-dependent class and its methods declared, we can create an object that we will use in our TWIG template:

var ThemeBasicCart = new ThemeBasicCart();

Now, we can use following Javascript code in our TWIG template:

<button
  type="submit"
  onclick="
    ThemeBasicCart.addProduct(
      {{product.id}}, // idProduct
      1, // qty
      function(data) { // success
        // YOUR CODE HERE
      }
    );
  "
>
  <i class="fa fa-cart-plus"></i>
</button>

Note: There is a TWIG variable {{product.id}} used inside a Javascript code. This is completely correct. The variable will be replaced by the ID of the product to be added and then the onclick* attribute of the button will at that certain product to the shopping cart.

Many methods available

There are many methods avaiable for you. For example in the ThemeBasicCart you can find following methods waiting for your implementation:

ThemeBasicCart.prototype.updatePrice = function (data) {
  // code for updating the price label
}

ThemeBasicCart.prototype.updateHeaderOverview = function (html) {
  // code for updating the header's overview of the cart
}

ThemeBasicCart.prototype.updateDetailedOverview = function() {
  // code for updating the detailed overview of the cart
}

ThemeBasicCart.prototype.updateCheckoutOverview = function() {
  // code for updating the overview of the cart in the checkout page
}

ThemeBasicCart.prototype.placeOrder = function() {
  // code for placing the order
}

Now you should study the BasicTheme in more detail to understand what's inside.

Surikata
E-commerce development framework