https://github.com/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.

Linked containers

If a container should be wrapped with <a href="..."> tag that links to product detail page then simple phtml template change is sufficient:

template="MageSuite_ProductTile::container_linked.phtml"

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:

<block class="MageSuite\ProductTile\Block\Tile\Fragment" name="product.tile.name" template="MageSuite_ProductTile::fragments/name.phtml" />

The following fragments are defined in the module:

Product object is always available in fragment PHTML template after calling getProduct method on $block.

$product = $block->getProduct();

Tile fragments must be always placed inside container.

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.

<?php
echo $this->getLayout()
    ->createBlock(\MageSuite\ProductTile\Block\Tile::class)
    ->setSection(['wishlist'])
    ->render($product);
?>

Later on when creating Fragment it is possible to define which sections support specific fragment:

<referenceBlock name="product.tile.container.main">
    <block class="MageSuite\ProductTile\Block\Tile\Fragment"
           name="product.tile.add_to_cart"
           template="MageSuite_ProductTile::fragments/add-to/cart.phtml">
        <arguments>
            <argument name="supported_areas" xsi:type="array">
                <item name="wishlist" xsi:type="string">wishlist</item>
            </argument>       
        </arguments>
    </block>
</referenceBlock>

Fragment will be displayed everywhere if no supported_areas where passed in it's configuration.

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:

<block class="MageSuite\ProductTile\Block\Tile\Container" name="product.tile.container.addon.addtowishlist">
    <arguments>
        <argument xsi:type="string" name="html_tag">li</argument>
        <argument xsi:type="string" name="css_class">cs-links-block-addto__item cs-links-block-addto__item--wishlist</argument>
        <argument name="unsupported_areas" xsi:type="array">
            <item name="wishlist" xsi:type="string">wishlist</item>
        </argument>
    </arguments>
</block>

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.

Removing whole containers might not always be the best idea. When container is removed, extensions that add fragment inside it won't work correctly. Removing only specific fragments instead of whole containers might be safer.

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:

.cs-product-tile__main {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) $product-tile_addtocart-width;

    grid-template-areas: 
        'swatches swatches'
        'name name'
        'price price'
        'review  addtocart'
        'stock addtocart'
        'badges badges'
        'addto addto';
}

Every direct child of the main element has grid-area value defined according to the following pattern

  &__swatches {
      grid-area: swatches;
  }

Thanks to grid possibilities child project can easily manipulate the order and position of tile elements. Product tile keeps its own aspect ratio.

aspect-ratio:#{$tile_aspect-ratio-width}/#{$tile_aspect-ratio-height};

Values for aspect ratio are defined in variables.scss

// Tile ratio
$tile_aspect-ratio-width--mobile: 300 !default;
$tile_aspect-ratio-height--mobile: 400 !default;

$tile_aspect-ratio-width: 310 !default;
$tile_aspect-ratio-height: 560 !default;

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:

  grid-template-columns: repeat(2, minmax(0, 1fr));

  grid-template-areas: 
    'name name'
    'review review'
    'swatches swatches'
    'description description'
    'badges badges'
    'stock price'
    'addtocart addtocart'
    'addto addto';

and for bigger resolutions:

grid-template-columns: minmax(0, 1fr) fit-content(10rem) #{$product-tile_general-elements-gutter * 2} 12rem 12rem;

grid-template-areas: 
    'name review separator badges badges'
    'swatches swatches separator badges badges'
    'description description separator stock price'
    'addto addto separator addtocart addtocart';
}

Breakpoints for list view product tile

$product-tile-list_column-breakpoint-min: '>=#{$product-tile-list_one-column-breakpoint}'; $product-tile-list_column-breakpoint-max: '<#{$product-tile-list_one-column-breakpoint}';

$product-tile-list_one-column-breakpoint: 'laptop' !default;

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

$product-tile_addtocart-show-only-on-hover: true !default;
$product-tile_addtocart-reduced: true !default;
$product-tile_initial-border: 1px solid transparent !default;
$product-tile_hover-border: 1px solid rgba($color_border-500, 0.5) !default;

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:

<move element="product.tile.addtocart" destination="product.tile.container.main.after" />

With some scss variable changes we can achieve the following effect:

$product-tile_addtocart-show-only-on-hover: false;
$product-tile_addtocart-reduced: false;
$product-tile_main-after-height: 6rem;

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:

import 'components/product-tile-list';
import 'components/tile-gallery';

Old documentation

https://creativestyle.atlassian.net/wiki/spaces/CSHOP/pages/41977304

ProductTile