The E Commerce Theme it's a theme with latest UI development design and modern style.

The E Commerce Theme has been built with HTML5, CSS3 Animations and jQuery.
Layout System Grid Boostrap.
Theme is fully responsive, on all devices, many screen size, including desktops, laptops, tablets and mobile phones.
Browser support IE9+, FireFox, Safari, Chrome.

This theme is a Liferay migration of the e-commerce theme from https://github.com/VinceG/Bootstrap-ecommerce-theme.

Overview

With E Commerce Theme you can setup an online store in minutes. This theme is fully configurable. With it your audience will know these:

Detailed information about each of your products.
List of products filtered by categories.
Shopping cart feature
Paypal and offline checkout
Reports and orders management
Customization of emails templates
About your store.
Your contact info.
Store logo and title

E-Commerce Site Pages

Store home page
List of products (Home page)
Product Information (View page)
Categories list (Categories page)
Contact info
About us
Order Checkout (Cart page)

Shopping Cart Features

List of cart items

The shopping cart page, lists the cart items previously added.
It is possible to edit the quantity of items and also to remove items from the cart.

Checkout Form

If there are items in the cart, the checkout form is displayed.
Mandatory fields are marked with a orange asterisk.
The customer notification is sent to the email specified in this form.
It is not mandatory to be a registered user, in order to do the checkout.

Shopping Cart Administration Features

Shopping Orders Administration Only administrators can access this feature. Site administrators can go to the Site / Content / Shopping Orders to access to the administration features.
Site Shopping Cart Configuration The configuration is editable by site. Configuration is in the three dots menu at top right. The details of the configuration are described in the section Shopping Cart Configuration.
Shopping Orders The option Shopping Orders will display a list of the orders for each available site, this will allow a portal to host more than one store and manage each one independently. The list will display all existing orders with basic information about the status and the customer.
Updating Order Status The admin can update orders status using the following process: In Progress: The customer is adding products to the order, no actions available Waiting for Payment or Waiting for Paypal: If the user chooses to pay using paypal the status will be updated automatically when the IPN is received (see Paypal docs for more info), the order can be updated as Paid or Canceled if the customer never pays. Paid: The payment has been confirmed and the order can be processed, the order can be updated as Processing Delivery Processing Delivery: The items for the order are being prepared for shipping Shipped: All items for the order have been shipped for the customer Canceled: There was something wrong with payment and the order will not be processed
Orders Details The admin can also look at the details for each order including customer contact information, shipping information, product information and update custom notes to have a better control over the process.

Installation

Obtain E Commerce Theme from the Liferay Marketplace.
Deploy E Commerce Theme in your existing Liferay 7 installation. If you haven’t installed Liferay 7, please download and follow the instructions to do so.

Creating a New Site

Go to Control Panel / Sites / Sites. Click in Add Button and select E Commerce Theme.
Create a new store site. Enter the name of your preference for it. In this example we are creating "My Store".
Go to Site / Navigation / Public Pages and click in the three dots menu. Select Configure. Upload a logo for the site. In the example we are using Liferay logo.
If you want to avoid change to the site template affects your site: Go to Site / Configuration / Site Settings. Disable propagation of changes.
Go to Navigation Menu Portlet and click in the three dots menu. Click on Configuration. Select the template called Shopping_Nav-1.0.0 and save the configuration.
You can navigate the site, It will display dummy content deployed with the theme.

Shopping Cart Configuration

Only a site administrator can access this feature. As a site administrator, before to publish the Shopping cart to live, you must be sure to have the correct and complete configuration. The configuration is editable by site. Go to Site / Content / Shopping Orders and click in the three dots menu at top right. Select Configuration.
In the fist tab Email From, you will set the name of your store and the email to be used as sender of all the emails from the site.
In the second tab Email To Store, you can: Enable or disable the notification to the store, when a customer places an order. Set Email Subject: Subject to be used in the notification. Set Email Body: Email body to be sent. Please read the section Email Notifications to understand the requirements and the way the notifications work.
In the third tab Email To Customer, you can: Enable or disable the notification to the customer, once the checkout process is complete. Set Email Subject: Subject to be used in the notification. Set Email Body: Email body to be sent. Please read the section Email Notifications to understand the requirements and the way the notifications work.
In the fourth tab Messages, you customize the main messages displayed in the shopping cart.
In the fifth tab, Paypal, you can: Enable or disable use of Paypal. Enable it to allow users to pay using Paypal. For test purposes (preventing to process real Paypal payments), you can enable the use of Paypal Sandbox. You can find the related information in https://developer.paypal.com/developer/accounts/. Set a valid Paypal Business Email. Paypal SSL Configuration In order to receive Paypal IPN payment notifications and additional parameter needs to be added to the app server JVM arguments: -Dhttps.protocols=TLSv1.1,TLSv1.2

Email Notifications

Portal Properties Configuration

In order to be able to recognize whether an email was properly sent or not, the shopping cart needs to have in the file portal-ext.properties:

mail.throws.exception.on.failure=true

This setting allows the Shopping Cart to do a "rollback" of the checkout process.If this is not set, the Shopping Cart will not know when a checkout notification is not sent.

In the Site Shopping Cart Configuration, you can edit the notifications that system will send to the store and to the customer. Review the terms you can use in the configuration form (under each email body), or in the following reference table.

Variable	Use
$date	The date on which the order was placed.
$customerName	The name of the customer (specified in the checkout form).
$customerEmail	The email of the customer (specified in the checkout form).
$customerContactInfo	A predefined template, for displaying the customer information (captured in the checkout form). This information does not include the customer email.
$orderSummary	Predefined for displaying the order summary. This summary includes the list of the items in the cart.
$orderTotal	A predefined template for displaying the order total.
$storeLogo	A predefined template for displaying the logo. This logo is the same as the logo used in the portal.
$storeName	The name of the store (specified in the "Email From" tab).
$storeEmail	The email of the store (specified in the "Email From" tab).
$portalUrl	The url of the portal.
$portalLogo	Portal logo image url.

This is an example of an OOB email sent to the store, when a customer places an order.

This is an example of an OOB email sent to the customer, when the checkout process is complete.

Adding a New Product

Go to the Site / Content / Web Content. Click in the add button and select Product-1.0.0.
Fill the form with your product details.
To show the products in the home and category pages you need select the checkbox "searchable".
Remember to assign/create some tags to the product, they will be used for products categorization.
You can also edit the dummy products or expired them by clicking in the three dots menu.

Code Repository

https://github.com/rivetlogic/liferay-ecommerce-theme

Contact Us

We welcome feature/bug reports concerning the e-commerce Theme. Discussion helps to clarify the ways the theme be used and also helps define directions for future development. Please post your concerns at http://issues.rivetlogic.com/browse/LRA

Change Log

1.1.0

Company credits.

2.0.0

Migration to DXP.

Child pages

E Commerce Theme