diff --git a/assets/fonts/OpenSans-Bold.ttf b/assets/fonts/OpenSans-Bold.ttf new file mode 100644 index 0000000..a1398b3 Binary files /dev/null and b/assets/fonts/OpenSans-Bold.ttf differ diff --git a/assets/fonts/OpenSans-ExtraBold.ttf b/assets/fonts/OpenSans-ExtraBold.ttf new file mode 100644 index 0000000..08d7185 Binary files /dev/null and b/assets/fonts/OpenSans-ExtraBold.ttf differ diff --git a/assets/fonts/OpenSans-Light.ttf b/assets/fonts/OpenSans-Light.ttf new file mode 100644 index 0000000..d9a9e27 Binary files /dev/null and b/assets/fonts/OpenSans-Light.ttf differ diff --git a/assets/fonts/OpenSans-Medium.ttf b/assets/fonts/OpenSans-Medium.ttf new file mode 100644 index 0000000..ba6db9b Binary files /dev/null and b/assets/fonts/OpenSans-Medium.ttf differ diff --git a/assets/fonts/OpenSans-Regular.ttf b/assets/fonts/OpenSans-Regular.ttf new file mode 100644 index 0000000..1dc226d Binary files /dev/null and b/assets/fonts/OpenSans-Regular.ttf differ diff --git a/assets/fonts/OpenSans-SemiBold.ttf b/assets/fonts/OpenSans-SemiBold.ttf new file mode 100644 index 0000000..66acb20 Binary files /dev/null and b/assets/fonts/OpenSans-SemiBold.ttf differ diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index ee81246..f00f846 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -9,7 +9,8 @@ "props": { "addToCartFeedback": "customEvent", "customPixelEventId": "add-to-cart-button", - "text": "Adicionar à sacola" + "text": "Adicionar à sacola", + "blockClass": "addSacola" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 1838c5d..655ac11 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,14 +3,15 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - // "flex-layout.row#description", - "tab-layout#AA323", + "tab-layout#descriptionLayout", // "flex-layout.row#specifications-title", // "product-specification-group#table", - "shelf.relatedProducts", + // "shelf.relatedProducts", + "list-context.product-list#demo1", "product-questions-and-answers" ] }, + "html#breadcrumb": { "props": { "tag": "section", @@ -27,12 +28,72 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] + + "product-summary.shelf#demo1": { + "children": [ + "product-summary-name", + "product-summary-description", + "product-summary-image", + "product-summary-price", + "product-summary-sku-selector", + "product-summary-buy-button" + ] }, + + "slider-layout#demo-products": { + "props": { + "itemsPerPage": { + "desktop": 3, + "tablet": 1, + "phone": 1 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } + // "children": ["rich-text#1AA", "rich-text#2AA", "rich-text#3AA"] + }, + + // "rich-text#1AA": { + // "props": { + // "text": "ADADADAD" + // } + // }, + // "rich-text#2AA": { + // "props": { + // "text": "FGFGFGFG" + // } + // }, + // "rich-text#3AA": { + // "props": { + // "text": "GHGHGHGHHGH" + // } + // }, + + "list-context.product-list#demo1": { + "blocks": ["product-summary.shelf#demo1"], + "children": ["slider-layout#demo-products"] + }, + + "flex-layout.col#description": { + "props": { + "preventVerticalStretch": true + }, + "children": ["product-description#1", "product-description#2"] + }, + + "product-description#1": { + "props": { + "blockClass": "descriptioncontent1" + } + }, + "product-description#2": { + "props": { + "blockClass": "descriptioncontent2", + "showTitle": false + } + }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -58,22 +119,10 @@ }, "flex-layout.row#descriptionRow": { "props": { - // "colGap": 7, - // "rowGap": 7, - // "marginTop": 4, - // "marginBottom": 7, - // "paddingTop": 7, - // "paddingBottom": 7, - "blockClass": "descriptionRow" + "blockClass": "descriptionRow", + "colGap": 7 }, - "children": ["image#example111", "flex-layout.row#description"] - }, - - "image#example111": { - "props": { - "src": "https://storecomponents.vteximg.com.br/arquivos/box.png", - "maxHeight": 100 - } + "children": ["product-images#descriptionImg", "flex-layout.col#description"] }, "stack-layout": { @@ -102,47 +151,86 @@ } }, - "tab-layout#AA323": { + "tab-layout#descriptionLayout": { + "props": { + "blockClass": "descriptionLayout" + }, "children": [ - "tab-list#AA555", - "tab-content#AA555" + "tab-list#descriptionButtonWrapper", + "tab-content#descriptionContentWrapper" ] }, - "tab-list#AA555": { + "tab-list#descriptionButtonWrapper": { + "props": { + "blockClass": "descriptionButtonWrapper" + }, "children": [ "tab-list.item#1", - "tab-list.item#2" + "tab-list.item#2", + "tab-list.item#3", + "tab-list.item#4", + "tab-list.item#5" ] }, - "tab-content#AA555": { + "tab-content#descriptionContentWrapper": { + "props": { + "blockClass": "descriptionContentWrapper" + }, "children": [ "tab-content.item#1", - "tab-content.item#2" + "tab-content.item#2", + "tab-content.item#3", + "tab-content.item#4", + "tab-content.item#5" ] }, "tab-list.item#1": { "props": { - "tabId": "majorAppliances", - "label": "Major Appliances", + "tabId": "description1", + "label": "Descrição", + "blockClass": "descriptionButton", "defaultActiveTab": true } }, "tab-list.item#2": { "props": { - "tabId": "electronics", - "label": "Electronics" + "tabId": "description2", + "blockClass": "descriptionButton", + "label": "Descrição" + } + }, + "tab-list.item#3": { + "props": { + "tabId": "description3", + "blockClass": "descriptionButton", + "label": "Descrição" + } + }, + "tab-list.item#4": { + "props": { + "tabId": "description4", + "blockClass": "descriptionButton", + "label": "Descrição" + } + }, + "tab-list.item#5": { + "props": { + "tabId": "description5", + "blockClass": "descriptionButton", + "label": "Descrição" } }, "tab-content.item#1": { "children": [ - "rich-text#1" + "flex-layout.row#descriptionRow" ], "props": { - "tabId": "majorAppliances" + "tabId": "description1", + "blockClass": "descriptionContent" } }, "tab-content.item#2": { @@ -150,22 +238,43 @@ "flex-layout.row#descriptionRow" ], "props": { - "tabId": "electronics" + "tabId": "description2", + "blockClass": "descriptionContent" } }, - - "rich-text#1": { + "tab-content.item#3": { + "children": [ + "flex-layout.row#descriptionRow" + ], "props": { - "text": "Texto para Major Appliances", - "textPosition": "CENTER", - "font": "t-heading-3" + "tabId": "description3", + "blockClass": "descriptionContent" } }, - "rich-text#2": { + "tab-content.item#4": { + "children": [ + "flex-layout.row#descriptionRow" + ], "props": { - "text": "Texto para Electronics", - "textPosition": "CENTER", - "font": "t-heading-3" + "tabId": "description4", + "blockClass": "descriptionContent" + } + }, + "tab-content.item#5": { + "children": [ + "flex-layout.row#descriptionRow" + ], + "props": { + "tabId": "description5", + "blockClass": "descriptionContent" + } + }, + "product-images#descriptionImg": { + "props": { + "displayMode": "first-image", + "maxHeight": 632, + "blockClass": "descriptionImg", + "width": "49%" } }, @@ -186,9 +295,9 @@ } }, "flex-layout.row#product-image": { - "children": ["product-images"] + "children": ["product-images#imgsMain"] }, - "product-images": { + "product-images#imgsMain": { "props": { "aspectRatio": { "desktop": "auto", @@ -198,6 +307,7 @@ "showPaginationDots": false, "thumbnailsOrientation": "horizontal", "thumbnailMaxHeight": 90, + "blockClass": "ImgsMain", "maxHeight": 664 } }, diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..b383384 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,31 @@ +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Light.ttf); + font-weight: 300; +} +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Regular.ttf); + font-weight: 400; +} +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-SemiBold.ttf); + font-weight: 600; +} +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Bold.ttf); + font-weight: 700; +} +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-ExtraBold.ttf); + font-weight: 800; +} \ No newline at end of file diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..ee3264d 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -253,84 +253,84 @@ "measure": [30, 34, 20], "styles": { "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "700", "fontSize": "3rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "700", "fontSize": "2.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "700", "fontSize": "1.75rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "1.5rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", "letterSpacing": "0" }, "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "0.875rem", "textTransform": "initial", "letterSpacing": "0" }, "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "0.75rem", "textTransform": "initial", "letterSpacing": "0" }, "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "500", "fontSize": "1rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "500", "fontSize": "0.875rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "500", "fontSize": "1.25rem", "textTransform": "uppercase", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 118ea4d..4721e88 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -20,4 +20,15 @@ .flexRow--buyButton .flexRowContent--buyButton { margin: 0; height: 49px; +} +.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) { + background-color: #292929; + color: #fff; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + border: none; + border-radius: 0; + height: 48px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index bcb877b..92c92b3 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -11,7 +11,7 @@ background: red; } -.productImageTag--main { +.productImageTag--ImgsMain--main { object-fit: unset !important; } @@ -53,6 +53,7 @@ left: 150px; align-items: center; padding-top: 16.1px; + text-decoration: underline; } .shippingContainer :global(.vtex__icon-external-link) { display: none; @@ -64,7 +65,7 @@ position: relative; right: 129px; margin-top: 24px; - background-color: black; + background-color: #292929; font-size: 0; border: none; border-radius: 0; @@ -74,5 +75,25 @@ font-weight: 600; font-size: 14px; line-height: 19px; - color: white; + color: #fff; +} + +.productDescriptionContainer--descriptioncontent1 { + margin-bottom: 16px; +} + +.productDescriptionTitle--descriptioncontent1 { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin-bottom: 8px; +} + +.content--descriptioncontent1, +.content--descriptioncontent2 { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..8468ccb --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,51 @@ +/* +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--descriptionLayout { + margin: 0 40px; +} +.container--descriptionLayout .listContainer--descriptionButtonWrapper { + justify-content: space-between; + border-bottom: 1px solid #B9B9B9; + padding: 0 64px; + margin-bottom: 32px; +} +.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton { + margin: 0; + padding: 0; +} +.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button) { + color: #bfbfbf; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} +.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) { + padding: 0 16px !important; + text-transform: capitalize; +} +.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton { + margin-top: 2px; +} +.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) { + background-color: #fff; + color: #292929; + border: 0; + border-bottom: 2px solid #292929; + border-radius: 0; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} +.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) { + padding: 0 16px !important; + text-transform: capitalize; +} \ 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 2cd9927..dc5e4b2 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -10,6 +10,18 @@ .flexRowContent--buyButton{ margin: 0; height: 49px; + + :global(.vtex-button){ + background-color: $color-black; + color: $color-white; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + border: none; + border-radius: 0; + height: 48px; + } } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 530375f..9d3e682 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,7 +2,7 @@ background: red; } -.productImageTag--main{ +.productImageTag--ImgsMain--main{ object-fit: unset !important; } @@ -35,7 +35,7 @@ } :global(.vtex-input-prefix__group){ height: 49px; - border: 1px solid #CCCCCC; + border: 1px solid $color-gray7; border-radius: 0; } :global(.vtex-address-form__postalCode-forgottenURL){ @@ -44,6 +44,7 @@ left: 150px; align-items: center; padding-top: 16.1px; + text-decoration: underline; } :global(.vtex__icon-external-link){ @@ -57,7 +58,7 @@ position: relative; right: 129px; margin-top: 24px; - background-color: black; + background-color: $color-black; font-size: 0; border: none; border-radius: 0; @@ -67,7 +68,26 @@ font-weight: 600; font-size: 14px; line-height: 19px; - color: white; + color: $color-white; } } +} + +.productDescriptionContainer--descriptioncontent1{ + margin-bottom: 16px; +} +.productDescriptionTitle--descriptioncontent1{ + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin-bottom: 8px; +} + +.content--descriptioncontent1, +.content--descriptioncontent2{ + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..bb96da3 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,44 @@ +.container--descriptionLayout{ + margin: 0 40px; + + .listContainer--descriptionButtonWrapper{ + justify-content: space-between; + border-bottom: 1px solid $color-gray6; + padding: 0 64px; + margin-bottom: 32px; + + .listItem--descriptionButton{ + margin: 0; + padding: 0; + :global(.vtex-button){ + color: $color-gray8; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + } + :global(.vtex-button__label){ + padding: 0 16px !important; + text-transform: capitalize; + } + } + .listItemActive--descriptionButton{ + margin-top: 2px; + :global(.vtex-button){ + background-color: $color-white; + color: $color-black; + border: 0; + border-bottom: 2px solid $color-black; + border-radius: 0; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + } + :global(.vtex-button__label){ + padding: 0 16px !important; + text-transform: capitalize; + } + } + } +} \ No newline at end of file diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..a8e4e3c 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -7,6 +7,9 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #B9B9B9; +$color-gray7: #CCCCCC; +$color-gray8: #bfbfbf; $color-blue: #4267b2;