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

feat:criando o css do - tamanho - cor - buttons - e adicionando a area description do produto

Browse Source
This commit is contained in:
PatrickSouza 2023-01-27 19:52:32 -03:00
parent bbf7c874a0
commit 12fee586af
13 changed files with 512 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
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",

68
store/blocks/pdp/descriptionTabs.jsonc Normal file
View File

@ -0,0 +1,68 @@
{
"tab-layout#product-description": {
"children": [
"tab-list#product-description",
"tab-content#product-description"
],
"props": {
"blockClass": "product-description",
"defaultActiveTabId": "product-description"
}
},
"tab-list#product-description": {
"children": [
"tab-list.item#description",
"tab-list.item#description2",
"tab-list.item#description2",
"tab-list.item#description2",
"tab-list.item#description2"
]
},
"tab-list.item#description": {
"props": {
"tabId": "product-description",
"label": "Description",
"defaultActiveTab": true
}
},
"tab-list.item#description2": {
"props": {
"tabId": "product-description2",
"label": "Description"
}
},
"tab-content#product-description": {
"children": [
"tab-content.item#product-description",
"tab-content.item#product-description2"
]
},
"tab-content.item#product-description": {
"children": ["flex-layout.row#description"],
"props": {
"tabId": "product-description"
}
},
"tab-content.item#product-description2": {
"children": ["flex-layout.row#description"],
"props": {
"tabId": "product-description2"
}
},
"flex-layout.row#description": {
"props": {
"marginBottom": 7
},
"children": ["product-images#description", "product-description"]
},
"product-images#description": {
"props": {
"displayMode": "first-image"
}
},
"product-description": {
"props": {
"collapseContent": true
}
}
}

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

@ -3,9 +3,9 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"tab-layout#product-description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
]
@ -26,12 +26,7 @@
"text": "##### Product Specifications"
}
},
"flex-layout.row#description": {
"props": {
"marginBottom": 7
},
"children": ["product-description"]
},
"condition-layout.product#availability": {
"props": {
"conditions": [
@ -56,17 +51,6 @@
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
"stack-layout": {
"props": {
"blockClass": "product"
},
"children": [
"flex-layout.row#product-image",
"product-bookmark",
"product-specification-badges"
]
},
"product-specification-badges": {
"props": {
"specificationGroupName": "Group",
@ -83,6 +67,16 @@
"rowGap": 0
}
},
"stack-layout": {
"props": {
"blockClass": "product"
},
"children": [
"flex-layout.row#product-image",
"product-bookmark",
"product-specification-badges"
]
},
"flex-layout.row#product-image": {
"children": ["product-images"]
},
@ -106,18 +100,17 @@
"flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
// "flex-layout.row#list-price-savings",
// "product-separator",
"sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator",
"share#default"
"shipping-simulator"
// "share#default"
]
},
@ -138,9 +131,10 @@
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7
"marginBottom": 7,
"blockClass": "button-card-add"
},
"children": ["add-to-cart-button"]
"children": ["product-quantity", "add-to-cart-button"]
},
"flex-layout.row#product-availability": {

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

@ -9,4 +9,12 @@
/* Grid breakpoints */
.flexRow--product-main-container :global(.vtex-store-components-3-x-container) {
max-width: 1920px;
}
.flexRowContent--button-card-add .stretchChildrenWidth:first-child {
max-width: 128px;
padding-right: 10px;
}
.flexRowContent--button-card-add .stretchChildrenWidth:last-child {
width: 100% !important;
}

1
styles/css/vtex.product-identifier.css
View File

@ -16,7 +16,6 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
/* identical to box height */
text-align: right;
color: rgba(146, 146, 146, 0.48);
}

91
styles/css/vtex.product-price.css
View File

@ -1,79 +1,12 @@
.listPrice {
color: #727273;
margin-bottom: .25rem;
font-size: 1rem;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.25rem;
font-weight: 700;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;
color: #79B03A;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2E2E2E;
}
.savings--summary {
background: #8BC34A;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: .875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding: 0.25rem 0.5rem 0.25rem 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 */
.strike {
text-decoration: none;
}

51
styles/css/vtex.product-quantity.css Normal file
View File

@ -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 */
.quantitySelectorTitle {
display: none;
}
.quantitySelectorContainer {
margin: 0;
height: 100%;
}
.quantitySelectorContainer .quantitySelectorStepper {
height: 100%;
}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) {
height: 100%;
}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) {
height: 100%;
border: 1px solid #cccccc;
padding: 0 16px;
}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
width: 100%;
height: 100%;
border: none;
}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button),
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) {
width: max-content !important;
height: 100%;
border: none;
border-radius: 0;
}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button__text),
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button__text) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
color: #000000;
}

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

@ -21,12 +21,131 @@
text-align: end;
}
.product-identifier--productReference {
text-align: end;
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.product-identifier--productReference__label {
.skuSelectorName {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorItem {
border-radius: 50%;
width: 50px;
height: 50px;
}
.skuSelectorItem:not(:last-child) {
margin-right: 16px;
}
.skuSelectorItem .valueWrapper {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.skuSelectorItem:hover .frameAround {
border: 2px solid #000000;
}
.skuSelectorItem:hover .valueWrapper {
color: #000000;
}
.skuSelectorItem .frameAround {
border-radius: 50%;
border: 1px solid #989898;
}
.skuSelectorItem--selected .frameAround {
border: 2px solid #000000;
}
.skuSelectorItem--selected .valueWrapper {
color: #000000;
}
.skuSelectorInternalBox {
border-radius: 50%;
}
.skuSelectorInternalBox:hover {
border: none;
}
.skuSelectorInternalBox .diagonalCross {
background-image: linear-gradient(to top right, transparent 50%, rgba(0, 0, 0, 0.5) 53%, currentColor 54%, currentColor 52%, transparent 0%);
transform: rotate(95deg);
}
.shippingContainer {
position: relative;
}
.shippingContainer :global(.vtex-button) {
position: absolute;
top: 25px;
left: 230px;
padding: 12px;
width: max-content;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
padding: 0;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
content: "OK";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #ffffff;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding-bottom: 16px;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
max-width: 280px;
margin-right: 32px;
padding: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
height: 49px;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
display: none;
}
.product-identifier--productReference__separator {
display: none;
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #afafaf;
}
.shippingTable {
max-width: 320px;
margin: 0;
border: none;
}
.shippingTable .shippingTableHead {
display: table-header-group !important;
width: 100%;
}
.shippingTable .shippingTableHead .shippingTableRow {
text-align: left;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
padding: 0 16px 0 0;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel {
display: flex;
}

12
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -3,3 +3,15 @@
max-width: 1920px;
}
}
.flexRowContent--button-card-add {
.stretchChildrenWidth {
&:first-child {
max-width: 128px;
padding-right: 10px;
}
&:last-child {
width: 100% !important;
}
}
}

3
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -8,10 +8,7 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
/* identical to box height */
text-align: right;
color: rgba(146, 146, 146, 0.48);
}
&__label {

48
styles/sass/pages/product/vtex.product-quantity.scss Normal file
View File

@ -0,0 +1,48 @@
.quantitySelectorTitle {
display: none;
}
.quantitySelectorContainer {
margin: 0;
height: 100%;
.quantitySelectorStepper {
height: 100%;
:global(.vtex-numeric-stepper-wrapper) {
height: 100%;
:global(.vtex-numeric-stepper-container) {
height: 100%;
border: 1px solid #cccccc;
padding: 0 16px;
:global(.vtex-numeric-stepper__input) {
width: 100%;
height: 100%;
border: none;
}
:global(.vtex-numeric-stepper__plus-button),
:global(.vtex-numeric-stepper__minus-button) {
width: max-content !important;
height: 100%;
border: none;
border-radius: 0;
}
:global(.vtex-numeric-stepper__minus-button__text),
:global(.vtex-numeric-stepper__plus-button__text) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
color: #000000;
}
}
}
}
}

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

@ -10,14 +10,165 @@
.productNameContainer--quickview {
text-align: end;
}
.product-identifier--productReference {
text-align: end;
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorName {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
&__label {
display: none;
.skuSelectorItem {
border-radius: 50%;
width: 50px;
height: 50px;
&:not(:last-child) {
margin-right: 16px;
}
&__separator {
display: none;
.valueWrapper {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
&:hover {
.frameAround {
border: 2px solid #000000;
}
.valueWrapper {
color: #000000;
}
}
.frameAround {
border-radius: 50%;
border: 1px solid #989898;
}
}
.skuSelectorItem--selected {
.frameAround {
border: 2px solid #000000;
}
.valueWrapper {
color: #000000;
}
}
.skuSelectorInternalBox {
border-radius: 50%;
&:hover {
border: none;
}
.diagonalCross {
background-image: linear-gradient(
to top right,
transparent 50%,
rgba(0, 0, 0, 0.5) 53%,
currentColor 54%,
currentColor 52%,
transparent 0%
);
transform: rotate(95deg);
}
}
.shippingContainer {
position: relative;
:global(.vtex-button) {
position: absolute;
top: 25px;
left: 230px;
padding: 12px;
width: max-content;
:global(.vtex-button__label) {
font-size: 0;
padding: 0;
&::after {
content: "OK";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #ffffff;
}
}
}
:global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding-bottom: 16px;
:global(.vtex-input) {
max-width: 280px;
margin-right: 32px;
padding: 0;
:global(.vtex-input-prefix__group) {
height: 49px;
:global(.vtex-input__suffix) {
display: none;
}
:global(.vtex-address-form-4-x-input) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #afafaf;
}
}
}
}
}
.shippingTable {
max-width: 320px;
margin: 0;
border: none;
.shippingTableHead {
display: table-header-group !important;
width: 100%;
.shippingTableRow {
text-align: left;
}
}
.shippingTableBody {
.shippingTableRow {
.shippingTableCell {
padding: 0 16px 0 0;
.shippingTableLabel {
display: flex;
}
}
}
}
}

22
styles/sass/utils/_vars.scss
View File

@ -14,18 +14,18 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
$z-index: (
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25,
) !default;