ProductTile
GitHub - magesuite/product-tile
This is a powerful module developed in order to create an extensible product tile, which can be composed with fragments and used in many contexts maintaining the same view and styling.
Â
Installation
This module is required by theme-creativeshop
composer require "creativestyle/magesuite-product-tile" ^2.0.0
Â
Admin settings
MageSuite product tile is switched on by default when the module is installed. There are additional settings in the admin panel:
Stores -> Configuration -> MageSuite -> Product Tile
Â
The Thumbnail gallery on the tile can be enabled in Thumbnail
tab.
As tile gallery is an optional feature, import of scripts and styles must be uncommented in a child theme in entries:
import 'components/tile-gallery';
Â
Under Cache
tab
Include customer group in cache key setting can be enabled or disabled. When enabled product tile will be generated separately for every customer group. Disable only when shop does not differentiate product pricing between customer groups in any way. Disabling it improves shop performance
Â
Backend
TODO BE part is needed.
Frontend
The entry template for product tile is: magesuite-product-tile/view/frontend/templates/tile.phtml
Containers
The product tile is composed of smaller containers in magesuite-product-tile/view/frontend/layout/product_tile.xml
layout.
Containers create HTML elements with defined tag and class. Containers can be nested inside each other.
Example of container:
<block class="MageSuite\ProductTile\Block\Tile\Container" name="product.tile.container.tile.wrapper">
<arguments>
<argument xsi:type="string" name="html_tag">div</argument>
<argument xsi:type="string" name="css_class">cs-product-tile__container</argument>
</arguments>
</block>
All top level containers must be added inside main product.tile block.
Fragments
Tile fragment is the smallest part that can build a whole product tile. Its main purpose is to display some product data using a custom phtml template. Fragments should be as small as possible. That way there won't be much need to overwrite their templates what improves maintainability.
Example of fragment:
The following fragments are defined in the module:
Product object is always available in fragment PHTML template after calling getProduct
method on $block.
Restricting Fragments to be rendered only in specific sections
Some tile fragments should be visible only on specific pages.
Fragments related to wishlist functionality (eg. removing product from wishlist) should be visible only on wishlist listing page.
When rendering tile on specific page you can define which related section displays specific tile. For example on wishlist listing page you can set wishlist section.
Later on when creating Fragment it is possible to define which sections support specific fragment:
Restricting Fragments to not be rendered in specific sections
Some fragments might not be suitable for certain sections. Example would be add to wishlist link fragment that should not be displayed in wishlist listing page (since that product was already added to wishlist)
When creating Fragment it is possible to define which sections are not supported:
Tiles structure customization
Custom containers and fragments can be added to child projects. Containers and fragments can be moved ore removed just like native Magento blocks.
Â
The tile is divided into 2 main parts: thumbnail
and content
Â
The styling of content elements is based on CSS grid. Grid is defined on the main
element of the product tile:
Â
Every direct child of the main element has grid-area
value defined according to the following pattern
Thanks to grid possibilities child project can easily manipulate the order and position of tile elements. Â Product tile keeps its own aspect ratio.
Values for aspect ratio are defined in variables.scss
Separate list view styles
Only a limited number of projects introduce, design, and style list view mode for product tile.
Â
In order to limit the amount of CSS and make the architecture of the tile easier, list view styles are optional and separated in their own scss file: to theme-creativeshop/src/components/product-tile-list/product-tile-list.scss In order to add them to child theme the following import must be uncommented: import 'components/product-tile';
Variables for list view are created according to the following pattern: $product-tile-list_padding
Grid and grid template areas for list view of product tile are defined for mobile:
and for bigger resolutions:
Magesuite scenarios for hover effects
There are some built-in hover scenarios for indicating that the tile is hovered.
The default scenario is to show Add to cart button only on hover. There is also a light border to indicate hover
Â
Â
Â
2. Addon sliding from the bottom hover effect
There is a container name product.tile.container.main.after
prepared in product_tile.xml. To introduce the sliding hover effect move some elements inside it:
With some scss variable changes we can achieve the following effect:
Â
Â
Â
Â
Styling
Styling for product tile is provided in theme-creativeshop/src/components/product-tile/product-tile.scss
Long list of customizable variables helps to achieve the desired look&feel for child projects. However, if design on product tile is very simple the better idea might be to create its own, reduced scss file and not include styles for all tile fragments
Â
By default only grid view of style is supported. Styles for list view and product gallery on tile are optional and must be enabled in child project in entries:
Â
Old documentation
https://creativestyle.atlassian.net/wiki/spaces/CSHOP/pages/41977304