naianfelix/challenge-vtex-io-naian-felix
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/body #1

Merged
naianfelix merged 10 commits from feature/body into master 2023-02-11 04:42:42 +00:00
Conversation 0 Commits 10 Files Changed 39 +274 -34
13 changed files with 274 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 45c40af2c5 - Show all commits

16
react/placeholder.tsx Normal file
View File

@ -0,0 +1,16 @@
import React, { useEffect } from "react";
const placeholder = () => {
useEffect(() => {
setTimeout(() => {
const selectorInput = document.querySelector(
".vtex-address-form-4-x-input"
);
selectorInput?.setAttribute("placeholder", "Digite seu CEP");
}, 1000);
}, []);
return <></>;
};
export default placeholder;

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

@ -5,11 +5,44 @@
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"flex-layout.row#shelf",
"product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
]
},
"product-summary.shelf#teste": {
"children": [
"product-summary-image#shelf",
"product-summary-name",
"product-list-price#summary",
"product-selling-price#summary"
]
},
"list-context.product-list#teste": {
"blocks": ["product-summary.shelf#teste"],
"children": ["slider-layout#prateleira"]
},
"slider-layout#prateleira": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"blockClass": "carousel"
}
},
"flex-layout.row#shelf": {
"children": ["list-context.product-list#teste"]
},
"html#breadcrumb": {
"props": {
"tag": "section",
@ -78,7 +111,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"width": "51%",
"rowGap": 0
}
},
@ -91,7 +124,8 @@
"desktop": "auto",
"phone": "16:9"
},
"displayThumbnailsArrows": true
"displayThumbnailsArrows": true,
"thumbnailsOrientation": "horizontal"
}
},
"flex-layout.col#right-col": {
@ -101,22 +135,29 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
"product-identifier.product",
"sku-selector",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-box",
"availability-subscriber",
"shipping-simulator",
"share#default"
"flex-layout.row#shipping",
"share#default",
"placeholder"
]
},
"flex-layout.row#shipping": {
"props": {
"blockClass": "shipping-container"
},
"children": ["shipping-simulator"]
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3

4
store/interfaces.json
View File

@ -5,5 +5,9 @@
"html": {
"component": "html",
"composition": "children"
},
"placeholder": {
"component": "placeholder"
}
}

5
styles/css/vtex.adress-form.css
View File

@ -7,7 +7,4 @@
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
/* Grid breakpoints */
.vtex-address-form__postalCode {
padding: 0;
}
/* Grid breakpoints */

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

@ -36,4 +36,13 @@
.flexRow--buy-box .stretchChildrenWidth:nth-child(2n) {
width: 100% !important;
}
:global(.vtex-product-identifier-0-x-product-identifier__label),
:global(.vtex-product-identifier-0-x-product-identifier__separator) {
display: none;
}
:global(.vtex-flex-layout-0-x-flexColChild) {
order: -1;
}

15
styles/css/vtex.login.css Normal file
View File

@ -0,0 +1,15 @@
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
/* Grid breakpoints */
:global(.vtex-address-form__postalCode
.vtex-address-form__postalCode-forgottenURL
a) {
color: #000;
}

16
styles/css/vtex.shelf.css Normal file
View File

@ -0,0 +1,16 @@
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
/* Grid breakpoints */
.relatedProducts {
padding: 0 40px;
}
.relatedProducts .sliderLayoutContainer {
background-color: white;
}

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

@ -17,6 +17,7 @@
line-height: 34px;
color: #575757;
text-align: end;
margin-bottom: 8px;
}
.container .skuSelectorContainer {
display: flex;
@ -28,6 +29,8 @@
border-radius: 50%;
width: 44px;
height: 44px;
margin-right: 16px;
margin-left: 0;
}
.container .skuSelectorContainer .skuSelectorItem.skuSelectorItem--selected {
border: 2px solid #000;
@ -48,6 +51,9 @@
line-height: 19px;
color: #929292;
}
.container .skuSelectorContainer .skuSelectorOptionsList {
margin-left: 0;
}
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorImageValue {
font-style: normal;
font-weight: 400;
@ -100,7 +106,7 @@
background-color: #000;
border: 0;
margin-top: 27px;
right: 9%;
right: 7%;
}
.shippingContainer :global(.vtex-button)::before {
text-align: center;
@ -116,17 +122,60 @@
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
right: 15%;
bottom: 33%;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) #text {
color: #000;
right: 12%;
bottom: 34%;
text-decoration: underline;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
}
.productImageTag {
object-fit: unset !important;
max-width: 664px;
width: 104% !important;
max-height: 664px !important;
margin-bottom: 16px;
}
.figure {
height: 100%;
}
.productImagesThumb {
margin-right: 16px;
width: 90px !important;
height: 90px !important;
}
.carouselGaleryThumbs {
margin: 0;
}
.shippingTable {
border: 0;
margin-top: 16px;
padding: 0;
}
.shippingTable .shippingTableHead {
display: block;
margin-bottom: 15px;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryName,
.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.shippingTable .shippingTableCell {
padding: 0 8px 15px 0;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.newsletter {
background: red;
}
@ -149,10 +198,23 @@
display: flex;
padding: 0;
}
:global(.vtex-address-form__postalCode) .pointer {
position: absolute;
}
:global(.vtex-input-prefix__group) {
height: 50px;
width: 280px;
}
:global(.vtex-product-identifier-0-x-product-identifier__value) {
display: flex;
justify-content: end;
}
:global(.vtex-store-components-3-x-shippingTableRadioBtn) {
display: none;
}
:global(.vtex-store-components-3-x-swiperCaretNext),
:global(.vtex-store-components-3-x-swiperCaretPrev),
:global(.vtex-store-components-3-x-swiper-pagination) {
display: none;
}

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

@ -1,3 +0,0 @@
.vtex-address-form__postalCode {
padding: 0;
}

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

@ -30,3 +30,12 @@
width: 100% !important;
}
}
:global(.vtex-product-identifier-0-x-product-identifier__label),
:global(.vtex-product-identifier-0-x-product-identifier__separator) {
display: none;
}
:global(.vtex-flex-layout-0-x-flexColChild) {
order: -1;
}

5
styles/sass/pages/product/vtex.login.scss Normal file
View File

@ -0,0 +1,5 @@
:global(.vtex-address-form__postalCode
.vtex-address-form__postalCode-forgottenURL
a) {
color: #000;
}

6
styles/sass/pages/product/vtex.shelf.scss Normal file
View File

@ -0,0 +1,6 @@
.relatedProducts {
padding: 0 40px;
.sliderLayoutContainer {
background-color: white;
}
}

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

@ -6,6 +6,7 @@
line-height: 34px;
color: #575757;
text-align: end;
margin-bottom: 8px;
}
.skuSelectorContainer {
display: flex;
@ -17,6 +18,8 @@
border-radius: 50%;
width: 44px;
height: 44px;
margin-right: 16px;
margin-left: 0;
&.skuSelectorItem--selected {
border: 2px solid #000;
@ -40,6 +43,9 @@
}
}
}
.skuSelectorOptionsList {
margin-left: 0;
}
.skuSelectorSubcontainer--cor {
.skuSelectorImageValue {
@ -99,7 +105,7 @@
background-color: #000;
border: 0;
margin-top: 27px;
right: 9%;
right: 7%;
&::before {
text-align: center;
@ -116,18 +122,63 @@
}
:global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
right: 15%;
bottom: 33%;
#text {
color: #000;
text-decoration: underline;
}
right: 12%;
bottom: 34%;
text-decoration: underline;
:global(.vtex__icon-external-link) {
display: none;
}
}
}
.productImageTag {
object-fit: unset !important;
max-width: 664px;
width: 104% !important;
max-height: 664px !important;
margin-bottom: 16px;
}
.figure {
height: 100%;
}
.productImagesThumb {
margin-right: 16px;
width: 90px !important;
height: 90px !important;
}
.carouselGaleryThumbs {
margin: 0;
}
.shippingTable {
border: 0;
margin-top: 16px;
padding: 0;
.shippingTableHead {
display: block;
margin-bottom: 15px;
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
}
.shippingTableCell {
padding: 0 8px 15px 0;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
}
.newsletter {
background: red;
}
@ -149,12 +200,24 @@
:global(.vtex-address-form__postalCode) {
display: flex;
padding: 0;
.pointer {
position: absolute;
}
}
:global(.vtex-input-prefix__group) {
height: 50px;
width: 280px;
}
:global(.vtex-product-identifier-0-x-product-identifier__value) {
display: flex;
justify-content: end;
}
:global(.vtex-store-components-3-x-shippingTableRadioBtn) {
display: none;
}
:global(.vtex-store-components-3-x-swiperCaretNext),
:global(.vtex-store-components-3-x-swiperCaretPrev),
:global(.vtex-store-components-3-x-swiper-pagination) {
display: none;
}