Thiago.bronisio/challenge-vtex-io-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add responsividade nas info da pdp, e a estilizacao do campo de cep e transportes #4

Merged
Thiago.bronisio merged 1 commits from feature/pagina-product into master 2023-01-26 04:35:56 +00:00
Conversation 0 Commits 1 Files Changed 14 +436 -91
14 changed files with 436 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,10 @@
[class*="html--buy-button"]{
display: flex;
@media(min-width:769px){
[class*="html--buy-button"]{
display: flex;
}
}
@media(max-width: 768px){
[class*="html--buy-button"]{
display: block;
}
}

6
store/blocks/pdp/product-assembly.jsonc
View File

@ -6,12 +6,6 @@
},
"children": ["html#buy-button"]
},
"product-assembly-options": {
"children": [
"flex-layout.row#product-assembly-options",
"assembly-option-input-values"
]
},
"assembly-option-input-values": {
"props": {
"optionsDisplay": "box"

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

@ -117,10 +117,8 @@
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
"availability-subscriber",
"sku-selector",
"product-assembly-options",
"product-gifts",
"html#buy-button",
"shipping-simulator"

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

@ -21,6 +21,11 @@
margin-top: 24px;
width: 375px;
}
@media only screen and (max-width: 1023px) {
.flexRowContent--message-availability {
width: 100%;
}
}
.sellingPriceValue {
font-size: 50px;
@ -43,6 +48,12 @@
height: 49px;
margin-top: 8px;
}
@media only screen and (max-width: 767px) {
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
margin: 0 0 16px;
height: auto;
}
}
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
font-size: 0;
}
@ -51,6 +62,6 @@
content: "ADICIONAR À SACOLA";
font-size: 18px;
font-weight: 400;
padding: 12px 0;
padding: 12px 64px;
line-height: 22px;
}

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

@ -15,6 +15,12 @@
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
@media only screen and (max-width: 1023px) {
.product-identifier--productReference {
justify-content: start;
margin-bottom: 24px;
}
}
.product-identifier--productReference .product-identifier__label {
display: none;
}

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

@ -15,18 +15,34 @@
}
.installments {
font-weight: 300;
font-size: 16px;
line-height: 22px;
display: flex;
font-size: 0;
color: #929292;
margin-bottom: 8px;
}
.installments .installmentsNumber {
font-weight: 700;
font-size: 16px;
line-height: 22px;
}
.installments .installmentsNumber::after {
content: "x ";
}
.installments .installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
}
.installments .installmentValue::before {
content: "de ";
margin-left: 5px;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.installments .installmentValue::after {
content: " sem juros";
font-weight: 400;
font-size: 16px;
line-height: 22px;
}

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

@ -14,6 +14,11 @@
width: 149px;
margin-right: 10px;
}
@media only screen and (max-width: 767px) {
.quantitySelectorContainer {
margin-bottom: 10px;
}
}
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
}

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

@ -16,8 +16,8 @@
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
/*PRODUTO INDISPONIVEL, TEXTOS */
/* FORMULARIO DE PRODUTO INDISPONIVEL */
/* BUSCA DE CEP */
/* TRANSPORTADORAS */
}
.container .productNameContainer--quickview {
text-align: end;
@ -26,6 +26,11 @@
line-height: 34px;
color: #575757;
}
@media only screen and (max-width: 1023px) {
.container .productNameContainer--quickview {
text-align: start;
}
}
.container .skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
@ -106,6 +111,8 @@
}
.container .subscriberContainer {
width: 100%;
margin-top: 24px;
/* FORMULARIO DE PRODUTO INDISPONIVEL */
}
.container .subscriberContainer .title {
font-size: 0;
@ -128,30 +135,41 @@
line-height: 19px;
color: #868686;
}
.container .form {
.container .subscriberContainer .form {
position: relative;
}
.container .form :global(.vtex-store-components-3-x-content) {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
width: 374.65px;
display: block;
margin-top: 16px;
}
.container .form :global(.vtex-store-components-3-x-content) .inputName {
@media only screen and (max-width: 1023px) {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
width: 100%;
max-width: 100%;
}
}
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
width: 182.46px;
margin-right: 10.08px;
margin-bottom: 15px;
}
.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
@media only screen and (max-width: 1023px) {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
width: 49%;
}
}
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
border: 0.6px solid #929292;
border-radius: 0;
}
.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
line-height: 28px;
color: #929292;
}
.container .form :global(.vtex-store-components-3-x-content) .inputEmail {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
position: absolute;
left: 51%;
top: 0%;
@ -160,21 +178,28 @@
font-weight: 400;
margin-bottom: 15px;
}
.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
@media only screen and (max-width: 1023px) {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
width: -webkit-fill-available;
margin: 0 0 0 8px;
left: 49%;
}
}
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
border: 0.6px solid #929292;
border-radius: 0;
}
.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
line-height: 28px;
color: #929292;
}
.container .form :global(.vtex-store-components-3-x-content) .submit {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
width: 100%;
margin-bottom: 16px;
}
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
width: 100%;
height: 49px;
background-color: #000000;
@ -185,7 +210,7 @@
align-items: center;
justify-content: center;
}
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
content: "AVISE-ME";
color: #fff;
font-weight: 600;
@ -193,17 +218,28 @@
line-height: 25px;
font-family: "Open sans", sans-serif;
}
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
}
.container .shippingContainer {
display: flex;
}
@media only screen and (max-width: 767px) {
.container .shippingContainer {
display: block;
position: relative;
}
}
.container .shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding: 0;
}
@media only screen and (max-width: 767px) {
.container .shippingContainer :global(.vtex-address-form__postalCode) {
display: block;
}
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
font-size: 0;
}
@ -219,6 +255,11 @@
height: 49px;
border-radius: 0;
}
@media only screen and (max-width: 767px) {
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
width: 100%;
}
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
margin-top: 25px;
@ -229,6 +270,13 @@
line-height: 16px;
text-decoration: underline;
}
@media only screen and (max-width: 767px) {
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
left: 0;
margin-top: 8px;
text-align: end;
}
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000000;
}
@ -245,6 +293,13 @@
border-radius: 0;
cursor: pointer;
}
@media only screen and (max-width: 767px) {
.container .shippingContainer :global(.vtex-button) {
position: absolute;
right: 0px;
top: 0px;
}
}
.container .shippingContainer :global(.vtex-button)::before {
content: "OK";
font-weight: 600;
@ -255,6 +310,95 @@
.container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
height: fit-content;
}
.container .shippingTable {
border: none;
padding: 0;
margin: 15px 0;
}
.container .shippingTable .shippingTableHead {
display: block;
text-transform: uppercase;
margin-bottom: 15px;
}
.container .shippingTable .shippingTableHead .shippingTableRow {
display: flex;
flex-direction: row;
}
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
margin-right: 39px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
@media only screen and (max-width: 767px) {
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
margin-right: 32px;
}
}
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
display: flex;
order: 1;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
font-size: 0;
margin-right: 30px;
}
@media only screen and (max-width: 767px) {
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
margin-right: 32px;
}
}
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
content: "Frete";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.container .shippingTable .shippingTableBody .shippingTableRow {
display: flex;
flex-direction: row;
}
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
width: 82px;
margin-right: 28px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
@media only screen and (max-width: 767px) {
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
margin-right: 22px;
}
}
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
display: flex;
order: 1;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
width: 50px;
margin-right: 28px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
padding: 0 0 15px;
}
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn {
display: none;
}
.productImage {
width: max-content;

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

@ -14,6 +14,9 @@
.flexRowContent--message-availability {
margin-top: 24px;
width: 375px;
@include mq(md, max) {
width: 100%;
}
}
.sellingPriceValue {
@ -34,6 +37,10 @@
border: none;
height: 49px;
margin-top: 8px;
@include mq(sm, max) {
margin: 0 0 16px;
height: auto;
}
:global(.vtex-button__label) {
:global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
font-size: 0;
@ -42,7 +49,7 @@
content: "ADICIONAR À SACOLA";
font-size: 18px;
font-weight: 400;
padding: 12px 0;
padding: 12px 64px;
line-height: 22px;
}
}

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

@ -5,6 +5,10 @@
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
@include mq(md, max) {
justify-content: start;
margin-bottom: 24px;
}
.product-identifier__label {
display: none;

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

@ -6,18 +6,35 @@
}
.installments {
font-weight: 300;
font-size: 16px;
line-height: 22px;
display: flex;
font-size: 0;
color: $color-gray-6;
margin-bottom: 8px;
.installmentsNumber {
font-weight: 700;
font-size: 16px;
line-height: 22px;
&::after {
content: "x ";
}
}
.installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
&::before {
content: "de ";
margin-left: 5px;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
&::after {
content: " sem juros";
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
}
}

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

@ -4,6 +4,9 @@
margin-bottom: 16px;
width: 149px;
margin-right: 10px;
@include mq(sm, max) {
margin-bottom: 10px;
}
.quantitySelectorTitle {
display: none;
}

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

@ -10,6 +10,9 @@
font-size: 20px;
line-height: 34px;
color: $color-gray-7;
@include mq(md, max) {
text-align: start;
}
}
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
@ -121,6 +124,7 @@
/*PRODUTO INDISPONIVEL, TEXTOS */
.subscriberContainer {
width: 100%;
margin-top: 24px;
.title {
font-size: 0;
margin-bottom: 0;
@ -144,42 +148,29 @@
color: $color-gray-9;
}
}
}
/* FORMULARIO DE PRODUTO INDISPONIVEL */
.form {
position: relative;
:global(.vtex-store-components-3-x-content) {
width: 374.65px;
display: block;
margin-top: 16px;
.inputName {
width: 182.46px;
margin-right: 10.08px;
margin-bottom: 15px;
:global(.vtex-input-prefix__group) {
border: 0.6px solid $color-gray-6;
border-radius: 0;
/* FORMULARIO DE PRODUTO INDISPONIVEL */
.form {
position: relative;
:global(.vtex-store-components-3-x-content) {
width: 374.65px;
display: block;
margin-top: 16px;
@include mq(md, max) {
width: 100%;
max-width: 100%;
}
:global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
line-height: 28px;
color: $color-gray-6;
}
}
.inputEmail {
position: absolute;
left: 51%;
top: 0%;
border-radius: 0;
width: 182.46px;
font-weight: 400;
margin-bottom: 15px;
.inputName {
width: 182.46px;
margin-right: 10.08px;
margin-bottom: 15px;
@include mq(md, max) {
width: 49%;
}
:global(.vtex-input-prefix__group) {
border: 0.6px solid $color-gray-6;
border-radius: 0;
:global(.vtex-input-prefix__group) {
border: 0.6px solid $color-gray-6;
border-radius: 0;
}
:global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
@ -187,31 +178,56 @@
color: $color-gray-6;
}
}
}
.submit {
width: 100%;
margin-bottom: 16px;
:global(.vtex-button) {
width: 100%;
height: 49px;
background-color: $color-black-padrao;
border: none;
.inputEmail {
position: absolute;
left: 51%;
top: 0%;
border-radius: 0;
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: "AVISE-ME";
color: $color-white;
font-weight: 600;
font-size: 18px;
line-height: 25px;
font-family: "Open sans", sans-serif;
width: 182.46px;
font-weight: 400;
margin-bottom: 15px;
@include mq(md, max) {
width: -webkit-fill-available;
margin: 0 0 0 8px;
left: 49%;
}
:global(.vtex-button__label) {
padding: 0;
:global(.vtex-input-prefix__group) {
border: 0.6px solid $color-gray-6;
border-radius: 0;
:global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
line-height: 28px;
color: $color-gray-6;
}
}
}
.submit {
width: 100%;
margin-bottom: 16px;
:global(.vtex-button) {
width: 100%;
height: 49px;
background-color: $color-black-padrao;
border: none;
border-radius: 0;
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: "AVISE-ME";
color: $color-white;
font-weight: 600;
font-size: 18px;
line-height: 25px;
font-family: "Open sans", sans-serif;
}
:global(.vtex-button__label) {
padding: 0;
}
}
}
}
@ -221,10 +237,17 @@
/* BUSCA DE CEP */
.shippingContainer {
display: flex;
@include mq(sm, max) {
display: block;
position: relative;
}
:global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding: 0;
@include mq(sm, max) {
display: block;
}
:global(.vtex-input__label) {
font-size: 0;
&::before {
@ -239,6 +262,9 @@
width: 280px;
height: 49px;
border-radius: 0;
@include mq(sm, max) {
width: 100%;
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
@ -249,6 +275,11 @@
font-size: 12px;
line-height: 16px;
text-decoration: underline;
@include mq(sm, max) {
left: 0;
margin-top: 8px;
text-align: end;
}
:last-child {
color: $color-black-padrao;
}
@ -266,6 +297,12 @@
font-size: 0;
border-radius: 0;
cursor: pointer;
@include mq(sm, max) {
position: absolute;
right: 0px;
top: 0px;
}
&::before {
content: "OK";
font-weight: 600;
@ -278,6 +315,100 @@
}
}
}
/* TRANSPORTADORAS */
.shippingTable {
border: none;
padding: 0;
margin: 15px 0;
.shippingTableHead {
display: block;
text-transform: uppercase;
margin-bottom: 15px;
.shippingTableRow {
display: flex;
flex-direction: row;
.shippingTableHeadDeliveryName {
margin-right: 39px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black2;
@include mq(sm, max) {
margin-right: 32px;
}
}
.shippingTableHeadDeliveryEstimate {
display: flex;
order: 1;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black2;
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
margin-right: 30px;
@include mq(sm, max) {
margin-right: 32px;
}
&::before {
content: "Frete";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black2;
}
}
}
}
.shippingTableBody {
.shippingTableRow {
display: flex;
flex-direction: row;
.shippingTableCellDeliveryName {
width: 82px;
margin-right: 28px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray-10;
@include mq(sm, max) {
margin-right: 22px;
}
}
.shippingTableCellDeliveryEstimate {
display: flex;
order: 1;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray-10;
}
.shippingTableCellDeliveryPrice {
width: 50px;
margin-right: 28px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray-10;
}
.shippingTableCell {
padding: 0 0 15px;
.shippingTableLabel {
.shippingTableRadioBtn {
display: none;
}
}
}
}
}
}
}
.productImage {

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

@ -1,5 +1,6 @@
$color-black: #292929;
$color-black-padrao: #000000;
$color-black2: #202020;
$color-white: #fff;
$color-gray: #6c6c6c;
@ -11,6 +12,7 @@ $color-gray-6: #929292;
$color-gray-7: #575757;
$color-gray-8: #989898;
$color-gray-9: #868686;
$color-gray-10: #afafaf;
$color-blue: #4267b2;
@ -20,10 +22,10 @@ $color-green: #4caf50;
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
sm: 768px,
md: 1024px,
lg: 1920px,
xl: 1921px,
) !default;
$z-index: (