Implement Faro design #1
Conversation
Implements main menu, that is sticky and has dropdown menus. Header and dropdown menus use the same background color as page. To achieve this, bgpicker will write RGB value to variable, that is then used in CSS.
Implements 3 different front page layouts - split, column and column-split. Layout is applied by assigning according classname.
Implements Product list layout that includes default styles for product list widget. Includes breadcrumb menu component & bgpicker.
- Add bgpicker to product page - Add footnote area to product page - Improve buy button placement visuals
Adds dropdown menu that contains menuitems that do not fit the top bar. Overflowing items are added to menu using JS and this runs on page load and window resize.
Common page layout will be composed of different blocks, each block has a slightly different layout. Currently 4 block layouts are supported.
Add separate bgpicker to each block added to page. Blocks are now read from and saved to page data. This makes it possible to add additional blocks and/or remove or modify them.
- Make image area a content area - Simplify contents layout - Make hero area "main" content area
As subpage add button is only visible in submenu, it needs to be always openable in editmode.
|
Hi! Desktop
Mobile
Best practices for shopping cart design
|
|
Desktop:
We would like to keep the alert text as general as possible, as these are system-wide translations. I will explore some options to see whether adding a tooltip that appears faster on hover is possible.
Text colors automatically adjust based on content background, perhaps that was the case here?
By adding a Text type content area and drag-dropping an image into that :)
In design the "hero" content in Front page is not very wide, which is why it is only half-width.
Currently it is planned to only support maximum of 2 levels in menus. Most standard designs follow the same pattern, but if need arises, then adding lower levels can be considered. Mobile:
Yes, I figured that the header content should perhaps always be visible, even with the back arrow present.
Will change that.
I'll take a look if it can be fixed to the bottom of the screen, but as it is quite large, it can take up a lot of screen space. In Figma Proto, the Cart button was not fixed to the bottom, which is why it is currently implemented like that. I'll can also play around with displaying the current number of products in cart.
Will change that too :) |
Add tooltips that appear on hover to editmode icons to make their functionality more clear.
Make mobile menu animations run faster & make mobile submenu open from right side.
Include `theme-color` meta tag to help browsers use background colour for browser UI elements. Reduce mobile submenu background opacity for better experience on mobile Safari.
Show page background color only until footer, after which footer bg color is displayed until the end of the page.
Use IntersectionObserver to figure out whether block is in viewport and run animations if block enters viewport for the first time.
- Use fixed values for animations to ensure better consistency - Simplify CSS rules for animations as a result
- Lower H1 default font size - Do not underline links in footer by default
Description
Implements new, ecommerce oriented Faro design. This design uses a modular block system, that allows user to add/remove/change blocks and move them up or down in order, plus allows adding background colour or image to each block separately. Compared to other Voog designs, this design does not support Blog features or "old style" store with Product list and Product layouts. Product list layout is instead intended for use with Product list content area.
Current PR should accomplish fully-featured design that is ready for presenting to clients.
Testing
On Front page, Categories and Common page layouts, check that switching between layouts works as expected and changes are saved correctly. Switching can be done by choosing a desired layout from dropdown visible in editmode.
On Categories and Common page layouts, verify that block system works as expected. Check that
template-settings-jsonthat can then be modified. Block can be added below all other blocks by clicking on the grey+icon.Picture of add button, which is placed right before footer and below all other blocks.
Picture of editmode design
Check that Header works. Expected behaviour in main menu is to hide all overflowing menu items and place them inside a dropdown menu. This should also work on window resize. Also verify mobile design.
Verify that Design editor works and settings change what they say that they change.
Verify that Auto-generated Product page works as expected, with buy buttons, sale prices, product images etc. present.
Verify that BGPickers work whereever they can be found. At least one BGPicker should be present on every page, with every block containing its own BGPicker. Blocks on Categories page have separate BGPickers for both columns.
Verify that Search is not displayed when it's turned off in site settings.
Verify that Cart button is not displayed when store is turned off for site.
Files that can be omitted when doing a code review:
All
template-cs-*.tplfiles, as these are auto-generated fromsources/components/custom-styles/template-cs-*.scssfiles.javascriptsandstylesheetsfolder contents, as these are auto-generated fromsources/javascriptsandsources/stylesheets.sources/javascripts/libs/colorextract.js, as this is copied over from previous Voog designs.