Rafael_Sampaio_de_Oliveira/challenge-vtex-io-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona css breadcrumb 1440px

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2023-01-26 16:53:58 -03:00
parent 707fa7ad3f
commit 21ab5ef045
14 changed files with 398 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
manifest.json
View File

@ -15,6 +15,7 @@
"postreleasy": "vtex publish --verbose"
},
"dependencies": {
"agenciamagma.store-theme": "5.x",
"vtex.store": "2.x",
"vtex.store-header": "2.x",
"vtex.product-summary": "2.x",

2
store/blocks/minicart.jsonc
View File

@ -4,7 +4,7 @@
"blockClass": "addToCart",
"addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button",
"width": "73%",
"width": "75%",
"text": "ADICIONAR À SACOLA"
}
},

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

@ -2,7 +2,7 @@
"store.product": {
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#product-container",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
@ -32,6 +32,13 @@
},
"children": ["product-description"]
},
"flex-layout.row#product-container": {
"props": {
"blockClass": "product-container"
},
"children": ["condition-layout.product#availability"]
},
"condition-layout.product#availability": {
"props": {
"conditions": [
@ -109,7 +116,8 @@
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#selling-price",
"product-installments",
// "product-installments",
"rich-text#product-installments",
"sku-selector",
"product-gifts",
"flex-layout.row#buy-button",
@ -133,10 +141,14 @@
}
},
"product-installments": {
// "product-installments": {
// "children": ["rich-text#product-installments"]
// },
"rich-text#product-installments": {
"props": {
"markers": ["parcelas", "valor"],
"message": "36 x de R$ 2,17 sem juros"
"text": "**36 x** de **R$ 2,17** sem juros",
"blockClass": "product-installments"
}
},
@ -160,7 +172,7 @@
"blockClass": "addToCartQuantity",
"showLabel": false,
"size": "large",
"width": "24%"
"width": "25%"
}
},

8
styles/css/agenciamagma.store-theme.css
View File

@ -7,10 +7,8 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.html {
background-color: red;
}
.html--pdp-breadcrumb {
background-color: green;
display: flex;
justify-content: center;
padding: 0 40px;
}

12
styles/css/vtex-rich-text.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 */
.paragraph--product-installments {
margin: 0;
}

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

@ -1,3 +1,18 @@
@charset "UTF-8";
/*
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 */
.container {
width: 100%;
max-width: 1920px;
}
.termArrow,
.term {
display: none;

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

@ -7,6 +7,10 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.flexRowContent {
padding: 0;
}
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
@ -113,3 +117,7 @@
border: none;
border-radius: 0;
}
.flexRowContent--product-container {
padding: 0 40px;
}

3
styles/css/vtex.rich-text.css
View File

@ -7,3 +7,6 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.paragraph--product-installments {
margin: 0;
}

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -73,7 +74,7 @@
.skuSelectorSubcontainer--cor .skuSelectorName::after {
display: block;
content: "OUTRAS CORES:";
font-size: 16px;
font-size: 14px;
}
.skuSelectorSubcontainer--tamanho {
@ -85,7 +86,7 @@
.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
display: block;
content: "OUTROS TAMANHOS:";
font-size: 16px;
font-size: 14px;
}
.productImagesThumb .figure .thumbImg {
@ -93,3 +94,135 @@
height: 90px;
border-radius: 8px;
}
.shippingContainer {
display: flex;
position: relative;
max-width: 664px;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
padding: 0;
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input__label)::after {
font-size: 14px;
display: block;
content: "CALCULAR FRETE:";
}
.shippingContainer :global(.vtex-input-prefix__group) {
border: 1px solid #cccccc;
border-radius: 0;
height: 49px;
}
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;
position: absolute;
left: 33.4%;
top: 32%;
background: #292929;
border: none;
border-radius: 0;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button__label)::after {
font-size: 14px;
font-weight: 600;
color: #fff;
display: block;
content: "OK";
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
font-size: 0;
visibility: hidden;
position: absolute;
left: 43%;
top: 36%;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL)::after {
visibility: visible;
content: "Não sei meu CEP";
font-size: 12px;
color: #292929;
text-decoration-line: underline;
}
.shippingTable {
border: none;
padding: 0;
}
.shippingTableHead {
display: flex;
}
.shippingTableRow {
position: relative;
margin-bottom: 15px;
}
.shippingTableHeadDeliveryName {
font-size: 0;
}
.shippingTableHeadDeliveryName::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Entrega";
text-transform: uppercase;
display: block;
color: #292929;
}
.shippingTableHeadDeliveryEstimate {
font-size: 0;
position: absolute;
top: 5%;
left: 242%;
}
.shippingTableHeadDeliveryEstimate::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Prazo";
text-transform: uppercase;
display: block;
color: #292929;
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
position: absolute;
top: 5%;
left: 138%;
}
.shippingTableHeadDeliveryPrice::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Frete";
text-transform: uppercase;
display: block;
color: #292929;
}
.shippingTableRadioBtn {
display: none;
}

11
styles/sass/pages/product/agenciamagma.store-theme.scss
View File

@ -1,8 +1,9 @@
.html {
background-color: red;
}
// .html {
// background-color: red;
// }
.html--pdp-breadcrumb {
background-color: green;
display: flex;
justify-content: center;
padding: 0 40px;
}

44
styles/sass/pages/product/vtex.breadcrumb.scss Normal file
View File

@ -0,0 +1,44 @@
.container {
width: 100%;
max-width: 1920px;
}
.termArrow,
.term {
display: none;
}
.homeLink {
visibility: hidden;
position: relative;
margin-right: 15px;
}
.homeLink::after {
visibility: visible;
display: block;
content: "Home";
font-size: 16px;
position: absolute;
top: 20%;
}
.link--1 {
font-size: 0;
}
.link--1::after {
display: block;
content: "Sapatos";
font-size: 16px;
}
.link--2 {
font-size: 0;
}
.link--2::after {
display: block;
content: "Sandálias";
font-size: 16px;
}

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

@ -1,3 +1,7 @@
.flexRowContent {
padding: 0;
}
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
@ -106,3 +110,7 @@
border: none;
border-radius: 0;
}
.flexRowContent--product-container {
padding: 0 40px;
}

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

@ -0,0 +1,3 @@
.paragraph--product-installments {
margin: 0;
}

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

@ -2,6 +2,11 @@
background: red;
}
// .container {
// display: flex;
// justify-content: center;
// }
.productBrand--quickview {
display: flex;
justify-content: end;
@ -64,7 +69,7 @@
&::after {
display: block;
content: "OUTRAS CORES:";
font-size: 16px;
font-size: 14px;
}
}
}
@ -78,7 +83,7 @@
&::after {
display: block;
content: "OUTROS TAMANHOS:";
font-size: 16px;
font-size: 14px;
}
}
}
@ -92,3 +97,135 @@
}
}
}
.shippingContainer {
display: flex;
position: relative;
max-width: 664px;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
padding: 0;
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input__label)::after {
font-size: 14px;
display: block;
content: "CALCULAR FRETE:";
}
.shippingContainer :global(.vtex-input-prefix__group) {
border: 1px solid $color-gray6;
border-radius: 0;
height: 49px;
}
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;
position: absolute;
left: 33.4%;
top: 32%;
background: $color-black;
border: none;
border-radius: 0;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button__label)::after {
font-size: 14px;
font-weight: 600;
color: $color-white;
display: block;
content: "OK";
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
font-size: 0;
visibility: hidden;
position: absolute;
left: 43%;
top: 36%;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL)::after {
visibility: visible;
content: "Não sei meu CEP";
font-size: 12px;
color: $color-black;
text-decoration-line: underline;
}
.shippingTable {
border: none;
padding: 0;
}
.shippingTableHead {
display: flex;
}
.shippingTableRow {
position: relative;
margin-bottom: 15px;
}
.shippingTableHeadDeliveryName {
font-size: 0;
}
.shippingTableHeadDeliveryName::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Entrega";
text-transform: uppercase;
display: block;
color: $color-black;
}
.shippingTableHeadDeliveryEstimate {
font-size: 0;
position: absolute;
top: 5%;
left: 242%;
}
.shippingTableHeadDeliveryEstimate::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Prazo";
text-transform: uppercase;
display: block;
color: $color-black;
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
position: absolute;
top: 5%;
left: 138%;
}
.shippingTableHeadDeliveryPrice::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Frete";
text-transform: uppercase;
display: block;
color: $color-black;
}
.shippingTableRadioBtn {
display: none;
}