Feat(Pdp): Cria layout de imagens de produto e elementos para efetuar a compra
This commit is contained in:
parent
c9a06914fb
commit
7ab2ffd812
@ -15,7 +15,6 @@
|
||||
"postreleasy": "vtex publish --verbose"
|
||||
},
|
||||
"dependencies": {
|
||||
"agenciamagma.store-theme": "5.x",
|
||||
"vtex.store": "2.x",
|
||||
"vtex.store-header": "2.x",
|
||||
"vtex.product-summary": "2.x",
|
||||
@ -34,10 +33,10 @@
|
||||
"vtex.my-account": "1.x",
|
||||
"vtex.flex-layout": "0.x",
|
||||
"vtex.rich-text": "0.x",
|
||||
"vtex.product-identifier": "0.x",
|
||||
"vtex.store-drawer": "0.x",
|
||||
"vtex.locale-switcher": "0.x",
|
||||
"vtex.product-quantity": "1.x",
|
||||
"vtex.product-identifier": "0.x",
|
||||
"vtex.breadcrumb": "1.x",
|
||||
"vtex.sticky-layout": "0.x",
|
||||
"vtex.product-customizer": "2.x",
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React, { ReactNode } from "react";
|
||||
import { useCssHandles } from "vtex.css-handles";
|
||||
import "./styles.css"
|
||||
|
||||
const CSS_HANDLES = ["html"] as const;
|
||||
|
||||
|
4
react/components/Html/styles.css
Normal file
4
react/components/Html/styles.css
Normal file
@ -0,0 +1,4 @@
|
||||
[class*="html--wrapperQuantity"] {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
}
|
@ -5,6 +5,13 @@
|
||||
"customPixelEventId": "add-to-cart-button"
|
||||
}
|
||||
},
|
||||
"add-to-cart-button#addSacola": {
|
||||
"props": {
|
||||
"addToCartFeedback": "customEvent",
|
||||
"customPixelEventId": "add-to-cart-button",
|
||||
"text": "Adicionar à sacola"
|
||||
}
|
||||
},
|
||||
|
||||
"minicart.v2": {
|
||||
"props": {
|
||||
|
@ -3,9 +3,10 @@
|
||||
"children": [
|
||||
"html#breadcrumb",
|
||||
"condition-layout.product#availability",
|
||||
"flex-layout.row#description",
|
||||
"flex-layout.row#specifications-title",
|
||||
"product-specification-group#table",
|
||||
// "flex-layout.row#description",
|
||||
"tab-layout#AA323",
|
||||
// "flex-layout.row#specifications-title",
|
||||
// "product-specification-group#table",
|
||||
"shelf.relatedProducts",
|
||||
"product-questions-and-answers"
|
||||
]
|
||||
@ -50,10 +51,30 @@
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7,
|
||||
"paddingTop": 7,
|
||||
"paddingBottom": 7
|
||||
"paddingBottom": 7,
|
||||
"blockClass": "productMainWrapper"
|
||||
},
|
||||
"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": {
|
||||
"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": {
|
||||
"props": {
|
||||
"specificationGroupName": "Group",
|
||||
@ -78,7 +181,7 @@
|
||||
"flex-layout.col#stack": {
|
||||
"children": ["stack-layout"],
|
||||
"props": {
|
||||
"width": "60%",
|
||||
"width": "51%",
|
||||
"rowGap": 0
|
||||
}
|
||||
},
|
||||
@ -91,7 +194,11 @@
|
||||
"desktop": "auto",
|
||||
"phone": "16:9"
|
||||
},
|
||||
"displayThumbnailsArrows": true
|
||||
"showNavigationArrows": false,
|
||||
"showPaginationDots": false,
|
||||
"thumbnailsOrientation": "horizontal",
|
||||
"thumbnailMaxHeight": 90,
|
||||
"maxHeight": 664
|
||||
}
|
||||
},
|
||||
"flex-layout.col#right-col": {
|
||||
@ -102,19 +209,14 @@
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
"product-rating-summary",
|
||||
"flex-layout.row#list-price-savings",
|
||||
"product-identifier.product#identifierMain",
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments",
|
||||
"product-separator",
|
||||
"product-identifier.product",
|
||||
"sku-selector",
|
||||
"product-quantity",
|
||||
"product-assembly-options",
|
||||
"product-gifts",
|
||||
"flex-layout.row#buy-button",
|
||||
"sku-selector#inverseOrder",
|
||||
"html#wrapperQuantity",
|
||||
"availability-subscriber",
|
||||
"shipping-simulator",
|
||||
"share#default"
|
||||
"shipping-simulator"
|
||||
]
|
||||
},
|
||||
|
||||
@ -132,12 +234,21 @@
|
||||
}
|
||||
},
|
||||
|
||||
"sku-selector#inverseOrder": {
|
||||
"props": {
|
||||
"variationsSpacing": 3,
|
||||
"showValueNameForImageVariation": true,
|
||||
"blockClass": "inverseOrder"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#buy-button": {
|
||||
"props": {
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7
|
||||
"marginBottom": 7,
|
||||
"blockClass": "buyButton"
|
||||
},
|
||||
"children": ["add-to-cart-button"]
|
||||
"children": ["add-to-cart-button#addSacola"]
|
||||
},
|
||||
|
||||
"flex-layout.row#product-availability": {
|
||||
@ -172,6 +283,13 @@
|
||||
"children": ["availability-subscriber"]
|
||||
},
|
||||
|
||||
"product-identifier.product#identifierMain": {
|
||||
"props": {
|
||||
"label": "hide",
|
||||
"idField": "productReference"
|
||||
}
|
||||
},
|
||||
|
||||
"share#default": {
|
||||
"props": {
|
||||
"social": {
|
||||
|
13
styles/css/vtex-product-identifier.css
Normal file
13
styles/css/vtex-product-identifier.css
Normal 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;
|
||||
}
|
@ -1,98 +1,23 @@
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 0.5rem;
|
||||
/*
|
||||
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 */
|
||||
.flexRow--productMainWrapper {
|
||||
padding: 0 36px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 40em) {
|
||||
.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 {
|
||||
.flexRow--buyButton {
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:first-child {
|
||||
overflow-y: auto;
|
||||
height: 66% !important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:last-child {
|
||||
height: 34% !important;
|
||||
}
|
||||
|
||||
.flexRow--addToCartRow {
|
||||
padding-bottom: 1rem;
|
||||
.flexRow--buyButton .flexRowContent--buyButton {
|
||||
margin: 0;
|
||||
height: 49px;
|
||||
}
|
@ -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 */
|
32
styles/css/vtex.product-quantity.css
Normal file
32
styles/css/vtex.product-quantity.css
Normal 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;
|
||||
}
|
12
styles/css/vtex.shipping-simulator.css
Normal file
12
styles/css/vtex.shipping-simulator.css
Normal 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;
|
||||
}
|
@ -10,3 +10,69 @@
|
||||
.newsletter {
|
||||
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;
|
||||
}
|
15
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
15
styles/sass/pages/product/vtex.flex-layout.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
24
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
24
styles/sass/pages/product/vtex.product-quantity.scss
Normal 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;
|
||||
}
|
||||
}
|
@ -1,3 +1,73 @@
|
||||
.newsletter{
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user