This document describes Shopizer 1.2 portlet admin interfaces. The current production version is built
mainly on static html interfaces built with Apache Tiles, jQuery and css blueprint. The target deployment
platforms for the next
release being portal servers (liferay, websphere portal and Oracle portal) require
major changes in the way admin screens are rendered:
Deployment of portlets
Theme provided by Liferay
he files required by Shopizer
Since the portlets will be deployed in a portal, we are not building the page header, menu and footer.
We are responsible of creating the middle content with an internal navigation that will be taking care of
the admin functio
nalities. Because so much changes are required to adapt the admin interfaces to portal
architecture, we have decided to migrate the screens to rich ui component and will be using twitter
bootstrap css (page layout, menus, html components) and Smart Client
complex components (drag &
drop, grids, trees, filters…)
. At this point we are not sure if we will use bootstrap Forms or Smart Client
forms (to be evaluated).
The proposed 2 columns layout has vertical menus on all admin pages showin
g main admin entry points.
The right column has on top a tab menu showing the sub functionalities of a main admin entry point
the form or component of the main functionality.
** Bootstrap menu
Main menu sections are
Display store information in a div box
(no scroll paging) presents last 15 orders with
a link that jumps to the order details.
Smart Client grid (www.smartclient.com)
This page displays a form to edit the merchant store information
> Featured items
Select category control will drive items displayed in left box
: Drag and drop
Catalogue admin entry point opens the
s the user
cts and open the
Tab menu displays products, categories and options
Representation: smart c
lient office supply demo
The left pane allows category browsing and expands a category tree by clicking on the (+) sign. When
clicking on the category label
the right pane will display the list of items attached to that
Right pane se
ction will present
Product name (based on the locale)
Last modified date
An edit button
(goes to the product edition form)
When clicking on an item
arrow on the left side
, availabilities are displayed
In stock indicator
** For the portlet version, the system is configured for only one product availability (default availability).
The product page can also be filtered
This page is a simple form allowing the edition of a product
> <PRODUCT DESCRIPTION>
A sub menu is available to edit the following product portions:
Product price (availability)
displays a grid allowing classifying categories by dragging category nodes. An edit b
leads to the category entity in edit mode.
It is possible from that page to organize the category hierarchy by using drag & drop on category nodes.
Categories are displayed according to the user
locale. The tree view also has an edit button allowing the
modification of a category entity.
> <CATEGORY NAME>
This is a simple form allowing editing the category name, description and order
The tab menu is s
hown and a link under the tab allows
to the categories main page.
This page shows a list of options with the possibility to edit or remove an option
. The page displays a
form allowing creating a new opti
on for all supported language, a sort option, the option type and the
display option type
. The grid will allow to change the record.
Options values page
> <OPTION NAME>
he parent option grid, a detail link will open the option values page which will be displayed
The new screen will propose a form to configure options values for all supported language and a grid
grouping options values by language with images
in the group title and the possibility to change
ordering, change option value name and delete the option value
List of properties
The customer administration is a functionality allowing a store admin
istrator to list, search and view the
details on customers that have registered on the online site. From the administration of the detailed
page, an administrator can change the customer information, view all orders a customer did and change
a customer pas
The list grid is similar to all other grids and allows filtering customers on their name and email (see
criteria). The list is page able (see products ajax paging
It is possible to remove a customer from t
. When removing a customer, all reviews attached to
that customer are also removed.
This is based on shopizer 1.1.5
For displaying country province dependant select boxes, see merchant store page and re
use the same
When the checkbox
customer is anonymous
is not clicked, a password is sent by email to the customer
From the controller, 2 methods will allow the listing and the detailed page presentation
Prepares the page that will display the list of customer
The listing functionality r
etrieves the list
of customer for SmartClient LIST component
. The customers
must be pageable, that requires the appropriate
to be populated and
returned to the SmartClient component.
The customer details maps the Customer entity objec
Those fields should be annotated @NotEmpty The field Email should be annotated @Email and
Errors related to empty fields should be defined in messages.propertie
s bundle file
When creating a non anonymous customer, a default password has to be created and sent to
the customer by email. Use the spring password encoder that can be found in
The email component is not ready yet, I will provide a unit test shortly
New order details screen
Tax basis calculation
Content management supports the f
: The merchant can upload and manage images that can be used in
different areas of the site such as content pages, product description, category description,
home page and content boxes. Images are inserted th
rough CK Editor HTML widget.
: The merchant can upload and manage files (js, css, pdf…) that can be
used in different areas of the site such as content pages, product description, category
description, home page and content boxes.
ge content pages:
The merchant can create static content pages that will be accessible
from the main menu. The page content is built using CK Editor HTML widget which allows the
insertion of content images. The
content pages inherit
the site template.
Legacy content page list
A list of content page is displayed when going in the content page section. From there it is possible to
make a page visible, remove the page and go in the edit page section.
The tab in the main page will
splay 2 links ‘Content pages list’ and ‘Create new content page’
The content page
of a new content page
or the edition of an existing content
** Look at Category List as a similar example
The content page data is mapped
model objects with the
content fields displayed for each merchant store supported language. The
content page i
code must be unique and the system should validate if that content page code already exist (similar to
category code). The content field uses CK Editor HTML widget
. Content.contentType attribute should be
** Look at a category det
ails page (available from the category list) as a sample page
Manage custom content boxes:
The merchant can create custom content boxes with CK Editor
HTML Widget. The content boxes are displayed on the site left and right columns.
A list of pre
content boxes is available to the merchant. For the next release only
Accepted payments and Shipping information boxes are available to the merchant. The pre
boxes are pre
registered Content and ContentDescription entries but the c
ontent will be taken from a
dynamic JSP instead of ContentDescription fields. Content.contentType attribute should be “BOX”.
Content boxes management
It is possible to create custom
content box. Again, the pattern is similar than the process of
creating content pages. Conte
nt.contentType attribute should be “BOX”. Custom boxes are similar to
content pages but they let the customer select the position (left or right)
where it should be displayed
built content boxes: The merchant can configure the use of pre
boxes. The system offers a content box for Shipping information and Payment accepted
built content boxes can be social media content, store location map, publicity etc.
See the description above.
Manage content files:
The merchant sto
be used wherever the CK Editor allows the creation of custom HTML content.
functionality similar to content
image management allows the addition and deletion of other
types of file in the exact same way as it is for content image. The files available will be a simple
list of file
that will be displayed in the List Grid component with the availability to see the
be used in order to invoke the file and also to have the possibility to remove the file.
List payment modules
Read modules from CORE_MODULES for type MODULE_PAYMENT. Each module has a jsp page
and a class for retrieving the configuration and storing the
Cheque / Money Order
Configure supported payment modules