...
It rewrites some frontend components (f.e. image-teaser, product carousel, tile) in order to remove heavy third party libraries and improve frontend performance.
It also introduces new features and improvements.
Theme Creativeshop breaking changes
The following breaking changes were introduced in theme-creativeshop v17
Next-gen Carousels, Grids, Teasers and Tiles
https://github.com/magesuite/theme-creativeshop/commit/ed89941f4e56ddb4e8938241b0b42ae3f6c910d3
The reasons for rewriting some CMS components were to improve performance, reduce amount of code, especially third-party scripts and start to use widely supported new browser features.
New higher level slider component
The goal was to remove Swiper library in favour of native scrolling with some custom js enhancement (f.e. pagination, navigation, autorotation, slides grouping). New higher level component was introduced:
...
Code Block |
---|
'components/_slide/autorotation 'components/_slide/navigation 'components/_slide/pagination |
Next-gen teasers
This release introduces a refactor for slider-based components, like image-teasers and products-carousels, as well as the new structure and architecture for product tile. It gets rid of a Swiper library, replacing JS-based slider with modern CSS solutions and simplyfing product-tile. Next-gen image teasers introduc native lazy laoding instead of script lazy-laoding, native aspect-ratio instead of padding hack. Html elements were reduced and semantic of code was improved in order to make teasers accessible for screen readers and keyboard .
...
Potential TODOs:
- Check new teasers configuration inetc/view.xml
- Check new variables and rewrittenimage-teaser.scss
file
- Remove any code dependant on Swiper library
Next-gen product carousel
Carousel ar now based on magesuite _slider
component.
Potential TODOs:
- Check new products carousel configuration inetc/view.xml
.
- Check new variables and rewrittenproducts-carousel.scss
file
Next-gen grid
Script for setting proper position of teaser in grid has been removed. Instead of it, inline CSS generated in the templayte has been introduced introduced.
Potential TODOs:
- Check new variables and rewritten products-carousel.scss file
Brand carousel
As all carousels brand carousel is now based on magesuite _slider
component. Config in etc/view.xml follows the same patterns as can be found in other carousels
Icon component
As all carousels icon component is now based on magesuite _slider
component. Config in etc/view.xml follows the same patterns as can be found in other carousels
Products carousel in offcanvas minicart
As all carousels products carousel in minicart offcanvas is now based on magesuite _slider
component. Its columns setting can be defined in etc/view.xml
: Magento_Checkout/minicart_offcanvas/products_carousel/js/columnsConfig
Next-gen product tile
In order to combine product tile with new carousel and grid refactor of product tiles was needed. Due to CSS properties introduced in new carousel technology there cannot be overflowing elements across all states of its children elements. Changes that are happening on product tile during mouse hovers must happen within the bounding box of the element. There are 2 built-in hover scenarios that can be introduced.
...
Potential TODOs:
- Check html structure of product tile and align
- Check new variables and rewritten product-tile.scss and product-tile-list.scss files
- Import optional product-tile-list component for list view
Video teasers
https://github.com/magesuite/theme-creativeshop/commit/6ba732108cf2e0bd1b5c2aed54cf42ac23adab3a
...
New higher level video component files added:
‘components/_video/players’,
‘components/_video/utils’,
‘components/_video/interfaces.ts’,
Content Constructor Admin - Custom CC Components
That’s a feature that was requested many times by OpenSource community.
...