feature #1
@ -15,7 +15,6 @@
|
|||||||
"postreleasy": "vtex publish --verbose"
|
"postreleasy": "vtex publish --verbose"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"agenciamagma.store-theme": "5.x",
|
|
||||||
"vtex.store": "2.x",
|
"vtex.store": "2.x",
|
||||||
"vtex.store-header": "2.x",
|
"vtex.store-header": "2.x",
|
||||||
"vtex.product-summary": "2.x",
|
"vtex.product-summary": "2.x",
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
// "list-context.product-list",
|
// "list-context.product-list",
|
||||||
// "slider-layout",
|
// "slider-layout",
|
||||||
// "shelf.relatedProducts",
|
// "shelf.relatedProducts",
|
||||||
"newsletter",
|
"newsletter#footer",
|
||||||
"product-questions-and-answers"
|
"product-questions-and-answers"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -85,7 +85,7 @@
|
|||||||
"flex-layout.col#stack": {
|
"flex-layout.col#stack": {
|
||||||
"children": ["stack-layout"],
|
"children": ["stack-layout"],
|
||||||
"props": {
|
"props": {
|
||||||
"width": "60%",
|
"width": "45%",
|
||||||
"rowGap": 0
|
"rowGap": 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -98,9 +98,15 @@
|
|||||||
"desktop": "auto",
|
"desktop": "auto",
|
||||||
"phone": "16:9"
|
"phone": "16:9"
|
||||||
},
|
},
|
||||||
"displayThumbnailsArrows": true
|
"thumbnailsOrientation": "horizontal",
|
||||||
|
"showNavigationArrows": false,
|
||||||
|
"showPaginationDots": false,
|
||||||
|
"displayThumbnailsArrows": false,
|
||||||
|
"blockClass": "produto-carrossel"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
"flex-layout.col#right-col": {
|
"flex-layout.col#right-col": {
|
||||||
"props": {
|
"props": {
|
||||||
"preventVerticalStretch": true,
|
"preventVerticalStretch": true,
|
||||||
@ -108,12 +114,12 @@
|
|||||||
},
|
},
|
||||||
"children": [
|
"children": [
|
||||||
"flex-layout.row#product-name",
|
"flex-layout.row#product-name",
|
||||||
"product-rating-summary",
|
// "product-rating-summary",
|
||||||
"flex-layout.row#list-price-savings",
|
|
||||||
|
// "flex-layout.row#list-price-savings",
|
||||||
"flex-layout.row#selling-price",
|
"flex-layout.row#selling-price",
|
||||||
"product-installments",
|
"product-installments",
|
||||||
"product-separator",
|
// "product-separator",
|
||||||
"product-identifier.product",
|
|
||||||
"sku-selector",
|
"sku-selector",
|
||||||
"product-quantity",
|
"product-quantity",
|
||||||
"product-assembly-options",
|
"product-assembly-options",
|
||||||
@ -127,9 +133,10 @@
|
|||||||
|
|
||||||
"flex-layout.row#product-name": {
|
"flex-layout.row#product-name": {
|
||||||
"props": {
|
"props": {
|
||||||
"marginBottom": 3
|
"marginBottom": 3,
|
||||||
|
"blockClass": "identifier"
|
||||||
},
|
},
|
||||||
"children": ["vtex.store-components:product-name"]
|
"children": ["vtex.store-components:product-name", "product-identifier.product"]
|
||||||
},
|
},
|
||||||
|
|
||||||
"sku-selector": {
|
"sku-selector": {
|
||||||
@ -319,14 +326,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
"list-context.product-list#carousel-list": {
|
"list-context.product-list#carousel-list": {
|
||||||
"blocks": ["product-summary.shelf#carousel-shelf"],
|
"blocks": ["product-summary.shelf#carousel-shelf"],
|
||||||
"children": ["slider-layout#carousel"]
|
"children": ["slider-layout#carousel"]
|
||||||
@ -352,8 +351,15 @@
|
|||||||
"showNavigationArrows": "desktopOnly",
|
"showNavigationArrows": "desktopOnly",
|
||||||
"blockClass": "carousel"
|
"blockClass": "carousel"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
"newsletter#footer": {
|
||||||
|
"props": {
|
||||||
|
"label": "Assine nossa newsletter",
|
||||||
|
"placeholder": "Digite seu e-mail"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1,98 +1,18 @@
|
|||||||
.flexRowContent--menu-link,
|
/*
|
||||||
.flexRowContent--main-header {
|
0 - 600PX: Phone
|
||||||
padding: 0 0.5rem;
|
600 - 900px: Table portrait
|
||||||
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
|
1800px + : Big desktop
|
||||||
|
*/
|
||||||
|
/* Media Query M3 */
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.stretchChildrenWidth {
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 40em) {
|
.flexRowContent--identifier {
|
||||||
.flexRowContent--menu-link,
|
|
||||||
.flexRowContent--main-header {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 80rem) {
|
|
||||||
.flexRowContent--menu-link,
|
|
||||||
.flexRowContent--main-header {
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRowContent--menu-link {
|
|
||||||
background-color: #03044e;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRowContent--main-header {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRowContent--main-header-mobile {
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.625rem 0.5rem;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
|
|
||||||
color: #727273;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRow--deals {
|
|
||||||
background-color: #0F3E99;
|
|
||||||
padding: 14px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRow--deals .stretchChildrenWidth {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRow--deals .flexCol {
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexCol--filterCol {
|
|
||||||
max-width: 500px;
|
|
||||||
min-width: 230px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexCol--productCountCol {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexCol--orderByCol {
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexCol--orderByMobileCol {
|
|
||||||
width: 42%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexCol--filterMobileCol {
|
|
||||||
width: 38%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRow--quickviewMainRow {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
max-height: 100%;
|
flex-direction: column;
|
||||||
}
|
align-items: end;
|
||||||
|
}
|
||||||
.flexColChild--quickviewDetails:first-child {
|
|
||||||
overflow-y: auto;
|
|
||||||
height: 66% !important;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexColChild--quickviewDetails:last-child {
|
|
||||||
height: 34% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRow--addToCartRow {
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
@ -1,3 +1,12 @@
|
|||||||
.product-identifier--productReference {
|
/*
|
||||||
margin-bottom: 1rem;
|
0 - 600PX: Phone
|
||||||
}
|
600 - 900px: Table portrait
|
||||||
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
|
1800px + : Big desktop
|
||||||
|
*/
|
||||||
|
/* Media Query M3 */
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.product-identifier {
|
||||||
|
text-align: end;
|
||||||
|
}
|
@ -7,10 +7,7 @@
|
|||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.html {
|
.element {
|
||||||
background-color: red;
|
align-items: center;
|
||||||
}
|
text-align: center;
|
||||||
|
|
||||||
.html--pdp-breadcrumb {
|
|
||||||
background-color: green;
|
|
||||||
}
|
}
|
@ -1,42 +1,17 @@
|
|||||||
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
|
/*
|
||||||
border-radius: 50%;
|
0 - 600PX: Phone
|
||||||
}
|
600 - 900px: Table portrait
|
||||||
|
900 - 1200px: Tablet landscape
|
||||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
[1200 - 1800] is where our nortal styles apply
|
||||||
opacity: 0;
|
1800px + : Big desktop
|
||||||
transition: opacity 200ms ease-in-out;
|
*/
|
||||||
}
|
/* Media Query M3 */
|
||||||
|
/* Grid breakpoints */
|
||||||
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
|
.element {
|
||||||
opacity: 1;
|
align-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 40em) {
|
|
||||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nameContainer {
|
|
||||||
justify-content: start;
|
|
||||||
padding-top: 1rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brandName {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #2E2E2E;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.imageContainer {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.imageContainer {
|
||||||
border-radius: 0.25rem;
|
height: 60%;
|
||||||
}
|
}
|
@ -1,31 +1,30 @@
|
|||||||
|
/*
|
||||||
|
0 - 600PX: Phone
|
||||||
|
600 - 900px: Table portrait
|
||||||
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
|
1800px + : Big desktop
|
||||||
|
*/
|
||||||
|
/* Media Query M3 */
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.slideChildrenContainer {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 67px;
|
||||||
|
}
|
||||||
|
|
||||||
.sliderLayoutContainer {
|
.sliderLayoutContainer {
|
||||||
justify-content: center;
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sliderLayoutContainer--carousel {
|
.slide {
|
||||||
background-color: #F0F0F0;
|
background-color: #FFFFFF;
|
||||||
min-height: 450px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sliderTrackContainer {
|
.paginationDot {
|
||||||
max-width: 100%;
|
background-color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paginationDotsContainer {
|
.paginationDot--carousel--isActive {
|
||||||
margin-top: .5rem;
|
background-color: #Fff;
|
||||||
margin-bottom: .5rem;
|
border: 0.5px solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layoutContainer--shelf {
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
max-width: 96rem;
|
|
||||||
min-height: 550px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide--shelf {
|
|
||||||
margin-bottom: 25px;
|
|
||||||
padding-left: .5rem;
|
|
||||||
padding-right: .5rem;
|
|
||||||
min-height: 550px;
|
|
||||||
}
|
|
@ -7,19 +7,34 @@
|
|||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
|
.container {
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productNameContainer {
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
.productDescriptionContainer {
|
.productDescriptionContainer {
|
||||||
width: 43.89%;
|
width: 43.89%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.productImagesContainer {
|
.productImagesContainer {
|
||||||
width: 43.89%;
|
width: 43.89%;
|
||||||
margin-right: 32px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.productImage {
|
.productImage {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.produto-carrossel .swiper-wrapper {
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discountInsideContainer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.newsletter {
|
.newsletter {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
background: #000000;
|
background: #000000;
|
||||||
|
@ -1,8 +0,0 @@
|
|||||||
.html {
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.html--pdp-breadcrumb {
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
|
|
13
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
13
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
.stretchChildrenWidth{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.flexRowContent--identifier{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
10
styles/sass/pages/product/vtex.product-summary.scss
Normal file
10
styles/sass/pages/product/vtex.product-summary.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
.element{
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imageContainer{
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
24
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
24
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
|
||||||
|
.slideChildrenContainer{
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 67px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sliderLayoutContainer{
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide{
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginationDot{
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginationDot--carousel--isActive{
|
||||||
|
background-color: #Fff;
|
||||||
|
border: 0.5px solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1,17 +1,34 @@
|
|||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productNameContainer{
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
.productDescriptionContainer{
|
.productDescriptionContainer{
|
||||||
width: 43.89%;
|
width: 43.89%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.productImagesContainer{
|
.productImagesContainer{
|
||||||
width: 43.89%;
|
width: 43.89%;
|
||||||
margin-right: 32px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.productImage{
|
.productImage{
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.produto-carrossel{
|
||||||
|
.swiper-wrapper{
|
||||||
|
gap: 16px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.discountInsideContainer{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.newsletter{
|
.newsletter{
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
|
Loading…
Reference in New Issue
Block a user