Shopizer admin interface

mobdescriptiveSoftware and s/w Development

Oct 28, 2013 (3 years and 9 months ago)

1,075 views

Shopizer a
dmin interface

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

-

css and javascripts provided by portal theme may conflict with t
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
for
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).

Proposed layout


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
and
the form or component of the main functionality.






Main Menu


** Bootstrap menu

(
http://twitter.github.com/bootstrap/compo
nents.html
)

Main menu sections are

Home (icon
-
home)

Store (icon
-
file
)

Catalogue (icon
-
tags)

Customer (icon
-
user)

Order (icon
-
shopping
-
cart)

Configuration (icon
-
cog)










Home page

(Dashboard)

Display store information in a div box


Store Id

Store name

Store address


Recent orders

(no scroll paging) presents last 15 orders with

a link that jumps to the order details.


Smart Client grid (www.smartclient.com)


Store
page

This page displays a form to edit the merchant store information

Home
-
> Store

Main

content

Tab menu:
store

and
featured items



Email

Currency

Featured items

page

Home
-
> Store
-
> Featured items

Tab menu:
store

and
featured items

Select category control will drive items displayed in left box


Representation
: Drag and drop

(smartclient
)

Catalogue

page

The

Catalogue admin entry point opens the

products

page

that

let
s the user

find

produ
cts and open the
edit product
details

page
.

Home
-
>
Catalogue

Main content

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

(left pane)
,
the right pane will display the list of items attached to that
category.

Right pane se
ction will present
:

-

SKU

-

Product name (based on the locale)

-

Default price

-

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

-

Price

-

Region cod
e

-

Special indicator



** For the portlet version, the system is configured for only one product availability (default availability).

The product page can also be filtered

Product page

This page is a simple form allowing the edition of a product

Home
-
>
C
atalogue
-
> <PRODUCT DESCRIPTION>

A sub menu is available to edit the following product portions:

-

Product price (availability)

-

Attributes

-

Images

Categories

page

This page
displays a grid allowing classifying categories by dragging category nodes. An edit b
utton also
leads to the category entity in edit mode.

Home
-
> Catalogue
-
>
Categories

Main content




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
page

Home
-
> Catalogue
-
> Categories
-
> <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
returning

to the categories main page.

Options

page

Home
-
> Catalogue
-
>
Options

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.


Representation:
Grid


Widget

Original screen



Options values page

Home
-
> Catalogue
-
> Options
-
> <OPTION NAME>

From t
he parent option grid, a detail link will open the option values page which will be displayed

Old screen



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



Product Attribute



List of properties


Product review




Customer


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

Customer list

The list grid is similar to all other grids and allows filtering customers on their name and email (see
product filter
-

criteria). The list is page able (see products ajax paging
-

criteria).

It is possible to remove a customer from t
he list
. When removing a customer, all reviews attached to
that customer are also removed.

Customer details

This is based on shopizer 1.1.5



For displaying country province dependant select boxes, see merchant store page and re
-
use the same
ajax calls.

When the checkbox

customer is anonymous


is not clicked, a password is sent by email to the customer

Technical information

From the controller, 2 methods will allow the listing and the detailed page presentation

Customer list

@RequestMapping
(value=
"/admin
/customer/list.html"
, method=RequestMethod.
GET
)

Prepares the page that will display the list of customer

@RequestMapping
(value=
"/admin/customer/page.html"
, method=RequestMethod.
POST
,
produces=
"application/json"
)

The listing functionality r
etrieves the list

of customer for SmartClient LIST component
. The customers
must be pageable, that requires the appropriate
AjaxPageableResponse

to be populated and
returned to the SmartClient component.

Customer details

The customer details maps the Customer entity objec
t

Obligatory fields

-

First Name

-

Last Name

-

Email

-

Phone

-

Street Address

-

City

-

Postal code


Those fields should be annotated @NotEmpty The field Email should be annotated @Email and
@NotEmpty

Errors related to empty fields should be defined in messages.propertie
s bundle file

NotEmpty.customer.<FIELD_NAME>

Email.customer.<FIELD_NAME>


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
UserServicesImpl


The email component is not ready yet, I will provide a unit test shortly



Order


Order list


Order details




New order details screen



Payment details




Tax

-

Tax basis calculation

-

Tax class

-


-



Content management


Content management supports the f
ollowing functionalities:

-

Manage
content
images
: 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.

-

Manage
content files
: 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.

-

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

Cont
ent pages

management

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
di
splay 2 links ‘Content pages list’ and ‘Create new content page’

The content page
details allow

the creation
of a new content page
or the edition of an existing content
page
.

** Look at Category List as a similar example




The content page data is mapped

to the
com.salesmanager.core.business.content.model.content.Content

and
com.salesmanager.core.business.content.model.content.Content
Description

model objects with the
content fields displayed for each merchant store supported language. The
content page i
d

content page
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
“CONTENT”.

** 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
-
built
sid
e portlets

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
-
built content
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”.


Packages location

-

Sm
-
shop

com.salesmanager.web.admin.controller.content.ContentController

/sm
-
shop/src/main/webapp/pages/admin/con
tent
/contentPages.jsp


-

Sm
-
core

com.salesmanager.core.business.content.service.ContentServiceImpl

Content boxes management


It is possible to create custom
portlet

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




-

Manage pre
-
built content boxes: The merchant can configure the use of pre
-
bui
lt content
boxes. The system offers a content box for Shipping information and Payment accepted
. Other
pre
-
built content boxes can be social media content, store location map, publicity etc.

See the description above.

-

Manage content files:

The merchant sto
re can upload custom CSS and javascript files that can
be used wherever the CK Editor allows the creation of custom HTML content.


The system supports the management of other file types such as javascript, css, PDF, doc … A
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

URL to
be used in order to invoke the file and also to have the possibility to remove the file.


Configuration


Payment

List payment modules

Read modules from CORE_MODULES for type MODULE_PAYMENT. Each module has a jsp page
in JSPS/modules/MODULE_PAYMENT
and a class for retrieving the configuration and storing the
configuration information

-

Cheque / Money Order

-

Authorize Net

-

Beanstream


-

Paypal







Configure supported payment modules

Shipping

-

Canada Post


-

USPS


-

UPS


-

Fedex


-

Custom


Countries








Other Shipping


Packing