Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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 in etc/view.xml
- Check new variables and rewritten image-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 in etc/view.xml.
- Check new variables and rewritten products-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.

...