2.1.12. Products grid

Owned by Karol Schönsee
Last updated: Mar 15, 2022 by Paweł Tylek
6 min read

The CC Products Grid component does allow including a product grid of a specific category or SKUs. The Products Grid component includes product tiles as well as product tile hover effects (depending on the styling and configuration). Additionally it allows adding a hero image inside the product grid.

 

In order to add products to the product carousel you can select CATEGORIES in the multi-select field.

 

Alternatively, you can add products via the SKUS input (comma separated). However, providing a list of SKUs will disable any filtering and sorting configured for that component. Also the category selection (if specified) will also not be taken into account. Only products with specified SKUs will be displayed in exactly the same order as they are provided in SKUs field.

 

The CUSTOM DATA PROVIDER input has been used for creating custom criteria. It is recommended to be used only by developers.

 

You can also set a FILTER to e.g. display only new products.

 

In the ORDER BY select fields you can pick an attribute used to sort the products (ascending or descending).

 

Next you need to define the layouts for specific devices:

 

·       MOBILE LAYOUT: Here you can select either one, two, three or four rows of products that you want to display in the product grid on mobile devices. In case you want to include a custom number of rows, you can type the number of rows to be displayed in the input field of the last option.

·       TABLET LAYOUT: Here you can select either one, two, three or four rows of products that you want to display in the product grid on tablet devices. In case you want to include a custom number of rows, you can type the number of rows to be displayed in the input field of the last option.

·       DESKTOP LAYOUT: Here you can select either one, two, three or four rows of products that you want to display in the product grid on desktop devices. In case you want to include a custom number of rows, you can type the number of rows to be displayed in the input field of the last option.[1]

 

In the HERO TEASER you can choose if you want to display a hero image inside the product grid. Following options are available:

 

·       NO HERO TEASER: There will be no hero teaser displayed.

·       HERO TEASER ON THE LEFT: There will be a hero teaser displayed on the top row and the left-hand side in the product grid.

·       HERO TEASER ON THE RIGHT: There will be a hero teaser displayed on the top row and the right-hand side in the product grid.

 

In case you selected an option to include an image teaser you can now configure it. In the CONTENT area following settings can be made:

 

  1. In the image upload area on the left-hand side you can insert an image using the Magento 2 media explorer. [2] If you already have an image, you can remove it using the “bin” icon. There is also a possibility to add video - more 2.16. Video Teasers. If you have more than one image teaser (added using the the “+” icon) you can move the given image using the “arrow up” and “arrow down” icons. Also you can change the existing image by clicking “change”.

  2. In the CONTENT ALIGN area you are able to control the text appearance on the image teaser. Just click on the desired position field where the text should be shown.

  3. Enter the SLOGAN text which will be the most prominent text element on the image teaser (depending on the styling). Additionally it is possible to insert dynamic content in this text area and any other textfield component, e.g. HEADLINE and DESCRIPTION using Content Constructor Directives. By adding directives it will display your products’ price or a products’ discount percentage to your desired text field.

    1. Fetching a products’ price can be done with this directive:
      {{price sku=”your_product_sku” withCurrency=”true”}}
      When choosing “false” as your parameter there is no currency sign displayed.

    2. If you wish to display a discount percentage of a certain product use following directive:
      {{discountPercentage sku=”your_product_sku”}}

    3. However, only an integer value will be shown.

  4. Enter the DESCRIPTION text which will be the text element located underneath the slogan on the image teaser (depending on the styling). Also, Constructor Directives can be used here.

  5. Enter a BUTTON LABEL text in case you want to include a button on the image teaser.

  6. Enter a URL in the URL input in case you want to add a link to the button (also the Magento 2 widget types CMS Page Link, Catalog Category Link, Category Product Link, File URL are supported).

  

In the STYLE tab you can make adjustments to the contrast of the text:

 

  1. CONTRAST OPTIMIZER.

    1. Overlay: If you have chosen your text style to appear as ‘light’ then the intensity slider darkens the entire image depending on the slider’s position and vice versa when text style is set to ‘dark’.

    2. Gradient shadow: Similar to the ‘overlay’ option you can adjust the gradient shadow’s intensity with its slider. You can determine the gradient shadow’s direction by clicking the adjustment field next to it.

    3. Container: The Container option provides a frame behind the text. Depending on the chosen ‘text style’ and the intensity slider the frame appears in black or white.

    4. Text shadow: If Text Shadow is selected then a shadow is cast around the text. The slider controls the brightness of the shadows.

  2. The INTENSITY SLIDER is located directly below. It controls the intensity of the adjustments mentioned above. Ranging from 0 to 100 where the higher the number the more intensive the color gradient.

  3. On the right-hand side you can set DIRECTION. Click on one of the boxes to specify where the ‘Gradient shadow’ fade starts. (It is only available for ‘Gradient shadow’)

  4. TEXT STYLE option controls the coloring of the font appearing on the Image teaser. You have a choice between “LIGHT” and “DARK”. Light colors the slogan and description in bright text while dark results in black lettering.

  5. MIRROR IMAGE can be toggled on or off. This feature gives the possibility to flip your image horizontally.

 

The last POSITION tab adjusts the image teasers’ size and position properties:

 

  1. With TEASER SIZE you determine the height and width of the image.

    1. 1x1: The image size is equal to one product tile in height and width (one row and one column).

    2. 2x2: The image size occupies two product tiles in height and width (two rows and two columns).

    3. 2x1: The image size width is equal to two product tiles and its height occupies one product tile (one row and two columns).

    4. 1x2: The image size width is equal to one product tile and its height occupies two product tiles (two rows and one column).

  2. The POSITION of the image teaser can be located:

    1. Left: Image is left aligned

    2. Center: Image is in the center

    3. Right: Image is right aligned

  3. Depending whether ROW 1 or ROW 2 is selected the image is placed in the corresponding row.

  4. The toggle SHOW IN MOBILES lets you set if the image is shown on mobile devices.

 

Figure 23 Product grid image settings (admin panel)

 

Figure 24 CC Products grid component (admin panel)

 

 

When the settings have been made, click SAVE.

 

 

 

 



[1] The breakpoints for the devices are: mobile up to 767px, tablet 768 - 1023px, desktop 1024px

[2] It is recommended to use JPG and PNG (RGB format) file types for images