GridSystem

This system allows shoppers to quickly and agilely buy products that are normally purchased by combining their attributes. We can examples are a shopper who needs to buy T-shirts of various sizes and colors in bulk.

Configuration

In this section, you first must add the primary instructions that will allow users to use the app's blocks in their store, such as:

1. Adding the "{your_account}.gridsystem": "0.x" app as a theme dependency in the manifest.json file;

"dependencies": {
+   "{your_account}.gridsystem": "0.x"
}

2. In the product template use "GridSystem" in order to rebuild the Product Details Page now including the GridSystem blocks:

 {
  "store.product": {
    "children": [
+      "GridSystem",
      ...
    ]
  },

  "GridSystem" {
     props:{
       "lineAttributeName": "Colors",
       "columnAttribute": "Shoes Size",
       "emptyStock": "-"
     }
  },
 }

Block name	Description
GridSystem	Block that enables you to build the GridSystem. It also supports three props: lineAttributeName, columnAttribute and emptyStock

Prop Name	Type	Description
lineAttributeName	String	This prop is responsible for searching the shoe size
columnAttribute	String	This prop is responsible for searching the color
emptyStock	String	This prop is responsible for naming the input that the stock is empty

Customization

The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in apps:

CSS Handles
'TableContainer'
'TableBuyButton'
'AttributeHeaderRow'
'AttributeHeaderLabel'
'AttributeLine'
'ProductName'
'Price'
'Input'
'AttributeStockNull'
'AttributeStock'
'AttributeStockInput'

Contributors

This project follows the all-contributors specification. Contributions of any kind are welcome!