Watch Video

 

Overview 

There are four parts to ecommerce in XPOR.

1) Listing products
2) Customers selecting products
3) Customers checking out
4) The payment gateway for selling the products to the customer.

The Basket Atom is the second stage - the customer selects their products and their Basket displays on the page all the items that they intend to buy. Then, when they're happy, they'll take their basket to the checkout. Baskets and (shopping cart)s are a key part of any ecommerce system - and with XPOR, it's remarkably easy.

Guidance

Basket Atom

We'll start by setting up the Basket Atom. The Basket atom provides a button that takes purchasers through to the Checkout Cart - you'll most likely put this button on your list of products. If you've not yet set up your Product Listing atom, see the relevant help resource.

First, choose the webpage where your Basket Atom will go. Right-clicking any atom on the page and selecting Change Atom Type will allow you to select "Basket Atom" from the drop-down list. Once you've done this, the following window will pop up.

This one's filled out with an example Basket, but you can see how simple it is - it only takes three different things.

• Order Type - this will provide the base for your checkout system. What type of products are they? How will the item be shipped to the user? What can they use to pay for the item? All of these options are configured under your Order Type, and plugging it into this field makes your checkout system run smoothly - see the help resource for how to set this up.
• Checkout Page - this is the page the customer will go to when they're happy with their items and wish to checkout. It'll be its own page where you'll have the other half of your buying system - the Checkout atom. Read further into this help resource to find more about it.
• Alignment - this will align your atom to the left, centre or right of the screen to match your desired layout.

Once you've set everything up, click Save & Close, then go up to the top of the page to Close Editor. Your atom should render like so:

Whenever a customer adds a new item to their basket, this atom will change to reflect the new contents. And by clicking on it, they can be taken to their Checkout.