forked from M3-Academy/vtex-cms-template-atualizado
feat(parteleira): Adiciona parteleira de produtos mobile e desktop
This commit is contained in:
amanda almeida
parent
4b4b910da3
commit
3462dc3d23
@ -122,122 +122,20 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
},
|
||||
//====================
|
||||
// MOSAICO
|
||||
//====================
|
||||
{
|
||||
id: "banner-01",
|
||||
id: "prateleira-01",
|
||||
objects: [
|
||||
{
|
||||
type: "banner",
|
||||
name: "banner 01",
|
||||
contents: [
|
||||
{
|
||||
name: "banner 01 content",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "banner-01.png",
|
||||
width: 500,
|
||||
height: 500,
|
||||
},
|
||||
],
|
||||
type: "Produtos Relacionados",
|
||||
name: "CONFIRA NOSSAS NOVIDADES",
|
||||
properties: {
|
||||
layout: "amandaalmeida-prateleira-padrao",
|
||||
type: "QuemViuViuTambem",
|
||||
"number-of-columns": 12,
|
||||
"number-of-items": 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "banner-02",
|
||||
objects: [
|
||||
{
|
||||
type: "banner",
|
||||
name: "banner 02",
|
||||
contents: [
|
||||
{
|
||||
name: "banner 02 content",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "banner-02.png",
|
||||
width: 500,
|
||||
height: 500,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "banner-03",
|
||||
objects: [
|
||||
{
|
||||
type: "banner",
|
||||
name: "banner 03",
|
||||
contents: [
|
||||
{
|
||||
name: "banner 03 content",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "banner-03.png",
|
||||
width: 500,
|
||||
height: 500,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "banner-04",
|
||||
objects: [
|
||||
{
|
||||
type: "banner",
|
||||
name: "banner 04",
|
||||
contents: [
|
||||
{
|
||||
name: "banner 04 content",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "banner-04.png",
|
||||
width: 500,
|
||||
height: 500,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "banner-05",
|
||||
objects: [
|
||||
{
|
||||
type: "banner",
|
||||
name: "banner 05",
|
||||
contents: [
|
||||
{
|
||||
name: "banner 05 content",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "banner-05.png",
|
||||
width: 500,
|
||||
height: 500,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "mobile-banner-05",
|
||||
objects: [
|
||||
{
|
||||
type: "banner",
|
||||
name: "banner 05 mobile",
|
||||
contents: [
|
||||
{
|
||||
name: "banner 05 mobile content",
|
||||
active: true,
|
||||
type: "image",
|
||||
file: "banner-05.png",
|
||||
width: 500,
|
||||
height: 500,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
]
|
||||
};
|
||||
|
||||
@ -20,6 +20,7 @@ import Promocao from "./partials/Promocao";
|
||||
import MenuContents from "./partials/MenuContents";
|
||||
import Login from "./partials/Login";
|
||||
import Prateleira from "./components/Prateleira/Prateleira";
|
||||
import Shelf from "./partials/Shelf";
|
||||
|
||||
import PrateleiraService from "./components/Prateleira/PrateleiraService";
|
||||
|
||||
@ -38,6 +39,7 @@ const app = new Container({
|
||||
ScrollToTop,
|
||||
AutoComplete,
|
||||
Prateleira,
|
||||
Shelf,
|
||||
],
|
||||
services: [PrateleiraService],
|
||||
pages: [
|
||||
|
||||
@ -96,8 +96,8 @@ export default class Prateleira {
|
||||
//ex atualziar
|
||||
atualizar() {
|
||||
this.flagDeDesconto();
|
||||
this.precoParcelado();
|
||||
this.precoBoleto();
|
||||
// this.precoParcelado();
|
||||
// this.precoBoleto();
|
||||
}
|
||||
|
||||
criarHtmlPrecoBoleto(valor) {
|
||||
@ -123,7 +123,7 @@ export default class Prateleira {
|
||||
createFlagDesconto($elemento, percentualDeDesconto) {
|
||||
var $flag = $("<p />")
|
||||
.addClass("flag produto-off")
|
||||
.text(percentualDeDesconto + "%");
|
||||
.text(percentualDeDesconto + "%OFF");
|
||||
$elemento.find(".flags-product .DiscountHightLight").append($flag);
|
||||
}
|
||||
|
||||
|
||||
17
src/arquivos/js/app/partials/Shelf.js
Normal file
17
src/arquivos/js/app/partials/Shelf.js
Normal file
@ -0,0 +1,17 @@
|
||||
import slickConfig from 'Config/slick';
|
||||
|
||||
export default class Shelf {
|
||||
constructor() {
|
||||
this.selectors();
|
||||
this.createSlider();
|
||||
}
|
||||
|
||||
selectors() {
|
||||
this.shelf = $(".shelf ul");
|
||||
}
|
||||
|
||||
createSlider() {
|
||||
this.shelf.slick(slickConfig.productShelf.defaultShelf);
|
||||
}
|
||||
|
||||
}
|
||||
@ -58,7 +58,7 @@ export default {
|
||||
productShelf: {
|
||||
defaultShelf: {
|
||||
lazyLoad: "ondemand",
|
||||
dots: true,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
slidesToShow: 4,
|
||||
@ -68,7 +68,6 @@ export default {
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
lazyLoad: "ondemand",
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
infinite: true,
|
||||
@ -77,8 +76,6 @@ export default {
|
||||
{
|
||||
breakpoint: 800,
|
||||
settings: {
|
||||
arrows: true,
|
||||
lazyLoad: "ondemand",
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
@ -86,9 +83,9 @@ export default {
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
arrows: false,
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
arrows: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -5,17 +5,6 @@
|
||||
|
||||
@import "./utils/all";
|
||||
|
||||
@import "./pages/home";
|
||||
@import "./pages/categoria";
|
||||
@import "./pages/produto";
|
||||
@import "./pages/institucional";
|
||||
@import "./pages/erro";
|
||||
@import "./pages/login";
|
||||
|
||||
@import "./components/mini-cart";
|
||||
@import "./components/newsletter";
|
||||
@import "./components/instagram-gallery";
|
||||
|
||||
@import "./partials/header";
|
||||
@import "./partials/menu";
|
||||
@import "./partials/barraDeVantagens";
|
||||
@ -25,3 +14,15 @@
|
||||
@import "./partials/ajustes";
|
||||
@import "./partials/flags";
|
||||
@import "./partials/search";
|
||||
@import "./partials/slider";
|
||||
|
||||
@import "./components/mini-cart";
|
||||
@import "./components/newsletter";
|
||||
@import "./components/instagram-gallery";
|
||||
|
||||
@import "./pages/home";
|
||||
@import "./pages/categoria";
|
||||
@import "./pages/produto";
|
||||
@import "./pages/institucional";
|
||||
@import "./pages/erro";
|
||||
@import "./pages/login";
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
.main-banners {
|
||||
margin-bottom: 38px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
@ -21,18 +25,6 @@
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: map-get($z-index, level-1);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
@extend .sprite;
|
||||
|
||||
@include mq(md, max) {
|
||||
transform: translateY(-50%) scale(0.7);
|
||||
@ -63,9 +55,6 @@
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 14px;
|
||||
@ -78,8 +67,7 @@
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin: 0 4px;
|
||||
|
||||
|
||||
&.slick-active {
|
||||
button {
|
||||
@ -90,21 +78,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: $white-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advantages {
|
||||
margin-bottom: 117px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 89px;
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -135,5 +118,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.shelf {
|
||||
margin-bottom: 172px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,43 +1,38 @@
|
||||
.flags-product {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: map-get($z-index , level-2);
|
||||
padding: 8px;
|
||||
|
||||
p {
|
||||
background-repeat: no-repeat;
|
||||
color: #fff;
|
||||
.flag {
|
||||
display: none;
|
||||
font-size: 11px;
|
||||
float: right;
|
||||
font-weight: 700;
|
||||
min-width: 54px;
|
||||
margin: 7px 100% 0 7px;
|
||||
overflow: hidden;
|
||||
padding: 2.5px 4px;
|
||||
text-indent: -9999px;
|
||||
max-width: max-content;
|
||||
height: 20px;
|
||||
margin: 0 0 8px;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
||||
&.novo,
|
||||
&.produto-off {
|
||||
background: #142032;
|
||||
display: table;
|
||||
float: left;
|
||||
text-indent: 0;
|
||||
width: 50px;
|
||||
|
||||
&:after {
|
||||
content: "OFF";
|
||||
display: inline-block;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.novo {
|
||||
background-color: #f71963;
|
||||
border-radius: 5px;
|
||||
display: table;
|
||||
float: left;
|
||||
text-indent: 0;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
background: $blue-500;
|
||||
color: $white-500;
|
||||
}
|
||||
|
||||
&.produto-off {
|
||||
font-weight: 900;
|
||||
background: $black-500;
|
||||
color: $white-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,264 +1,196 @@
|
||||
/***************************************************************/
|
||||
/**-- Prateleiras --------------------------********************/
|
||||
/*-------------------------------------------------------------*/
|
||||
|
||||
.prateleira-de-produtos {
|
||||
position: relative;
|
||||
|
||||
.slick-next,
|
||||
.slick-prev {
|
||||
@extend .sprite;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 0;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
z-index: 1;
|
||||
|
||||
@include mq(md, max) {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
@extend .sprite;
|
||||
@extend .sprite-circled-arrow-right;
|
||||
left: auto;
|
||||
right: -60px;
|
||||
|
||||
@include mq(md, max) {
|
||||
right: -35px;
|
||||
}
|
||||
|
||||
@include mq_range(md, xl) {
|
||||
right: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
@extend .sprite;
|
||||
@extend .sprite-circled-arrow-left;
|
||||
right: auto;
|
||||
left: -60px;
|
||||
|
||||
@include mq(md, max) {
|
||||
left: -35px;
|
||||
}
|
||||
|
||||
@include mq_range(md, xl) {
|
||||
left: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
bottom: 20px;
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-top: 16px;
|
||||
position: initial;
|
||||
}
|
||||
|
||||
&,
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #142032;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: 10px;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
pointer-events: all;
|
||||
transition: all 0.15s ease-in-out;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.slick-active {
|
||||
button {
|
||||
background-color: #f71963;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shelf {
|
||||
|
||||
h2 {
|
||||
color: #f71963;
|
||||
font-size: 24px;
|
||||
margin: 0 0 24px;
|
||||
margin: 0 0 16px;
|
||||
text-align: center;
|
||||
text-transform: lowercase;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
ul {
|
||||
max-width: 95%;
|
||||
margin: auto;
|
||||
margin: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: 300px;
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 2.5px;
|
||||
.slick-track {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.produto-na-prateleira {
|
||||
padding: 0 5px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
.slick-slide {
|
||||
height: auto;
|
||||
|
||||
.product-image {
|
||||
overflow: hidden;
|
||||
&>div,
|
||||
li {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
@include mq(lg, max) {
|
||||
transform: translateY(-50%) scale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
right: 100%;
|
||||
|
||||
@include mq(lg, max) {
|
||||
left: 0;
|
||||
right: auto;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
@extend .sprite-arrow-left-icon
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
left: 100%;
|
||||
|
||||
@include mq(lg, max) {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
@extend .sprite-arrow-right-icon
|
||||
}
|
||||
|
||||
.produto-na-prateleira {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
margin: 0 15px;
|
||||
|
||||
.lazyload__sibling {
|
||||
padding-bottom: 100%;
|
||||
.product-image {
|
||||
position: relative;
|
||||
padding-top: 100%;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
+div {
|
||||
&:hover {
|
||||
.foto-secundaria {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
.foto-principal,
|
||||
.foto-secundaria {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: map-get($z-index, level-1);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.lazyload__sibling img {
|
||||
left: 50%;
|
||||
max-width: initial;
|
||||
position: relative;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.foto-principal,
|
||||
.foto-secundaria {
|
||||
transition: all 0.25s linear;
|
||||
}
|
||||
|
||||
&:hover .foto-secundaria,
|
||||
.foto-principal {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.foto-secundaria {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.informacoes .nome {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-top: 16px;
|
||||
min-height: 34px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin: 8px 0 17px;
|
||||
|
||||
>div {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.antigo {
|
||||
color: hsla(220, 1%, 43%, 1);
|
||||
font-size: 14px;
|
||||
min-height: 18px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.principal {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.parcelado {
|
||||
color: hsla(220, 1%, 43%, 1);
|
||||
font-size: 12px;
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.boleto {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.compra {
|
||||
.btn-compra {
|
||||
margin: 0;
|
||||
display: block;
|
||||
transition: all 0.25s linear 0.25s;
|
||||
|
||||
@include mq(md, min) {
|
||||
visibility: hidden;
|
||||
.foto-secundaria {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: #2fab61;
|
||||
color: #fff;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
padding: 15px 0;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.15s linear;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
&:hover {
|
||||
background-color: hsla(138, 66%, 41%, 1);
|
||||
}
|
||||
.nome {
|
||||
margin-bottom: 17px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: hsla(138, 50%, 41%, 1);
|
||||
}
|
||||
.price {
|
||||
margin-bottom: 17px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
.antigo {
|
||||
margin-bottom: 4px;
|
||||
text-decoration: line-through;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.principal {
|
||||
margin-bottom: 4px;
|
||||
font-weight: 900;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.parcelado {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-compra {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
background: $black-500;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: uppercase;
|
||||
color: $white-500;
|
||||
|
||||
|
||||
@include mq(lg, max) {
|
||||
&:active {
|
||||
background: lighten($black-500, 10);
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(lg, min) {
|
||||
&:hover {
|
||||
background: lighten($black-500, 10);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $black-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
&:hover .compra .btn-compra {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
.disponivel,
|
||||
.indisponivel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indisponivel {
|
||||
color: #f71963;
|
||||
font-weight: bold;
|
||||
margin: 5px 0;
|
||||
|
||||
.erro {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: $red-300;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
34
src/arquivos/sass/partials/_slider.scss
Normal file
34
src/arquivos/sass/partials/_slider.scss
Normal file
@ -0,0 +1,34 @@
|
||||
.slick-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: map-get($z-index, level-1);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
@extend .sprite
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: $white-500;
|
||||
}
|
||||
}
|
||||
@ -23,7 +23,7 @@ html {
|
||||
*/
|
||||
|
||||
body {
|
||||
color: #142032;
|
||||
color: $black-500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// fonts
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Roboto&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Roboto&display=swap');
|
||||
$font-family: 'Inter', sans-serif;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-regular: 400;
|
||||
|
||||
@ -55,6 +55,12 @@
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="shelf">
|
||||
<div class="container">
|
||||
<vtex:contentPlaceHolder id="prateleira-01" />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
||||
@ -12,11 +12,11 @@
|
||||
<!-- $product.HightLight -->
|
||||
</span>
|
||||
<span class="DiscountHightLight">
|
||||
<p class="flag off">off</p>
|
||||
<p class="flag produto-off">25%OFF</p>
|
||||
<!-- $product.DiscountHightLight -->
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-image ">
|
||||
<div class="product-image">
|
||||
<a href="produto.html" title="Titulo do produto">
|
||||
<!-- title=$product.EscapedName -->
|
||||
<div class="foto-principal">
|
||||
@ -42,7 +42,8 @@
|
||||
<div class="informacoes">
|
||||
<div class="avaliacao"></div>
|
||||
<div class="nome">
|
||||
Titulo do produto
|
||||
Lorem ipsum dolor
|
||||
|
||||
<!-- $product.EscapedName -->
|
||||
</div>
|
||||
</div>
|
||||
@ -52,37 +53,28 @@
|
||||
<div class="antigo">
|
||||
<!-- #if ($product.HasBestPrice) -->
|
||||
<span class="value">
|
||||
R$ 1500000,00
|
||||
r$3.799,05
|
||||
<!-- $product.ListPrice -->
|
||||
</span>
|
||||
<!-- #end -->
|
||||
</div>
|
||||
<div class="principal">
|
||||
<span class="value">
|
||||
R$ 1000000,00
|
||||
r$3.799,05
|
||||
<!-- $product.BestPrice -->
|
||||
</span>
|
||||
</div>
|
||||
<div class="parcelado">
|
||||
<span class="desconto-parcelado">
|
||||
ou
|
||||
<strong>
|
||||
<span class="numero-de-parcelas">1</span>X de
|
||||
<span class="value">
|
||||
R$ 2,50
|
||||
<!-- $product.BestPrice -->
|
||||
</span>
|
||||
</strong>
|
||||
no cartão
|
||||
<span class="numero-de-parcelas">10</span>X de
|
||||
<span class="value">
|
||||
R$ 399,90
|
||||
<!-- $product.BestPrice -->
|
||||
</span>
|
||||
|
||||
sem juros
|
||||
</span>
|
||||
</div>
|
||||
<div class="boleto">
|
||||
<span class="value">
|
||||
R$ 9,50
|
||||
<!-- $product.BestPrice -->
|
||||
</span>
|
||||
à vista no boleto bancário
|
||||
</div>
|
||||
</div>
|
||||
<div class="compra">
|
||||
<span class="btn-compra">
|
||||
@ -0,0 +1,64 @@
|
||||
#set($id = $product.Id) #set($idSku = $product.productVariantId) #set($uri =
|
||||
$product.Uri) #set($escapedName = $product.HtmlEscapedName)
|
||||
|
||||
<div class="produto-na-prateleira" data-sku-id="$id">
|
||||
<div class="flags-product">
|
||||
<span class="HightLight"> $product.HightLight </span>
|
||||
<span class="DiscountHightLight"> $product.DiscountHightLight </span>
|
||||
</div>
|
||||
<div class="product-image">
|
||||
<a href="$uri" title="$escapedName">
|
||||
<div class="foto-principal">
|
||||
<div class="lazyload__sibling"></div>
|
||||
<div class="lazyload" data-noscript="">
|
||||
<noscript> $product.GetImageTag(2) </noscript>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foto-secundaria">
|
||||
<div class="lazyload__sibling"></div>
|
||||
<div class="lazyload" data-noscript="">
|
||||
<noscript> $product.GetImageTag(2,"ultima") </noscript>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="informacoes">
|
||||
<div class="avaliacao"></div>
|
||||
<div class="nome">$escapedName</div>
|
||||
</div>
|
||||
#if ($product.IsInStock)
|
||||
<div class="disponivel">
|
||||
<div class="price">
|
||||
<div class="antigo">
|
||||
#if ($product.HasBestPrice)
|
||||
<span class="value"> $product.ListPrice </span>
|
||||
#end
|
||||
</div>
|
||||
<div class="principal">
|
||||
<span class="value"> $product.BestPrice </span>
|
||||
</div>
|
||||
#if($product.NumbersOfInstallment > 1)
|
||||
<div class="parcelado">
|
||||
<span class="desconto-parcelado">
|
||||
<span class="numero-de-parcelas"
|
||||
>$product.NumbersOfInstallment</span
|
||||
>X de
|
||||
<span class="value"> $product.InstallmentValue </span>
|
||||
|
||||
sem juros
|
||||
</span>
|
||||
</div>
|
||||
#end
|
||||
</div>
|
||||
<div class="compra">
|
||||
<span class="btn-compra">
|
||||
<a title="Compre agora" href="$uri">Compre agora</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
#else
|
||||
<div class="indisponivel">
|
||||
<span class="erro">Produto indisponível</span>
|
||||
</div>
|
||||
#end
|
||||
</div>
|
||||
@ -1,84 +0,0 @@
|
||||
#set($id = $product.Id)
|
||||
#set($idSku = $product.productVariantId)
|
||||
#set($uri = $product.Uri)
|
||||
#set($escapedName = $product.HtmlEscapedName)
|
||||
|
||||
|
||||
<div class="produto-na-prateleira" data-sku-id="$id">
|
||||
<div class="flags-product">
|
||||
<span class="HightLight">
|
||||
$product.HightLight
|
||||
</span>
|
||||
<span class="DiscountHightLight">
|
||||
$product.DiscountHightLight
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-image ">
|
||||
<a href="$uri" title=$escapedName>
|
||||
|
||||
<div class="foto-principal" >
|
||||
<div class="lazyload__sibling"></div>
|
||||
<div class="lazyload" data-noscript="">
|
||||
<noscript>
|
||||
$product.GetImageTag(2)
|
||||
</noscript>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foto-secundaria" >
|
||||
<div class="lazyload__sibling"></div>
|
||||
<div class="lazyload" data-noscript="">
|
||||
<noscript>
|
||||
$product.GetImageTag(2,"ultima")
|
||||
</noscript>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="informacoes">
|
||||
<div class="avaliacao"></div>
|
||||
<div class="nome">
|
||||
$escapedName
|
||||
</div>
|
||||
</div>
|
||||
#if ($product.IsInStock)
|
||||
<div class="disponivel">
|
||||
<div class="price">
|
||||
<div class="antigo">
|
||||
#if ($product.HasBestPrice)
|
||||
<span class="value">
|
||||
$product.ListPrice
|
||||
</span>
|
||||
#end
|
||||
</div>
|
||||
<div class="principal">
|
||||
<span class="value">
|
||||
$product.BestPrice
|
||||
</span>
|
||||
</div>
|
||||
#if($product.NumbersOfInstallment > 1)
|
||||
<div class="parcelado">
|
||||
<span class="desconto-parcelado">
|
||||
ou
|
||||
<strong>
|
||||
<span class="numero-de-parcelas">$product.NumbersOfInstallment</span>X de
|
||||
<span class="value">
|
||||
$product.InstallmentValue
|
||||
</span>
|
||||
</strong>
|
||||
no cartão
|
||||
</span>
|
||||
</div>
|
||||
#end
|
||||
</div>
|
||||
<div class="compra">
|
||||
<span class="btn-compra">
|
||||
<a title="Compre agora" href="$uri">Compre agora</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
#else
|
||||
<div class="indisponivel">
|
||||
<span class="erro">Produto indisponível</span>
|
||||
</div>
|
||||
#end
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user