Latest technical resources (recommended favorites)
/resources/
In our projects, we often need to add selection screens that allow users to interact intuitively, such as consumables, office supplies, design drafts, or other selectable content.
Catalogs and shopping carts in online shopping malls are undoubtedly a familiar interaction, but in actual development, we may encounter the following problems:
- How do you respond to product needs in a timely manner and get features online quickly?
- How to realize the flexibility to change the template, the separation of data, template and implementation, so that design students can easily modify the UI at any time?
- How to give users a familiar interactive experience while enabling front-end data collection and statistics?
Here is an idea for you to implement this feature using online Excel! In this article, we will show how to create a product catalog page and shopping cart effect in 30 minutes and three steps using pure front-end form controls. The end of the article contains demo source code , do not miss .
Let's take a look at the finished result first:
Create a personalized catalog page in three easy steps
In addition to a high-speed calculation engine that supports hundreds of statistical and financial functions, we will make heavy use of theSpreadJSBuilt-in RANGEBLOCKSPARKLINE(template_range, data_expr) - a powerful mini-charting function that allows the user to define a cell range template (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.
Click hereDownload the demo file, unzip it and open it directly in your browser to see the results.
Here's what you need to create and design a product catalog:
data source table
The data source tables contain data about different products. They are located in the table named tbProducts.
This table contains information about names, categories, prices, ratings and more:
template sheet
This page contains a range of templates for creating product listings on a catalog form.
The first thing to do is to arrange the cells and then set the binding path for the cells.
It can be done in Javascript using the setBindingPath method of SpreadJS.
(0, 0, "Nr");
(0, 1, "Name");
(0, 3, "Price");
(0, 4, "Category");
(0, 5, "Description");
(0, 6, "Image");
(0, 7, "Review");
(0, 8, "Favorite");
(0, 9, "Rating");
Of course, there is a way to do this without writing code - use the designer, in the downloaded installation package, from the "\\Designer\Designer Runtime" path to find the installation package of the designer, after completing installation After completing the installation, follow the steps below:
-
Data → Worksheet Binding → Field List
-
Hover over the Start branch and add fields by clicking on the green + button (note that you can use the "x" button here to delete fields and modify them using the settings located on the right side of the branch)
-
Drag the fields in the cells required for the template range
Rendering table (catalog)
As shown in the screenshot above, this table contains four main sections:
Sort by panel
This panel contains a list of buttons to change the order of the tables containing data about the products, and to change the order of the products from the catalog table.
If you are using the designer, do the following:
1.Home→ Cell Editor→ Cell Type
2. Click button list
3. Set the text and value of the item and the different properties of the button list object.
4. Add items
5. Click OK
Alternatively, a list of buttons can be added using the following JavaScript code:
var cellType = new ();
([{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}]);
("#0AA371");
("#FFFFFF");
();// allows only 1 item to be selected
(3, 2).cellType(cellType);
By using the ValueChanged event, we can choose to change the order of the tables located on the Datasource sheet based on the list of buttons.
//Sort by panel
(,function(type,args){
if ( ==3 && ==2)//only check if the button list value has changed
{
var i = 1; var asc = true;
switch(){
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;
}
();
//change the sorting
("DataSource").sortRange(1, 0, 15, 9, true, [
{index:i, ascending:asc}
]);
();
}
});
Product List
The product list is the most important part of a product catalog. This contains the list of products and their respective information regarding price, category, name and image.
As mentioned earlier, we will use RANGEBLOCKSPARKLINE to create the product list.
After changing the cell widths (B6:D10) to fit the above template (Template!A2:E7), set up the following formulas on these cells:
=RANGEBLOCKSPARKLINE(Template!A2:E7,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data],index,SEQUENCE(COUNTA(tbProducts[#Headers]),1))))
In this case, the index will be the number of the item. For example, on B6, the index will be 1.
If you only use javascript implementation here, you can use the following code:
//first product
(5, 1, "=RANGEBLOCKSPARKLINE(Template!A2:E7,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data],1,SEQUENCE(COUNTA(tbProducts[#Headers]),1))))");
Repeat the same strategy for other cells.
Selected projects
When the user uses theSelectionChangedWhen the event clicks on another item, the item that appears on the right side of the catalog changes, and the background of the "plus sign" at the right end of the selected item; it turns green.
The JavaScript code that performs this operation is as follows:
// select items
var row = 5, col =1;
(, function (sender, args) {
const sheet = ;
const newRow = [0].row;
const newCol = [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;
();
(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
(row, col).backColor("#dddddd");
(newRow, newCol).backColor("#53b175");
();
row = newRow;
col = newCol;
Add to cart button
The Add to Cart button is a simple button that displays the hyperlink function that can be used to call the event that eventually adds the item to the cart or calls some other e-commerce payment function. The button displays an alert that the item has been added to the cart.
Want to learn more? Please refer to the resources below:
Learn more about pure front-end form online demo examples :/developer/spreadjs/demo
Pure front-end form application scenarios:/spreadjs/mobilesample/