EleonoraOtz/challenge-vtex-io-eleonora-otz
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/pagina-de-produto #1

Merged
EleonoraOtz merged 21 commits from feature/pagina-de-produto into master 2023-02-03 20:04:20 +00:00
Conversation 0 Commits 21 Files Changed 54 +136 -167
14 changed files with 136 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ed0dba74d7 - Show all commits

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

@ -3,11 +3,7 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
// "flex-layout.row#description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"tab-layout",
// "product-summary.shelf#carousel",
"rich-text#carousel",
"list-context.product-list#product-carousel",
"product-questions-and-answers",
@ -16,6 +12,7 @@
},
// Breadcrumb
"html#breadcrumb": {
"props": {
"tag": "section",
@ -26,6 +23,7 @@
},
// Produto
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},
@ -76,6 +74,7 @@
},
// Imagens de produto
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
@ -86,12 +85,12 @@
"flex-layout.row#product-image": {
"children": ["html#product-images"]
},
"html#product-images": {
"children": ["product-images"],
"props": {
"testId": "product-images"
}
},
"html#product-images": {
"children": ["product-images"],
"props": {
"testId": "product-images"
}
},
"product-images": {
"props": {
@ -107,6 +106,7 @@
},
// Especificações de produto
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
@ -118,8 +118,6 @@
"flex-layout.row#selling-price",
"product-installments",
"html#pix-price",
// "Pix",
// "sku-selector",
"html#sku-selector",
"html#buy-button",
"product-gifts",
@ -151,6 +149,7 @@
},
// Parcelamento
"product-installments": {
"props": {
"markers": ["discount"],
@ -160,11 +159,12 @@
},
// Quantidade e botão de compra
"html#buy-button": {
"props": {
"blockClass": "buy-button"
},
"children": [ "html#product-quantity-size", "html#cart-button"]
"children": ["html#product-quantity-size", "html#cart-button"]
},
"html#cart-button": {
@ -191,6 +191,7 @@
},
// Produto indisponível
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
@ -219,6 +220,7 @@
},
// Formulário produto indisponível
"flex-layout.row#availability": {
"props": {
"blockClass": "message-availability"
@ -227,6 +229,7 @@
},
// Desconto Pix
"html#pix-price": {
"children": ["Pix"],
"props": {
@ -235,6 +238,7 @@
},
// Descrição
"tab-layout": {
"children": ["tab-list", "tab-content"],
"props": {
@ -382,6 +386,7 @@
},
// Prateleira de produtos
"rich-text#carousel": {
"props": {
"text": "Você também pode gostar:",
@ -419,6 +424,7 @@
},
// Newsletter
"newsletter": {
"props": {
"label": "Assine nossa newsletter",

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

@ -7,9 +7,6 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
/* .product-identifier--productReference {
margin-bottom: 1rem;
} */
.product-identifier__label {
display: none;
}

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

@ -19,38 +19,6 @@
margin: 0;
}
.savings--summary {
background: #8bc34a;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #ffffff;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #ffffff;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: 0.875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.installments {
font-size: 16px;
line-height: 22px;
@ -61,19 +29,4 @@
.installments .installments-discount,
.installments .installmentValue {
font-weight: 700;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

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

@ -40,19 +40,6 @@
color: #000000;
}
:global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
}
:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
}
:global(.vtex-store-components-3-x-listPrice) {
font-weight: 400;
font-size: 14px;
@ -71,6 +58,19 @@
content: " por";
}
:global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
}
:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
}
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
visibility: hidden;
}

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

@ -1,3 +1,5 @@
// Breadcrumb
.container {
padding: 14px 36px;
@ -13,6 +15,8 @@
color: $gray-500;
}
// Home
.homeIcon {
display: none;
}
@ -24,6 +28,8 @@
color: $gray-500;
}
// Outros links
.link--1,
.link--2 {
&::after {

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

@ -1,11 +1,5 @@
/* .product-identifier--productReference {
margin-bottom: 1rem;
} */
// .info-availability {
// display: flex;
// align-self: flex-end;
// }
// Código de identificação do produto
.product-identifier {

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

@ -1,13 +1,8 @@
.listPrice {
display: none;
// color: #727273;
// margin-bottom: 0.25rem;
// font-size: 1rem;
}
// .sellingPrice {
// margin: 0;
// }
// Preço
.sellingPriceValue {
font-weight: 700;
@ -17,38 +12,8 @@
margin: 0;
}
.savings--summary {
background: #8bc34a;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #ffffff;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #ffffff;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: 0.875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
// Informações de parcelamento
.installments {
font-size: 16px;
@ -84,18 +49,3 @@
// }
// }
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

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

@ -1,3 +1,7 @@
// Quantidade de produtos
// Botões
:global(.vtex-numeric-stepper__minus-button),
:global(.vtex-numeric-stepper__plus-button) {
background-color: $white;
@ -8,6 +12,8 @@
border-radius: 0;
}
// Botão de -
:global(.vtex-numeric-stepper__minus-button) {
border-top: 1px;
border-left: 1px;
@ -16,6 +22,8 @@
border-color: $gray-1000;
}
// Botão de +
:global(.vtex-numeric-stepper__plus-button) {
border-top: 1px;
border-right: 1px;
@ -24,6 +32,8 @@
border-color: $gray-1000;
}
// Input
:global(.vtex-numeric-stepper__input) {
border-top: 1px;
border-bottom: 1px;

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

@ -1,6 +1,7 @@
// :global(.vtex-slider-layout-0-x-slide--shelf) {
// width: 300px;
// }
// Prateleira de produtos
// Container
:global(.vtex-slider-layout-0-x-sliderLayoutContainer) {
width: 94%;
margin: auto;
@ -11,11 +12,15 @@
}
}
// Informações de cada produto
:global(.vtex-slider-layout-0-x-slideChildrenContainer) {
width: 314px;
padding-right: 16px;
}
// Imagem do produto
.imageWrapper {
height: 314px;
display: flex;
@ -23,6 +28,8 @@
align-items: center;
}
// Nome do produto
.nameContainer {
padding: 0 0 8px;
@ -34,20 +41,7 @@
}
}
:global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
:global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-sellingPriceValue) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: $black;
}
}
// Preço sem desconto
:global(.vtex-store-components-3-x-listPrice) {
font-weight: 400;
@ -72,6 +66,25 @@
}
}
// Preço com desconto
:global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
:global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-sellingPriceValue) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: $black;
}
}
// Arrows
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
visibility: hidden;
@ -100,6 +113,8 @@
}
}
// Desconto
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}

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

@ -1,3 +1,5 @@
// Título da prateleira
.paragraph--carousel-title {
font-weight: 400;
font-size: 24px;

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

@ -1,3 +1,5 @@
// Dots da prateleira de produtos
.paginationDotsContainer--shelf {
align-items: center;
bottom: -30px;

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

@ -1,3 +1,5 @@
// Produto
.container {
padding: 0 40px;
margin: 0;
@ -8,6 +10,8 @@
}
}
// Nome do produto
.productNameContainer--quickview {
font-weight: 300;
font-size: 20px;
@ -16,6 +20,8 @@
color: $gray-600;
}
// Imagens do produto
.productImageTag--main {
max-height: max-content !important;
max-width: max-content;
@ -48,10 +54,14 @@
margin-right: 16px;
}
// Skus
.skuSelectorContainer {
display: flex;
flex-direction: column;
// Skus cor
.skuSelectorSubcontainer--cor {
order: 2;
@ -97,6 +107,8 @@
}
}
// Skus tamanho
.skuSelectorSubcontainer--tamanho {
order: 1;
@ -181,6 +193,8 @@
margin: 0 16px 0 0;
}
// Código Postal
.shippingContainer {
display: flex;
@ -242,6 +256,8 @@
}
}
// Não sei meu CEP
:global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
position: relative;
@ -266,6 +282,8 @@
height: fit-content;
}
// Informações de entrega
.shippingTable {
display: flex;
flex-direction: column;
@ -355,6 +373,8 @@
}
}
// Formulário de produto indisponível
.subscriberContainer {
.title {
font-size: 0;
@ -453,6 +473,8 @@
}
}
// Newsletter
.newsletter {
display: block;
background: $black;

18
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -1,3 +1,5 @@
// Descrição do produto
:global(.vtex-tab-layout-0-x-container) {
padding: 0 40px;
margin: 0;
@ -7,12 +9,16 @@
padding: 0;
}
// Header descrição do produto
.listContainer--tabList {
border-bottom: 1px solid $gray-100;
height: 43px;
justify-content: space-between;
padding: 0 70px;
// Títulos do header da descrição do produto
.listItem {
:global(.vtex-button) {
&:hover {
@ -38,6 +44,8 @@
}
}
// Título ativo do header da descrição do produto
.listItemActive {
:global(.vtex-button) {
background-color: white;
@ -57,6 +65,8 @@
}
}
// Container do conteúdo
:global(.vtex-tab-layout-0-x-contentContainer) {
.contentItem {
display: flex;
@ -65,10 +75,8 @@
align-items: flex-start;
padding: 32px 32px 16px;
// :global(.vtex-store-components-3-x-content) {
// max-width: 100%;
// Imagem do produto
// }
.productImagesContainer {
width: 50%;
max-width: 50%;
@ -81,6 +89,8 @@
// max-width: 872px;
}
// Título da descrição do produto
:global(.vtex-rich-text-0-x-heading) {
font-weight: 400;
font-size: 24px;
@ -89,6 +99,8 @@
margin-top: 0;
}
// Texto descrição do produto
:global(.vtex-rich-text-0-x-paragraph) {
font-weight: 400;
font-size: 16px;

24
styles/sass/utils/_vars.scss
View File

@ -6,7 +6,7 @@ $gray-50: #868686;
$gray-100: #bfbfbf;
$gray-200: #b9b9b9;
$gray-300: #bababa;
$gray-400: #AFAFAF;
$gray-400: #afafaf;
$gray-500: #929292;
$gray-600: #575757;
$gray-700: #202020;
@ -18,18 +18,18 @@ $black: #000000;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
$z-index: (
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25,
) !default;