feat: add BundledCampaign

Author: timowestnosto

src/components/BundledCampaign/BundledCampaign.ts

@@ -0,0 +1,75 @@
+import { nostojs } from "@nosto/nosto-js"
+import { postJSON } from "@/utils/fetch"
+import { customElement } from "../decorators"
+import { NostoElement } from "../Element"
+import { addRequest } from "../Campaign/orchestrator"
+import { JSONResult } from "@nosto/nosto-js/client"
+
+/**
+ * BundledCampaign is a custom element that fetches Nosto placement results and renders the results
+ * using a Shopify section template via the Bundled Section Rendering API.
+ * Campaign result metadata is persisted in cart attributes
+ *
+ * @property {string} placement - The placement identifier for the campaign.
+ * @property {string} section - The section to be used for Section Rendering API based rendering.
+ */
+@customElement("nosto-bundled-campaign")
+export class BundledCampaign extends NostoElement {
+  /** @private */
+  static attributes = {
+    placement: String,
+    handles: String,
+    section: String
+  }
+
+  placement!: string
+  handles!: string
+  section!: string
+
+  async connectedCallback() {
+    this.toggleAttribute("loading", true)
+    try {
+      await this.#initializeMarkup()
+    } finally {
+      this.toggleAttribute("loading", false)
+    }
+  }
+
+  async #initializeMarkup() {
+    const api = await new Promise(nostojs)
+    const rec = (await addRequest({
+      placement: this.placement,
+      responseMode: "JSON_ORIGINAL" // TODO use a responseMode that returns only the needed data
+    })) as JSONResult
+    if (!rec) {
+      return
+    }
+    const handles = rec.products.map(product => product.handle).join(":")
+    if (this.handles !== handles) {
+        const markup = await getSectionMarkup(this, handles, rec)
+        this.innerHTML = markup
+    }
+    api.attributeProductClicksInCampaign(this, rec)
+  }
+}
+
+async function getSectionMarkup(element: BundledCampaign, handles: string, rec: JSONResult) {
+  const target = new URL("/cart/update.js", window.location.href)
+  const payload = {
+    attributes: {
+      [`nosto_${element.placement}_title`]: rec.title || "",
+      [`nosto_${element.placement}_handles`]: handles
+    },
+    sections: element.section,
+  }
+  const sectionHtml = await postJSON(target.href, payload)
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(sectionHtml, "text/html")
+  return doc.querySelector(`nosto-bundled-campaign[placement="${element.placement}"]`)?.innerHTML || ""
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "nosto-bundled-campaign": BundledCampaign
+  }
+}

src/utils/fetch.ts

@@ -1,11 +1,12 @@
 /**
  * Internal function to handle common fetch logic with error checking.
  * @param url - The URL to fetch
+ * @param options - Optional fetch options
  * @returns Promise that resolves to the Response object
  * @throws Error if the fetch request fails
  */
-async function fetchWithErrorHandling(url: string) {
-  const response = await fetch(url)
+async function fetchWithErrorHandling(url: string, options?: RequestInit) {
+  const response = await fetch(url, options)
   if (!response.ok) {
     throw new Error(`Failed to fetch ${url}: ${response.status} ${response.statusText}`)
   }
@@ -33,3 +34,21 @@ export async function getJSON(url: string) {
   const response = await fetchWithErrorHandling(url)
   return response.json()
 }
+
+/**
+ * Posts a JSON payload to a URL and returns the response as a JSON object.
+ * @param url - The URL to post to
+ * @param data - The JSON payload to send
+ * @returns Promise that resolves to the parsed JSON response
+ * @throws Error if the fetch request fails or JSON parsing fails
+ */
+export async function postJSON(url: string, data: object) {
+  const response = await fetchWithErrorHandling(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(data)
+  })
+  return response.json()
+}