Gustavo_Rallenson_Goncalves_Da_Silva/challenge-vtex-io-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/product-image' into desenvolvimento

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-08 13:43:04 -03:00
commit 3d879a66c9
19 changed files with 316 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/Todo.md
View File

@ -5,13 +5,13 @@
- [x] (a) inciando projeto {cm:2023-01-25} - [x] (a) inciando projeto {cm:2023-01-25}
os Requisitos cobrados serão: os Requisitos cobrados serão: {cm:2023-02-07}
# Dev # Dev
- HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p {cm:2023-02-07}
- FIXME [Blocos que devem ser ajustado e desenvolvidos](tabLayout_com_descrição_até_troca_e_devolução_e_seu_conteúdo){ - FIXME [Blocos que devem ser ajustado e desenvolvidos](6){
- [x] 1. BreadCrumb; {cm:2023-01-31} - [x] 1. BreadCrumb; {cm:2023-01-31}
@ -19,15 +19,13 @@ os Requisitos cobrados serão:
- HACK 3. dados_do_produto_e_de_compra-ao_lado_das_imagens {cm:2023-02-03} - HACK 3. dados_do_produto_e_de_compra-ao_lado_das_imagens {cm:2023-02-03}
- HACK 4. tabLayout com descrição até troca e devolução e seu conteúdo, - HACK 4. tabLayout com descrição até troca e devolução e seu conteúdo, {cm:2023-02-07}
- HACK 5. prateleira de produtos, - HACK 5. prateleira de produtos, {cm:2023-02-07}
- HACK 6. Newsletter. - HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc)
- HACK 7. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc) - HACK 7.Fazer o cep
- HACK 8.Fazer o cep
- FIXME COLOCAR OS TESTESID!!!!! - FIXME COLOCAR OS TESTESID!!!!!

63
react/components/Html/styles.css
View File

@ -1,11 +1,52 @@
/* [class*=html--pdp-breadcrumb]{ /* [class*=html--pdp-breadcrumb]{
} */ } */
.html--pdp-productMain{
padding-right: 2.778%;
padding-left: 2.778%;
display: flex;
}
.html--StackLayout,.html--pdp-InfoBuy{
width: 50%;
}
.html--buy-button{
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 16px;
margin-top: 16px;
}
.html--pdp-productMain :global(.vtex-button){
display: none;
}
.html--buy-button :global(.vtex-button){
display: block;
background: black;
height: 49px;
max-width: 77.354%;
}
.html--pdp-section_descriptions{ .html--pdp-section_descriptions{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
padding: 0px 40px 0px 40px; padding: 0px 40px 0px 40px;
} }
@media screen and (min-width: 1920px){
.html--buy-button :global(.vtex-button){
max-width: 766px;
width: 80.126%;
}
.html--pdp-productMain{
padding-right: 12.5393%;
padding-left: 12.5393%;
margin: 0;
gap: 32px;
max-height: 100%;
}
.html--pdp-section_descriptions{
padding: 0px 12.5393% 0px 12.5393%;
}
}
.html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){ .html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
gap: 32px; gap: 32px;
} }
@ -65,6 +106,28 @@
} }
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.html--buy-button{
align-items: normal;
flex-direction: column;
}
.html--buy-button :global(.vtex-button){
max-width: 93.662%;
width: 100%;
height: 74px;
}
.html--buy-button :global(.vtex-button) :global(.vtex-button__label){
padding-left: 21.92%;
padding-right: 21.92%;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.html--pdp-productMain{
flex-direction: column;
align-items: center;
}
.html--StackLayout,.html--pdp-InfoBuy{
width: 89.23%;
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-container){ .html--pdp-descriptions :global(.vtex-store-components-3-x-container){
border-bottom: 1px solid rgba(185, 185, 185, 1); border-bottom: 1px solid rgba(185, 185, 185, 1);
padding-bottom: 16px; padding-bottom: 16px;

104
store/blocks/pdp/product.jsonc
View File

@ -2,13 +2,14 @@
"store.product": { "store.product": {
"children": [ "children": [
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability",
"html#departaments", "html#departaments",
"flex-layout.row#specifications-title", "flex-layout.row#specifications-title",
"html#carousel" "html#carousel"
] ]
}, },
"tab-layout#pdp": { "tab-layout#pdp": {
"children":[ "children": [
"tab-list#pdp", "tab-list#pdp",
"tab-content#pdp", "tab-content#pdp",
"tab-content#pdp2", "tab-content#pdp2",
@ -21,7 +22,7 @@
"defaultActiveTabId": "descrição1" "defaultActiveTabId": "descrição1"
} }
}, },
"tab-list#pdp":{ "tab-list#pdp": {
"children": [ "children": [
"tab-list.item#pdpsection1", "tab-list.item#pdpsection1",
"tab-list.item#pdpsection2", "tab-list.item#pdpsection2",
@ -64,70 +65,50 @@
"label": "Descrição" "label": "Descrição"
} }
}, },
"tab-content.item#descriptionpdp":{ "tab-content.item#descriptionpdp": {
"children":[ "children": ["html#description"],
"html#description"
],
"props": { "props": {
"tabId": "descrição1" "tabId": "descrição1"
} }
}, },
"tab-content#pdp":{ "tab-content#pdp": {
"children":[ "children": ["tab-content.item#descriptionpdp"]
"tab-content.item#descriptionpdp"
]
}, },
"tab-content.item#descriptionpdp2":{ "tab-content.item#descriptionpdp2": {
"children":[ "children": ["html#description"],
"html#description"
],
"props": { "props": {
"tabId": "descrição2" "tabId": "descrição2"
} }
}, },
"tab-content#pdp2":{ "tab-content#pdp2": {
"children":[ "children": ["tab-content.item#descriptionpdp2"]
"tab-content.item#descriptionpdp2"
]
}, },
"tab-content.item#descriptionpdp3":{ "tab-content.item#descriptionpdp3": {
"children":[ "children": ["html#description"],
"html#description"
],
"props": { "props": {
"tabId": "descrição3" "tabId": "descrição3"
} }
}, },
"tab-content#pdp3":{ "tab-content#pdp3": {
"children":[ "children": ["tab-content.item#descriptionpdp3"]
"tab-content.item#descriptionpdp3"
]
}, },
"tab-content.item#descriptionpdp4":{ "tab-content.item#descriptionpdp4": {
"children":[ "children": ["html#description"],
"html#description"
],
"props": { "props": {
"tabId": "descrição4" "tabId": "descrição4"
} }
}, },
"tab-content#pdp4":{ "tab-content#pdp4": {
"children":[ "children": ["tab-content.item#descriptionpdp4"]
"tab-content.item#descriptionpdp4"
]
}, },
"tab-content.item#descriptionpdp5":{ "tab-content.item#descriptionpdp5": {
"children":[ "children": ["html#description"],
"html#description"
],
"props": { "props": {
"tabId": "descrição5" "tabId": "descrição5"
} }
}, },
"tab-content#pdp5":{ "tab-content#pdp5": {
"children":[ "children": ["tab-content.item#descriptionpdp5"]
"tab-content.item#descriptionpdp5"
]
}, },
"html#prateleira": { "html#prateleira": {
"props": { "props": {
@ -269,18 +250,20 @@
"testId": "Product-Images", "testId": "Product-Images",
"blockClass": "pdp-productMain" "blockClass": "pdp-productMain"
}, },
"children": ["flex-layout.row#product-main"] "children": ["html#stack", "html#right-col"]
}, },
"flex-layout.row#product-main": { "flex-layout.row#product-main": {
"props": { "props": {
"blockClass": "pdp-flexProduct",
"colGap": 7, "colGap": 7,
"rowGap": 7, "rowGap": 7,
"marginTop": 4, "marginTop": 0,
"marginBottom": 7, "marginBottom": 0,
"paddingTop": 7, "paddingTop": 0,
"paddingBottom": 7 "paddingBottom": 0,
}, "paddingright":0,
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"] "paddingleft":0
}
}, },
"stack-layout": { "stack-layout": {
@ -321,17 +304,18 @@
"children": ["flex-layout.row#description"] "children": ["flex-layout.row#description"]
}, },
"flex-layout.col#stack": { "html#stack": {
"children": ["stack-layout"], "children": ["stack-layout"],
"props": { "props": {
"rowGap": 10,
"width": "50%", "width": "50%",
"blockClass": "StackLayout", "blockClass": "StackLayout"
"htmlId": "teste"
} }
}, },
"flex-layout.row#product-image": { "flex-layout.row#product-image": {
"props":{
"blockClass": "product-image"
},
"children": ["product-images"] "children": ["product-images"]
}, },
"product-images": { "product-images": {
@ -349,6 +333,7 @@
}, },
"product-images#description": { "product-images#description": {
"props": { "props": {
"blockClass": "img-description",
"maxHeight": 872, "maxHeight": 872,
"testid": "product-images", "testid": "product-images",
"aspectRatio": { "aspectRatio": {
@ -362,10 +347,9 @@
"zoomMode": "disabled" "zoomMode": "disabled"
} }
}, },
"flex-layout.col#right-col": { "html#right-col": {
"props": { "props": {
"preventVerticalStretch": true, "blockClass": "pdp-InfoBuy"
"rowGap": 0
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
@ -376,7 +360,7 @@
"sku-selector", "sku-selector",
"product-assembly-options", "product-assembly-options",
"product-gifts", "product-gifts",
"flex-layout.row#buy-button", "html#buy-button",
"availability-subscriber", "availability-subscriber",
"shipping-simulator", "shipping-simulator",
"share#default" "share#default"
@ -421,6 +405,9 @@
}, },
"flex-layout.row#buy-button": { "flex-layout.row#buy-button": {
"children": ["product-quantity", "add-to-cart-button"]
},
"html#buy-button": {
"props": { "props": {
"marginTop": 4, "marginTop": 4,
"marginBottom": 7, "marginBottom": 7,
@ -449,7 +436,7 @@
"paddingTop": 7 "paddingTop": 7
}, },
"children": [ "children": [
"flex-layout.col#stack", "html#stack",
"flex-layout.col#right-col-availability" "flex-layout.col#right-col-availability"
] ]
}, },
@ -461,7 +448,6 @@
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-identifier.product",
"sku-selector", "sku-selector",
"flex-layout.row#availability" "flex-layout.row#availability"
] ]

16
styles/css/vtex.breadcrumb.css
View File

@ -8,14 +8,20 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.container { .container {
padding: 0 40px 16px; padding-top: 16px;
margin-left: auto; padding-right: 4%;
margin-right: auto; padding-left: 4%;
max-width: 96rem; }
@media screen and (min-width: 1920px) {
.container {
padding-right: 14.063%;
padding-left: 14.063%;
}
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.container { .container {
padding: 0 0 0 10.67%; text-align: center;
padding: 0;
} }
} }
.container .term, .container .termArrow { .container .term, .container .termArrow {

33
styles/css/vtex.flex-layout.css
View File

@ -12,21 +12,17 @@
padding: 0 0.5rem; padding: 0 0.5rem;
} }
.flexRowContent { .flexRowContent--title .stretchChildrenWidth {
padding: 0; width: 100% !important;
margin: 0;
} }
.flexRowContent--buy-button {
gap: 10px; .flexRowContent--product-image {
justify-content: flex-end;
} }
.flexRowContent--buy-button .stretchChildrenWidth { @media screen and (min-width: 1920px) {
padding: 0; .flexRowContent--product-image .stretchChildrenWidth {
justify-content: flex-start; max-width: max-content;
} }
.flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
background: black;
height: 49px;
max-width: 526px;
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
@ -141,6 +137,11 @@
align-items: end; align-items: end;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
@media screen and (max-width: 1024px) {
.flexRowContent--title {
display: flex;
}
}
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) { .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
top: 33%; top: 33%;
@ -169,6 +170,7 @@
height: max-content; height: max-content;
min-height: max-content; min-height: max-content;
max-width: 274px; max-width: 274px;
max-height: 100%;
} }
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@ -181,6 +183,11 @@
.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) { .flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
max-width: 100%; max-width: 100%;
} }
@media screen and (min-width: 1920px) {
.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
max-width: 96rem;
}
}
.flexRow--pdp-price .flexRowContent--pdp-price { .flexRow--pdp-price .flexRowContent--pdp-price {
justify-content: center; justify-content: center;

12
styles/css/vtex.product-customizer.css Normal file
View File

@ -0,0 +1,12 @@
/*
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 */
.textInputValue, .productAssemblyGroupNameRow {
display: none;
}

10
styles/css/vtex.product-identifier.css
View File

@ -10,6 +10,12 @@
.product-identifier--productReference { .product-identifier--productReference {
display: block; display: block;
text-align: end; text-align: end;
margin-top: 8px; padding-right: 40px;
padding-right: 8px; font-size: 14px;
line-height: 19px;
}
@media screen and (max-width: 1024px) {
.product-identifier--productReference {
text-align: start;
}
} }

5
styles/css/vtex.product-price.css
View File

@ -23,11 +23,6 @@
font-weight: 700; font-weight: 700;
} }
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings { .savings {
font-weight: 500; font-weight: 500;
color: #79B03A; color: #79B03A;

4
styles/css/vtex.product-quantity.css
View File

@ -10,7 +10,7 @@
.quantitySelectorStepper { .quantitySelectorStepper {
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
width: max-content; width: max-content;
min-width: 83.86%; min-width: 100%;
padding: 3.5px 0; padding: 3.5px 0;
} }
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
@ -34,4 +34,6 @@
.quantitySelectorContainer { .quantitySelectorContainer {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 128px;
margin-bottom: 0;
} }

2
styles/css/vtex.product-summary.css
View File

@ -57,7 +57,7 @@
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.nameContainer .productNameContainer--pdp-name { .nameContainer .productNameContainer--pdp-name {
max-height: 80px; max-height: 50px;
} }
} }

64
styles/css/vtex.store-components.css
View File

@ -7,6 +7,21 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.shareLabel, .skuSelectorNameSeparator, .skuSelectorSelectorImageValue {
display: none;
}
@media screen and (max-width: 1024px) {
.productImagesContainer--carousel .productImagesGallerySlide {
width: 100% !important;
}
}
@media screen and (min-width: 1920px) {
.productImagesContainer--carousel .carouselGaleryCursor {
max-height: 100%;
}
}
.productNameContainer--quickview { .productNameContainer--quickview {
padding-right: 40px !important; padding-right: 40px !important;
} }
@ -15,10 +30,26 @@
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.skuSelectorContainer .skuSelectorSubcontainer {
max-width: 93.663%;
}
@media screen and (max-width: 1024px) {
.skuSelectorContainer .skuSelectorSubcontainer {
height: max-content;
}
}
.skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList {
height: 40.61px;
}
.skuSelectorContainer .skuSelectorItemImage { .skuSelectorContainer .skuSelectorItemImage {
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
@media screen and (max-width: 1024px) {
.skuSelectorContainer .skuSelectorItemImage {
margin: 0;
}
}
.skuSelectorContainer .skuSelectorItem--selected .frameAround { .skuSelectorContainer .skuSelectorItem--selected .frameAround {
border-radius: 24px; border-radius: 24px;
border: 2px solid #000000; border: 2px solid #000000;
@ -32,8 +63,15 @@
left: 0; left: 0;
right: 0; right: 0;
} }
.skuSelectorContainer .skuSelectorSubcontainer--cor {
height: 75px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList {
height: 48px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase; text-transform: uppercase;
font-family: "Open Sans", sans-serif;
} }
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
content: "ES:"; content: "ES:";
@ -55,6 +93,7 @@
} }
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase; text-transform: uppercase;
font-family: "Open Sans", sans-serif;
} }
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
content: "S:"; content: "S:";
@ -83,16 +122,20 @@
line-height: 34px; line-height: 34px;
color: #575757; color: #575757;
} }
@media screen and (max-width: 1024px) {
.productNameContainer--quickview {
text-align: start;
}
}
.carouselContainer { .carouselContainer {
padding: 0 40px 0; max-width: 906px;
} }
.carouselContainer .productImage { .carouselContainer .productImage {
max-width: 85.238%; max-width: 85.238%;
} }
@media screen and (min-width: 1920px) { @media screen and (min-width: 1920px) {
.carouselContainer .productImage { .carouselContainer .productImage {
min-width: 904px;
max-width: 100%; max-width: 100%;
} }
} }
@ -117,14 +160,23 @@
border-radius: 8px; border-radius: 8px;
max-height: 100% !important; max-height: 100% !important;
} }
@media screen and (max-width: 1024px) {
.carouselContainer .productImage .productImageTag--main {
max-height: 100% !important;
max-width: 98.657%;
}
}
.productImageTag--img-description {
max-width: 872px;
}
.carouselGaleryThumbs { .carouselGaleryThumbs {
display: block; display: block;
height: max-content; height: max-content;
} }
.carouselGaleryThumbs .productImagesThumb { .carouselGaleryThumbs .productImagesThumb {
width: max-content !important; height: 100% !important;
background: white;
margin-right: 1em; margin-right: 1em;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@ -144,12 +196,12 @@
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
min-height: 4.9em; min-height: 100%;
} }
} }
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg { .carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
border-radius: 8px; border-radius: 8px;
width: 90px; min-height: 90px;
} }
.productDescriptionContainer .productDescriptionTitle { .productDescriptionContainer .productDescriptionTitle {

14
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -1,10 +1,14 @@
.container{ .container{
padding: 0 40px 16px; padding-top:16px;
margin-left: auto; padding-right: 4%;
margin-right: auto; padding-left: 4%;
max-width: 96rem; @media screen and (min-width: 1920px){
padding-right: 14.063%;
padding-left: 14.063%;
}
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
padding: 0 0 0 10.67%; text-align: center;
padding: 0;
} }
.term,.termArrow{ .term,.termArrow{
display: none; display: none;

28
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -2,22 +2,20 @@
.flexRowContent--main-header { .flexRowContent--main-header {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
.flexRowContent{ .flexRowContent--title{
padding: 0;
margin: 0;
&--buy-button{
gap: 10px;
.stretchChildrenWidth{ .stretchChildrenWidth{
padding: 0; width: 100% !important;
justify-content: flex-start;
:global(.vtex-button){
background: black;
height: 49px;
max-width: 526px;
} }
}
.flexRowContent--product-image{
justify-content: flex-end;
@media screen and (min-width: 1920px){
.stretchChildrenWidth{
max-width: max-content;
} }
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.flexRowContent--menu-link, .flexRowContent--menu-link,
.flexRowContent--main-header { .flexRowContent--main-header {
@ -132,6 +130,10 @@
.flexRowContent--title{ .flexRowContent--title{
align-items: end; align-items: end;
flex-direction: column-reverse; flex-direction: column-reverse;
@media screen and (max-width: 1024px){
display: flex;
}
} }
.flexRowContent--pdp-carrousel{ .flexRowContent--pdp-carrousel{
:global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){ :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){
@ -159,6 +161,7 @@
height: max-content; height: max-content;
min-height: max-content; min-height: max-content;
max-width: 274px; max-width: 274px;
max-height: 100%;
} }
} }
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){ :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
@ -171,6 +174,9 @@
.flexRow--pdp-carrousel{ .flexRow--pdp-carrousel{
:global(.vtex-store-components-3-x-container){ :global(.vtex-store-components-3-x-container){
max-width: 100%; max-width: 100%;
@media screen and (min-width: 1920px){
max-width: 96rem;
}
} }
} }
.flexRow--pdp-price{ .flexRow--pdp-price{

3
styles/sass/pages/product/vtex.product-customizer.scss Normal file
View File

@ -0,0 +1,3 @@
.textInputValue,.productAssemblyGroupNameRow{
display: none;
}

8
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -2,7 +2,11 @@
&--productReference{ &--productReference{
display: block; display: block;
text-align: end; text-align: end;
margin-top: 8px; padding-right: 40px;
padding-right: 8px; font-size: 14px;
line-height: 19px;
@media screen and (max-width: 1024px){
text-align: start;
}
} }
} }

4
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -1,7 +1,7 @@
.quantitySelectorStepper{ .quantitySelectorStepper{
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
width: max-content; width: max-content;
min-width: 83.86%; min-width: 100%;
padding: 3.5px 0; padding: 3.5px 0;
:global(.vtex-numeric-stepper-wrapper){ :global(.vtex-numeric-stepper-wrapper){
:global(.vtex-numeric-stepper-container){ :global(.vtex-numeric-stepper-container){
@ -28,4 +28,6 @@
.quantitySelectorContainer{ .quantitySelectorContainer{
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 128px;
margin-bottom: 0;
} }

2
styles/sass/pages/product/vtex.product-summary.scss
View File

@ -49,7 +49,7 @@
.productNameContainer--pdp-name{ .productNameContainer--pdp-name{
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
max-height: 80px; max-height: 50px;
} }
} }
} }

53
styles/sass/pages/product/vtex.store-components.scss
View File

@ -1,12 +1,39 @@
.shareLabel,.skuSelectorNameSeparator,.skuSelectorSelectorImageValue{
display: none;
}
.productImagesContainer--carousel{
.productImagesGallerySlide{
@media screen and (max-width: 1024px){
width: 100% !important;
}
}
.carouselGaleryCursor{
@media screen and (min-width: 1920px){
max-height: 100%;
}
}
}
.productNameContainer--quickview{ .productNameContainer--quickview{
padding-right: 40px !important; padding-right: 40px !important;
} }
.skuSelectorContainer{ .skuSelectorContainer{
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
.skuSelectorSubcontainer{
max-width: 93.663%;
@media screen and (max-width: 1024px){
height: max-content;
}
.skuSelectorOptionsList{
height: 40.61px;
}
}
.skuSelectorItemImage{ .skuSelectorItemImage{
width: 48px; width: 48px;
height: 48px; height: 48px;
@media screen and (max-width: 1024px){
margin: 0;
}
} }
.skuSelectorItem--selected{ .skuSelectorItem--selected{
.frameAround{ .frameAround{
@ -25,9 +52,14 @@
} }
.skuSelectorSubcontainer-{ .skuSelectorSubcontainer-{
&-cor{ &-cor{
height: 75px;
.skuSelectorOptionsList{
height: 48px;
}
.skuSelectorTextContainer{ .skuSelectorTextContainer{
.skuSelectorName{ .skuSelectorName{
text-transform: uppercase; text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
&::after{ &::after{
content: "ES:"; content: "ES:";
} }
@ -53,6 +85,7 @@
.skuSelectorTextContainer{ .skuSelectorTextContainer{
.skuSelectorName{ .skuSelectorName{
text-transform: uppercase; text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
&::after{ &::after{
content: "S:"; content: "S:";
} }
@ -85,13 +118,15 @@
font-size: 20px; font-size: 20px;
line-height: 34px; line-height: 34px;
color: #575757; color: #575757;
@media screen and (max-width: 1024px){
text-align: start;
}
} }
.carouselContainer{ .carouselContainer{
padding: 0 40px 0; max-width: 906px;
.productImage{ .productImage{
max-width:85.238%; max-width:85.238%;
@media screen and (min-width: 1920px){ @media screen and (min-width: 1920px){
min-width: 904px;
max-width:100%; max-width:100%;
} }
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
@ -109,16 +144,22 @@
&-main{ &-main{
border-radius: 8px; border-radius: 8px;
max-height: 100% !important; max-height: 100% !important;
@media screen and (max-width: 1024px){
max-height: 100% !important;
max-width: 98.657%;
} }
} }
} }
}
}
.productImageTag--img-description{
max-width: 872px;
} }
.carouselGaleryThumbs{ .carouselGaleryThumbs{
display: block; display: block;
height: max-content; height: max-content;
.productImagesThumb{ .productImagesThumb{
width: max-content !important; height: 100% !important;
background:white;
margin-right: 1em; margin-right: 1em;
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
width: 30% !important; width: 30% !important;
@ -131,13 +172,13 @@
border-radius: 8px; border-radius: 8px;
min-height: 5.54em; min-height: 5.54em;
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
min-height: 4.9em; min-height: 100%;
} }
} }
} }
.thumbImg{ .thumbImg{
border-radius: 8px; border-radius: 8px;
width: 90px; min-height: 90px;
} }
} }
} }

4
styles/sass/pages/vtex.product-price.scss
View File

@ -14,10 +14,6 @@
font-weight: 700; font-weight: 700;
} }
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings { .savings {
font-weight: 500; font-weight: 500;