Feat(Pdp): Cria layout de imagens de produto e elementos para efetuar a compra

This commit is contained in:
Rhayllon Daudt 2023-02-08 16:16:42 -03:00
parent c9a06914fb
commit 7ab2ffd812
14 changed files with 408 additions and 116 deletions

View File

@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose" "postreleasy": "vtex publish --verbose"
}, },
"dependencies": { "dependencies": {
"agenciamagma.store-theme": "5.x",
"vtex.store": "2.x", "vtex.store": "2.x",
"vtex.store-header": "2.x", "vtex.store-header": "2.x",
"vtex.product-summary": "2.x", "vtex.product-summary": "2.x",
@ -34,10 +33,10 @@
"vtex.my-account": "1.x", "vtex.my-account": "1.x",
"vtex.flex-layout": "0.x", "vtex.flex-layout": "0.x",
"vtex.rich-text": "0.x", "vtex.rich-text": "0.x",
"vtex.product-identifier": "0.x",
"vtex.store-drawer": "0.x", "vtex.store-drawer": "0.x",
"vtex.locale-switcher": "0.x", "vtex.locale-switcher": "0.x",
"vtex.product-quantity": "1.x", "vtex.product-quantity": "1.x",
"vtex.product-identifier": "0.x",
"vtex.breadcrumb": "1.x", "vtex.breadcrumb": "1.x",
"vtex.sticky-layout": "0.x", "vtex.sticky-layout": "0.x",
"vtex.product-customizer": "2.x", "vtex.product-customizer": "2.x",

View File

@ -1,5 +1,6 @@
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles"; import { useCssHandles } from "vtex.css-handles";
import "./styles.css"
const CSS_HANDLES = ["html"] as const; const CSS_HANDLES = ["html"] as const;

View File

@ -0,0 +1,4 @@
[class*="html--wrapperQuantity"] {
display: flex;
margin-bottom: 16px;
}

View File

@ -5,6 +5,13 @@
"customPixelEventId": "add-to-cart-button" "customPixelEventId": "add-to-cart-button"
} }
}, },
"add-to-cart-button#addSacola": {
"props": {
"addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button",
"text": "Adicionar à sacola"
}
},
"minicart.v2": { "minicart.v2": {
"props": { "props": {

View File

@ -3,9 +3,10 @@
"children": [ "children": [
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability", "condition-layout.product#availability",
"flex-layout.row#description", // "flex-layout.row#description",
"flex-layout.row#specifications-title", "tab-layout#AA323",
"product-specification-group#table", // "flex-layout.row#specifications-title",
// "product-specification-group#table",
"shelf.relatedProducts", "shelf.relatedProducts",
"product-questions-and-answers" "product-questions-and-answers"
] ]
@ -50,10 +51,30 @@
"marginTop": 4, "marginTop": 4,
"marginBottom": 7, "marginBottom": 7,
"paddingTop": 7, "paddingTop": 7,
"paddingBottom": 7 "paddingBottom": 7,
"blockClass": "productMainWrapper"
}, },
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"] "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
}, },
"flex-layout.row#descriptionRow": {
"props": {
// "colGap": 7,
// "rowGap": 7,
// "marginTop": 4,
// "marginBottom": 7,
// "paddingTop": 7,
// "paddingBottom": 7,
"blockClass": "descriptionRow"
},
"children": ["image#example111", "flex-layout.row#description"]
},
"image#example111": {
"props": {
"src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
"maxHeight": 100
}
},
"stack-layout": { "stack-layout": {
"props": { "props": {
@ -66,6 +87,88 @@
] ]
}, },
"html#wrapperQuantity": {
"props": {
"blockClass": "wrapperQuantity"
},
"children": ["product-quantity#quantityPdpItens", "flex-layout.row#buy-button"]
},
"product-quantity#quantityPdpItens": {
"props": {
"blockClass": "quantityPdpItens",
"showLabel": false,
"size": "large"
}
},
"tab-layout#AA323": {
"children": [
"tab-list#AA555",
"tab-content#AA555"
]
},
"tab-list#AA555": {
"children": [
"tab-list.item#1",
"tab-list.item#2"
]
},
"tab-content#AA555": {
"children": [
"tab-content.item#1",
"tab-content.item#2"
]
},
"tab-list.item#1": {
"props": {
"tabId": "majorAppliances",
"label": "Major Appliances",
"defaultActiveTab": true
}
},
"tab-list.item#2": {
"props": {
"tabId": "electronics",
"label": "Electronics"
}
},
"tab-content.item#1": {
"children": [
"rich-text#1"
],
"props": {
"tabId": "majorAppliances"
}
},
"tab-content.item#2": {
"children": [
"flex-layout.row#descriptionRow"
],
"props": {
"tabId": "electronics"
}
},
"rich-text#1": {
"props": {
"text": "Texto para Major Appliances",
"textPosition": "CENTER",
"font": "t-heading-3"
}
},
"rich-text#2": {
"props": {
"text": "Texto para Electronics",
"textPosition": "CENTER",
"font": "t-heading-3"
}
},
"product-specification-badges": { "product-specification-badges": {
"props": { "props": {
"specificationGroupName": "Group", "specificationGroupName": "Group",
@ -78,7 +181,7 @@
"flex-layout.col#stack": { "flex-layout.col#stack": {
"children": ["stack-layout"], "children": ["stack-layout"],
"props": { "props": {
"width": "60%", "width": "51%",
"rowGap": 0 "rowGap": 0
} }
}, },
@ -91,7 +194,11 @@
"desktop": "auto", "desktop": "auto",
"phone": "16:9" "phone": "16:9"
}, },
"displayThumbnailsArrows": true "showNavigationArrows": false,
"showPaginationDots": false,
"thumbnailsOrientation": "horizontal",
"thumbnailMaxHeight": 90,
"maxHeight": 664
} }
}, },
"flex-layout.col#right-col": { "flex-layout.col#right-col": {
@ -102,19 +209,14 @@
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-rating-summary", "product-rating-summary",
"flex-layout.row#list-price-savings", "product-identifier.product#identifierMain",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"product-installments", "product-installments",
"product-separator", "product-separator",
"product-identifier.product", "sku-selector#inverseOrder",
"sku-selector", "html#wrapperQuantity",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber", "availability-subscriber",
"shipping-simulator", "shipping-simulator"
"share#default"
] ]
}, },
@ -132,12 +234,21 @@
} }
}, },
"sku-selector#inverseOrder": {
"props": {
"variationsSpacing": 3,
"showValueNameForImageVariation": true,
"blockClass": "inverseOrder"
}
},
"flex-layout.row#buy-button": { "flex-layout.row#buy-button": {
"props": { "props": {
"marginTop": 4, "marginTop": 4,
"marginBottom": 7 "marginBottom": 7,
"blockClass": "buyButton"
}, },
"children": ["add-to-cart-button"] "children": ["add-to-cart-button#addSacola"]
}, },
"flex-layout.row#product-availability": { "flex-layout.row#product-availability": {
@ -172,6 +283,13 @@
"children": ["availability-subscriber"] "children": ["availability-subscriber"]
}, },
"product-identifier.product#identifierMain": {
"props": {
"label": "hide",
"idField": "productReference"
}
},
"share#default": { "share#default": {
"props": { "props": {
"social": { "social": {

View File

@ -0,0 +1,13 @@
/*
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 */
.product-identifier--productReference {
display: flex;
justify-content: end;
}

View File

@ -1,98 +1,23 @@
.flexRowContent--menu-link, /*
.flexRowContent--main-header { 0 - 600PX: Phone
padding: 0 0.5rem; 600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.flexRow--productMainWrapper {
padding: 0 36px;
} }
@media screen and (min-width: 40em) { .flexRow--buyButton {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
}
}
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
}
.flexRowContent--main-header {
background-color: #f0f0f0;
}
.flexRowContent--main-header-mobile {
align-items: center;
padding: 0.625rem 0.5rem;
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
display: flex; display: flex;
max-height: 100%; align-items: center;
width: 100%;
margin-left: 10px;
} }
.flexRow--buyButton .flexRowContent--buyButton {
.flexColChild--quickviewDetails:first-child { margin: 0;
overflow-y: auto; height: 49px;
height: 66% !important;
overflow-x: hidden;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
} }

View File

@ -1,3 +1,9 @@
.product-identifier--productReference { /*
margin-bottom: 1rem; 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 */

View File

@ -0,0 +1,32 @@
/*
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 */
.quantitySelectorContainer--quantityPdpItens {
margin: 0;
}
.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__input) {
border: 1px solid #CCCCCC;
border-left: 0;
border-right: 0;
width: 3rem;
}
.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__plus-button) {
border: 1px solid #CCCCCC;
border-left: 0;
border-radius: 0;
width: 2.5em !important;
color: black;
}
.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__minus-button) {
border: 1px solid #CCCCCC;
border-right: 0;
border-radius: 0;
width: 2.5em !important;
color: black;
}

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 */
.shippingTableBody {
display: none;
}

View File

@ -10,3 +10,69 @@
.newsletter { .newsletter {
background: red; background: red;
} }
.productImageTag--main {
object-fit: unset !important;
}
.productImagesThumb {
width: 13.605% !important;
margin: 0 16px 0 0;
}
.productNameContainer--quickview {
display: flex;
justify-content: end;
}
:global(.vtex-product-identifier-0-x-product-identifier--productReference) {
display: flex;
justify-content: end;
margin-bottom: 24px;
}
.skuSelectorContainer--inverseOrder {
display: flex;
flex-direction: column-reverse;
}
.shippingContainer {
display: flex;
}
.shippingContainer :global(.vtex-address-form__field--small) {
display: flex;
}
.shippingContainer :global(.vtex-input-prefix__group) {
height: 49px;
border: 1px solid #CCCCCC;
border-radius: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
position: relative;
left: 150px;
align-items: center;
padding-top: 16.1px;
}
.shippingContainer :global(.vtex__icon-external-link) {
display: none;
}
.shippingContainer :global(.vtex-button) {
display: flex;
width: 49px;
height: 49px;
position: relative;
right: 129px;
margin-top: 24px;
background-color: black;
font-size: 0;
border: none;
border-radius: 0;
}
.shippingContainer :global(.vtex-button) ::before {
content: "Ok";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: white;
}

View File

@ -0,0 +1,15 @@
.flexRow--productMainWrapper{
padding: 0 36px;
}
.flexRow--buyButton{
display: flex;
align-items: center;
width: 100%;
margin-left: 10px;
.flexRowContent--buyButton{
margin: 0;
height: 49px;
}
}

View File

@ -0,0 +1,24 @@
.quantitySelectorContainer--quantityPdpItens{
margin: 0;
:global(.vtex-numeric-stepper__input ){
border: 1px solid #CCCCCC;
border-left: 0;
border-right: 0;
width: 3rem;
}
:global(.vtex-numeric-stepper__plus-button){
border: 1px solid #CCCCCC;
border-left: 0;
border-radius: 0;
width: 2.5em !important;
color: black;
}
:global(.vtex-numeric-stepper__minus-button){
border: 1px solid #CCCCCC;
border-right: 0;
border-radius: 0;
width: 2.5em !important;
color: black;
}
}

View File

@ -1,3 +1,73 @@
.newsletter{ .newsletter{
background: red; background: red;
} }
.productImageTag--main{
object-fit: unset !important;
}
.productImagesThumb{
width: 13.605% !important;
margin: 0 16px 0 0;
}
.productNameContainer--quickview{
display: flex;
justify-content: end;
}
:global(.vtex-product-identifier-0-x-product-identifier--productReference){
display: flex;
justify-content: end;
margin-bottom: 24px;
}
.skuSelectorContainer--inverseOrder{
display: flex;
flex-direction: column-reverse;
}
.shippingContainer{
display: flex;
:global(.vtex-address-form__field--small){
display: flex;
}
:global(.vtex-input-prefix__group){
height: 49px;
border: 1px solid #CCCCCC;
border-radius: 0;
}
:global(.vtex-address-form__postalCode-forgottenURL){
display: flex;
position: relative;
left: 150px;
align-items: center;
padding-top: 16.1px;
}
:global(.vtex__icon-external-link){
display: none;
}
:global(.vtex-button){
display: flex;
width: 49px;
height: 49px;
position: relative;
right: 129px;
margin-top: 24px;
background-color: black;
font-size: 0;
border: none;
border-radius: 0;
::before{
content: "Ok";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: white;
}
}
}