How to Build a JavaScript Product Catalog Application

April 28 2022

Product Catalogs are essential sales and marketing tools.

These catalogs can help you acquire new clients and maintain repeated ones. By providing product information in a clear, appealing way, you make it easy for users to see your products and get the information you want them to.

This blog will show how to create an online product catalog using SpreadJS, a JavaScript Spreadsheet Component that offers a familiar Excel-like spreadsheet experience for your users.

In addition to the high-speed calculation engine that supports hundreds of statistical and financial functions, we will make extensive use of RANGEBLOCKSPARKLINE(template_range, data_expr) - a powerful sparkline that allows the developer to define a template of cell ranges (template_range) as a single cell type and apply that template to a cell to load a set of data (data_expr) into the template.

Here’s what you need to create and design your product catalog:

Datasource Sheet
Template Sheet
Render Sheet (Catalog)

Download the demo file and follow along.

Get the Latest Version of SpreadJS Today Download now!

Datasource Sheet

The Datasource Sheet contains data regarding different products. Those are located in a table named tbProducts.

This table contains information regarding the name, category, price, rating, etc:

DataSource

Template Sheet

This page contains the template range used to create the product list on the Catalog Sheet.

The first thing to do is arrange the cells and then set the binding path for the cells.

It could be done via Javascript by using the SpreadJS setBindingPath method.

templateSheet.setBindingPath(0, 0, "Nr");

templateSheet.setBindingPath(0, 1, "Name");

templateSheet.setBindingPath(0, 3, "Price");

templateSheet.setBindingPath(0, 4, "Category");

templateSheet.setBindingPath(0, 5, "Description");

templateSheet.setBindingPath(0, 6, "Image");

templateSheet.setBindingPath(0, 7, "Review");

templateSheet.setBindingPath(0, 8, "Favorite");

templateSheet.setBindingPath(0, 9, "Rating");

If we are using SpreadJS Designer, which is included in the download and can be installed from the "\SpreadJS.Release.x.x.x\Designer\Designer Runtime" folder, follow these steps:

Data→ Sheet Binding→ Field List
Hover over the Start branch and add fields by clicking the green + button *Note that you can remove fields with the "x" button and modify those with the settings located to the right of the branch
Drag the fields in the desired cell of the template range

Template

Render Sheet (Catalog)

Render

As seen on the screenshot above, this sheet contains four major sections:

Sort By Panel

This panel contains a button list that can change the order of the table containing the data regarding products, changing the order of the product from the Catalog sheet.

If you are using Designer, do as follows:

Home→ Cell Editors→ Cell Type
Click Button List
Set the Text and Value of items plus the different properties for the button list object.
Add the Items
Click OK

Button List

You can also add the button list by using the below JavaScript code:

var cellType = new GC.Spread.Sheets.CellTypes.ButtonList();

    cellType.items([{text:"Name (asc)",value:0},{text:"Name (desc)",value:1},{text:"Price (lowest)",value:2},text:"Price (highest)",value:3},{text:"Rating (lowest)",value:4},      {text:"Rating (highest)",value:5}]);

    cellType.selectedBackColor("#0AA371");

    cellType.selectedForeColor("#FFFFFF");

    cellType.selectionMode(GC.Spread.Sheets.CellTypes.SelectionMode.single);// allows only 1 item to be selected

    catalogSheet.getCell(3, 2).cellType(cellType);

By using the ValueChanged event, we can change the order of the table located on the Datasource sheet depending on the button list selection.

//Sort by panel
catalogSheet.bind(GC.Spread.Sheets.Events.ValueChanged,function(type,args){
    if (args.row ==3 && args.col==2)//only check if the button list value has changed
    {
        var i = 1; var asc = true;
        switch(args.newValue){
            case 1:
            i= 1; asc = false;//sort by Name desc
            break;
            case 2:
            i= 3; asc = true;//sort by Price asc
            break;
            case 3:
            i= 3; asc = false;//sort by price desc
            break;
            case 4:
            i= 8; asc = true;//sort by Rating asc
            break;
            case 5:
            i= 8; asc = false;//sort by Rating desc
            break;
            default:
            i = 1; asc = true; //sort by Name desc     
            break;
             
        }
        spread.suspendPaint();
        //change the sorting
        spread.getSheetFromName("DataSource").sortRange(1, 0, 15, 9, true, [ 
        {index:i, ascending:asc} 
        ]);
        spread.resumePaint();
    }
});

Products List

The Products List is the most important section of the product catalog. This contains the list of the products and their respective information regarding price, category, name, and image.

As mentioned initially, we will be using RANGEBLOCKSPARKLINE to create the product list.

After having changed the cell width (B6:D10) to accomody the template mentioned above (Template!A2:E7) set the formula on those cells as below:

=RANGEBLOCKSPARKLINE(Template!A2:E7,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data],index,SEQUENCE(COUNTA(tbProducts[#Headers]),1))))

In this case, the index would be the number of the item. For example, on B6, the index will be 1.

If you are using only javascript, use the following code row:

//first product
sheet.setFormula(5, 1, "=RANGEBLOCKSPARKLINE(Template!A2:E7,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data],1,SEQUENCE(COUNTA(tbProducts[#Headers]),1))))");

Repeat the same strategy for the other cells.

Selected Item

When the user clicks on another item by using the SelectionChanged SpreadJS event, the item appearing on the right side of the catalog changes, and the background of the "plus" sign at the right end of the selected item; it becomes green.

The code on JavaScript to do that is as follows:

// select items
var row = 5, col =1;
catalogSheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (sender, args) {
const sheet = args.sheet;
const newRow = args.newSelections[0].row;
const newCol = args.newSelections[0].col;
if ((newRow <5 || newRow > 9)
   || (newCol < 1 || newCol > 3))
return;
 
//change the item appearing on the right panel            
var position = 3*(newRow - 5) + newCol;
sheet.suspendPaint();
sheet.setFormula(5, 5, "=RANGEBLOCKSPARKLINE(Template!H9:O21,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data]," + position + ",SEQUENCE(COUNTA(tbProducts[#Headers]),1))))");
 
// change the color of the "plus" sign of the selected item
sheet.getCell(row, col).backColor("#dddddd");
sheet.getCell(newRow, newCol).backColor("#53b175");
 
sheet.resumePaint();
row = newRow;
col = newCol;

Add to cart button

Add to cart button is a simple button that shows that you can use the hyperlink function to call an event that eventually adds an item to the shopping cart or call some other e-commerce paying functions. The button shows an alert that the item has been added to the cart.

// add cart button
var catalogSheet = spread.getSheetFromName("Catalog");
 
var rect3 = catalogSheet.shapes.add("addItem", GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, 782, 743, 260, 50);
 
rect3.hyperlink({
    command: function () {
    alert("You have added an item in your cart!");
    }
});
rect3.text('+ Add to cart');
var style = rect3.style();
style.fill = { type: GC.Spread.Sheets.Shapes.ShapeFillType.solid, color: 'rgb(83,177,117)'};
style.line.color = 'rgb(83,177,117)';
style.textFrame.hAlign = 1;
style.textFrame.vAlign = 1;
style.textEffect.font = "22px Calibri"
rect3.style(style);

And that's how you can create a product catalog using SpreadJS, our JavaScript component that can be used within any front-end framework or architecture.

Final Product Catalog