Rhayllon_Daudt/challenge-vtex-io-Rhayllon-Daudt
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
manifest.json
View File

@ -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
react/components/Html/index.tsx
View File

@ -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
View File

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

7
store/blocks/minicart.jsonc
View File

@ -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": {

152
store/blocks/pdp/product.jsonc
View File

@ -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"
]
},
@ -131,13 +233,22 @@
"showValueNameForImageVariation": true
}
},
"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
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;
}

113
styles/css/vtex.flex-layout.css
View File

@ -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%;
}
.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;
align-items: center;
width: 100%;
margin-left: 10px;
}
.flexRow--buyButton .flexRowContent--buyButton {
margin: 0;
height: 49px;
}

12
styles/css/vtex.product-identifier.css
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 */

32
styles/css/vtex.product-quantity.css Normal file
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;
}

12
styles/css/vtex.shipping-simulator.css Normal file
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;
}

66
styles/css/vtex.store-components.css
View File

@ -9,4 +9,70 @@
/* Grid breakpoints */
.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
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;
}
}

24
styles/sass/pages/product/vtex.product-quantity.scss Normal file
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;
}
}

70
styles/sass/pages/product/vtex.store-components.scss
View File

@ -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;
}
}
}