feat:#4 Uso da api #5
@ -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",
|
||||
@ -66,7 +65,8 @@
|
||||
"vtex.tab-layout": "0.x",
|
||||
"vtex.condition-layout": "2.x",
|
||||
"vtex.css-handles": "1.x",
|
||||
"vtex.product-context": "0.x"
|
||||
"vtex.product-context": "0.x",
|
||||
"vtex.store-newsletter": "1.x"
|
||||
},
|
||||
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
|
||||
}
|
||||
|
||||
59
react/ProductText.tsx
Normal file
59
react/ProductText.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useProduct } from "vtex.product-context";
|
||||
|
||||
const ProductText = () => {
|
||||
const productContextValue = useProduct();
|
||||
const pix = productContextValue?.product?.priceRange.sellingPrice.lowPrice;
|
||||
const discount = (Number(pix) * 10) / 100;
|
||||
const totalPix = Number(pix) - Number(discount.toFixed(2));
|
||||
|
||||
useEffect(() => {
|
||||
const inputCep = document.querySelector(".vtex-address-form-4-x-input");
|
||||
inputCep?.setAttribute("placeholder", "Digite seu CEP");
|
||||
});
|
||||
|
||||
const fetchApi = () => {
|
||||
fetch("/api/checkout/pub/orderForms/simulation", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
items: [
|
||||
{
|
||||
id: productContextValue?.selectedItem?.itemId,
|
||||
quantity: productContextValue?.selectedQuantity,
|
||||
seller: productContextValue?.selectedItem?.sellers[0].sellerId,
|
||||
},
|
||||
],
|
||||
country: "BRA",
|
||||
}),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
});
|
||||
};
|
||||
fetchApi();
|
||||
|
||||
return (
|
||||
<div className="container-pixDiscount">
|
||||
<div>
|
||||
<figure className="container-imgPix">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/icon-pix-thiagodutra.png"
|
||||
alt="pix image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div>
|
||||
<div className="container-descriptionDiscount">
|
||||
<p className="price-discount">R$ {totalPix.toFixed(2)}</p>
|
||||
<p className="percent-discount">10% de desconto</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ProductText;
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { ReactNode } from "react";
|
||||
import { useCssHandles } from "vtex.css-handles";
|
||||
import "./styles.css";
|
||||
|
||||
const CSS_HANDLES = ["html"] as const;
|
||||
|
||||
|
||||
68
react/components/Html/styles.css
Normal file
68
react/components/Html/styles.css
Normal file
@ -0,0 +1,68 @@
|
||||
[class*="html--buy-button"] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
[class*="html--buy-button"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="html--image-home"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 2500px) {
|
||||
[class*="html--image-home"] {
|
||||
margin: 0 32px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="html--container-description"] {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
[class*="html--container-description"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="html--container-form-input"] {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
[class*="html--container-form-input"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="html--pix-discount"] :global(.container-pixDiscount) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[class*="html--pix-discount"] :global(.container-imgPix) {
|
||||
margin-left: 0;
|
||||
margin-right: 26px;
|
||||
}
|
||||
|
||||
[class*="html--pix-discount"] :global(.price-discount) {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
margin: 8px 0 0 0;
|
||||
}
|
||||
|
||||
[class*="html--pix-discount"] :global(.percent-discount) {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 17px;
|
||||
color: #929292;
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -9,41 +9,41 @@
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.container {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: #929292;
|
||||
margin: 0 15px;
|
||||
margin: 0 40px;
|
||||
}
|
||||
.container .homeIcon {
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
.container .homeLink::after {
|
||||
.container .homeLink::before {
|
||||
content: "Home";
|
||||
font-family: "Open sans", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
.container .arrow--1::after {
|
||||
.container .link--1 {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .link--1::before {
|
||||
content: "Sapatos";
|
||||
font-family: "Open sans", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
.container .link--1 {
|
||||
display: none;
|
||||
.container .link--2 {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .arrow--2::after {
|
||||
.container .link--2::before {
|
||||
content: "Sandália";
|
||||
font-family: "Open sans", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
.container .link--2 {
|
||||
display: none;
|
||||
}
|
||||
.container .termArrow,
|
||||
.container .term {
|
||||
|
||||
9
styles/css/vtex.product-customizer.css
Normal file
9
styles/css/vtex.product-customizer.css
Normal file
@ -0,0 +1,9 @@
|
||||
/*
|
||||
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 */
|
||||
@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
@ -7,10 +8,21 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container {
|
||||
padding: 0;
|
||||
margin: 0 40px;
|
||||
}
|
||||
}
|
||||
.container .productBrand {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .productBrand {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.container .productBrand--quickview {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 300;
|
||||
@ -19,8 +31,361 @@
|
||||
margin-top: 0px;
|
||||
color: #575757;
|
||||
}
|
||||
|
||||
.product-identifier__label,
|
||||
.product-identifier__separator {
|
||||
.container .skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorName {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorNameSeparator {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorSubcontainer--cor::before {
|
||||
content: "OUTRAS CORES:";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
font-size: 14px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
font-size: 14px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorTextContainer {
|
||||
display: none;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorOptionsList {
|
||||
margin-top: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorSelectorImageValue {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .skuSelectorOptionsList .skuSelectorItem {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.container .skuSelectorOptionsList .skuSelectorItem--selected {
|
||||
color: #000;
|
||||
}
|
||||
.container .skuSelectorOptionsList .frameAround {
|
||||
border-radius: 50%;
|
||||
border-color: #000;
|
||||
margin: 3px;
|
||||
}
|
||||
.container .skuSelectorOptionsList .skuSelectorItemTextValue {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
}
|
||||
.container .skuSelectorOptionsList .diagonalCross {
|
||||
margin: 4px;
|
||||
background-image: linear-gradient(to top left, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 52%, transparent 52%);
|
||||
}
|
||||
.container .skuSelectorOptionsList .skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.container .skuSelectorOptionsList .skuSelectorInternalBox .valueWrapper {
|
||||
color: #000;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .carouselGaleryThumbs {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.container .carouselGaleryThumbs .thumbImg {
|
||||
border-radius: 8px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
.container .carouselGaleryThumbs .productImagesThumb {
|
||||
height: 100% !important;
|
||||
width: 90px !important;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.container .carouselGaleryThumbs .productImagesThumbCaret {
|
||||
display: none;
|
||||
}
|
||||
.container .subscriberContainer .title {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .subscriberContainer .title::before {
|
||||
content: "Produto indisponível";
|
||||
font-size: 14px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 700;
|
||||
color: #868686;
|
||||
line-height: 19px;
|
||||
}
|
||||
.container .subscriberContainer .subscribeLabel {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .subscriberContainer .subscribeLabel::before {
|
||||
content: "Deseja saber quanto estiver disponível?";
|
||||
font-size: 14px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
color: #868686;
|
||||
line-height: 19px;
|
||||
}
|
||||
.container .form {
|
||||
position: relative;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) {
|
||||
max-width: 100%;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) {
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
border: 0;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
padding-top: 12px !important;
|
||||
padding-bottom: 12px !important;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label)::before {
|
||||
content: "AVISE-ME";
|
||||
font-family: "Open sans", sans-serif;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
.container .form .content .inputEmail {
|
||||
margin-right: 0;
|
||||
}
|
||||
.container .form .content .submit {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.container .productImage .productImageTag--main {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
.container .productDescriptionContainer {
|
||||
color: #929292;
|
||||
}
|
||||
.container .productDescriptionContainer .productDescriptionTitle {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin: 0px 0 8px 40px;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .productDescriptionContainer .productDescriptionTitle {
|
||||
margin-left: 0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
.container .productDescriptionContainer .productDescriptionText {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
.container .productDescriptionContainer .productDescriptionText .content {
|
||||
margin-left: 40px;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .productDescriptionContainer .productDescriptionText .content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingContainer {
|
||||
display: flex;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingContainer {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
|
||||
width: 280px;
|
||||
height: 49px;
|
||||
border-radius: 0;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
left: 0;
|
||||
margin-top: 8px;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
|
||||
color: #000;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
|
||||
display: none;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button) {
|
||||
height: 49px;
|
||||
width: 49px;
|
||||
margin-top: 27px;
|
||||
position: relative;
|
||||
right: 130px;
|
||||
top: 16px;
|
||||
font-size: 0;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingContainer :global(.vtex-button) {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
.shippingContainer :global(.vtex-button)::before {
|
||||
content: "OK";
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.shippingTable {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.shippingTable .shippingTableHead {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.shippingTable .shippingTableHead .shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
|
||||
margin-right: 39px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #000;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #000;
|
||||
}
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
font-size: 0;
|
||||
margin-right: 30px;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
|
||||
content: "Frete";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.shippingTableBody .shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
|
||||
width: 82px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #bababa;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #bababa;
|
||||
}
|
||||
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
|
||||
width: 50px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #bababa;
|
||||
}
|
||||
.shippingTableBody .shippingTableRow .shippingTableCell {
|
||||
padding: 0 0 15px;
|
||||
}
|
||||
.shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.imageElement {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
53
styles/css/vtex.tab-layout.css
Normal file
53
styles/css/vtex.tab-layout.css
Normal file
@ -0,0 +1,53 @@
|
||||
/*
|
||||
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 */
|
||||
.container {
|
||||
margin: 0 40px;
|
||||
}
|
||||
.container .listContainer {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #bababa;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .listContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.container .listContainer .listItem {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.container .listContainer .listItem :global(.vtex-button) {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.container .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.container .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover {
|
||||
color: #000;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
.container {
|
||||
.productBrand {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.productBrand--quickview {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
margin-top: 0px;
|
||||
color: #575757;
|
||||
}
|
||||
}
|
||||
|
||||
.product-identifier__label,
|
||||
.product-identifier__separator {
|
||||
display: none;
|
||||
}
|
||||
19
styles/sass/pages/slider/vtex.slider-layout.scss
Normal file
19
styles/sass/pages/slider/vtex.slider-layout.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.sliderLayoutContainer {
|
||||
padding: 0 67px 36px 67px;
|
||||
.slide--carousel {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.paginationDotsContainer {
|
||||
.paginationDot--isActive {
|
||||
background-color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sliderRightArrow {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.sliderLeftArrow {
|
||||
margin-left: 25px;
|
||||
}
|
||||
406
styles/sass/pages/store/vtex.store-components.scss
Normal file
406
styles/sass/pages/store/vtex.store-components.scss
Normal file
@ -0,0 +1,406 @@
|
||||
.container {
|
||||
@include mq(md, max) {
|
||||
padding: 0;
|
||||
margin: 0 40px;
|
||||
}
|
||||
.productBrand {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@include mq(md, max) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.productBrand--quickview {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
margin-top: 0px;
|
||||
color: $color-gray7;
|
||||
}
|
||||
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
.skuSelectorName {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.skuSelectorNameSeparator {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--cor {
|
||||
&::before {
|
||||
content: "OUTRAS CORES:";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
font-size: 14px;
|
||||
color: $color-gray6;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--tamanho {
|
||||
&::before {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
font-size: 14px;
|
||||
color: $color-gray6;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorTextContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.skuSelectorOptionsList {
|
||||
margin-top: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.skuSelectorSelectorImageValue {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorOptionsList {
|
||||
.skuSelectorItem {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.skuSelectorItem--selected {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.frameAround {
|
||||
border-radius: 50%;
|
||||
border-color: $color-black;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.skuSelectorItemTextValue {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.diagonalCross {
|
||||
margin: 4px;
|
||||
background-image: linear-gradient(
|
||||
to top left,
|
||||
transparent 44%,
|
||||
rgba(0, 0, 0, 0.3) 48%,
|
||||
currentColor 48%,
|
||||
currentColor 52%,
|
||||
transparent 52%
|
||||
);
|
||||
}
|
||||
|
||||
.skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
.valueWrapper {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carouselGaleryThumbs {
|
||||
@include mq(sm, max) {
|
||||
display: block;
|
||||
}
|
||||
.thumbImg {
|
||||
border-radius: 8px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
.productImagesThumb {
|
||||
height: 100% !important;
|
||||
width: 90px !important;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.productImagesThumbCaret {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.subscriberContainer {
|
||||
.title {
|
||||
font-size: 0;
|
||||
&::before {
|
||||
content: "Produto indisponível";
|
||||
font-size: 14px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 700;
|
||||
color: $color-gray8;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.subscribeLabel {
|
||||
font-size: 0;
|
||||
&::before {
|
||||
content: "Deseja saber quanto estiver disponível?";
|
||||
font-size: 14px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
color: $color-gray8;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form {
|
||||
position: relative;
|
||||
:global(.vtex-store-components-3-x-content) {
|
||||
max-width: 100%;
|
||||
:global(.vtex-store-components-3-x-submit) {
|
||||
:global(.vtex-button) {
|
||||
width: 100%;
|
||||
background-color: $color-black;
|
||||
border: 0;
|
||||
:global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
padding-top: 12px !important;
|
||||
padding-bottom: 12px !important;
|
||||
&::before {
|
||||
content: "AVISE-ME";
|
||||
font-family: "Open sans", sans-serif;
|
||||
font-size: 18px;
|
||||
color: $color-white;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
.inputEmail {
|
||||
margin-right: 0;
|
||||
}
|
||||
.submit {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productImage {
|
||||
.productImageTag--main {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
}
|
||||
.productDescriptionContainer {
|
||||
color: $color-gray6;
|
||||
.productDescriptionTitle {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin: 0px 0 8px 40px;
|
||||
@include mq(md, max) {
|
||||
margin-left: 0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
.productDescriptionText {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
.content {
|
||||
margin-left: 40px;
|
||||
@include mq(md, max) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shippingContainer {
|
||||
display: flex;
|
||||
@include mq(sm, max) {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
:global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
@include mq(sm, max) {
|
||||
display: block;
|
||||
}
|
||||
:global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
&::before {
|
||||
content: "CALCULAR FRETE";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray6;
|
||||
}
|
||||
}
|
||||
:global(.vtex-input-prefix__group) {
|
||||
width: 280px;
|
||||
height: 49px;
|
||||
border-radius: 0;
|
||||
@include mq(sm, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
: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;
|
||||
@include mq(sm, max) {
|
||||
left: 0;
|
||||
margin-top: 8px;
|
||||
text-align: end;
|
||||
}
|
||||
:last-child {
|
||||
color: $color-black;
|
||||
}
|
||||
:global(.vtex__icon-external-link) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
:global(.vtex-button) {
|
||||
height: 49px;
|
||||
width: 49px;
|
||||
margin-top: 27px;
|
||||
position: relative;
|
||||
right: 130px;
|
||||
top: 16px;
|
||||
font-size: 0;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(sm, max) {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
&::before {
|
||||
content: "OK";
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shippingTable {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
.shippingTableHead {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 15px;
|
||||
.shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.shippingTableHeadDeliveryName {
|
||||
margin-right: 39px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black;
|
||||
@include mq(sm, max) {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
font-size: 0;
|
||||
margin-right: 30px;
|
||||
@include mq(sm, max) {
|
||||
margin-right: 32px;
|
||||
}
|
||||
&::before {
|
||||
content: "Frete";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shippingTableBody {
|
||||
.shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.shippingTableCellDeliveryName {
|
||||
width: 82px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray10;
|
||||
@include mq(sm, max) {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray10;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryPrice {
|
||||
width: 50px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray10;
|
||||
}
|
||||
.shippingTableCell {
|
||||
padding: 0 0 15px;
|
||||
.shippingTableLabel {
|
||||
.shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.imageElement {
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user