VTEX IO SNIPPETS

A vscode extension to create VTEX IO stores faster 🚀

Hi guys, join us on Discord at the VTEX Developers Community. The purpose of this community is to provide a source of communication between VTEX Store Framework developers 🚀

💡 About the project

This project aims to have a set of Snippets and shortcuts for creating VTEX IO Store Framework.

🤷🏻‍♂️ CAUTION

Make sure you are writing to a .jsonc file, the extension is only enabled when using jsonc files.

Installation

To install directly from the vscode extension manager, use:

brendonguedes.vtex-snippets

---

Current snippets

Prefix	Method
vrl→	VTEX Responsive Layout
vfr→	VTEX Flex Layout Row
vfc→	VTEX Flex Layout Column
vrt→	VTEX Rich Text
vic→	VTEX Info Card
vsl→	VTEX Store Link
vml→	VTEX Modal Layout
vsf→	VTEX Store Form
vcl→	VTEX Condition Layout (2.x)
vlogo→	VTEX Logo
vsld→	VTEX Slider Layout
vimg→	VTEX Image
vshelf→	VTEX Shelf
vcm→	VTEX Category Menu
vfcfr→	VTEX Flex Row into Flex Col
vfrfc→	VTEX Flex Col into Flex Row
vss→	VTEX SKU Selector
vvideo→	VTEX Video
viframe→	VTEX Iframe

Snippets Description

vrl

"store.custom#change-me": {
  "blocks": [
    "responsive-layout.desktop",
    "responsive-layout.tablet",
    "responsive-layout.phone"
  ]
},
"responsive-layout.desktop": {
  "children": []
},
"responsive-layout.tablet": {
  "children": []
},
"responsive-layout.phone": {
  "children": []
},

vfr

"flex-layout.row#change-me": {
  "props": {
    "blockClass": "",
  },
  "children": []
}

vfc

"flex-layout.col#change-me": {
  "props": {
    "blockClass": "",
  },
  "children": []
}

vrt

"rich-text#": {
  "props": {
    "blockClass": "",
    "font": "t-body",
    "text": "",
    "textAlignment": "CENTER",
    "textColor": "c-on-base",
    "textPosition": "CENTER"
  }
}

vsl

"link.product#product-page": {
    "props": {
      "href": "/{slug}/p",
      "label": "More details >"
    }
  },

vml

{
  "store.home": {
    "children": ["modal-trigger#change-me"]
  },
  "modal-trigger#change-me": {
    "children": ["rich-text#change-me", "modal-layout#change-me"]
  },
  "rich-text#change-me": {
    "props": {
      "text": "Click me"
    }
  },
  "modal-layout#change-me": {
    "children": ["rich-text#modal-content"]
  },
  "rich-text#modal-content": {
    "props": {
      "text": "Hello"
    }
  }
}

vsf

  "form": {
    "props": {
      "entity": "clients",
      "schema": "person"
    },
    "children": [
      "rich-text#formTitle",
      "form-input.text#firstName",
      "form-input.text#lastName",
      "form-field-group#address",
      "form-input.checkbox#agreement",
      "form-submit"
    ],
    "blocks": ["form-success"]
  },
  "form-success": {
    "children": [
      "rich-text#successSubmit"
    ]
  },
  "rich-text#successSubmit": {
    "props": {
      "text": "Succesfully submitted the data!",
      "textAlignment": "CENTER",
      "textPosition": "CENTER"
    }
  },
  "form-input.text#firstName": {
    "props": {
      "pointer": "#/properties/firstName"
    }
  },
  "form-input.text#lastName": {
    "props": {
      "pointer": "#/properties/lastName"
    }
  },
  "form-input.checkbox#agreement": {
    "props": {
      "pointer": "#/properties/agreement",
      "label": "Do you agree that this is the best form component in the whole wide world?"
    }
  },
  "form-field-group#address": {
    "props": {
      "pointer": "#/properties/address"
    }
  },
  "form-submit": {
    "props": {
      "label": "Submit"
    }
  }

vshelf

{
  "product-summary.shelf#demo1": {
    "children": []
  },
  "list-context.product-list#demo1": {
    "blocks": ["product-summary.shelf#demo1"],
    "children": ["slider-layout#demo-products"]
  }
}

vsl

"link.product#product-page": {
    "props": {
      "href": "/{slug}/p",
      "label": "More details >"
    }
  },

vcm

{
  "category-menu": {
    "props": {
      "showAllDepartments": true,
      "showSubcategories": true,
      "menuDisposition": "center",
      "departments": [],
      "sortSubcategories": "name"
    }
  }
}

viframe

  "iframe": {
    "props": {
      "src": ""
    }
  }

vvideo

  "video#background": {
    "props": {
      "width": "100%",
      "height": "600px",
      "loop": false,
      "autoPlay": true,
      "muted": false,
      "src": "https://www.youtube.com/watch?v=wygFqZXMIco",
      "blockClass": "videoEl"
    }
  }

vss

  "sku-selector#change-me": {
    "props": {
      "hideImpossibleCombinations": false
    }
  },

vfrfc

  "flex-layout.row#change-me": {
    "children": [
      "flex-layout.col#change-me"
    ]
  },
  "flex-layout.col#change-me": {
    "children": []
  },

vfcfr

  "flex-layout.col#change-me": {
    "children": [
      "flex-layout.row#change-me"
    ]
  },
  "flex-layout.row#change-me": {
    "children": []
  },

📝 Licence

This project is under MIT licence. See the archive LICENSE to more details.

---

For more information

• Write me an email
• Buy me a Coffee
• Report a problema or improvement

Made with 💜 by Brendon Guedes

Consider leaving a ⭐ in this project

Thanks 😍