OverviewLooki Fashion is an E-commerce web store, which sells sunglasses, eyeglasses on fashion jewelry. We will build the site with Magento 2 CE from scratch.
The website’s overview
The website will be implemented in 3 stages:
The first stage: Implementing the basic UI layouts, product features, payment methods and eyeglasses try-on software.
The second stage: Implementing art, theme and graphics, and fill in contents.
The third stage: Implementing more features (like coupons, newsletter, landing page, referral and affiliate program)
Implementing the site for mobile devices.
The website should be designed for internationalization.
Main navigation bar
A main navigation bar at the top of the website screen, displayed in every page.
Its position is fixed, not moved by scrolling.
It has buttons/menus:
Left aligned: Home, Shop, Lists, Search.
Right aligned: Cart, user info, More.
Menus are opened by hovering the mouse over it. If the menu itself is clickable, its text should be underlined when hovered over.
Product listing page
There are 2 product listing layouts in the website:
One panel: Displayed for mobile devices or narrow browser windows.
Two panels (left-right): Displayed for wide browser windows.
One panel layout
From top to bottom: navigation bar, listing info bar, product listing.
Listing info bar:
From left to right:
– Show product listing query. eg “Men > Sunglasses”, or the search string.
– Filter button: When clicked, show the product filter modal window.
– Sort by menu: When hovered, shows the sort choices.
– When a user scrolls down the website, then:
+ The listing info bar should remain visible, staying just under the main navigation bar. The idea is that we want users to be able to see and change their current selection without needing to scroll up.
+ The main navigation bar becomes thinner, removing some vertical white spaces in the bar.
Product filter window:
A modal window in the center of the current page.
Shows varies filtering criteria and their choices. Leave empty for now.
Buttons: Ok, Clear.
List in a grid with 1 to 3 columns, depending on the screen width.
Each grid cell:
– On top left: showing optional labels, like “Hot”, “New”, “Discounted”.
– Under: showing a main product pic; showing up to 3 thumbnail pics of variation products of the same style as the main product; showing the product title/subtitle on the left and price on the right.
– On hovering over a variation thumbnail, the main product pic and info are replaced with the variation’s.
– On clicking a variation thumbnail, the thumbnail “goes to” the position of the main pic, and the main pic “goes to” a position of thumbnail. For example, The variation becomes fixed as the main product and the original main product becomes a thumbnail. The movement should be animated.
– When hovering over the grid cell, shows:
+ A star on the top right of the cell. On clicking, save the product to the Saved list.
+ Try-on button on the left of the star. On clicking, open the eyeglasses try-on window.
+ As we cannot hover on mobile device, just always display these buttons.
Two panel layouts
Navigation bar and listing info bar are the same as one panel layout. Under, have two panels on left and right.
Product listing grid with 2 columns.
On hovering over an item in the right panel, shows product pictures and try-on view.
Breadcrumbs shows the product category.
Hovering mouse over the thumbnails shows the picture as the big picture.
When a variation thumbnail is clicked, the product info and thumbnails are updated to that of the variation.
The bulletin points are a few points of product highlight description.
Product options are options of the particular product. See section Eyeglasses below for its options.
Changing variations or product options may change the product price.
Total price is (product price * quantity) modified by any discount.
Buy button has label “Buy”. Clicking it adds to the cart and goes to the cart page.
Wist list button has label “Add to Wish List”. Clicking it adds to a user list called “Wish List”.
Share on social media starts with “Share: “, followed by a list of social media icons.
Try-on and like are the same as in the product listing page.
Currently, we want to integrate a virtual try-on software for eyeglasses and we are still deciding on what software to use. If you have any recommendations for integrating this software, please let us know.
Login to the website
Support login by Facebook, Google, Amazon, etc.
Support credit card, paypal, Amazon pay, etc.
Program Logic of the site
The site should include an interface for managers to enter the product info according to our product specification.
When listing a category, it shows the cell groups in the category, one cell group in one grid cell.
As listing a particular style, the website shows all its variations without using cell groups — one variation in one grid cell.
When a user performs a search, the website shows all products without using cell groups.
The internal logic is that a user can have multiple lists. Liked, Wish List and Browsing History are lists. (The logic is that users can create new lists, or the site can generate recommendation lists for the user. However, it is unnecessary to implement this feature for now. But keep this in mind when designing database.)