diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fb3af3c..13b4dd4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,11 +7,44 @@ "tab-layout#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", - "shelf.relatedProducts", + // "shelf.relatedProducts", + "rich-text#carousel-title", + "list-context.product-list#carousel", "product-questions-and-answers" ] }, + "rich-text#carousel-title": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você também pode gostar:" + } + }, + + "slider-layout#carousel-slider": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + } + } + }, + + "list-context.product-list#carousel": { + "children": ["slider-layout#carousel-slider"], + "blocks": ["product-summary.shelf#carousel-shelf"] + }, + + "product-summary.shelf#carousel-shelf": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-price" + ] + }, + "tab-layout#description": { "children": ["tab-list#description", "tab-content#description"] }, diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..312a924 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,50 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.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; - } +/* +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 */ +.imageNormal { + width: 100vw; + height: 100vw; } .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + padding-bottom: 0; } -.brandName { - font-weight: 600; +.productBrand { + 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; +.installmentContainer { + display: none; } + +.listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; +} + +.sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +.sellingPriceLabel { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..57468ee 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,15 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container { + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + margin-bottom: 32px; +} + +.paragraph { + margin: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..6130f5f 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,31 @@ -.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 */ +.paginationDot { + height: 10px !important; + width: 10px !important; + background: #000000; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - -.sliderTrackContainer { - max-width: 100%; +.paginationDot--isActive { + height: 17px !important; + width: 17px !important; + background: white; + border: 0.5px solid #000000; } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; + display: flex; + align-items: center; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +.slideArrows { + width: 11.2px; + height: 29.6px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 93ac2bd..98a4003 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -344,4 +344,8 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.discountInsideContainer { + display: none; } \ No newline at end of file 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..9876b94 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,41 @@ +.imageNormal { + width: 100vw; + height: 100vw; +} + +.nameContainer { + padding-bottom: 0; +} + +.productBrand { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; +} + +.installmentContainer { + display: none; +} + +.listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; +} + +.sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +.sellingPriceLabel { + display: none; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..d8ac810 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,11 @@ +.container { + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + margin-bottom: 32px; +} + +.paragraph { + margin: 0; +} 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..78f2550 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,22 @@ +.paginationDot { + height: 10px !important; + width: 10px !important; + background: #000000; +} + +.paginationDot--isActive { + height: 17px !important; + width: 17px !important; + background: white; + border: 0.5px solid #000000; +} + +.paginationDotsContainer { + display: flex; + align-items: center; +} + +.slideArrows { + width: 11.2px; + height: 29.6px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 2f1bafb..5be2b0e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -347,3 +347,7 @@ line-height: 22px; color: #929292; } + +.discountInsideContainer { + display: none; +}