VTEX IO SNIPPETS
A vscode extension to create VTEX IO stores faster 🚀
💡 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.
Made with 💜 by Brendon Guedes
Consider leaving a ⭐ in this project
Thanks 😍
