Rhayllon_Daudt/challenge-vtex-io-Rhayllon-Daudt
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat(Pdp): Cria estilização responsiva para a pagina e cria componente de produto indisponivel estilizado

Browse Source
This commit is contained in:
Rhayllon Daudt 2023-02-10 23:11:22 -03:00
parent 0ed1bc0a87
commit 44507ba5ab
15 changed files with 569 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,10 @@
[class*="html--wrapperQuantity"] {
display: flex;
margin-bottom: 16px;
}
@media screen and (max-width: 375px) {
[class*="html--wrapperQuantity"] {
flex-direction: column;
}
}

5
react/components/Pix/Pix.tsx
View File

@ -23,6 +23,11 @@ const Pix = () => {
// const handles = useCssHandles(CSS_HANDLES)
if (typeof document !== "undefined") {
const input = document.querySelector(".vtex-address-form-4-x-input");
input?.setAttribute("placeholder", "Digite seu CEP");
}
return (
<div className={styles.wrapperComponentPix}>
<img className={styles.imagePix} src="https://agenciamagma.vteximg.com.br/arquivos/PixImg-RhayllonDaudt.png" alt="PixIcon" />

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

@ -23,7 +23,8 @@
"breadcrumb#Pdp": {
"props": {
"blockClass": "Pdp"
"blockClass": "Pdp",
"showOnMobile": true
}
},
@ -89,7 +90,6 @@
"phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"blockClass": "prateleiraSlider"
}
},
@ -325,7 +325,7 @@
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"phone": "auto"
},
"showNavigationArrows": false,
"showPaginationDots": false,
@ -376,6 +376,7 @@
"children": ["vtex.store-components:product-name"]
},
"sku-selector": {
"props": {
"variationsSpacing": 3,
@ -403,9 +404,7 @@
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7
"blockClass": "indisponivelWrapper"
},
"children": [
"flex-layout.col#stack",
@ -420,9 +419,9 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"product-identifier.product#identifierMain",
"flex-layout.row#availability",
"sku-selector#inverseOrder"
]
},
"flex-layout.row#availability": {

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

@ -37,4 +37,11 @@
padding: 0;
width: 94.44%;
margin: 0 auto;
max-width: 94rem;
}
@media screen and (max-width: 1024px) {
.container--Pdp {
width: 100%;
padding: 0 40px;
}
}

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -8,7 +9,37 @@
/* Media Query M3 */
/* Grid breakpoints */
.flexRow--productMainWrapper {
padding: 0 36px;
width: 95%;
margin: 0 auto;
}
@media screen and (max-width: 1024px) {
.flexRow--productMainWrapper {
width: 100%;
margin: 0;
padding: 0 40px;
}
}
@media screen and (max-width: 1024px) {
.flexRow--productMainWrapper :global(.vtex-store-components-3-x-container) {
padding: 0;
}
}
.flexRow--indisponivelWrapper {
width: 95%;
margin: 0 auto;
}
@media screen and (max-width: 1024px) {
.flexRow--indisponivelWrapper {
width: 100%;
margin: 0;
padding: 0 40px;
}
}
@media screen and (max-width: 1024px) {
.flexRow--indisponivelWrapper :global(.vtex-store-components-3-x-container) {
padding: 0;
}
}
.flexRow--buyButton {
@ -17,6 +48,12 @@
width: 100%;
margin-left: 10px;
}
@media screen and (max-width: 375px) {
.flexRow--buyButton {
margin-left: 0;
padding-top: 10px;
}
}
.flexRow--buyButton .flexRowContent--buyButton {
margin: 0;
height: 49px;
@ -42,3 +79,132 @@
color: #000000;
margin: 0;
}
@media screen and (max-width: 1024px) {
.flexRow--descriptionRow :global(.vtex-store-components-3-x-container) {
padding: 0 !important;
}
}
.flexRowContent--productMainWrapper {
margin: 16px 0;
padding: 0;
}
@media screen and (max-width: 1024px) {
.flexRowContent--productMainWrapper {
flex-direction: column;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--productMainWrapper .stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}
.flexRowContent--indisponivelWrapper {
margin: 16px 0;
padding: 0;
}
@media screen and (max-width: 1024px) {
.flexRowContent--indisponivelWrapper {
flex-direction: column;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--indisponivelWrapper .stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--descriptionRow {
flex-direction: column;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--descriptionRow .stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}
.flexRowContent--descriptionRow .stretchChildrenWidth :global(.vtex-store-components-3-x-productImageTag--descriptionImg--main) {
object-fit: unset !important;
max-height: 994px !important;
margin-bottom: 16px;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-title)::before {
content: "Produto indisponivel";
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::before {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-content) {
display: grid;
grid-auto-flow: column;
max-width: 400px;
column-gap: 8px;
}
@media screen and (max-width: 1024px) {
.flexRow--message-availability :global(.vtex-store-components-3-x-content) {
width: 100%;
}
}
.flexRow--message-availability :global(.vtex-store-components-3-x-content) :last-child {
grid-area: 2/1/2/3;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
margin: 0;
}
.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
margin: 0;
margin-bottom: 15px;
}
.flexRow--message-availability :global(.vtex-button) {
width: 100%;
background-color: #000000;
font-size: 0;
height: 49px;
border-radius: 0;
align-items: center;
justify-content: center;
display: flex;
}
.flexRow--message-availability :global(.vtex-button)::before {
content: "Avise-me";
color: #fff;
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
text-transform: uppercase;
}
.flexRow--message-availability :global(.vtex-button__label) {
display: none;
}
.flexRow--message-availability :global(.vtex-input-prefix__group) {
border-radius: 0;
border-color: #989898;
}

16
styles/css/vtex.slider-layout.css
View File

@ -11,6 +11,12 @@
width: 90.63%;
margin: 0 auto 101px auto;
}
@media screen and (max-width: 1024px) {
.sliderLayoutContainer--prateleiraSlider {
width: 100% !important;
padding: 0 63px;
}
}
.sliderArrows--prateleiraSlider {
margin: 0;
@ -20,10 +26,20 @@
.sliderRightArrow--prateleiraSlider {
right: -2.53%;
}
@media screen and (max-width: 1024px) {
.sliderRightArrow--prateleiraSlider {
right: 3.91%;
}
}
.sliderLeftArrow--prateleiraSlider {
left: -2.53%;
}
@media screen and (max-width: 1024px) {
.sliderLeftArrow--prateleiraSlider {
left: 3.91%;
}
}
.paginationDotsContainer--prateleiraSlider {
bottom: -32px;

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

@ -14,10 +14,16 @@
.productImageTag--ImgsMain--main {
object-fit: unset !important;
}
@media screen and (max-width: 1024px) {
.productImageTag--ImgsMain--main {
max-height: 994px !important;
}
}
.productImagesThumb {
width: 13.605% !important;
margin: 0 16px 0 0;
max-width: 90px;
}
.productNameContainer--quickview {
@ -30,6 +36,13 @@
line-height: 34px;
color: #575757;
}
@media screen and (max-width: 1024px) {
.productNameContainer--quickview {
justify-content: flex-start;
padding-top: 32px;
}
}
:global(.vtex-product-identifier-0-x-product-identifier--productReference) {
display: flex;
justify-content: end;
@ -41,6 +54,11 @@
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
@media screen and (max-width: 1024px) {
:global(.vtex-product-identifier-0-x-product-identifier--productReference) {
justify-content: flex-start;
}
}
.skuSelectorContainer--inverseOrder {
display: flex;
@ -133,6 +151,29 @@
padding-top: 16.1px;
text-decoration: underline;
}
@media screen and (max-width: 600px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
left: 55px;
}
}
@media screen and (max-width: 490px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
left: -85px;
top: 50px;
}
}
@media screen and (max-width: 450px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
left: -112px;
top: 50px;
}
}
@media screen and (max-width: 375px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
left: -78px;
top: 50px;
}
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: black;
}
@ -151,6 +192,21 @@
border: none;
border-radius: 0;
}
@media screen and (max-width: 490px) {
.shippingContainer :global(.vtex-button) {
right: 31%;
}
}
@media screen and (max-width: 425px) {
.shippingContainer :global(.vtex-button) {
right: 24%;
}
}
@media screen and (max-width: 375px) {
.shippingContainer :global(.vtex-button) {
right: 40px;
}
}
.shippingContainer :global(.vtex-button) ::before {
content: "Ok";
font-weight: 600;
@ -241,3 +297,9 @@
font-size: 16px;
line-height: 22px;
}
@media screen and (max-width: 1024px) {
.productImagesGallerySlide--ImgsMain {
width: 100% !important;
}
}

35
styles/css/vtex.tab-layout.css
View File

@ -11,11 +11,27 @@
width: 94.44%;
margin: 0 auto;
}
@media screen and (max-width: 1024px) {
.container--descriptionLayout {
width: 100%;
padding: 0 40px;
}
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper {
justify-content: space-between;
border-bottom: 1px solid #B9B9B9;
padding: 0 64px;
margin-bottom: 32px;
max-width: 94rem;
margin: 0 auto 32px auto;
}
@media screen and (max-width: 1024px) {
.container--descriptionLayout .listContainer--descriptionButtonWrapper {
padding: 16px 0 0 0;
flex-direction: column;
margin-bottom: 16px;
border-top: 1px solid #B9B9B9;
}
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton {
margin: 0;
@ -28,10 +44,19 @@
font-size: 18px;
line-height: 38px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button):hover {
background-color: #fff;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
padding: 0 16px !important;
text-transform: capitalize;
}
@media screen and (max-width: 1024px) {
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
margin-bottom: 16px;
padding: 0 !important;
}
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton {
margin-top: 2px;
}
@ -46,7 +71,17 @@
font-size: 18px;
line-height: 38px;
}
@media screen and (max-width: 1024px) {
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
border: none;
}
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
padding: 0 16px !important;
text-transform: capitalize;
}
@media screen and (max-width: 1024px) {
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
padding: 0 !important;
}
}

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

@ -28,4 +28,10 @@
padding: 0;
width: 94.44%;
margin: 0 auto;
max-width: 94rem;
@media screen and (max-width: 1024px) {
width: 100%;
padding: 0 40px;
}
}

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

@ -1,5 +1,34 @@
.flexRow--productMainWrapper{
padding: 0 36px;
width: 95%;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 100%;
margin: 0;
padding: 0 40px;
}
:global(.vtex-store-components-3-x-container){
@media screen and (max-width: 1024px) {
padding: 0;
}
}
}
.flexRow--indisponivelWrapper{
width: 95%;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 100%;
margin: 0;
padding: 0 40px;
}
:global(.vtex-store-components-3-x-container){
@media screen and (max-width: 1024px) {
padding: 0;
}
}
}
.flexRow--buyButton{
display: flex;
@ -7,6 +36,11 @@
width: 100%;
margin-left: 10px;
@media screen and (max-width: 375px) {
margin-left: 0;
padding-top: 10px;
}
.flexRowContent--buyButton{
margin: 0;
height: 49px;
@ -34,3 +68,136 @@
color: $color-black2;
margin: 0;
}
.flexRow--descriptionRow{
:global(.vtex-store-components-3-x-container) {
@media screen and (max-width: 1024px) {
padding: 0 !important;
}
}
}
.flexRowContent--productMainWrapper{
margin: 16px 0;
padding: 0;
@media screen and (max-width: 1024px) {
flex-direction: column;
}
.stretchChildrenWidth{
@media screen and (max-width: 1024px) {
width: 100% !important;
padding: 0;
}
}
}
.flexRowContent--indisponivelWrapper{
margin: 16px 0;
padding: 0;
@media screen and (max-width: 1024px) {
flex-direction: column;
}
.stretchChildrenWidth{
@media screen and (max-width: 1024px) {
width: 100% !important;
padding: 0;
}
}
}
.flexRowContent--descriptionRow{
@media screen and (max-width: 1024px) {
flex-direction: column;
}
.stretchChildrenWidth {
@media screen and (max-width: 1024px) {
width: 100% !important;
padding: 0;
}
:global(.vtex-store-components-3-x-productImageTag--descriptionImg--main){
object-fit: unset !important;
max-height: 994px !important;
margin-bottom: 16px;
}
}
}
.flexRow--message-availability{
:global(.vtex-store-components-3-x-title){
font-size: 0;
margin: 0;
&::before {
content: "Produto indisponivel";
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray17;
}
}
:global(.vtex-store-components-3-x-subscribeLabel){
font-size: 0;
&::before {
content: "Deseja saber quando estiver disponível?";
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray17;
}
}
:global(.vtex-store-components-3-x-content){
display: grid;
grid-auto-flow: column;
max-width: 400px;
column-gap: 8px;
@media screen and (max-width: 1024px) {
width: 100%;
}
:last-child{
grid-area: 2/1/2/3;
}
:global(.vtex-store-components-3-x-inputEmail){
margin: 0;
}
:global(.vtex-store-components-3-x-inputName){
margin: 0;
margin-bottom: 15px;
}
}
:global(.vtex-button){
width: 100%;
background-color: $color-black2;
font-size: 0;
height: 49px;
border-radius: 0;
align-items: center;
justify-content: center;
display: flex;
&::before {
content: "Avise-me";
color: $color-white;
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
text-transform: uppercase;
}
}
:global(.vtex-button__label){
display: none;
}
:global(.vtex-input-prefix__group){
border-radius: 0;
border-color: $color-gray12;
}
}

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

@ -25,12 +25,6 @@
.image--prateleiraImg{
min-height: 314px;
@media screen and (min-width: 1920px) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 1280px) {
min-height: 285px;
}

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

@ -1,6 +1,11 @@
.sliderLayoutContainer--prateleiraSlider{
width: 90.63%;
margin: 0 auto 101px auto;
@media screen and (max-width: 1024px) {
width: 100% !important;
padding: 0 63px;
}
}
.sliderArrows--prateleiraSlider{
margin: 0;
@ -8,9 +13,17 @@
}
.sliderRightArrow--prateleiraSlider{
right: -2.53%;
@media screen and (max-width: 1024px) {
right: 3.91%;
}
}
.sliderLeftArrow--prateleiraSlider{
left: -2.53%;
@media screen and (max-width: 1024px) {
left: 3.91%;
}
}
.paginationDotsContainer--prateleiraSlider{
bottom: -32px;

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

@ -4,11 +4,16 @@
.productImageTag--ImgsMain--main{
object-fit: unset !important;
@media screen and (max-width: 1024px) {
max-height: 994px !important;
}
}
.productImagesThumb{
width: 13.605% !important;
margin: 0 16px 0 0;
max-width: 90px;
}
.productNameContainer--quickview{
@ -21,8 +26,9 @@
line-height: 34px;
color: $color-gray14;
@media screen and (min-width: 1920px) {
@media screen and (max-width: 1024px) {
justify-content: flex-start;
padding-top: 32px;
}
}
@ -36,6 +42,10 @@
font-size: 14px;
line-height: 19px;
color: $color-gray13;
@media screen and (max-width: 1024px) {
justify-content: flex-start;
}
}
.skuSelectorContainer--inverseOrder{
@ -148,6 +158,22 @@
padding-top: 16.1px;
text-decoration: underline;
@media screen and (max-width: 600px) {
left: 55px;
}
@media screen and (max-width: 490px) {
left: -85px;
top: 50px;
}
@media screen and (max-width: 450px) {
left: -112px;
top: 50px;
}
@media screen and (max-width: 375px) {
left: -78px;
top: 50px;
}
:last-child{
color: black;
}
@ -169,6 +195,16 @@
border: none;
border-radius: 0;
@media screen and (max-width: 490px) {
right: 31%;
}
@media screen and (max-width: 425px) {
right: 24%;
}
@media screen and (max-width: 375px) {
right: 40px;
}
::before{
content: "Ok";
font-weight: 600;
@ -263,3 +299,9 @@
font-size: 16px;
line-height: 22px;
}
.productImagesGallerySlide--ImgsMain{
@media screen and (max-width: 1024px) {
width: 100% !important;
}
}

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

@ -2,11 +2,25 @@
width: 94.44%;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 100%;
padding: 0 40px;
}
.listContainer--descriptionButtonWrapper{
justify-content: space-between;
border-bottom: 1px solid $color-gray6;
padding: 0 64px;
margin-bottom: 32px;
max-width: 94rem;
margin: 0 auto 32px auto;
@media screen and (max-width: 1024px) {
padding: 16px 0 0 0;
flex-direction: column;
margin-bottom: 16px;
border-top: 1px solid $color-gray6;
}
.listItem--descriptionButton{
margin: 0;
@ -18,9 +32,18 @@
font-size: 18px;
line-height: 38px;
}
:global(.vtex-button):hover{
background-color: $color-white;
}
:global(.vtex-button__label){
padding: 0 16px !important;
text-transform: capitalize;
@media screen and (max-width: 1024px) {
margin-bottom: 16px;
padding: 0 !important;
}
}
}
.listItemActive--descriptionButton{
@ -35,10 +58,18 @@
font-weight: 400;
font-size: 18px;
line-height: 38px;
@media screen and (max-width: 1024px) {
border: none;
}
}
:global(.vtex-button__label){
padding: 0 16px !important;
text-transform: capitalize;
@media screen and (max-width: 1024px) {
padding: 0 !important;
}
}
}
}

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

@ -20,6 +20,7 @@ $color-gray13: rgba(146, 146, 146, 0.48);
$color-gray14: #575757;
$color-gray15: #929292;
$color-gray16: #afafaf;
$color-gray17: #868686;
$color-blue: #4267b2;