diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 48ed5be..4b5f433 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,7 +1,3 @@
-/* [class*="html--product-images"] {
- background-color: red;
-} */
-
[class*="html--pix-price"] {
display: flex;
align-items: flex-end;
@@ -9,3 +5,8 @@
margin-top: 8px;
margin-bottom: 16px;
}
+
+[data-testid="vtex-product-summary"] {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index cef479d..196d1ca 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -4,10 +4,8 @@
"html#breadcrumb",
"condition-layout.product#availability",
"html#tab-layout",
- "flex-layout.row#specifications-title",
- "product-specification-group#table",
- "shelf.relatedProducts",
- "product-questions-and-answers"
+ "html#shelf-container",
+ "newsletter"
]
},
"html#breadcrumb": {
@@ -122,15 +120,6 @@
"children": ["product-images", "product-description"]
},
- "flex-layout.row#specifications-title": {
- "children": ["rich-text#specifications"]
- },
- "rich-text#specifications": {
- "props": {
- "text": "##### Product Specifications"
- }
- },
-
"condition-layout.product#availability": {
"props": {
"conditions": [
@@ -266,7 +255,7 @@
"flex-layout.col#right-col-availability"
]
},
-
+
"flex-layout.col#right-col-availability": {
"props": {
"width": "50%",
@@ -297,5 +286,47 @@
"Pinterest": true
}
}
+ },
+
+ "html#shelf-container": {
+ "props": {
+ "blockClass": "shelf-container"
+ },
+ "children": ["rich-text#see-also", "list-context.product-list"]
+ },
+
+ "rich-text#see-also": {
+ "props": {
+ "text": "#### Você também pode gostar:",
+ "blockClass": "see-also"
+ }
+ },
+
+ "list-context.product-list": {
+ "blocks": ["product-summary.shelf"],
+ "children": ["html#slider"]
+ },
+
+ "html#slider": {
+ "props": {
+ "testId": "product-summary-list"
+ },
+ "children": ["slider-layout#related-products"]
+ },
+
+ "slider-layout#related-products": {
+ "props": {
+ "itemsPerPage": {
+ "desktop": 4,
+ "tablet": 3,
+ "phone": 2
+ },
+ "infinite": true,
+ "showNavigationArrows": "always",
+ "blockClass": "carousel"
+ // "fullWidth": false
+ }
+ // ,
+ // "children": ["rich-text#1", "rich-text#2", "rich-text#3"]
}
}
diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc
index afabee3..1910c85 100644
--- a/store/blocks/product-summary/product-summary.jsonc
+++ b/store/blocks/product-summary/product-summary.jsonc
@@ -1,16 +1,20 @@
{
"product-summary.shelf": {
+ "children": ["html#shelf"]
+ },
+
+ "html#shelf": {
+ "props": {
+ "testId": "vtex-product-summary"
+ },
"children": [
- "stack-layout#prodsum",
+ "product-summary-image#shelf",
"product-summary-name",
- "flex-layout.col#productRating",
- "product-summary-space",
"product-list-price#summary",
- "flex-layout.row#selling-price-savings",
- "product-installments#summary",
- "add-to-cart-button"
+ "product-selling-price#summary"
]
},
+
"flex-layout.col#productRating": {
"props": {
"blockClass": "productRating"
@@ -18,19 +22,11 @@
"children": ["product-rating-inline"]
},
- "stack-layout#prodsum": {
- "children": [
- "product-summary-image#shelf",
- "vtex.product-highlights@2.x:product-highlights#collection",
- "modal-trigger#quickview" // Check quickview.jsonc
- ]
- },
-
"product-summary-image#shelf": {
"props": {
"showBadge": false,
"aspectRatio": "1:1",
- "maxHeight": 300
+ "maxHeight": 1000
}
},
@@ -54,21 +50,11 @@
"product-list-price#summary": {
"props": {
- "blockClass": "summary"
+ "blockClass": "summary",
+ "message": "de {listPriceValue} por"
}
},
- "flex-layout.row#selling-price-savings": {
- "props": {
- "colGap": 2,
- "preserveLayoutOnMobile": true,
- "preventHorizontalStretch": true,
- "marginBottom": 4
- },
- "children": [
- "product-selling-price#summary",
- "product-price-savings#summary"
- ]
- },
+
"product-installments#summary": {
"props": {
"blockClass": "summary"
@@ -81,9 +67,7 @@
},
"product-price-savings#summary": {
"props": {
- "markers": [
- "discount"
- ],
+ "markers": ["discount"],
"blockClass": "summary"
}
}
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index f5ca2e0..ac2cfe2 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -30,4 +30,33 @@
font-weight: 300;
font-size: 13px;
color: #929292;
+}
+
+/* ----- SHELF ----- */
+.listPrice--summary {
+ font-size: 14px;
+ line-height: 19px;
+ text-decoration-line: line-through;
+ color: #bababa;
+}
+@media only screen and (max-width: 1024px) {
+ .listPrice--summary {
+ font-size: 12px;
+ line-height: 16px;
+ }
+}
+
+.sellingPrice--summary {
+ padding-top: 8px;
+}
+.sellingPrice--summary .sellingPriceValue--summary {
+ font-size: 24px;
+ line-height: 33px;
+ color: #000000;
+}
+@media only screen and (max-width: 1024px) {
+ .sellingPrice--summary .sellingPriceValue--summary {
+ font-size: 18px;
+ line-height: 25px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-summar.css b/styles/css/vtex.product-summar.css
new file mode 100644
index 0000000..1fe7011
--- /dev/null
+++ b/styles/css/vtex.product-summar.css
@@ -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 */
+.nameContainer {
+ background-color: pink;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 0a6e420..6c48321 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -1,42 +1,56 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
- border-radius: 50%;
+/*
+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 {
+ margin: 0;
+ border-radius: 0;
+ max-width: 1000px !important;
}
-
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
- opacity: 0;
- transition: opacity 200ms ease-in-out;
+.container .element {
+ padding: 0 8px;
}
-
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
- opacity: 1;
-}
-
-@media screen and (max-width: 40em) {
- .container :global(.vtex-modal-layout-0-x-triggerContainer) {
- display: none;
+@media only screen and (max-width: 1024px) {
+ .container .element {
+ padding: 0 6px;
}
}
-
-.nameContainer {
- justify-content: start;
- padding-top: 1rem;
- padding-bottom: 1rem;
+@media only screen and (max-width: 639px) {
+ .container .element {
+ padding: 0 4px;
+ }
}
-
-.brandName {
- font-weight: 600;
+.container .element .imageContainer {
+ width: 100%;
+}
+.container .element .imageContainer .image {
+ object-fit: cover !important;
+}
+.container .element .nameContainer {
+ padding: 16px 16px 8px;
+}
+@media only screen and (max-width: 1024px) {
+ .container .element .nameContainer {
+ padding: 16px 8px 8px;
+ }
+}
+.container .element .nameContainer .productBrand {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
font-size: 18px;
- color: #2E2E2E;
-}
-
-.container {
- text-align: start;
-}
-
-.imageContainer {
+ line-height: 25px;
text-align: center;
+ color: #000000;
}
-
-.image {
- border-radius: 0.25rem;
-}
+@media only screen and (max-width: 1024px) {
+ .container .element .nameContainer .productBrand {
+ font-size: 14px;
+ line-height: 19px;
+ }
+}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 34c4328..8347a37 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -6,4 +6,26 @@
1800px + : Big desktop
*/
/* Media Query M3 */
-/* Grid breakpoints */
\ No newline at end of file
+/* Grid breakpoints */
+.container--see-also {
+ justify-content: center;
+}
+.container--see-also .headingLevel4 {
+ margin: 16px 0 32px;
+ font-size: 24px;
+ line-height: 38px;
+ color: #575757;
+}
+@media only screen and (max-width: 1024px) {
+ .container--see-also .headingLevel4 {
+ margin-bottom: 24px;
+ }
+}
+@media only screen and (max-width: 639px) {
+ .container--see-also .headingLevel4 {
+ margin-bottom: 16px;
+ padding: 0 40px;
+ text-align: center;
+ font-size: 20px;
+ }
+}
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 55f431f..b056f1a 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -1,31 +1,85 @@
-.sliderLayoutContainer {
- justify-content: center;
-}
-
+/*
+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 */
.sliderLayoutContainer--carousel {
- background-color: #F0F0F0;
- min-height: 450px;
+ padding: 0 59.2px 113px;
}
-
-.sliderTrackContainer {
- max-width: 100%;
+@media only screen and (min-width: 1920px) {
+ .sliderLayoutContainer--carousel {
+ padding: 0 379.2px 113px;
+ }
}
-
-.paginationDotsContainer {
- margin-top: .5rem;
- margin-bottom: .5rem;
+@media only screen and (max-width: 1024px) {
+ .sliderLayoutContainer--carousel {
+ padding: 0 57.2px 105px;
+ }
}
-
-.layoutContainer--shelf {
- margin-top: 20px;
- margin-bottom: 20px;
- max-width: 96rem;
- min-height: 550px;
+@media only screen and (max-width: 639px) {
+ .sliderLayoutContainer--carousel {
+ padding: 0 55.2px 65px;
+ }
}
-
-.slide--shelf {
- margin-bottom: 25px;
- padding-left: .5rem;
- padding-right: .5rem;
- min-height: 550px;
+.sliderLayoutContainer--carousel .sliderArrows {
+ padding: 0;
+ margin: 0;
}
+.sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow {
+ margin-left: 40px;
+}
+@media only screen and (min-width: 1920px) {
+ .sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow {
+ margin-left: 360px;
+ }
+}
+.sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow::before {
+ content: "";
+ width: 11.2px;
+ height: 29.6px;
+ background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-andreamm.svg");
+}
+.sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow {
+ margin-right: 40px;
+}
+@media only screen and (min-width: 1920px) {
+ .sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow {
+ margin-right: 360px;
+ }
+}
+.sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow::after {
+ content: "";
+ width: 11.2px;
+ height: 29.6px;
+ background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-andreamm.svg");
+}
+.sliderLayoutContainer--carousel .sliderArrows .caretIcon {
+ display: none;
+}
+.sliderLayoutContainer--carousel .paginationDotsContainer {
+ bottom: 64px;
+ gap: 12px;
+ align-items: center;
+}
+@media only screen and (max-width: 639px) {
+ .sliderLayoutContainer--carousel .paginationDotsContainer {
+ bottom: 32px;
+ }
+}
+.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot {
+ width: 10px;
+ height: 10px;
+ margin: 0;
+ padding: 0;
+ background: #000000;
+}
+.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot--isActive {
+ width: 17px !important;
+ height: 17px !important;
+ border: 0.5px solid #000000;
+ background: #ffffff;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 0e9679d..7617ab3 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -15,14 +15,6 @@
width: 100% !important;
}
}
-
- // @include mq(md, max)
- // @media only screen and (max-width: 639px) {
- // :global(.vtex-store-components-3-x-productImagesContainer--carousel) {
- // background-color: blue;
- // margin-bottom: 32px;
- // }
- // }
}
/* ----- RIGHT-COL ----- */
diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss
index 4800500..44ba42d 100644
--- a/styles/sass/pages/product/vtex.product-price.scss
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -26,3 +26,40 @@
font-size: 13px;
color: #929292;
}
+
+/* ----- SHELF ----- */
+.listPrice--summary {
+ // background-color: red;
+ // font-family: "Open Sans";
+ // font-style: normal;
+ // font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ // text-align: center;
+ text-decoration-line: line-through;
+ color: #bababa;
+
+ @include mq(lg, max) {
+ font-size: 12px;
+ line-height: 16px;
+ }
+}
+
+.sellingPrice--summary {
+ padding-top: 8px;
+ // background-color: white;
+
+ .sellingPriceValue--summary {
+ // font-family: "Open Sans";
+ // font-style: normal;
+ // font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ color: #000000;
+
+ @include mq(lg, max) {
+ font-size: 18px;
+ line-height: 25px;
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
new file mode 100644
index 0000000..b0ea4b4
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -0,0 +1,54 @@
+.container {
+ // background-color: green;
+ margin: 0;
+ border-radius: 0;
+
+ max-width: 1000px !important;
+
+ .element {
+ padding: 0 8px;
+
+ @include mq(lg, max) {
+ padding: 0 6px;
+ }
+
+ @include mq(md, max) {
+ padding: 0 4px;
+ }
+
+ .imageContainer {
+ // background: #ededed;
+ // background-color: yellow;
+ width: 100%;
+
+ .image {
+ // background: #ededed;
+ object-fit: cover !important;
+ // background-color: red;
+ }
+ }
+
+ .nameContainer {
+ padding: 16px 16px 8px;
+
+ @include mq(lg, max) {
+ padding: 16px 8px 8px;
+ }
+
+ .productBrand {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ text-align: center;
+ color: #000000;
+
+ @include mq(lg, max) {
+ font-size: 14px;
+ line-height: 19px;
+ }
+ }
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index e69de29..8163d04 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -0,0 +1,23 @@
+.container--see-also {
+ justify-content: center;
+
+ .headingLevel4 {
+ margin: 16px 0 32px;
+ // font-family: "Open Sans";
+ // font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ color: #575757;
+
+ @include mq(lg, max) {
+ margin-bottom: 24px;
+ }
+
+ @include mq(md, max) {
+ margin-bottom: 16px;
+ padding: 0 40px;
+ text-align: center;
+ font-size: 20px;
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
new file mode 100644
index 0000000..75700d5
--- /dev/null
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -0,0 +1,82 @@
+.sliderLayoutContainer--carousel {
+ // background-color: aqua;
+ padding: 0 59.2px 113px;
+
+ @include mq(xl, min) {
+ padding: 0 379.2px 113px;
+ }
+
+ @include mq(lg, max) {
+ padding: 0 57.2px 105px;
+ }
+
+ @include mq(md, max) {
+ padding: 0 55.2px 65px;
+ }
+
+ .sliderArrows {
+ // background-color: blue !important;
+ padding: 0;
+ margin: 0;
+
+ &.sliderLeftArrow {
+ margin-left: 40px;
+
+ @include mq(xl, min) {
+ margin-left: 360px;
+ }
+
+ &::before {
+ content: "";
+ width: 11.2px;
+ height: 29.6px;
+ background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-andreamm.svg");
+ }
+ }
+
+ &.sliderRightArrow {
+ margin-right: 40px;
+
+ @include mq(xl, min) {
+ margin-right: 360px;
+ }
+
+ &::after {
+ content: "";
+ width: 11.2px;
+ height: 29.6px;
+ background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-andreamm.svg");
+ }
+ }
+
+ .caretIcon {
+ display: none;
+ }
+ }
+
+ .paginationDotsContainer {
+ // background-color: lightgreen;
+ bottom: 64px;
+ gap: 12px;
+ align-items: center;
+
+ @include mq(md, max) {
+ bottom: 32px;
+ }
+
+ .paginationDot {
+ width: 10px;
+ height: 10px;
+ margin: 0;
+ padding: 0;
+ background: #000000;
+
+ &--isActive {
+ width: 17px !important;
+ height: 17px !important;
+ border: 0.5px solid #000000;
+ background: #ffffff;
+ }
+ }
+ }
+}