diff --git a/react/typings/graphql.d.ts b/react/typings/graphql.d.ts
new file mode 100644
index 0000000..84017d3
--- /dev/null
+++ b/react/typings/graphql.d.ts
@@ -0,0 +1,6 @@
+declare module "*.graphql" {
+ import { DocumentNode } from "graphql";
+
+ const value: DocumentNode;
+ export default value;
+}
diff --git a/react/typings/storefront.d.ts b/react/typings/storefront.d.ts
new file mode 100644
index 0000000..4689dc6
--- /dev/null
+++ b/react/typings/storefront.d.ts
@@ -0,0 +1,15 @@
+import { FunctionComponent } from "react";
+
+declare global {
+ interface StorefrontFunctionComponent
+ extends FunctionComponent
{
+ getSchema?(props: P): GenericObject
+ schema?: GenericObject
+ }
+
+ interface StorefrontComponent
+ extends Component
{
+ getSchema?(props: P): GenericObject
+ schema: GenericObject
+ }
+}
diff --git a/react/typings/vtex.css-handles.ts b/react/typings/vtex.css-handles.ts
new file mode 100644
index 0000000..4f191a0
--- /dev/null
+++ b/react/typings/vtex.css-handles.ts
@@ -0,0 +1 @@
+declare module "vtex.css-handles"
diff --git a/react/typings/vtex.order-manager.d.ts b/react/typings/vtex.order-manager.d.ts
new file mode 100644
index 0000000..b563ce5
--- /dev/null
+++ b/react/typings/vtex.order-manager.d.ts
@@ -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;
+ type DefaultOrderFormUpdated = DefaultOrderFormOmited & {
+ items: OrderFormItem[] | null;
+ };
+
+ export const OrderFormContext = createContext>({
+ orderForm: DefaultOrderFormUpdated,
+ setOrderForm: noop,
+ error: undefined,
+ loading: false,
+ });
+
+ function useOrderForm() {
+ const context = useContext(OrderFormContext);
+
+ if (context === undefined) {
+ throw new Error(
+ "useOrderForm must be used within a OrderFormProvider"
+ );
+ }
+ return context as Context;
+ }
+
+ export type OrderFormItem = {
+ additionalInfo: {
+ brandName: string;
+ __typename: string;
+ };
+ attachments: Array;
+ attachmentOfferings: Array;
+ bundleItems: Array;
+ parentAssemblyBinding: any;
+ parentItemIndex: any;
+ sellingPriceWithAssemblies: any;
+ options: any;
+ availability: string;
+ detailUrl: string;
+ id: string;
+ imageUrls: Record;
+ listPrice: number;
+ manualPrice: any;
+ measurementUnit: string;
+ modalType: any;
+ name: string;
+ offerings: Array;
+ price: number;
+ priceTags: Array;
+ productCategories: Record;
+ productCategoryIds: string;
+ productRefId: string;
+ productId: string;
+ quantity: number;
+ seller: string;
+ sellingPrice: number;
+ skuName: string;
+ skuSpecifications: Array;
+ 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>;
+ useOrderForm: typeof useOrderForm;
+ };
+ export default _default;
+}
+
+declare module "vtex.order-manager/constants" {
+ export * from "vtex.order-manager/react/constants";
+}
+
+
diff --git a/react/typings/vtex.render-runtime.d.ts b/react/typings/vtex.render-runtime.d.ts
new file mode 100644
index 0000000..bfb1e97
--- /dev/null
+++ b/react/typings/vtex.render-runtime.d.ts
@@ -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;
+
+ interface ChildBlockProps {
+ id: string
+ }
+
+ export const ChildBlock: ComponentType;
+ 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: (
+ Component: ComponentType
+ ) => ComponentType;
+}
diff --git a/react/typings/vtex.styleguide.d.ts b/react/typings/vtex.styleguide.d.ts
new file mode 100644
index 0000000..6f1f00a
--- /dev/null
+++ b/react/typings/vtex.styleguide.d.ts
@@ -0,0 +1,9 @@
+declare module "vtex.styleguide" {
+ import { ComponentType } from "react";
+
+ export const Input: ComponentType;
+
+ interface InputProps {
+ [key: string]: any
+ }
+}
diff --git a/store/blocks/footer/footer.json b/store/blocks/footer/footer.json
index c2e5300..a9e00c5 100644
--- a/store/blocks/footer/footer.json
+++ b/store/blocks/footer/footer.json
@@ -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",
diff --git a/store/blocks/pdp/product-right-col.jsonc b/store/blocks/pdp/product-right-col.jsonc
index 9b523b2..35929e2 100644
--- a/store/blocks/pdp/product-right-col.jsonc
+++ b/store/blocks/pdp/product-right-col.jsonc
@@ -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"]
diff --git a/store/blocks/pdp/product-slider-layout.jsonc b/store/blocks/pdp/product-slider-layout.jsonc
index 753aa15..0146d9a 100644
--- a/store/blocks/pdp/product-slider-layout.jsonc
+++ b/store/blocks/pdp/product-slider-layout.jsonc
@@ -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"
]
},
diff --git a/store/blocks/pdp/product-tab-layout.jsonc b/store/blocks/pdp/product-tab-layout.jsonc
index 96cde4c..c87f80a 100644
--- a/store/blocks/pdp/product-tab-layout.jsonc
+++ b/store/blocks/pdp/product-tab-layout.jsonc
@@ -9,7 +9,7 @@
"html#tab-layout#description": {
"props": {
- "testId": "tab-layout"
+ "testId": "product-description"
},
"children": ["tab-layout#description"]
},
diff --git a/store/interfaces.json b/store/interfaces.json
index 9288222..ba68fff 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -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"
}
}
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 10d123f..f124b56 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -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;
diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css
index da0e430..78a531b 100644
--- a/styles/css/vtex.menu.css
+++ b/styles/css/vtex.menu.css
@@ -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;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index c22a76c..9243a0d 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -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;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 7a24b8e..ab40a65 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -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;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 921f1e8..9fb3b77 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -489,7 +489,6 @@
background: #000000;
border-radius: 0;
border: none;
- bottom: 1px;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
display: none;
diff --git a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss
index 56c310a..f4955c7 100644
--- a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss
@@ -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 {
diff --git a/styles/sass/pages/product/vtexMenu/vtex.menu.scss b/styles/sass/pages/product/vtexMenu/vtex.menu.scss
index 035d2a7..4e7f0ac 100644
--- a/styles/sass/pages/product/vtexMenu/vtex.menu.scss
+++ b/styles/sass/pages/product/vtexMenu/vtex.menu.scss
@@ -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;
- }
- }
-}
diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-price.scss b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss
index 1690d69..c2f638f 100644
--- a/styles/sass/pages/product/vtexProduct/vtex.product-price.scss
+++ b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss
@@ -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;
+ }
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss
index 8ff7932..46e092a 100644
--- a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss
@@ -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
- }
- }
- }
- }
- }
}
}
}
diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss
index f3176c5..aab0940 100644
--- a/styles/sass/pages/product/vtexStore/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss
@@ -487,7 +487,6 @@
background: $black;
border-radius: 0;
border: none;
- bottom: 1px;
:global(.vtex-button__label) {
display: none;
}