Thiago.bronisio/challenge-vtex-io-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add estilizacao no botao de add á sacola, controle de cep, e adiciona o slider de produtos

Browse Source
This commit is contained in:
Thiago Bronisio 2023-01-24 23:24:38 -03:00
parent 1869e0a85f
commit a6aff625f1
11 changed files with 260 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;

3
react/components/Html/styles.css Normal file
View File

@ -0,0 +1,3 @@
[class*="html--buy-button"]{
display: flex;
}

4
store/blocks/minicart.jsonc
View File

@ -2,7 +2,9 @@
"add-to-cart-button": {
"props": {
"addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button"
"customPixelEventId": "add-to-cart-button",
"blockClass": "button",
"text": "ADICIONAR À SACOLA"
}
},

2
store/blocks/pdp/product-assembly.jsonc
View File

@ -4,7 +4,7 @@
"blockClass": "button-quantity",
"position": "bottom"
},
"children": ["flex-layout.row#buy-button"]
"children": ["html#buy-button"]
},
"product-assembly-options": {
"children": [

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

@ -4,10 +4,25 @@
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"shelf.relatedProducts",
"list-context.product-list#prateleira",
//"shelf.relatedProducts",
"product-questions-and-answers"
]
},
"product-summary.shelf#prateleira": {
"children": [
"stack-layout#prodsum",
"product-summary-name",
"product-installments",
"product-selling-price"
]
},
"list-context.product-list#prateleira": {
"blocks": ["product-summary.shelf#prateleira"],
"children": ["slider-layout#demo-products"]
},
"html#breadcrumb": {
"props": {
"tag": "section",
@ -107,7 +122,7 @@
"sku-selector",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"html#buy-button",
"shipping-simulator"
]
},
@ -129,8 +144,11 @@
}
},
"flex-layout.row#buy-button": {
"html#buy-button": {
"props": {
"tag": "div",
"testId": "buy-button",
"blockClass": "buy-button",
"marginTop": 4,
"marginBottom": 7
},

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -23,4 +24,33 @@
.sellingPriceValue {
font-size: 50px;
}
.flexRowContent {
padding: 0;
margin-top: 0;
}
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
padding: 0;
display: flex;
}
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth):nth-child(even) {
width: 100% !important;
}
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
background-color: black;
border: none;
height: 49px;
margin-top: 8px;
}
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
font-size: 0;
}
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after {
font-family: "Open sans", sans-serif;
content: "ADICIONAR À SACOLA";
font-size: 18px;
font-weight: 400;
padding: 12px 0;
line-height: 22px;
}

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

@ -12,6 +12,7 @@
margin-top: 8px;
margin-bottom: 16px;
width: 149px;
margin-right: 10px;
}
.quantitySelectorContainer .quantitySelectorTitle {
display: none;

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

@ -17,6 +17,7 @@
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
/*PRODUTO INDISPONIVEL, TEXTOS */
/* FORMULARIO DE PRODUTO INDISPONIVEL */
/* BUSCA DE CEP */
}
.container .productNameContainer--quickview {
text-align: end;
@ -68,22 +69,25 @@
.container .skuSelectorOptionsList .skuSelectorItem:first-child {
margin-left: 0;
}
.container .skuSelectorOptionsList .frameAround {
.container .skuSelectorOptionsList .skuSelectorItem .frameAround {
border-radius: 50%;
border-color: #000000;
color: #000000;
}
.container .skuSelectorOptionsList .skuSelectorItemTextValue {
.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue {
max-width: 100%;
display: flex;
justify-content: center;
color: #000000;
}
.container .skuSelectorOptionsList .diagonalCross {
margin: 4px;
}
.container .skuSelectorOptionsList .skuSelectorInternalBox {
.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
border-radius: 50%;
}
.container .skuSelectorOptionsList .diagonalCross {
margin: 5px;
background-image: linear-gradient(to top right, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 0, transparent 0%);
transform: rotate(90deg);
}
.container .carouselGaleryThumbs {
margin: 16px 0;
}
@ -191,4 +195,70 @@
}
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
}
.container .shippingContainer {
display: flex;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding: 0;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
font-size: 0;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before {
content: "CALCULAR FRETE";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
width: 280px;
height: 49px;
border-radius: 0;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
margin-top: 25px;
position: relative;
left: 32px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration: underline;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000000;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
}
.container .shippingContainer :global(.vtex-button) {
height: 49px;
width: 49px;
margin-top: 27px;
position: relative;
right: 148px;
font-size: 0;
border-radius: 0;
cursor: pointer;
}
.container .shippingContainer :global(.vtex-button)::before {
content: "OK";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #fff;
}
.container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
height: fit-content;
}
.productImage {
width: max-content;
}
.productImage .productImageTag--main {
max-height: 664px !important;
}

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

@ -19,3 +19,34 @@
.sellingPriceValue {
font-size: 50px;
}
.flexRowContent {
padding: 0;
margin-top: 0;
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
padding: 0;
display: flex;
&:nth-child(even) {
width: 100% !important;
}
:global(.vtex-button) {
background-color: black;
border: none;
height: 49px;
margin-top: 8px;
:global(.vtex-button__label) {
:global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
font-size: 0;
&::after {
font-family: "Open sans", sans-serif;
content: "ADICIONAR À SACOLA";
font-size: 18px;
font-weight: 400;
padding: 12px 0;
line-height: 22px;
}
}
}
}
}
}

1
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -3,6 +3,7 @@
margin-top: 8px;
margin-bottom: 16px;
width: 149px;
margin-right: 10px;
.quantitySelectorTitle {
display: none;
}

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

@ -68,26 +68,34 @@
&:first-child {
margin-left: 0;
}
}
.frameAround {
border-radius: 50%;
border-color: $color-black-padrao;
color: $color-black-padrao;
}
.frameAround {
border-radius: 50%;
border-color: $color-black-padrao;
}
.skuSelectorItemTextValue {
max-width: 100%;
display: flex;
justify-content: center;
color: $color-black-padrao;
.skuSelectorItemTextValue {
max-width: 100%;
display: flex;
justify-content: center;
color: $color-black-padrao;
}
.skuSelectorInternalBox {
border-radius: 50%;
}
}
.diagonalCross {
margin: 4px;
}
.skuSelectorInternalBox {
border-radius: 50%;
margin: 5px;
background-image: linear-gradient(
to top right,
transparent 44%,
rgba(0, 0, 0, 0.3) 48%,
currentColor 48%,
currentColor 0,
transparent 0%
);
transform: rotate(90deg);
}
}
@ -209,4 +217,72 @@
}
}
}
/* BUSCA DE CEP */
.shippingContainer {
display: flex;
:global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding: 0;
:global(.vtex-input__label) {
font-size: 0;
&::before {
content: "CALCULAR FRETE";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
}
}
:global(.vtex-input-prefix__group) {
width: 280px;
height: 49px;
border-radius: 0;
}
:global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
margin-top: 25px;
position: relative;
left: 32px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration: underline;
:last-child {
color: $color-black-padrao;
}
:global(.vtex__icon-external-link) {
display: none;
}
}
}
:global(.vtex-button) {
height: 49px;
width: 49px;
margin-top: 27px;
position: relative;
right: 148px;
font-size: 0;
border-radius: 0;
cursor: pointer;
&::before {
content: "OK";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: $color-white;
}
:global(.vtex-button__label) {
height: fit-content;
}
}
}
}
.productImage {
width: max-content;
.productImageTag--main {
max-height: 664px !important;
}
}