krackram20 / itgloberspartnercl-custom-grid

Custom five card grid

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

CUSTOM GRID

This component displays five cards and allows them to be arranged in four diferent ways in desktop and six different ways in mobile.

Layout Order

Desktop

Grid 1

Grid 2

Grid 3

Grid 4

Mobile

Configuration

In order to use this component you must:

1. Add the dependency "itgloberspartnercl.grid-custom": "0.x" to manifest.json;
2. Declare the block cards-grid.
3. Declare the card-item blocks as children (or other type of blocks when onlyCardItemsAllowed is set to false)

Only up to five cards cards can be used, if there are more than five children it will render the first five.

cards-grid props

 "cards-grid": 
  {

    "title": "Custom Card Grid",
    
    "children":[
        "card-item#one",
        "card-item#two",
        "card-item#three",
        "card-item#four",
        "card-item#five"
        ],  
        
    "props": {
        "gridTypeMobile": 2,
        "gridTypeDesktop": 2,
        "onlyCardItemsAllowed": false
    }
}

Prop name	Type	Description	Default value
GridTypeDesktop	number	number of the grid type for desktop (see images above)	3
GridTypeMobile	number	number of the grid type for mobile (see images above)	1
onlyCardItemsAllowed	boolean	When false allows other type of blocks (rich-text, images, infocards, etc) as children. When true only card-item blocks will render	true

card-item props

"card-item#one": {
    "title": "Card One",
    "props":{
        "src": "assets/custom-grid/fridges.jpeg",
        "title": "Fridges",
        "description": "Get the best fridges on the market",
        "callToAction": "/electrodomesticos/neveras",
        "buttonText": "shop fridges",
        "nameClass" : "one"
    }
}

Prop name	Type	Description	Default value
src	string	path to the image	XXXXXX
title	stringr	card title	XXXXXX
description	string	brief explanation of the card	XXXXXX
nameClass	string	css styling classname	XXXXXX
callToAction	string	redirect url	XXXXXX
buttonText	string	call to action button text	XXXXXX

Customization

Custom css style must be done in the file itgloberspartnercl.grid-custom.css

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically.

CSS Handles
image (image__{nameClass})
title (title__{nameClass})
description (description__{nameClass})
callToAction (callToAction__{nameClass})
main__container (main__container__{nameClass})
button (button__{nameClass})

Contributors ✨

Thanks goes to these wonderful people:

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

---

Check out some documentation models that are already live:

• Breadcrumb
• Image
• Condition Layout
• Add To Cart Button
• Store Form