Sm-vtex-local NPM

:zap: Objective

This package has as objective emulate components of vtex to optimize or develop the local front-end.

Currently the package emulates the following components:

<vtex:template id="sub-template" />
<vtex:contentPlaceHolder id="shelves" />  <!-- Banner, Shelves, Html -->

:x: Common mistakes.

Use the components underneath each other as the following example:

<vtex:template id="sub-template" /> 
<vtex:template id="sub-template" />

DO NOT use the components together in line:

<vtex:template id="sub-template" /> <vtex:template id="sub-template" />

:rocket: Technologies

This project was developed with the following technologies:

:information_source: How To Use

To use this package you will need the Gulp and Node.

Starting from the structure:

Raiz da pasta
├---Templates
|   |   home.html
|   |
|   └--sub-templates
|           footer.html
|           header.html
| 
├---Shelves
├---Banner & Html
|---gulpfile.js

On your command line:

# Install gulp-cli global
$ npm install --global gulp-cli

# Install gulp 
$ npm install gulp

# Install sm-vtex-local 
$ npm install sm-vtex-local

Create a gulpfile.js with these settings:

const gulp = require('gulp');

const {templates, placeHolder} = require('sm-vtex-local');

gulp.task('components', ()=> {
    gulp.src('./templates/*.html') // template path
        .pipe(templates('./templates/sub-templates/')) // sub-template path
        .pipe(placeHolder('./Shelves/', 5)) // Shelves path & number of items on the shelf
        .pipe(placeHolder('./Banner & Html/')) // Banner & Html path
        .pipe(gulp.dest('dist')); 
})

Settings done, now just run: