diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts index c8e6d05cb51..5e5ee24d848 100644 --- a/packages/atomic/src/components.d.ts +++ b/packages/atomic/src/components.d.ts @@ -356,9 +356,9 @@ export namespace Components { */ "initializeWithEngine": (engine: CommerceEngine) => Promise; /** - * the commerce interface language. + * the commerce interface language. Will default to the value set in the Headless engine context if not provided. */ - "language": string; + "language"?: string; /** * The language assets path. By default, this will be a relative URL pointing to `./lang`. Example: "/mypublicpath/languages" */ @@ -500,9 +500,9 @@ export namespace Components { */ "initializeWithEngine": (engine: CommerceEngine) => Promise; /** - * The commerce interface language. + * The commerce interface language. Will default to the value set in the Headless engine context if not provided. */ - "language": string; + "language"?: string; /** * The language assets path. By default, this will be a relative URL pointing to `./lang`. Example: "/mypublicpath/languages" */ @@ -1901,10 +1901,6 @@ export namespace Components { "field": string; } interface AtomicProductPrice { - /** - * The currency to use in currency formatting. Allowed values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. - */ - "currency": string; } /** * The `atomic-product-rating` element renders a star rating. @@ -5760,7 +5756,7 @@ declare namespace LocalJSX { */ "iconAssetsPath"?: string; /** - * the commerce interface language. + * the commerce interface language. Will default to the value set in the Headless engine context if not provided. */ "language"?: string; /** @@ -5890,7 +5886,7 @@ declare namespace LocalJSX { */ "iconAssetsPath"?: string; /** - * The commerce interface language. + * The commerce interface language. Will default to the value set in the Headless engine context if not provided. */ "language"?: string; /** @@ -7218,10 +7214,6 @@ declare namespace LocalJSX { "field": string; } interface AtomicProductPrice { - /** - * The currency to use in currency formatting. Allowed values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. - */ - "currency"?: string; } /** * The `atomic-product-rating` element renders a star rating. diff --git a/packages/atomic/src/components/commerce/atomic-commerce-interface/atomic-commerce-interface.tsx b/packages/atomic/src/components/commerce/atomic-commerce-interface/atomic-commerce-interface.tsx index cae8de4d94b..0da28c7368e 100644 --- a/packages/atomic/src/components/commerce/atomic-commerce-interface/atomic-commerce-interface.tsx +++ b/packages/atomic/src/components/commerce/atomic-commerce-interface/atomic-commerce-interface.tsx @@ -115,8 +115,10 @@ export class AtomicCommerceInterface /** * the commerce interface language. + * + * Will default to the value set in the Headless engine context if not provided. */ - @Prop({reflect: true}) public language = 'en'; + @Prop({reflect: true, mutable: true}) public language?: string; /** * The commerce interface headless engine. @@ -209,6 +211,9 @@ export class AtomicCommerceInterface if (!this.commonInterfaceHelper.engineIsCreated(this.engine)) { return; } + if (!this.language) { + return; + } this.context.setLanguage(this.language); this.commonInterfaceHelper.onLanguageChange(); @@ -408,6 +413,12 @@ export class AtomicCommerceInterface this.context = buildContext(this.engine!); } + private initLanguage() { + if (!this.language) { + this.language = this.context.state.language; + } + } + private updateHash() { const newFragment = this.urlManager.state.fragment; @@ -433,6 +444,7 @@ export class AtomicCommerceInterface this.initSummary(); this.initUrlManager(); this.initContext(); + this.initLanguage(); this.initialized = true; } diff --git a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.tsx b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.tsx index 7a7f0e9cfe8..ebe2bca4b85 100644 --- a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.tsx +++ b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.tsx @@ -109,8 +109,10 @@ export class AtomicCommerceRecommendationInterface /** * The commerce interface language. + * + * Will default to the value set in the Headless engine context if not provided. */ - @Prop({reflect: true}) public language = 'en'; + @Prop({reflect: true, mutable: true}) public language?: string; /** * Whether to enable analytics. @@ -157,6 +159,10 @@ export class AtomicCommerceRecommendationInterface return; } + if (!this.language) { + return; + } + this.contextController.setLanguage(this.language); this.commonInterfaceHelper.onLanguageChange(); @@ -231,6 +237,12 @@ export class AtomicCommerceRecommendationInterface this.contextController = buildContext(this.bindings.engine); } + private initLanguage() { + if (!this.language) { + this.language = this.contextController.state.language; + } + } + private initAriaLive() { if ( Array.from(this.host.children).some( @@ -245,6 +257,7 @@ export class AtomicCommerceRecommendationInterface private async internalInitialization(initEngine: () => void) { await this.commonInterfaceHelper.onInitialization(initEngine); this.initContext(); + this.initLanguage(); } private addResourceBundle( diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx b/packages/atomic/src/components/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx index 4901024de2f..b22ed9bf813 100644 --- a/packages/atomic/src/components/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx +++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx @@ -1,6 +1,12 @@ -import {Product} from '@coveo/headless/commerce'; -import {Component, h, Prop} from '@stencil/core'; import { + buildContext, + Product, + Context, + ContextState, +} from '@coveo/headless/commerce'; +import {Component, h} from '@stencil/core'; +import { + BindStateToController, InitializableComponent, InitializeBindings, } from '../../../../utils/initialization-utils'; @@ -22,11 +28,12 @@ export class AtomicProductPrice public error!: Error; @ProductContext() private product!: Product; + public context!: Context; + @BindStateToController('context') contextState!: ContextState; - /** - * The currency to use in currency formatting. Allowed values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. - */ - @Prop({reflect: true}) public currency: string = 'USD'; + public initialize(): void { + this.context = buildContext(this.bindings.engine); + } public render() { const hasPromotionalPrice = @@ -34,15 +41,15 @@ export class AtomicProductPrice this.product?.ec_price !== undefined && this.product?.ec_promo_price < this.product?.ec_price; + const {currency} = this.contextState; + return (
- + {hasPromotionalPrice && ( )} diff --git a/packages/atomic/src/components/common/interface/interface-common.tsx b/packages/atomic/src/components/common/interface/interface-common.tsx index 354b51fd252..3d2d960fd8b 100644 --- a/packages/atomic/src/components/common/interface/interface-common.tsx +++ b/packages/atomic/src/components/common/interface/interface-common.tsx @@ -23,7 +23,7 @@ export interface BaseAtomicInterface languageAssetsPath: string; iconAssetsPath: string; logLevel?: LogLevel; - language: string; + language?: string; host: HTMLStencilElement; bindings: AnyBindings; error?: Error; @@ -104,7 +104,7 @@ export class CommonAtomicInterfaceHelper { if (this.atomicInterface.registerFieldsToInclude) { this.atomicInterface.registerFieldsToInclude(); } - loadDayjsLocale(this.atomicInterface.language); + loadDayjsLocale(this.language); await this.i18nPromise; this.initComponents(); } @@ -126,13 +126,13 @@ export class CommonAtomicInterfaceHelper { public onLanguageChange() { const {i18n, language} = this.atomicInterface; - loadDayjsLocale(language); + loadDayjsLocale(this.language); new Backend(i18n.services, i18nBackendOptions(this.atomicInterface)).read( - language, + this.language, i18nTranslationNamespace, (_: unknown, data: unknown) => { i18n.addResourceBundle( - language, + this.language, i18nTranslationNamespace, data, true, @@ -164,4 +164,8 @@ export class CommonAtomicInterfaceHelper { event.detail(this.atomicInterface.bindings) ); } + + private get language() { + return this.atomicInterface.language || 'en'; + } } diff --git a/packages/samples/atomic-react/src/pages/CommerceSearchPage.tsx b/packages/samples/atomic-react/src/pages/CommerceSearchPage.tsx index 62414f1a185..3b9b3d25acb 100644 --- a/packages/samples/atomic-react/src/pages/CommerceSearchPage.tsx +++ b/packages/samples/atomic-react/src/pages/CommerceSearchPage.tsx @@ -125,7 +125,7 @@ function MyTemplate() { - +