This article demonstrates how to implement the shopping cart AJAX functions with the Barebones theme's tools.

Basics

The shopping cart AJAX functions are implemented with the Barebones theme's cart.js plugin.

The plugin can be found in the default theme's file /scripts/plugins/cart.js.

The plugin is initialized by default in the file /scripts/custom.js, in which you can modify its theme-specific settings.

By default, the plugin is set in the default theme to perform all functions related to the shopping cart as AJAX requests. If a theme includes both the cart.js plugin and /scripts/custom.js, and the plugin has been initialized using the default method, there is no need for you to enable the plugin's functions separately.

The plugin includes hook functions containing JavaScript code executed in connection to pre-defined events. The hooks are further discussed in the next chapter. You can use hooks to effortlessly modify the functions that are performed, such as when a product is added to the shopping cart with an AJAX request.

The cart.js plugin's hook functions

All hooks included in the plugin are listed below. Their default settings can be found in the file /scripts/custom.js:

beforeAddProduct()

Performed after a visitor has clicked a product's purchase button but before the product has been added to the shopping cart.

afterAddProduct()

Performed after the product has been added to the shopping cart.

beforeRemoveProduct()

Performed after the visitor has pressed the link to remove the product from the shopping cart but before the product has been removed.

afterRemoveProduct()

Performed after the product has been removed from the shopping cart.

beforeUpdate()

Performed before updating the shopping cart. The shopping cart is updated with the Cart plugin's updateCart() function.

afterUpdate()

Performed after updating the shopping cart.

If you'd like to add your own actions connected to hook-tracked events to the theme, add your own code inside the hook functions.

The hooks' content is determined when the plugin is initialized. See the next chapter for instructions.

Initializing the cart.js plugin

The plugin is initialized by calling its init() function and defining inside it the settings used by the plugin.

Below you can see a sample implementation of initializing the cart.js plugin and defining hooks in the Barebones theme:

MCF.Cart.init({
	beforeUpdate: function ($cart) {
		MCF.Loaders.show($cart);
	},

	afterUpdate: function ($cart) {
		MCF.Loaders.hide($cart);
		MCF.Theme.updateCarts();
	},

	beforeAddProduct: function ($buyForm) {
		MCF.Loaders.show($buyForm);
	},

	afterAddProduct: function ($buyForm) {
		MCF.Loaders.hide($buyForm);
		MCF.Theme.updateMiniCarts()
			.then(function () {
				MCF.Drawers.toggleByName('cart');
		});
	},

	beforeRemoveProduct: function ($removeLink) {
		var $product = $removeLink.closest('.Product');
		$product.fadeOut('fast');
	},

	afterRemoveProduct: function () {
		MCF.Theme.updateCarts();
	}
});

Adding products to the shopping cart

The plugin has been set to add products as an AJAX request when the product's purchase button is pressed. So this property doesn't need to be enabled separately in the theme if you haven't made any changes to the scripts. Nevertheless, the example below illustrates how adding products can be performed by pressing the purchase button:

$(".BuyForm .AddToCart").on("click", function (event) {
	event.preventDefault();

	var $buyForm = $(event.currentTarget).closest(".BuyForm");
	MCF.Loaders.show($buyform);

	MCF.Cart.addProduct($buyForm)
		.then(function () {
			return $.get('/interface/Helper?file=helpers/cart')
				.then(function (html) {
					$("#Cart").html(html);
					MCF.Loaders.hide($buyForm);
				});
		});
});

The product is added to the shopping cart by assigning as a parameter the jQuery object with the purchase form to the plugin's addProduct() function.

The hooks beforeAddProduct() and afterAddProduct() are performed inside the addProduct() function.

Removing products from the shopping cart

Products are removed from the shopping cart by using the plugin's removeProduct($removeLink) function, in which a jQuery object with a link to remove the shopping cart product is used as the $removeLink parameter.

The plugin has been set to remove products with an AJAX request when the remove link is pressed. So this property doesn't need to be enabled separately in the theme if you haven't made any changes to the scripts. Nevertheless, the example below illustrates how removing products can be performed by pressing the remove button:

$(".ProductRemove").on("click", function (event) {
	event.preventDefault();

	var $link = $(event.currentTarget);
	MCF.Loaders.show("#Cart");

	MCF.Cart.removeProduct($link)
		//The product has now been removed from the shopping cart
		.then(function () {
			//The markup of the shopping cart element is updated
			return $.get('/interface/Helper?file=helpers/cart')
				.then(function (html) {
					$("#Cart").html(html);
					MCF.Loaders.hide("#Cart");
				});
		});
});

Before removing the product, first the beforeProductRemove() and then the afterProductRemove() hook are run.

Updating the shopping cart

The shopping cart can be updated to reflect the latest changes by using the plugin's updateCart() function.

It is a good idea to update the shopping cart every time new products are added to it. This can be done by using the updateCart() function in the afterAddProduct() hook:

$("#Cart").on("submit", function (event) {
	event.preventDefault();

	var $form = $(event.currentTarget);
	MCF.Loaders.show($form);

	MCF.Cart.updateCart($form)
		.then(function () {
			return $.get('/interface/Helper?file=helpers/cart')
				.then(function (html) {
					MCF.Loaders.hide($form);
					$("#Cart").html(html);
				});
		});
});

In the example, first the overlay is displayed over the shopping cart with the loader.js plugin in the beforeAddProduct() hook. Next the shopping cart is updated and the overlay is removed in the afterAddProduct() hook.