forked from M3-Academy/challenge-vtex-io
docs: descricoes basicas de como rodar o projeto
This commit is contained in:
parent
b5c8c26aa1
commit
e68e9c8305
@ -1,65 +1,54 @@
|
||||
# Store theme
|
||||
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
||||
[](#contributors-)
|
||||
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
||||
Our boilerplate theme to create stores in the VTEX IO platform.
|
||||
# Desafio M3 Academy - VTEX IO
|
||||
|
||||
## Preview
|
||||
|
||||
## Configuração do inicial
|
||||
|
||||
## Tutorial
|
||||
To understand how things work check our tutorial [Build a store using VTEX IO](https://vtex.io/docs/getting-started/build-stores-with-store-framework/1/)
|
||||
1. Instale as dependências do projeto
|
||||
|
||||
## Dependencies
|
||||
All store components that you see on this document are open source too. Production ready, you can found those apps in this GitHub organization.
|
||||
```bash
|
||||
yarn
|
||||
```
|
||||
|
||||
Store framework is the baseline to create any store using _VTEX IO Web Framework_.
|
||||
- [Store](https://github.com/vtex-apps/store/blob/master/README.md)
|
||||
2. Faça o login na VTEX na agencia Magma
|
||||
|
||||
Store GraphQL is a middleware to access all VTEX APIs.
|
||||
- [Store GraphQL](https://github.com/vtex-apps/store-graphql/blob/master/docs/README.md)
|
||||
```bash
|
||||
vtex login agenciamagma
|
||||
```
|
||||
|
||||
### Store Component Apps
|
||||
- [Header](https://github.com/vtex-apps/store-header/blob/master/docs/README.md)
|
||||
- [Footer](https://github.com/vtex-apps/store-footer/blob/master/docs/README.md)
|
||||
- [Slider Layout](https://github.com/vtex-apps/slider-layout/blob/master/docs/README.md)
|
||||
- [Shelf](https://github.com/vtex-apps/shelf/blob/master/docs/README.md)
|
||||
- [Telemarketing](https://github.com/vtex-apps/telemarketing/blob/master/docs/README.md)
|
||||
- [Menu](https://github.com/vtex-apps/menu/blob/master/docs/README.md)
|
||||
- [Login](https://github.com/vtex-apps/login/blob/master/docs/README.md)
|
||||
- [Minicart](https://github.com/vtex-apps/minicart/blob/master/docs/README.md)
|
||||
- [Category Menu](https://github.com/vtex-apps/category-menu/blob/master/docs/README.md)
|
||||
- [Product Summary](https://github.com/vtex-apps/product-summary/blob/master/docs/README.md)
|
||||
- [Breadcrumb](https://github.com/vtex-apps/breadcrumb/blob/master/docs/README.md)
|
||||
- [Search Result](https://github.com/vtex-apps/search-result/blob/master/docs/README.md)
|
||||
- [Product Details](https://github.com/vtex-apps/product-details/blob/master/docs/README.md)
|
||||
- [Store Components](https://github.com/vtex-apps/store-components/blob/master/docs/README.md)
|
||||
- [Order Placed](https://github.com/vtex-apps/order-placed/blob/master/docs/README.md)
|
||||
3. Crie um workspace de desenvolvimento.
|
||||
Recomendamos seguir o padrão: `m3academy<nome>`. so e permitido o uso de letras minusculas e números.
|
||||
|
||||
### Store Pixel Apps
|
||||
```bash
|
||||
vtex use m3academyanabrunasouza
|
||||
```
|
||||
|
||||
- [Facebook Pixel](https://github.com/vtex-apps/facebook-pixel/blob/master/docs/README.md)
|
||||
- [Google Tag Manager](https://github.com/vtex-apps/google-tag-manager/blob/master/docs/README.md)
|
||||
## Desenvolvimento
|
||||
|
||||
## Contributing
|
||||
1. Inicie o projeto
|
||||
|
||||
Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.
|
||||
```bash
|
||||
vtex link
|
||||
```
|
||||
|
||||
## Contributors ✨
|
||||
2. Rode o gulp para compilar os arquivos
|
||||
|
||||
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
||||
```bash
|
||||
yarn scss
|
||||
```
|
||||
|
||||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
||||
<!-- prettier-ignore-start -->
|
||||
<!-- markdownlint-disable -->
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center"><a href="http://www.hugoccosta.com"><img src="https://avatars2.githubusercontent.com/u/20212776?v=4" width="100px;" alt=""/><br /><sub><b>Hugo Costa</b></sub></a><br /><a href="https://github.com/vtex-apps/store-theme/commits?author=hugocostadev" title="Documentation">📖</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
3. Abrar o seu workspace no navegador
|
||||
|
||||
```bash
|
||||
vtex browse
|
||||
```
|
||||
|
||||
## Problemas frequentes
|
||||
|
||||
### As vezes pode acontecer de bugar o link do projeto. Para resolver isso, rode o comando abaixo que vai desfazer o link e depois rode o comando de link novamente.
|
||||
|
||||
```bash
|
||||
vtex unlink --all
|
||||
|
||||
vtex link
|
||||
```
|
||||
|
||||
<!-- markdownlint-enable -->
|
||||
<!-- prettier-ignore-end -->
|
||||
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
||||
|
||||
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
{
|
||||
"title": "Contact",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"title": "Title"
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"title": "Name"
|
||||
},
|
||||
"email": {
|
||||
"type": "string",
|
||||
"format": "email",
|
||||
"title": "Email address"
|
||||
},
|
||||
"message": {
|
||||
"type": "string",
|
||||
"title": "Message"
|
||||
}
|
||||
},
|
||||
"required": ["email", "message"],
|
||||
"v-security": {
|
||||
"publicJsonSchema": true
|
||||
}
|
||||
}
|
||||
130
gulpfile.js
130
gulpfile.js
@ -1,7 +1,7 @@
|
||||
const gulp = require("gulp"),
|
||||
concat = require("gulp-concat"),
|
||||
path = require("path"),
|
||||
glob = require("glob");
|
||||
concat = require("gulp-concat"),
|
||||
path = require("path"),
|
||||
glob = require("glob");
|
||||
|
||||
const sass = require("gulp-sass")(require("sass"));
|
||||
|
||||
@ -14,93 +14,93 @@ const sass = require("gulp-sass")(require("sass"));
|
||||
*/
|
||||
// Custom sass para o storefront
|
||||
const pathsStore = {
|
||||
styles: {
|
||||
styles: "styles/sass/**/",
|
||||
ext: "styles/sass/**/*.{css,scss,sass}",
|
||||
dest: "styles/css",
|
||||
},
|
||||
styles: {
|
||||
styles: "styles/sass/**/",
|
||||
ext: "styles/sass/**/*.{css,scss,sass}",
|
||||
dest: "styles/css",
|
||||
},
|
||||
};
|
||||
|
||||
// Quick/efficient way to get the unique values from a array.
|
||||
function uniqValuesArray(a) {
|
||||
var seen = {};
|
||||
var out = [];
|
||||
var len = a.length;
|
||||
var j = 0;
|
||||
for (var i = 0; i < len; i++) {
|
||||
var item = a[i];
|
||||
if (seen[item] !== 1) {
|
||||
seen[item] = 1;
|
||||
out[j++] = item;
|
||||
}
|
||||
var seen = {};
|
||||
var out = [];
|
||||
var len = a.length;
|
||||
var j = 0;
|
||||
for (var i = 0; i < len; i++) {
|
||||
var item = a[i];
|
||||
if (seen[item] !== 1) {
|
||||
seen[item] = 1;
|
||||
out[j++] = item;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
function getCurrentTimestamp() {
|
||||
const date = new Date();
|
||||
const date = new Date();
|
||||
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
const seconds = String(date.getSeconds()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
const seconds = String(date.getSeconds()).padStart(2, "0");
|
||||
|
||||
return `\x1b[35m[${hours}:${minutes}:${seconds}]\x1b[0m`;
|
||||
return `\x1b[35m[${hours}:${minutes}:${seconds}]\x1b[0m`;
|
||||
}
|
||||
|
||||
let filteredFiles = [];
|
||||
|
||||
gulp.task("getFiles", function (done) {
|
||||
glob(pathsStore.styles.ext, function (er, files) {
|
||||
filteredFiles = uniqValuesArray([
|
||||
...files.map((file) => path.basename(file)),
|
||||
]);
|
||||
done();
|
||||
});
|
||||
glob(pathsStore.styles.ext, function (er, files) {
|
||||
filteredFiles = uniqValuesArray([
|
||||
...files.map((file) => path.basename(file)),
|
||||
]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("sass", function (done) {
|
||||
filteredFiles.forEach((file) => {
|
||||
const fileName = file;
|
||||
filteredFiles.forEach((file) => {
|
||||
const fileName = file;
|
||||
|
||||
gulp.src([
|
||||
"styles/sass/utils/_mixin.scss",
|
||||
"styles/sass/utils/_vars.scss",
|
||||
pathsStore.styles.styles + fileName,
|
||||
])
|
||||
.pipe(concat(fileName))
|
||||
.pipe(sass().on("error", sass.logError))
|
||||
.pipe(gulp.dest(pathsStore.styles.dest));
|
||||
});
|
||||
done();
|
||||
gulp
|
||||
.src([
|
||||
"styles/sass/utils/_mixin.scss",
|
||||
"styles/sass/utils/_vars.scss",
|
||||
pathsStore.styles.styles + fileName,
|
||||
])
|
||||
.pipe(concat(fileName))
|
||||
.pipe(sass().on("error", sass.logError))
|
||||
.pipe(gulp.dest(pathsStore.styles.dest));
|
||||
});
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task("run", gulp.series("getFiles", "sass"));
|
||||
|
||||
gulp.task("watch", function () {
|
||||
gulp.watch(pathsStore.styles.ext).on("change", function (fileName) {
|
||||
fileName = path.basename(fileName);
|
||||
gulp.watch(pathsStore.styles.ext).on("change", function (fileName) {
|
||||
fileName = path.basename(fileName);
|
||||
|
||||
if (fileName.includes(".css")) {
|
||||
gulp.src(pathsStore.styles.styles + fileName)
|
||||
.pipe(concat(fileName))
|
||||
.pipe(gulp.dest(pathsStore.styles.dest));
|
||||
} else {
|
||||
gulp.src([
|
||||
"styles/sass/utils/_mixin.scss",
|
||||
"styles/sass/utils/_vars.scss",
|
||||
pathsStore.styles.styles + fileName,
|
||||
])
|
||||
.pipe(concat(fileName))
|
||||
.pipe(sass().on("error", sass.logError))
|
||||
.pipe(gulp.dest(pathsStore.styles.dest));
|
||||
}
|
||||
if (fileName.includes(".css")) {
|
||||
gulp
|
||||
.src(pathsStore.styles.styles + fileName)
|
||||
.pipe(concat(fileName))
|
||||
.pipe(gulp.dest(pathsStore.styles.dest));
|
||||
} else {
|
||||
gulp
|
||||
.src([
|
||||
"styles/sass/utils/_mixin.scss",
|
||||
"styles/sass/utils/_vars.scss",
|
||||
pathsStore.styles.styles + fileName,
|
||||
])
|
||||
.pipe(concat(fileName))
|
||||
.pipe(sass().on("error", sass.logError))
|
||||
.pipe(gulp.dest(pathsStore.styles.dest));
|
||||
}
|
||||
|
||||
console.log(
|
||||
getCurrentTimestamp() +
|
||||
" File: \x1b[32m" +
|
||||
fileName +
|
||||
"\x1b[0m builded."
|
||||
);
|
||||
});
|
||||
console.log(
|
||||
getCurrentTimestamp() + " File: \x1b[32m" + fileName + "\x1b[0m builded."
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("storefront", gulp.series("run", "watch"));
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
{
|
||||
|
||||
"name": "storefront",
|
||||
"shopName": "alliedrecommerce",
|
||||
"version": "1.0.0",
|
||||
@ -12,7 +11,8 @@
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"",
|
||||
"lint": "eslint ./ --fix"
|
||||
"lint": "eslint ./ --fix",
|
||||
"scss": "gulp storefront"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"urlset": {
|
||||
"url": [
|
||||
{
|
||||
"loc": "https://storetheme.vtex.com/about-us"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,6 @@
|
||||
"store.product": {
|
||||
"children": [
|
||||
"html#breadcrumb",
|
||||
"image#example",
|
||||
"condition-layout.product#availability",
|
||||
"flex-layout.row#description",
|
||||
"flex-layout.row#specifications-title",
|
||||
@ -11,6 +10,14 @@
|
||||
"product-questions-and-answers"
|
||||
]
|
||||
},
|
||||
"html#breadcrumb": {
|
||||
"props": {
|
||||
"tag": "section",
|
||||
"testId": "a1",
|
||||
"blockClass": "pdp-breadcrumb"
|
||||
},
|
||||
"children": ["breadcrumb"]
|
||||
},
|
||||
"flex-layout.row#specifications-title": {
|
||||
"children": ["rich-text#specifications"]
|
||||
},
|
||||
@ -19,30 +26,12 @@
|
||||
"text": "##### Product Specifications"
|
||||
}
|
||||
},
|
||||
"image#example": {
|
||||
"props": {
|
||||
"src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
|
||||
"maxHeight": 24
|
||||
}
|
||||
},
|
||||
"rich-text#teste-academy": {
|
||||
"props": {
|
||||
"text": "Teeeeste doooooooo amor"
|
||||
}
|
||||
},
|
||||
"flex-layout.row#product-breadcrumb": {
|
||||
"props": {
|
||||
"marginTop": 4
|
||||
},
|
||||
"children": ["breadcrumb"]
|
||||
},
|
||||
"html#breadcrumb": {
|
||||
"props": {
|
||||
"tag": "section",
|
||||
"testId": "a1"
|
||||
},
|
||||
"children": ["breadcrumb"]
|
||||
},
|
||||
|
||||
"flex-layout.row#description": {
|
||||
"props": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user