The eCommerce Plugin - allows you to implement a basic eCommerce Application, including an Shopping Cart with automatic price / quantity calculation, and to connect it to a Payment Gateway
This Plugin is a simple eCommerce implementation for basic requirements, if you need to implement a complex eCommerce with VAT calculation, multi-currency … you should consider using a specialized tool such as Shopify etc...
Once the plugin installed (See how to install a Plugin documentation), it must be enabled for your project and must be configured as well:
The Currency code for your eCommerce App (it must match with the payment gateway currency)
The Currency Symbol for your eCommerce App
Check this option if you want the currency symbol displayed in front of the about: eg $100.00 vs 10.00€
The name of the JS Object that handle the Payment processing, it can be one of the followings:
Empty (none checkbox): there is no payment processor, the user can save an order but won’t pay now (Useful for example for Restaurants, the user will pay on delivery)
payPalCheckoutGateway use this value when you want to use the Paypal Checkout Payment Processor (See the related documentation here: Paypal Checkout Plugin)
yourOwnGatewayName use the name of your own Payment Plugin vif you have developed your own Payment Plugin
A fixed amount for the delivery fees that will be added to the total of the order
The normal order process ask to the user to enter his address, if you want to skip this step, just check this option
You can modify all the labels of the Interface here.
Once the plugin installed and configured, you will see 2 additional Widgets in the Widget List=>Firebase Group:
This Widget will display an Icon or Button, with a badge showing the number of Items already in the Shopping Cart. It will also give a direct access to the Order & Payment process.
This Widget will display an Icon or Button, that should be placed inside a Firebase Repeater or Firebase Displayer.
It will automatically add the selected record to the Shopping Cart.
An Example of Shoping Cart Controller (1) and Add to Cart Button (2)
You can use any Firebase Collection, and even multiple Collections for managing your products. The only requirement is to setup at least one field for storing the product price.
Adding this widget inside a Firebase Repeater with custom template will automatically let the user adding the items to the Shopping Cart, but you must first setup this button by double-clicking on it:
The Add to Cart button works as well when placed inside a Firebase Displayer
You must then setup the following parameters:
The text of the Button (eg. Add to Cart)
The Field in your Firebase Repeater Collection that contains the price of the product. (With a dot as decimal sepator, for example 12.99)
The Field in your Firebase Repeater Collection that contains the Name of the product.
The Field in your Firebase Repeater Collection that contains the Image of the product.
The message that will be displayed to the user when the product has been added to the Shopping Cart (Can be empty if you don’t want to display a message)
Now you must add a Shopping cart controller to the page, in general it is on the top right of the App Navbar:
The Shopping Cart Controller implements a few basic settings such as the text, color, icon….
You can add multiple Shopping Cart Controllers on different places and / or pages.
A complete App example with a Client App and a BackOffice App is available here: eCommerce App Example
When you run the App, the workflow is the following:
The user select the Add to Cart Button from a Repeater line (or a Displayer)
Selecting an Item several times will increase the Quantity ordered for this Item
The Shopping Cart Controller button is incremented automatically
If the user select the Shopping Cart Controller, then the Shopping Cart Popup is displayed with a summary of the Order.
It is possible at this step to change the order Quantities for every item in the list (Or to remove Items by setting the Quantity to Zero)
The User can close the Shopping Cart if he wants to select other items, or clear it if he wants to cancel his order.
Then, only if this option is enabled in the eCommerce plugin settings, the user can enter his addres (or modify if it is an existing user)
All the user information will be automatically stored in a Collection with a fixed name: thorium.users
Then, the user will be invited to process with the payment (or to save the order if no payment gateway is configured)
Once payment has been made, the basket is automatically emptied, and the Order is saved in a collection named thorium.orders, the order lines are saved in a collection named thorium.order.lines
Note that you can display a summary of the user orders by using a Firebase Repeater with the collection thorium.orders