Campaign Cart SDK

The Campaign Cart SDK turns a plain HTML landing page into a working cart and checkout. You add data-next-* attributes to the markup you already have, and the SDK finds them, fetches the campaign's packages and prices, keeps a cart, and takes the visitor through checkout to an order, without you writing any JavaScript.

The shortest page that works:

CODE

<head>
  <meta name="next-api-key" content="{YOUR_CAMPAIGN_API_KEY}">
  <meta name="next-page-type" content="product">
  <script
    src="https://cdn.jsdelivr.net/gh/NextCommerceCo/campaign-cart@v0.4.38/dist/loader.js"
    defer
  ></script>
</head>

<body>
  <button data-next-action="add-to-cart" data-next-package-id="42">
    Add to cart <span data-next-display="package.price">$0.00</span>
  </button>

  <span data-next-display="cart.totalQuantity">0</span> items,
  total <span data-next-display="cart.total">$0.00</span>
</body>

That page adds package 42 to a cart, shows its price in the campaign's currency, and keeps the two totals in sync as the visitor clicks. Everything else on this site is a variation on those three steps: mark an element, name a value, react to a change.

Where to go next

Getting Started: from an empty file to a booted page: the head every funnel page carries, the page types, and how pages chain into a funnel. Then How It Works for the mental model behind the attributes.

Building Pages: one guide per funnel page, with markup condensed from the production starter templates: Checkout, Upsell, Receipt, and Landing & Presell.

Reference: Data Attributes for every data-next-* attribute real funnels use, JavaScript API for every window.next method, and Analytics Events for what the SDK reports and the configuration mistakes that produce wrong numbers.

API types: the objects you receive in events and read from the stores, generated from the source so they always match the shipped code: CartItem, Package, OrderData, and EventMap. Every export is listed in the left sidebar under Classes, Interfaces and Type Aliases.

Reading this site

Start Here and Building Pages are the tutorials. Read them in order the first time.
Reference is for looking things up mid-build: an attribute you found in markup, a method, an analytics event.
Pages under Classes, Interfaces and Type Aliases are generated from the source: the exact fields and signatures. The sidebar lists every export on its own page.
The version selector at the top of the page switches between released SDK versions. A page pinned to an older version documents that version, not this one.