Firebase eCommerce Plugin

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

Plugin Setup

Once the plugin installed (See how to install a Plugin documentation), it must be enabled for your project and must be configured as well:

• Currency Code

  The Currency code for your eCommerce App (it must match with the payment gateway currency)

• Currency Code

  The Currency Symbol for your eCommerce App 

• Symbol Position

  Check this option if you want the currency symbol displayed in front of the about: eg $100.00 vs 10.00€

• Payment Provider

  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 
    

• Delivery Fees

  A fixed amount for the delivery fees that will be added to the total of the order

• Skip Address Pane

  The normal order process ask to the user to enter his address, if you want to skip this step, just check this option

• Interface Translations

  You can modify all the labels of the Interface here.

Plugin Implementation

Once the plugin installed and configured, you will see 2 additional Widgets in the Widget List=>Firebase Group:

• Shopping Cart Controler

  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.

• Add to Cart Button

  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)

Adding an "Add to Cart" Button to a Firebase Repeater

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:

You must then setup the following parameters:

• Button Text

  The text of the Button (eg. Add to Cart)

• Price Field

  The Field in your Firebase Repeater Collection that contains the price of the product. (With a dot as decimal sepator, for example 12.99)

• Name Field

  The Field in your Firebase Repeater Collection that contains the Name of the product.

  Image Field

  The Field in your Firebase Repeater Collection that contains the Image of the product.

• Confirmation Text

  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)

Adding an “Shopping Cart Controller” to your Page

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….

Running the App

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