diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 3a8b1fd..35e3b16 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,7 +4,6 @@ "html#breadcrumb", "condition-layout.product#availability", "tab-layout#description", - // "shelf.relatedProducts", "flex-layout.row#shelf", "product-questions-and-answers" ] @@ -139,8 +138,8 @@ "props": { "itemsPerPage": { "desktop": 4, - "tablet": 1, - "phone": 1 + "tablet": 3, + "phone": 2 }, "infinite": true, "showNavigationArrows": "desktopOnly", diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..59b76f2 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,87 @@ -.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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"); +/* Grid breakpoints */ .sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; + background-color: white; + height: 630px; } - -.sliderTrackContainer { - max-width: 100%; +.sliderLayoutContainer--carousel .sliderTrackContainer { + margin: 32px 27px 32px 27px; } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +.sliderLayoutContainer--carousel .slide { + width: 100%; + max-width: 314px; + height: 448px; + margin-right: 16px; } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) { + max-width: unset !important; } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) { + padding: 0; } +.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) { + width: 314px; + height: 314px; +} +.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + max-height: 314px !important; +} +.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-nameContainer) { + justify-content: center; + text-align: center; + padding: 16px 0 8px 0; +} +.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-family: "Open Sans", sans-serif; + font-size: 18px; + line-height: 25px; + color: #000000; +} +.sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-listPrice) { + display: block; + font-family: "Open Sans", sans-serif; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; + padding-bottom: 8px; +} +.sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-sellingPrice) { + text-align: center; + font-family: "Open Sans", sans-serif; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} +.sliderLayoutContainer--carousel .sliderLeftArrow, +.sliderLayoutContainer--carousel .sliderRightArrow { + padding: 0; + margin: 0; +} +.sliderLayoutContainer--carousel .paginationDotsContainer { + display: flex; + align-items: center; + margin-bottom: 64px; +} +.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + background-color: black; + border: none; +} +.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot--isActive { + width: 17px !important; + height: 17px !important; + background-color: white; + border: 0.5px solid #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 2ebf3af..2797ed0 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -10,6 +10,7 @@ /* Grid breakpoints */ .container--description { margin: 16px 40px; + height: 702px; } .container--description .listContainer { display: flex; 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..cb9e530 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,91 @@ +.sliderLayoutContainer--carousel { + background-color: white; + height: 630px; + + .sliderTrackContainer { + margin: 32px 27px 32px 27px; + } + + .slide { + width: 100%; + max-width: 314px; + height: 448px; + margin-right: 16px; + + :global(.vtex-product-summary-2-x-container) { + max-width: unset !important; + + :global(.vtex-product-summary-2-x-element) { + padding: 0; + } + + :global(.vtex-product-summary-2-x-imageContainer) { + width: 314px; + height: 314px; + + :global(.vtex-product-summary-2-x-imageNormal) { + max-height: 314px !important; + } + } + } + + :global(.vtex-product-summary-2-x-nameContainer) { + justify-content: center; + text-align: center; + padding: 16px 0 8px 0; + :global(.vtex-product-summary-2-x-productBrand) { + font-family: "Open Sans", sans-serif; + font-size: 18px; + line-height: 25px; + + color: #000000; + } + } + + :global(.vtex-product-price-1-x-listPrice) { + display: block; + font-family: "Open Sans", sans-serif; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; + padding-bottom: 8px; + } + + :global(.vtex-product-price-1-x-sellingPrice) { + text-align: center; + font-family: "Open Sans", sans-serif; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; + } + } + + .sliderLeftArrow, + .sliderRightArrow { + padding: 0; + margin: 0; + } + + .paginationDotsContainer { + display: flex; + align-items: center; + margin-bottom: 64px; + + .paginationDot { + width: 10px; + height: 10px; + background-color: black; + border: none; + } + + .paginationDot--isActive { + width: 17px !important; + height: 17px !important; + background-color: white; + border: 0.5px solid #000000; + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 5078643..c11c02d 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,6 @@ .container--description { margin: 16px 40px; + height: 702px; .listContainer { display: flex;