Skip to main content

​
Khaime Cart Page

​
Intro

The [khaime_cart] shortcode renders a full Khaime-powered cart page that shares the same cart state as the storefront’s slide-out drawer, so items stay in sync across both.

​
Context

This shortcode is the second half of the Storefront flow: the grid’s cart icon either opens the drawer or navigates here, depending on the cart_display setting covered below. It ships inside the same plugin and uses the same Partner API key configured in Settings → Khaime.
This shortcode ships inside the Khaime Storefront plugin. No separate install.

​
Hows

​
When you need this

By default the storefront uses an overlay drawer for the cart. Use the cart page when you want:
  • A standalone /cart page that shoppers can bookmark or link to.
  • A pre-checkout review step instead of the drawer.

​
Basic usage

​
Wiring it to the storefront

The cart page only becomes the destination of the cart icon when the storefront is configured to use it. Set Cart display in Settings → Khaime (or pass cart_display on [khaime_storefront]) to one of:
page mode requires a published page containing [khaime_cart] at the configured Cart Page URL — otherwise clicking the cart icon 404s.
The legacy both mode was retired. Stores still set to both are automatically mapped to page on save.

​
Setup

  1. Create a WordPress page with slug cart (URL: /cart).
  2. Paste [khaime_cart] into the page content.
  3. In Settings → Khaime, set Cart display to page.
  4. Ensure Cart Page URL matches the page slug (default /cart).

​
Full example

​
Attributes

Theme is inherited from your storefront settings (accent color from Settings → Khaime → Primary color). There’s no per-shortcode theme override — styling stays consistent with the storefront.

​
Behavior

  • Live sync — items added/removed anywhere (drawer, storefront product cards, cart page) update everywhere the cart is visible.
  • Grouped by delivery model — a mixed cart of physical and digital items is split into a “Ship to you” group and an “Instant delivery” group; a single-type cart renders as one flat list without the grouping.
  • Empty state — shows the empty_message with a “Continue shopping” link routing to continue_url.
  • Checkout — the checkout button starts the same checkout flow used by the drawer.

​
CSS customization

Cart surfaces use the khaime-cart prefix:

​
Whys

A dedicated cart page exists as an alternative to the drawer because a slide-out panel isn’t always the right UX — some stores want a linkable, bookmarkable URL, or a full review step before checkout rather than an overlay. Both surfaces read from the same underlying cart session rather than keeping separate state, so a customer can add an item from the grid, later land on /cart directly, and see exactly what they expect — there’s one cart, just two ways to view it.

​
Why nots

  • Not a second cart. Drawer and page are two renderings of the same cart state, not independent carts — don’t expect them to diverge.
  • Doesn’t replace the storefront’s own cart icon logic. Switching cart_display to page changes where the existing cart icon points; it doesn’t add a second entry point.
  • No per-shortcode theme override. Color and styling follow the storefront’s admin settings — use the CSS classes above if you need something the settings page doesn’t expose.
  • page mode fails loudly, not silently, if misconfigured. A missing [khaime_cart] page at the configured URL 404s rather than falling back to the drawer.