How to Build a JavaScript Product Catalog Application
Tags: javascript, webdev, tutorial
Published: 2022-05-02 20:20:06

---
canonical_url: https://www.grapecity.com/blogs/posts/how-to-build-javascript-product-catalog-application
description: Learn how to build a JavaScript product catalog application. See more from SpreadJS today.
---

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)

### 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](https://files.grapecity.com/gc-website-media/tblddcv3/01-source.png?width=500&height=212.10268948655258)

### 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](https://www.grapecity.com/spreadjs/docs/latest/online/SpreadJS~GC.Spread.Sheets.Worksheet~setBindingPath.html) 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](https://www.grapecity.com/spreadjs/javascript-spreadsheet-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:

1.  Data→ Sheet Binding→ Field List
2.  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
3.  Drag the fields in the desired cell of the template range

![Template](https://files.grapecity.com/gc-website-media/ti0jfamc/02-template.png?width=500&height=466.51162790697674)

### Render Sheet (Catalog)

![Render](https://files.grapecity.com/gc-website-media/xmrlmtgy/02-final.png?width=500&height=386.3443596268024)

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:

1.  Home→ Cell Editors→ Cell Type
2.  Click Button List
3.  Set the _Text_ and _Value_ of items plus the different properties for the button list object.
4.  Add the Items
5.  Click OK

![Button List](https://files.grapecity.com/gc-website-media/5vtpwgd5/03-buttonlist.png?width=500&height=333.7887067395264)

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](https://www.grapecity.com/spreadjs/docs/latest/online/SpreadJS~GC.Spread.Sheets.Events~ValueChanged_EV.html) 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](https://www.grapecity.com/spreadjs/docs/latest/online/SpreadJS~GC.Spread.Sheets.Events~SelectionChanged_EV.html) 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](https://files.grapecity.com/gc-website-media/nymlkrix/04-final.gif?width=500&height=377.3006134969325)

If you have any questions or insights you like to share, you are welcome to post a comment below!