diff --git a/src/components/SectionCampaign/SectionCampaign.ts b/src/components/SectionCampaign/SectionCampaign.ts index a5c31328..58242b9d 100644 --- a/src/components/SectionCampaign/SectionCampaign.ts +++ b/src/components/SectionCampaign/SectionCampaign.ts @@ -16,11 +16,13 @@ import { JSONResult } from "@nosto/nosto-js/client" * * @property {string} placement - The placement identifier for the campaign. * @property {string} section - The section to be used for Section Rendering API based rendering. + * @property {string} [titleSelector] - CSS selector for the title element to inject the campaign title (attribute: "title-selector"). */ @customElement("nosto-section-campaign") export class SectionCampaign extends NostoElement { @property(String) placement!: string @property(String) section!: string + @property(String) titleSelector?: string async connectedCallback() { this.toggleAttribute("loading", true) @@ -56,8 +58,8 @@ export class SectionCampaign extends NostoElement { // Check if nosto-section-campaign element exists in the section body const nostoSectionCampaign = doc.body.querySelector(`nosto-section-campaign[placement="${this.placement}"]`) const targetElement = nostoSectionCampaign || doc.body.firstElementChild - if (rec.title && targetElement) { - const headingEl = targetElement.querySelector(".nosto-title") + if (rec.title && targetElement && this.titleSelector) { + const headingEl = targetElement.querySelector(this.titleSelector) if (headingEl) { headingEl.textContent = rec.title } diff --git a/test/components/SectionCampaign/SectionCampaign.spec.tsx b/test/components/SectionCampaign/SectionCampaign.spec.tsx index 0760ba43..1cae2262 100644 --- a/test/components/SectionCampaign/SectionCampaign.spec.tsx +++ b/test/components/SectionCampaign/SectionCampaign.spec.tsx @@ -49,7 +49,7 @@ describe("SectionCampaign", () => { expect(el.hasAttribute("loading")).toBe(false) }) - it("replaces title in element with nosto-title attribute", async () => { + it("does not replace title when title-selector is not provided", async () => { const products = [{ handle: "product-a" }] const { attributeProductClicksInCampaign, load } = mockNostoRecs({ placement1: { products, title: "Custom Title" } @@ -68,8 +68,8 @@ describe("SectionCampaign", () => { await el.connectedCallback() expect(load).toHaveBeenCalled() - expect(el.innerHTML).toContain("Custom Title") - expect(el.innerHTML).not.toContain("Default Title") + expect(el.innerHTML).toContain("Default Title") + expect(el.innerHTML).not.toContain("Custom Title") expect(attributeProductClicksInCampaign).toHaveBeenCalledWith(el, { products, title: "Custom Title" }) expect(el.hasAttribute("loading")).toBe(false) }) @@ -144,7 +144,7 @@ describe("SectionCampaign", () => { expect(el.hasAttribute("loading")).toBe(false) }) - it("replaces title in nested nosto-section-campaign element with nosto-title class", async () => { + it("does not replace title in nested nosto-section-campaign when title-selector is not provided", async () => { const products = [{ handle: "product-a" }] const { attributeProductClicksInCampaign, load } = mockNostoRecs({ placement1: { products, title: "Custom Title" } @@ -163,8 +163,8 @@ describe("SectionCampaign", () => { await el.connectedCallback() expect(load).toHaveBeenCalled() - expect(el.innerHTML).toContain("Custom Title") - expect(el.innerHTML).not.toContain("Default Title") + expect(el.innerHTML).toContain("Default Title") + expect(el.innerHTML).not.toContain("Custom Title") expect(attributeProductClicksInCampaign).toHaveBeenCalledWith(el, { products, title: "Custom Title" }) expect(el.hasAttribute("loading")).toBe(false) }) @@ -213,4 +213,57 @@ describe("SectionCampaign", () => { expect(attributeProductClicksInCampaign).toHaveBeenCalledWith(el, { products }) expect(el.hasAttribute("loading")).toBe(false) }) + + it("uses custom title-selector when provided", async () => { + const products = [{ handle: "product-a" }] + const { attributeProductClicksInCampaign, load } = mockNostoRecs({ + placement1: { products, title: "Custom Title" } + }) + + const sectionHTML = `