How to add a new product category?


Important note: Please make sure that at the end of your HTML document is included the 'index.js' instead of 'index.min.js'.

To add a new category, create a new js file in the 'js/products/categories/' path. ex: cakes.js

Here is the boilerplate code for a new category:

/* jshint undef: true, unused: true */
/* global define: false */
define([], function(){
	return {
		// Category name
		name: "Cakes",

		// If true, the products slider will be listed in one row
		oneRow: false, // optional

		// Path to category products images
		imagesPath: "images/cakes/",

		// If true, each product will have a folder for its image, named as its code
		addCodePath: false, // optional
		items: [
			{
				name: "Product name",
				price: {
					current: "68", // product current price
					old: "48" // product old price (optional)
				},
				code: "N8101", // product code, if 'addCodePath' is set to true, the product images well be located in 'images/cakes/N8101/' folder
				details: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates odit vitae repellat doloremque dolorem, numquam.", // Product details shown in details popup
				thumb: "220x220", // Product thumbnail visible in products slider
				gallery: ["940x705", "940x705", "940x705"], // Product large images

				// Adds a label at the top corner of product item (optional)
				label: {
					icon: 'fa-money', // Icon for product label, chose your own from fontawesome icons pack
					text: '50% off' // Label text
				}
			}
		]
	};
});

Define the new category in 'defineCategories.js' from the 'js/products/' path.

/* jshint undef: true, unused: true */
/* global define: false */
define([
	// path to category file
	'products/categories/cakes'
], function(){
	"use strict";

	var list = [];
	for(var i = 0; i<arguments.length; i++){
		list.push(arguments[i]);
	}

	return list;
});
Tags: category, product

Last update:
2015-09-01 12:34
Author:
Daniel Verejan
Revision:
1.1
Average rating:0 (0 Votes)