/itgloberspartnercl-custom-diagramation-template

Primary LanguageTypeScript

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

Custom Diagramation Template

All Contributors

Description

The Custom Diagramation Template is a VTEX IO app that allows you to create a custom diagramation template for your store. This app allows you to change the position of the elements on the screen.

Configuration

  1. Add the Custom Diagramation Template to your theme's dependencies in the manifest.json, for example:
  "dependencies": {
    "{vendor}.special-diagramation": "0.x"
  }

  1. install node modules, go to react folder and run yarn

  2. Add the custom-grid block to your store-theme, for example:

 {
  "flex-layout.col#sustainable__content": {
    "title": "top products desktop layout",
    "children": [
      "rich-text#sustainable__content--title",
      "rich-text#sustainable__content--text",
      "custom-grid"
    ],
    "props": {
      "blockClass": "sustainable__desktop--layout--container--col",
      "width": "100%"
    }
  },
   "custom-grid": {
    "title": "custom grid",
    "props": {
      "blockClass": "sustainable__desktop--layout--container--col--grid"
    },
    "children": [
      "image#custom__grid--one",
      "image#custom__grid--two",
      "image#custom__grid--three",
      "image#custom__grid--four",
      "image#custom__grid--five"
    ]
  },
 }
Block name Description
custom-grid https://img.shields.io/badge/-Mandatory-red This is the top-level block that must be declared in a store-theme block to render a custom grid block.

Customization

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.

CSS HANDLES
grid__${gridType}
gridTypeClass
grid__itemBig
grid__itemSmall

Contributors ✨

Heric Olier

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: