Headless Shopping Cart

Overview

Web components which convert any web page into a shopping cart.

This includes components to:-

• Dynamically update price and qty for listed items.
• Add items to a cart and manage cart.
• Authenticate and checkout.

Once customers are authenticated, price / qty shown and the types of payment / shipping methods available may change. This functionality is usually specific to B2B e-commerce.

For a website to use these components, it should include a single .js file and the appropriate components in the pages HTML.

Web Components

Required web components

Item Price

Displays the price of a item

<s2s-item-price 
    sku="abc" 
    format="international" 
    currency="USD" />

e.g.

<s2s-item-price >USD 1,234.56</s2s-item-price>

Item Qty

Displays the available qty

<s2s-item-qty 
    sku="abc" />

e.g.

<s2s-item-qty >10</s2s-item-qty>

Item Add

<s2s-item-add 
    sku="abc"
    over-order="false"
    dynamic-price="true"
    dynamic-qty="true"
    description="Wonderful new shiny thing"
    title="Thing One"
    img="/some/image/link.jpg" />

Should create a clickable link if the item can be ordered

Cart Checkout

<s2s-cart-checkout />

Creates a link to checkout

Cart Item Count

<s2s-cart-item-count />

Summary of items in cart

Cart Item Total

<s2s-cart-item-total />

Summary of cart total

Customer Account

<s2s-customer-account />

Login link for customer to authenticate. TBC

JSON API Models

Web components will need to communicate with an external API. The below models would need to be implemented.

User Authenticate

Fetch token for user.

Example Endpoint:

POST /users/authenticate

{
  "user": {
    "username": "string",
    "password": "string"
  }
}

Response Model Schema:

{
  "user": {
    "id": "long",
    "email": "string",
    "name": "string",
    "surname": "string",
    "token": "string",
  }
}

Items list

Verify a list of products and retrieve price / qty per product, if required.

Example Endpoint:

POST /items?token=xyz

["sku 1", "sku 2", ...]

Response Model Schema:

[
  {
    "sku": "string",
    "price": {
      "was": "number",
      "now": "number"
    },
    "qty": {
      "default": "number",
      "warehouse[x]": "number"
    }  
  }
]

Order confirm

Verify that all items in the cart can be ordered. Return shipping and payment methods.

Example Endpoint:

POST /order/confirm

{
    TBC
}

Model Schema:

{
 TBC
}

Order checkout

Post order for processing.

Example Endpoint:

POST /order/checkout
{
    TBC
}

Model Schema:

{
 TBC
}

Order checkout

Post confirmation of payment.

Example Endpoint:

POST /payment
{
    TBC
}

Model Schema:

{
 TBC
}