anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Entrega do Desafio #7

Merged
anacarolinaduartecavalcante merged 31 commits from feature/challenge-vtex-io into develop 2023-02-07 12:12:27 +00:00
Conversation 0 Commits 31 Files Changed 38 +694 -462
38 changed files with 694 additions and 462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/Authors.tsx Normal file
View File

@ -0,0 +1,3 @@
import Authors from "./components/Authors/Authors";
export default Authors;

3
react/Autores.tsx
View File

@ -1,3 +0,0 @@
import Autores from "./components/Autores/Autores";
export default Autores;

3
react/InstallmentProduct.tsx
View File

@ -1,3 +0,0 @@
import InstallmentProduct from "./components/InstallmentProduct/InstallmentProduct";
export default InstallmentProduct;

13
react/components/Autores/Autores.tsx → react/components/Authors/Authors.tsx
View File

@ -1,17 +1,18 @@
import React from "react";
import styles from "./styles.css";
const Autores = () => {
const Authors = () => {
return (
<div className="vtex-menu-2-x-AutoresBlock">
<ul className="vtex-menu-2-x-Autores-Group">
<li className="vtex-menu-2-x-Autores-List">
<div>
<ul className={styles.AutoresGroup}>
<li className={styles.AutoresList}>
Powered by
<img
src="https://agenciamagma.vteximg.com.br/arquivos/logovtex-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone logo vtex"
/>
</li>
<li className="vtex-menu-2-x-Autores-List">
<li className={styles.AutoresList}>
Developed by
<img
src="https://agenciamagma.vteximg.com.br/arquivos/logom3-m3academy-anacarolinaduartecavalcante.svg"
@ -23,4 +24,4 @@ const Autores = () => {
);
};
export default Autores;
export default Authors;

20
react/components/Authors/styles.css Normal file
View File

@ -0,0 +1,20 @@
/* Footer Credits */
.AutoresGroup {
display: flex;
align-items: center;
column-gap: 15.73px;
margin: 0;
padding: 0;
}
.AutoresList {
display: flex;
align-items: center;
font-weight: 400;
font-size: 10px;
line-height: 12px;
color: #ffffff;
column-gap: 8.72px;
}

27
react/components/InstallmentProduct/InstallmentProduct.tsx
View File

@ -1,27 +0,0 @@
import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./styles.css";
const InstallmentProduct = () => {
const product = useProduct();
const productWithInstallments = {
numberOfInstallments:
product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
.NumberOfInstallments,
value:
product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value,
};
return (
<p className={styles.PriceContent}>
<span style={{fontWeight: "700"}}>{productWithInstallments.numberOfInstallments}x&nbsp;</span>
de&nbsp;
<span style={{fontWeight: "700"}}>
R$&nbsp;
{productWithInstallments.value?.toFixed(2).toString().replace(".", ",")}
</span>{" "}
sem juros
</p>
);
};
export default InstallmentProduct;

7
react/components/InstallmentProduct/styles.css
View File

@ -1,7 +0,0 @@
.PriceContent {
margin: 0;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}

27
react/components/PaymentMethods/PaymentMethods.tsx
View File

@ -1,65 +1,66 @@
import React from "react";
import styles from "./styles.css";
const PaymentMethods = () => {
return (
<div className="vtex-menu-2-x-FooterRightBlock">
<span className="vtex-menu-2-x-SpanTitleBig">Formas de pagamento</span>
<ul className="vtex-menu-2-x-UlGroup">
<ul className="vtex-menu-2-x-UlSecondary">
<div className={styles.FooterRightBlock}>
<span className={styles.SpanTitleBig}>Formas de pagamento</span>
<ul className={styles.UlGroup}>
<ul className={styles.UlSecondary}>
<li>
<img
className="vtex-menu-2-x-ImgCard"
className={styles.ImgCard}
src="https://agenciamagma.vteximg.com.br/arquivos/mastercard-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone mastercard"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
className={styles.ImgCard}
src="https://agenciamagma.vteximg.com.br/arquivos/diners-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone diners"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
className={styles.ImgCard}
src="https://agenciamagma.vteximg.com.br/arquivos/boleto-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone boleto"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
className={styles.ImgCard}
src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone pix"
/>
</li>
</ul>
<ul className="vtex-menu-2-x-UlSecondary">
<ul className={styles.UlSecondary}>
<li>
<img
className="vtex-menu-2-x-ImgCard"
className={styles.ImgCard}
src="https://agenciamagma.vteximg.com.br/arquivos/elo-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone elo"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
className={styles.ImgCard}
src="https://agenciamagma.vteximg.com.br/arquivos/hipercard-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone hipercard"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
className={styles.ImgCard}
src="https://agenciamagma.vteximg.com.br/arquivos/visa-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone visa"
/>
</li>
<li>
<img
className="vtex-menu-2-x-ImgCard"
className={styles.ImgCard}
src="https://agenciamagma.vteximg.com.br/arquivos/amex-icon-m3academy-anacarolinaduartecavalcante.svg"
alt="ícone amex"
/>

92
react/components/PaymentMethods/styles.css Normal file
View File

@ -0,0 +1,92 @@
.FooterRightBlock {
margin-bottom: 16px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.FooterRightBlock {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.FooterRightBlock {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
}
.SpanTitle {
color: #ffffff;
font-weight: 400;
font-size: 14px;
line-height: 38px;
}
.SpanTitleBig {
color: #ffffff;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.SpanTitleBig {
font-size: 14px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.SpanTitleBig {
font-size: 14px;
}
}
.UlGroup {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
row-gap: 4px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.UlGroup {
align-items: center;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.UlGroup {
justify-content: center;
align-items: center;
}
}
.UlSecondary {
display: flex;
padding: 0;
margin: 0;
column-gap: 8px;
list-style: none;
}
@media (max-width: 1025px) and (min-width: 768px) {
.ImgCard {
width: 42px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.ImgCard {
width: 42px;
}
}

4
react/components/Pix/Pix.tsx
View File

@ -18,9 +18,9 @@ const Pix = () => {
alt="logo pix"
/>
<div className={styles.PixDiscount}>
<span className={styles.TextPixDiscount}>
<p className={styles.TextPixDiscount}>
R$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")}
</span>
</p>
<span className={styles.TextDiscount}>10 % de desconto</span>
</div>
</div>

3
react/components/Pix/styles.css
View File

@ -22,10 +22,11 @@
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
margin: 0;
}
.TextDiscount {
font-weight: 300 ;
font-weight: 300;
font-size: 13px;
line-height: 18px;
color: #929292;

12
react/components/Social/Social.tsx
View File

@ -1,11 +1,12 @@
import React from "react";
import styles from "./styles.css";
const Social = () => {
return (
<div className="vtex-menu-2-x-FooterRightBlock">
<span className="vtex-menu-2-x-SpanTitle">Nos siga</span>
<ul className="vtex-menu-2-x-UlGroup">
<ul className="vtex-menu-2-x-UlSecondary">
<div className={styles.FooterRightBlockSocial}>
<span className={styles.SpanTitleSocial}>Nos siga</span>
<ul className={styles.UlGroupSocial}>
<ul className={styles.UlSecondarySocial}>
<li>
<a href="/">
<img
@ -47,7 +48,7 @@ const Social = () => {
</a>
</li>
</ul>
<ul className="vtex-menu-2-x-UlSecondary">
<ul className={styles.UlSecondarySocial}>
<li>
<a href="/">
<img
@ -73,7 +74,6 @@ const Social = () => {
</a>
</li>
<li>
{" "}
<a href="/">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/youtube-m3academy-anacarolinaduartecavalcante.svg"

59
react/components/Social/styles.css Normal file
View File

@ -0,0 +1,59 @@
.FooterRightBlockSocial {
margin-bottom: 16px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.FooterRightBlockSocial {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.FooterRightBlockSocial {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
}
.SpanTitleSocial {
color: #ffffff;
font-weight: 400;
font-size: 14px;
line-height: 38px;
}
.UlGroupSocial {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
row-gap: 4px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.UlGroupSocial {
align-items: center;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.UlGroupSocial {
justify-content: center;
align-items: center;
}
}
.UlSecondarySocial {
display: flex;
padding: 0;
margin: 0;
column-gap: 8px;
list-style: none;
}

7
react/index.d.ts vendored
View File

@ -1,7 +0,0 @@
declare module "*.css" {
interface IClassNames {
[className: string]: string;
}
const classNames: IClassNames;
export = classNames;
}

8
react/tsconfig.json
View File

@ -7,11 +7,5 @@
"moduleResolution": "node",
"target": "es2017"
},
"include": [
"./typings/*.d.ts",
"./**/*.tsx",
"./**/*.ts",
"components/SwiperComponent/SwiperComponent.tsxonent.tsx",
"SwiperComponent.tsxonenSwiperComponent.tsxwiperComponent.tsx"
]
"include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
}

4
react/typings/css.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
declare module "*.css" {
const css: any;
export default css;
}

7
react/typings/global.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
export interface TimeSplit {
hours: string
minutes: string
seconds: string
}
type GenericObject = Record<string, any>

6
react/typings/graphql.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
declare module "*.graphql" {
import { DocumentNode } from "graphql";
const value: DocumentNode;
export default value;
}

15
react/typings/storefront.d.ts vendored Normal file
View File

@ -0,0 +1,15 @@
import { FunctionComponent } from "react";
declare global {
interface StorefrontFunctionComponent<P = GenericObject>
extends FunctionComponent<P> {
getSchema?(props: P): GenericObject
schema?: GenericObject
}
interface StorefrontComponent<P = GenericObject, S = GenericObject>
extends Component<P, S> {
getSchema?(props: P): GenericObject
schema: GenericObject
}
}

1
react/typings/vtex.css-handles.ts Normal file
View File

@ -0,0 +1 @@
declare module "vtex.css-handles"

103
react/typings/vtex.order-manager.d.ts vendored Normal file
View File

@ -0,0 +1,103 @@
/* eslint-disable no-inner-declarations */
declare module "vtex.order-manager/OrderQueue" {
export * from "vtex.order-manager/react/OrderQueue";
export { default } from "vtex.order-manager/react/OrderQueue";
export const QueueStatus = {
PENDING: "Pending",
FULFILLED: "Fulfilled",
} as const;
}
declare module "vtex.order-manager/OrderForm" {
import { createContext, useContext } from "react";
import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants";
import type { Context, OrderForm } from "@vtex/order-manager/src/typings";
type DefaultOrderForm = typeof DEFAULT_ORDER_FORM;
type DefaultOrderFormOmited = Omit<DefaultOrderForm, "items">;
type DefaultOrderFormUpdated = DefaultOrderFormOmited & {
items: OrderFormItem[] | null;
};
export const OrderFormContext = createContext<Context<OrderForm>>({
orderForm: DefaultOrderFormUpdated,
setOrderForm: noop,
error: undefined,
loading: false,
});
function useOrderForm<O extends OrderForm = DefaultOrderFormUpdated>() {
const context = useContext(OrderFormContext);
if (context === undefined) {
throw new Error(
"useOrderForm must be used within a OrderFormProvider"
);
}
return context as Context<O>;
}
export type OrderFormItem = {
additionalInfo: {
brandName: string;
__typename: string;
};
attachments: Array<any>;
attachmentOfferings: Array<any>;
bundleItems: Array<any>;
parentAssemblyBinding: any;
parentItemIndex: any;
sellingPriceWithAssemblies: any;
options: any;
availability: string;
detailUrl: string;
id: string;
imageUrls: Record<string, string>;
listPrice: number;
manualPrice: any;
measurementUnit: string;
modalType: any;
name: string;
offerings: Array<any>;
price: number;
priceTags: Array<any>;
productCategories: Record<string, string>;
productCategoryIds: string;
productRefId: string;
productId: string;
quantity: number;
seller: string;
sellingPrice: number;
skuName: string;
skuSpecifications: Array<any>;
unitMultiplier: number;
uniqueId: string;
refId: string;
isGift: boolean;
priceDefinition: {
calculatedSellingPrice: number;
total: number;
sellingPrices: Array<{
quantity: number;
value: number;
__typename: string;
}>;
__typename: string;
};
__typename: string;
};
export { OrderFormProvider, useOrderForm };
declare const _default: {
OrderFormProvider: import("react").FC<Record<string, never>>;
useOrderForm: typeof useOrderForm;
};
export default _default;
}
declare module "vtex.order-manager/constants" {
export * from "vtex.order-manager/react/constants";
}

38
react/typings/vtex.render-runtime.d.ts vendored Normal file
View File

@ -0,0 +1,38 @@
/* Typings for `render-runtime` */
declare module "vtex.render-runtime" {
import { ComponentType, ReactElement, ReactType } from "react";
export interface NavigationOptions {
page: string
params?: any
}
export interface RenderContextProps {
runtime: {
navigate: (options: NavigationOptions) => void
}
}
interface ExtensionPointProps {
id: string
[key: string]: any
}
export const ExtensionPoint: ComponentType<ExtensionPointProps>;
interface ChildBlockProps {
id: string
}
export const ChildBlock: ComponentType<ChildBlockProps>;
export const useChildBlock = () => GenericObject;
export const Helmet: ReactElement;
export const Link: ReactType;
export const NoSSR: ReactElement;
export const RenderContextConsumer: ReactElement;
export const canUseDOM: boolean;
export const withRuntimeContext: <TOriginalProps extends GenericObject>(
Component: ComponentType<TOriginalProps & RenderContextProps>
) => ComponentType<TOriginalProps>;
}

9
react/typings/vtex.styleguide.d.ts vendored Normal file
View File

@ -0,0 +1,9 @@
declare module "vtex.styleguide" {
import { ComponentType } from "react";
export const Input: ComponentType<InputProps>;
interface InputProps {
[key: string]: any
}
}

10
store/blocks/footer/footer.json
View File

@ -55,7 +55,7 @@
"html#footer-3-desktop": {
"children": [
"html#footer-credits-information",
"html#footer-credits-autores"
"html#footer-credits-authors"
],
"props": {
"blockClass": "credits"
@ -71,11 +71,11 @@
"rich-text#footer-cnpj"
]
},
"html#footer-credits-autores": {
"html#footer-credits-authors": {
"props": {
"blockClass": "autores-component"
"blockClass": "authors-component"
},
"children": ["autores-component"]
"children": ["authors-component"]
},
"rich-text#footer": {
"props": {
@ -125,7 +125,7 @@
"html#footer-1-mobile": {
"children": [
"html#footer-credits-information",
"html#footer-credits-autores"
"html#footer-credits-authors"
],
"props": {
"blockClass": "footer-credits-information-mobile",

40
store/blocks/pdp/product-right-col.jsonc
View File

@ -7,8 +7,8 @@
"children": [
"html#identification-product",
// "product-rating-summary",
"flex-layout.row#selling-price",
"installment-product-component",
"html#prices",
"html#product-installments",
"html#pix-component",
// "product-separator",
"html#sku-selector",
@ -24,8 +24,32 @@
]
},
"html#prices": {
"props": {
"testId": "product-price"
},
"children": ["flex-layout.row#selling-price"]
},
"html#product-installments": {
"props": {
"testId": "product-installments"
},
"children": ["product-installments"]
},
"product-installments": {
"props": {
"blockClass": "product-installments",
"markers": ["discount"],
"message": "{installmentsNumber} de {installmentValue} sem juros",
"installmentsCriteria": "max-quantity-without-interest"
}
},
"html#product-name": {
"props": {
"testId": "product-name",
"marginBottom": 3
},
"children": ["vtex.store-components:product-name"]
@ -35,7 +59,13 @@
"props": {
"blockClass": "identification-product-content"
},
"children": ["html#product-name", "product-identifier.product"]
"children": ["html#product-name", "html#product-identifier.product"]
},
"html#product-identifier.product": {
"props": {
"testId": "product-code"
},
"children": ["product-identifier.product"]
},
"html#pix-component": {
@ -88,8 +118,8 @@
"children": ["add-to-cart-button"]
},
"html#shipping-simulator":{
"props":{
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator"
},
"children": ["shipping-simulator"]

4
store/blocks/pdp/product-slider-layout.jsonc
View File

@ -25,7 +25,9 @@
"product-summary-image#slider-images",
"product-summary-name",
// "product-summary-space",
"product-summary-price"
// "product-summary-price"
"product-list-price",
"product-selling-price"
]
},

2
store/blocks/pdp/product-tab-layout.jsonc
View File

@ -9,7 +9,7 @@
"html#tab-layout#description": {
"props": {
"testId": "tab-layout"
"testId": "product-description"
},
"children": ["tab-layout#description"]
},

7
store/interfaces.json
View File

@ -6,9 +6,6 @@
"component": "html",
"composition": "children"
},
"installment-product-component": {
"component": "InstallmentProduct"
},
"pix-component": {
"component": "Pix"
},
@ -21,7 +18,7 @@
"payment-methods-component": {
"component": "PaymentMethods"
},
"autores-component": {
"component": "Autores"
"authors-component": {
"component": "Authors"
}
}

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

@ -8,6 +8,7 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
.flexRow--main-header {
display: flex;
justify-content: center;
@ -118,6 +119,19 @@
width: 100% !important;
}
.flexRowContent :global(.vtex-product-price-1-x-sellingPrice) {
margin-top: 24px;
}
.flexRowContent :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) {
height: 38px;
}
.flexRowContent :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child {
background: #000000;
padding: 12px 64px;

96
styles/css/vtex.menu.css
View File

@ -148,100 +148,4 @@
display: flex;
justify-content: center;
}
}
.FooterRightBlock {
margin-bottom: 16px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.FooterRightBlock {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.FooterRightBlock {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
}
.FooterRightBlock .SpanTitle {
color: #ffffff;
font-weight: 400;
font-size: 14px;
line-height: 38px;
}
.FooterRightBlock .SpanTitleBig {
color: #ffffff;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.FooterRightBlock .SpanTitleBig {
font-size: 14px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.FooterRightBlock .SpanTitleBig {
font-size: 14px;
}
}
.FooterRightBlock .UlGroup {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
row-gap: 4px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.FooterRightBlock .UlGroup {
align-items: center;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.FooterRightBlock .UlGroup {
justify-content: center;
align-items: center;
}
}
.FooterRightBlock .UlGroup .UlSecondary {
display: flex;
padding: 0;
margin: 0;
column-gap: 8px;
list-style: none;
}
@media (max-width: 1025px) and (min-width: 768px) {
.FooterRightBlock .UlGroup .UlSecondary .ImgCard {
width: 42px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.FooterRightBlock .UlGroup .UlSecondary .ImgCard {
width: 42px;
}
}
.AutoresBlock .Autores-Group {
display: flex;
align-items: center;
column-gap: 15.73px;
margin: 0;
padding: 0;
}
.AutoresBlock .Autores-Group .Autores-List {
display: flex;
align-items: center;
font-weight: 400;
font-size: 10px;
line-height: 12px;
color: #ffffff;
column-gap: 8.72px;
}

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

@ -13,4 +13,122 @@
line-height: 38px;
color: #000000;
margin-top: 24px;
}
.installments--product-installments {
margin: 0;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.installments--product-installments .installmentsNumber {
font-weight: 700;
}
.installments--product-installments .installmentsNumber::after {
content: "x";
margin-left: 4px;
}
.installments--product-installments .installmentValue {
font-weight: 700;
}
.listPrice {
padding: 0;
text-align: center;
height: 19px !important;
display: flex;
justify-content: center;
margin-bottom: 8px;
line-height: 19px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.listPrice {
height: 16px !important;
line-height: 16px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.listPrice {
height: 16px !important;
line-height: 16px;
}
}
.listPrice :global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
.listPrice .listPriceValue {
padding: 0;
}
.listPrice .listPriceValue .currencyContainer {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-decoration-line: line-through;
color: #bababa;
display: block;
}
@media (max-width: 1025px) and (min-width: 768px) {
.listPrice .listPriceValue .currencyContainer {
font-size: 12px;
line-height: 16px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.listPrice .listPriceValue .currencyContainer {
font-size: 12px;
line-height: 16px;
}
}
.listPrice .listPriceValue .currencyContainer::before {
content: "de ";
}
.listPrice .listPriceValue .currencyContainer::after {
content: " por";
}
.sellingPrice {
display: flex;
justify-content: center;
margin: 0;
}
@media (max-width: 1025px) and (min-width: 768px) {
.sellingPrice {
line-height: 25px;
}
}
.sellingPrice .sellingPriceValue {
height: 33px;
line-height: 33px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.sellingPrice .sellingPriceValue {
line-height: 25px;
height: 25px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.sellingPrice .sellingPriceValue {
line-height: 25px;
height: 25px;
}
}
.sellingPrice .sellingPriceValue .currencyContainer {
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000000;
}
@media (max-width: 1025px) and (min-width: 768px) {
.sellingPrice .sellingPriceValue .currencyContainer {
font-size: 18px;
line-height: 25px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.sellingPrice .sellingPriceValue .currencyContainer {
font-size: 18px;
line-height: 25px;
}
}

100
styles/css/vtex.slider-layout.css
View File

@ -76,22 +76,7 @@
border-radius: 0;
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
min-height: 448.4px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
min-height: 543.4px;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
min-height: 383.2px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
min-height: 254.8px;
}
height: auto;
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) {
padding: 0;
@ -153,89 +138,6 @@
min-width: 100%;
}
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) {
padding: 0;
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
row-gap: 8px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
height: 60px;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
height: 49px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
height: 49px;
}
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) {
padding: 0;
text-align: center;
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) {
padding: 0;
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-decoration-line: line-through;
color: #bababa;
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) {
font-size: 12px;
line-height: 16px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) {
font-size: 12px;
line-height: 16px;
}
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::before {
content: "de ";
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::after {
content: " por";
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
display: flex;
justify-content: center;
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000000;
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) {
font-size: 18px;
line-height: 25px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) {
font-size: 18px;
line-height: 25px;
}
}
.sliderLayoutContainer--carousel .sliderArrows {
padding: 0;
margin: 0;

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

@ -489,7 +489,6 @@
background: #000000;
border-radius: 0;
border: none;
bottom: 1px;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
display: none;

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

@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
//Header
.flexRow--main-header {
@ -128,6 +130,23 @@
width: 100% !important;
}
//Product Price
.flexRowContent {
:global(.vtex-product-price-1-x-sellingPrice) {
margin-top: 24px;
:global(.vtex-product-price-1-x-sellingPriceValue) {
height: 38px;
:global(.vtex-product-price-1-x-currencyContainer) {
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: $black;
}
}
}
}
//Botao add Cart
.flexRow {

86
styles/sass/pages/product/vtexMenu/vtex.menu.scss
View File

@ -127,89 +127,3 @@
}
}
}
.FooterRightBlock {
margin-bottom: 16px;
@media (max-width: 1025px) and (min-width: 768px) {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
@media (max-width: 768px) and (min-width: 375px) {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
.SpanTitle {
color: $white;
font-weight: 400;
font-size: 14px;
line-height: 38px;
}
.SpanTitleBig {
color: $white;
font-weight: 400;
font-size: 18px;
line-height: 38px;
@media (max-width: 1025px) and (min-width: 768px) {
font-size: 14px;
}
@media (max-width: 768px) and (min-width: 375px) {
font-size: 14px;
}
}
.UlGroup {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
row-gap: 4px;
@media (max-width: 1025px) and (min-width: 768px) {
align-items: center;
}
@media (max-width: 768px) and (min-width: 375px) {
justify-content: center;
align-items: center;
}
.UlSecondary {
display: flex;
padding: 0;
margin: 0;
column-gap: 8px;
list-style: none;
.ImgCard {
@media (max-width: 1025px) and (min-width: 768px) {
width: 42px;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 42px;
}
}
}
}
}
// Footer Credits
.AutoresBlock {
.Autores-Group {
display: flex;
align-items: center;
column-gap: 15.73px;
margin: 0;
padding: 0;
.Autores-List {
display: flex;
align-items: center;
font-weight: 400;
font-size: 10px;
line-height: 12px;
color: $white;
column-gap: 8.72px;
}
}
}

107
styles/sass/pages/product/vtexProduct/vtex.product-price.scss
View File

@ -1,4 +1,4 @@
//dados produto
//Dados produto
.sellingPrice {
font-weight: 700;
@ -7,3 +7,108 @@
color: $black;
margin-top: 24px;
}
//Parcelamento
.installments--product-installments {
margin: 0;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $gray;
.installmentsNumber {
font-weight: 700;
&::after {
content: "x";
margin-left: 4px;
}
}
.installmentValue {
font-weight: 700;
}
}
//Slider
.listPrice {
padding: 0;
text-align: center;
height: 19px !important;
display: flex;
justify-content: center;
margin-bottom: 8px;
line-height: 19px;
@media (max-width: 1025px) and (min-width: 768px) {
height: 16px !important;
line-height: 16px;
}
@media (max-width: 768px) and (min-width: 375px) {
height: 16px !important;
line-height: 16px;
}
:global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
.listPriceValue {
padding: 0;
.currencyContainer {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-decoration-line: line-through;
color: $BABABA;
display: block;
@media (max-width: 1025px) and (min-width: 768px) {
font-size: 12px;
line-height: 16px;
}
@media (max-width: 768px) and (min-width: 375px) {
font-size: 12px;
line-height: 16px;
}
&::before {
content: "de ";
}
&::after {
content: " por";
}
}
}
}
.sellingPrice {
display: flex;
justify-content: center;
margin: 0;
@media (max-width: 1025px) and (min-width: 768px) {
line-height: 25px;
}
.sellingPriceValue {
height: 33px;
line-height: 33px;
@media (max-width: 1025px) and (min-width: 768px) {
line-height: 25px;
height: 25px;
}
@media (max-width: 768px) and (min-width: 375px) {
line-height: 25px;
height: 25px;
}
.currencyContainer {
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: $black;
@media (max-width: 1025px) and (min-width: 768px) {
font-size: 18px;
line-height: 25px;
}
@media (max-width: 768px) and (min-width: 375px) {
font-size: 18px;
line-height: 25px;
}
}
}
}

80
styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss
View File

@ -47,16 +47,7 @@
max-width: 100% !important;
border-radius: 0;
:global(.vtex-product-summary-2-x-clearLink) {
min-height: 448.4px;
@media (max-width: 2561px) and (min-width: 1920px) {
min-height: 543.4px;
}
@media (max-width: 1025px) and (min-width: 768px) {
min-height: 383.2px;
}
@media (max-width: 768px) and (min-width: 375px) {
min-height: 254.8px;
}
height: auto;
:global(.vtex-product-summary-2-x-element) {
padding: 0;
:global(.vtex-product-summary-2-x-nameContainer) {
@ -108,75 +99,6 @@
}
}
}
:global(.vtex-product-summary-2-x-priceContainer) {
padding: 0;
:global(.vtex-store-components-3-x-priceContainer) {
row-gap: 8px;
@media (max-width: 2561px) and (min-width: 1920px) {
height: 60px;
}
@media (max-width: 1025px) and (min-width: 768px) {
height: 49px;
}
@media (max-width: 768px) and (min-width: 375px) {
height: 49px;
}
:global(.vtex-store-components-3-x-listPrice) {
padding: 0;
text-align: center;
:global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-listPriceValue) {
padding: 0;
:global(.vtex-product-summary-2-x-currencyContainer) {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-decoration-line: line-through;
color: $BABABA;
@media (max-width: 1025px) and (min-width: 768px) {
font-size: 12px;
line-height: 16px;
}
@media (max-width: 768px) and (min-width: 375px) {
font-size: 12px;
line-height: 16px;
}
&::before {
content: "de ";
}
&::after {
content: " por";
}
}
}
}
:global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
display: flex;
justify-content: center;
:global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-sellingPrice) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: $black;
@media (max-width: 1025px) and (min-width: 768px) {
font-size: 18px;
line-height: 25px;
}
@media (max-width: 768px) and (min-width: 375px) {
font-size: 18px;
line-height: 25px
}
}
}
}
}
}
}
}

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

@ -487,7 +487,6 @@
background: $black;
border-radius: 0;
border: none;
bottom: 1px;
:global(.vtex-button__label) {
display: none;
}