Versions Compared

Old Version 10

changes.mady.by.user Krzysztof Kula

Saved on

compared with

New Version Current

changes.mady.by.user Patrycja Niestrój

Saved on

Key

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

...

Code Block
@import 'components/button/mixin';

.actions-toolbar {
    .primary {
        button {
            @include button(
                $type: 'extra-cta',
                $icon_pos: $button_default-icon-pos
            );
        }
    }
}

Filters -

...

make filters

...

horizontal

The common design pattern optional scenario for magesuite filters is to move the filter into offcanvas on mobile. theme-creativeshop offers a built-in possibility to move filters into offcanvas on mobile and/or desktop. (However, desktop offcanvas filters are very rarely used)

Storefront

...

Display offcanvas toggle button and enable offcanvas filters:

etc/view.xml

...

set them horizontally, above the toolbar and products.

Storefront

...

In order to introduce horizontal filters the layout must be changed to 1column and left column must be placed below or under the main column. Add the following changes in XML files:

src/Smile_ElasticsuiteCatalog/layout/catalog_category_view_type_layered.xml

Code Block
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="1column">
    <body>
   <var name="filters_offcanvas_button">             <var name="display">false</var>
            <var name="label">Filters</var>
            <var name="icon">images/icons/toolbar/filters.svg</var>
   <move element="catalog.leftnav" destination="main" before="-" />
    </var>
   body>
</var>
    <var name="offcanvas_filters_enabled">/page>

src/Smile_ElasticsuiteCatalog/layout/catalogsearch_result_index.xml

Code Block
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="1column">
    <body>
        <var<move nameelement="mobile">true</var>
  catalog.leftnav" destination="main" before="-" />
     <var name="desktop">false</var>
    </var>
</vars>

Do not collapse filters

the standard behavior of magesuite filters on mobile is to collapse the whole filters section:

...

In order to show filters in offcanvas set is_collapsible_mobile variable in:

Smile_ElasticsuiteCatalog/layout/catalog_category_view_type_layered.xml

Code Block
<referenceBlock name="catalog.leftnav">
    <arguments>
     </body>
</page>

Although the behavior (vertical/horizontal position) of filters basically is set by page layout, it is also possible to force horizontal or vertical styling for any page layout. Check force_sidebar_filters_style and force_horizontal_filters_style variables in etc/view/xml file in order to learn more.

Code Block
  <!-- If you want to have 1column-layout but still keep default filters styling (the one from sidebar) you can set this argument's value to 'true' -->
  <argument name="isforce_sidebar_collapsiblefilters_mobilestyle" xsi:type="boolean">false</argument>
  
 </arguments>
</referenceBlock>

Smile_ElasticsuiteCatalog/layout/catalogsearch_result_index.xml

Code Block
<referenceBlock name="catalogsearch.leftnav">
    <arguments>
      <!-- If you want to have any other layout than '1column-layout' but still keep horizontal filters styling you can set this argument's value to 'true' -->
  <argument name="isforce_horizontal_collapsiblefilters_mobilestyle" xsi:type="boolean">false</argument>
    </arguments>
</referenceBlock>

Styling

There are a couple of variables for the toggle button that can be adjusted. components/toolbar/toolbar.scss

Code Block
$toolbar_filters-button-type: 'secondary' !default;
$toolbar_filters-button-icon-pos: 'left' !default;

Offcanvas filters styles are placed in components/offcanvas-filters There are some variables that can be adjusted in order to achieve the desired look&feel of the child project:

Code Block
$offcanvas-filters_transition-time: $transition-default-time !default;
$offcanvas-filters_overlay-background: $modals_overlay-background !default;
$offcanvas-filters_drawer-background: $color_background-200 !default;
$offcanvas-filters_spinner-color: $color_primary-500 !default;
$offcanvas-filters__close-include-pseudoicon: true !default;
$offcanvas-filters__close-pseudoicon-type: 'plus' !default;
$offcanvas-filters__close-width: 2rem !default;
$offcanvas-filters__close-line-width: 0.2rem !default;
$offcanvas-filters__close-color: $color_text-600 !default;
$offcanvas-filters__close-color-hover: $color_text-500 !default;

Hover effect on tile - add the second image on hover

Many projects request to add a hover effect on tile that shows another product image (f.e. the back of the product).

...

Add a template for the second image on the tile

In MageSuite_ProductTile/layout/product_tile.xml add a template with the second image:

...

In theme-creativeshop/src/components/aftersearch-nav/aftersearch-nav.scss there are plenty of variables that can help with styling of horizontal filters.

Pay attention to the below variables, that help to set the desired number of rows and columns on tablet, laptop, and desktop breakpoint

Code Block
$aftersearch-nav--horizontal_cols: (
    tablet: 4,
    laptop: 5,
    desktop: 6,
) !default;
$aftersearch-nav--horizontal_rows: (
    tablet: 1,
    laptop: 1,
    desktop: 1,
) !default;

Filters - move filters into offcanvas

The common design pattern is to move the filter into offcanvas on mobile. theme-creativeshop offers a built-in possibility to move filters into offcanvas on mobile and/or desktop. (However, desktop offcanvas filters are very rarely used)

Storefront

...

View file
nameInvalid file id - 18bcc135-891f-403d-bd2b-5f5684e764f1

Display offcanvas toggle button and enable offcanvas filters:

etc/view.xml

Code Block
<vars module="Magento_Catalog">
    <var name="toolbar">
        <var name="filters_offcanvas_button">
        <arguments>    <var name="display">false</var>
           <argument xsi:type="object" <var name="cache_key_model">MageSuite\ProductTile\Cache\Image</argument>label">Filters</var>
            <argument xsi:type="string"<var name="css_class">cs-product-tile__image cs-product-tile__image--hover</argument>icon">images/icons/toolbar/filters.svg</var>
        </arguments>var>
    </block>
</referenceBlock>
Code Block
<?phpvar>
    <var $product = $block->getProduct();
name="offcanvas_filters_enabled">
   $imageHelper = $this->helper('Magento\Catalog\Helper\Image');   <var  $productImageOnHover = $block->getImage($product, 'category_on_hover_page_grid');name="mobile">true</var>
        $productImageOnHoverUrl<var = $block->escapeUrl($productImageOnHover->getImageUrl());name="desktop">false</var>
    $productImageOnHover2x = $block->getImage($product, $block->getImage2xId() ?? 'category_on_hover_page_grid_x2');</var>
</vars>

Do not collapse filters

the standard behavior of magesuite filters on mobile is to collapse the whole filters section:

...

In order to show filters in offcanvas set is_collapsible_mobile variable in:

Smile_ElasticsuiteCatalog/layout/catalog_category_view_type_layered.xml

Code Block
<referenceBlock name="catalog.leftnav">
    $productImageOnHover2xUrl<arguments>
= $block->escapeUrl($productImageOnHover2x->getImageUrl());         $productImageOnHoverWidth = $productImageOnHover->getWidth();<argument name="is_collapsible_mobile" xsi:type="boolean">false</argument>
     $productImageOnHoverHeight = $productImageOnHover->getHeight();</arguments>
</referenceBlock>

Smile_ElasticsuiteCatalog/layout/catalogsearch_result_index.xml

Code Block
<referenceBlock name="catalogsearch.leftnav">
    <arguments>
$productImageOnHoverAlt = $block->escapeHtmlAttr($product->getName());     $imageTypeHelper = $this->helper(\MageSuite\ThemeHelpers\Helper\ImageType::class);

    $loaderImage = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';<argument name="is_collapsible_mobile" xsi:type="boolean">false</argument>
     </* XML config */
    $cssClass = $block->getCssClass();
    $imgClass = $block->getImgClass();
    $applyWidthHeightAttr = $block->getApplyWidthHeightAttr();
?>
<?php if ($productImageOnHover && strpos($productImageOnHoverUrl, 'placeholder') === false): ?>
    <picture class="<?= $cssClass ?>">
        <source
            srcset="<?= $productImageOnHoverUrl . ' 1x, ' . $productImageOnHover2xUrl . ' 2x' ?>"
        >
        <img
            src="<?= $productImageOnHoverUrl ?>"arguments>
</referenceBlock>

Styling

There are a couple of variables for the toggle button that can be adjusted. components/toolbar/toolbar.scss

Code Block
$toolbar_filters-button-type: 'secondary' !default;
$toolbar_filters-button-icon-pos: 'left' !default;

Offcanvas filters styles are placed in components/offcanvas-filters There are some variables that can be adjusted in order to achieve the desired look&feel of the child project:

Code Block
$offcanvas-filters_transition-time: $transition-default-time !default;
$offcanvas-filters_overlay-background: $modals_overlay-background !default;
$offcanvas-filters_drawer-background: $color_background-200 !default;
$offcanvas-filters_spinner-color: $color_primary-500 !default;
$offcanvas-filters__close-include-pseudoicon: true !default;
$offcanvas-filters__close-pseudoicon-type: 'plus' !default;
$offcanvas-filters__close-width: 2rem !default;
$offcanvas-filters__close-line-width: 0.2rem !default;
$offcanvas-filters__close-color: $color_text-600 !default;
$offcanvas-filters__close-color-hover: $color_text-500 !default;

Hover effect on tile - add the second image on hover

Many projects request to add a hover effect on tile that shows another product image (f.e. the back of the product).

...

Add a template for the second image on the tile

In MageSuite_ProductTile/layout/product_tile.xml add a template with the second image:

Code Block
<referenceBlock name="product.tile.container.figure">
    <block class="MageSuite\ProductTile\Block\Tile\Fragment" name="product.tile.figure.hover.image" template="MageSuite_ProductTile::fragments/hover-image.phtml" after="-">
        <arguments>
   class="<?= $imgClass ?>"       <argument      srcset="<?= $productImageOnHoverUrl . ' 1x, ' . $productImageOnHover2xUrl . ' 2x' ?>"
   xsi:type="object" name="cache_key_model">MageSuite\ProductTile\Cache\Image</argument>
            <argument xsi:type="string" name="css_class">cs-product-tile__image cs-product-tile__image--hover</argument>
        <?php/arguments>
if ($applyWidthHeightAttr): ?>  </block>
</referenceBlock>
Code Block
<?php
    $product = $block->getProduct();
    $imageHelper  width="<?= $productImageOnHoverWidth ?>"= $this->helper('Magento\Catalog\Helper\Image');
    $productImageOnHover = $block->getImage($product, 'category_on_hover_page_grid');
        height="<?= $productImageOnHoverHeight ?>"$productImageOnHoverUrl = $block->escapeUrl($productImageOnHover->getImageUrl());
    $productImageOnHover2x = $block->getImage($product,       <?php endif; ?>$block->getImage2xId() ?? 'category_on_hover_page_grid_x2');
    $productImageOnHover2xUrl = $block->escapeUrl($productImageOnHover2x->getImageUrl());
    $productImageOnHoverWidth  alt="<?= $productImageOnHoverAlt ?>"= $productImageOnHover->getWidth();
    $productImageOnHoverHeight = $productImageOnHover->getHeight();
    $productImageOnHoverAlt = $block->escapeHtmlAttr($product->getName());
    $imageTypeHelper  loading="lazy"= $this->helper(\MageSuite\ThemeHelpers\Helper\ImageType::class);

    $loaderImage =  >'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';

    </picture>* <?php endif; ?>

Add styling

Code Block
.#{$ns}product-tile {XML config */
    $cssClass = $block->getCssClass();
    $imgClass $root: &;= $block->getImgClass();
    $applyWidthHeightAttr = $block->getApplyWidthHeightAttr();
?>
<?php if ($productImageOnHover @media&& strpos(hover: hover) {
$productImageOnHoverUrl, 'placeholder') === false): ?>
    <picture class="<?=  &:hover {$cssClass ?>">
        <source
    #{$root}__image--hover {       srcset="<?= $productImageOnHoverUrl . ' 1x, ' . $productImageOnHover2xUrl . ' opacity: 1;2x' ?>"
        >
   }     <img
   }     }    src="<?=  &__image {$productImageOnHoverUrl ?>"
         display: block;  class="<?= $imgClass ?>"
     &--hover {      srcset="<?= $productImageOnHoverUrl . ' 1x, ' . display:$productImageOnHover2xUrl none;. ' 2x' ?>"
          @media (hover: hover) {
  <?php if ($applyWidthHeightAttr): ?>
              display: block;
   width="<?= $productImageOnHoverWidth ?>"
             position: absolute;  height="<?= $productImageOnHoverHeight ?>"
            top: 0<?php endif; ?>
            alt="<?= $productImageOnHoverAlt ?>"
left: 0;           loading="lazy"
     width: 100%;  >
    </picture>
<?php     endif; ?>

Add styling

Code Block
.#{$ns}product-tile {
    height$root: 100%;&;
    
    @media (hover: hover) {
        &:hover {
            z-index: 2;#{$root}__image--hover {
                opacity: 01;
            }
        }
    }
}

Change scenario for navigation flyout teaser

The navigation teaser scenario can be changed to any available image teaser scenario.

...

In order to learn about configuration options check theme-creativeshop/src/MageSuite_Navigation/layout/default.xml

Code Block
languagexml
<block class="MageSuite\Navigation\Block\Navigation" name="navigation.main" template="MageSuite_Navigation::main/bar.phtml">

    &__image {
        <arguments>display: block;

      <argument xsi:type="array" name="imageTeaserConfig">
 &--hover {
           <item name="items" xsi:type="array"> display: none;

            @media (hover: hover) {
<item name="0" xsi:type="array">              display: block;
     <item name="image" xsi:type="array">         position: absolute;
              <item name="aspect_ratio" xsi:type="string">3:5</item> top: 0;
                left: 0;
  </item>              width: 100%;
     <item name="content_align" xsi:type="array">         height: 100%;
              <item name="x" xsi:type="string">2</item>
 z-index: 2;
                       <item name="y" xsi:type="string">1</item>
opacity: 0;
            }
      </item>  }
                  <item name="optimizers" xsi:type="array">
}
}

Change scenario for navigation flyout teaser

The navigation teaser scenario can be changed to any available image teaser scenario.

...

In order to learn about configuration options check theme-creativeshop/src/MageSuite_Navigation/layout/default.xml

Code Block
languagexml
<block class="MageSuite\Navigation\Block\Navigation" name="navigation.main" template="MageSuite_Navigation::main/bar.phtml">
    <arguments>
        <argument xsi:type="array" name="imageTeaserConfig">
            <item name="color_schemeitems" xsi:type="stringarray">dark</item>>
                <item    </item>name="0" xsi:type="array">
                    <item name="teaserTypeimage" xsi:type="string">full</item>array">
                        <item  </item>name="aspect_ratio" xsi:type="string">3:5</item>
                    </item>
                    <item name="scenariocontent_align" xsi:type="array">
  ....         </argument>     </arguments>
</block>

Add SKU (or other custom elements) on a product tile

In order to add an extra element to the product tile create a template and add it to the product tile XML:

src/MageSuite_ProductTile/layout/product_tile.xml

Code Block
<referenceBlock name="product.tile.container.main.details">        <block<item classname="MageSuite\ProductTile\Block\Tile\Containerx" namexsi:type="product.tile.sku.container" before="-">"string">2</item>
            <arguments>            <item <argumentname="y" xsi:type="string" name="html_tag">div</argument>>1</item>
                  <argument xsi:type="string" name="css_class">cs-product-tile__sku</argument> </item>
           </arguments>         <block<item classname="MageSuite\ProductTile\Block\Tile\Fragmentoptimizers" namexsi:type="product.tile.sku" template="MageSuite_ProductTile::fragments/sku.phtml" />array">
                        <item name="color_scheme" xsi:type="string">dark</item>
                    </block>
</referenceBlock>
Code Block
<?= $block->escapeHtml($block->getProduct()->getSku()) ?>

Read more in MageSuite_productTile module documentation: ProductTile

Add a special variant for image teaser

Sometimes there is a need to style some image teasers in a special way. Thanks to the custom fields an admin editor can mark some teasers as special variants (see Custom Fields ) and a frontend developer can style them based on a custom class.

Storefront

...

Admin panel:

...

Add special variant custom fields

Code Block
<vars module="MageSuite_ContentConstructor">item>
         <var name="image_teaser">           <var<item name="custom_sectionsteaserType">
 xsi:type="string">full</item>
           <var name="0">    </item>
            <var name="label">Custom settings</var></item>
                <var<item name="contentscenario">
                    <var name="fields xsi:type="array">
 ....
        </argument>
             <var name="0</arguments>
</block>

Add SKU (or other custom elements) on a product tile

In order to add an extra element to the product tile create a template and add it to the product tile XML:

src/MageSuite_ProductTile/layout/product_tile.xml

Code Block
<referenceBlock name="product.tile.container.main.details">
    <block    class="MageSuite\ProductTile\Block\Tile\Container" name="product.tile.sku.container" before="-">
        <arguments>
             <var<argument xsi:type="string" name="label">Special variant (use only with image-teaser component)</var>html_tag">div</argument>
                            <var<argument xsi:type="string" name="type">select</var>css_class">cs-product-tile__sku</argument>
        </arguments>
                   <var name="options">
                                <var name=" ">Standard</var>
<block class="MageSuite\ProductTile\Block\Tile\Fragment" name="product.tile.sku" template="MageSuite_ProductTile::fragments/sku.phtml" />
    </block>
                          <var name="cs-container--mood-component">Mood component</var>
                            </var></referenceBlock>
Code Block
<?= $block->escapeHtml($block->getProduct()->getSku()) ?>

Read more in MageSuite_productTile module documentation: ProductTile

Add a special variant for image teaser

Sometimes there is a need to style some image teasers in a special way. Thanks to the custom fields an admin editor can mark some teasers as special variants (see Custom Fields ) and a frontend developer can style them based on a custom class.

Storefront

...

Admin panel:

...

Add special variant custom fields

Code Block
<vars module="MageSuite_ContentConstructor">
    <var name="image_teaser">
        <var name="custom_sections">
            <var name="0">
     <var name="model">special-variant</var>          <var name="label">Custom settings</var>
                <var name="defaultcontent"> </var>
      
                     <var name="frontend_type">css_class</var>fields">
                        </var>
<var name="0">
                   </var>         <var name="label">Special variant (use only with image-teaser  component)</var>
              </var>         </var>     </var>
</vars>

Style component that is wrapped in a container with and extra modifier

components/image-teaser/image-teaser.scss

Styles example:

Code Block
.#{$ns}container--mood-component {<var name="type">select</var>
        .#{$ns}image-teaser {         --base-size: 100%;         --gap: 0;<var name="options">
         --slogan-font-size: 2rem;         --description-font-size: 1.4rem;             @include media('>=laptop') {<var name=" ">Standard</var>
                   --slogan-font-size: 2.4rem;            <var name="cs-container-description-font-size: 1.6rem;mood-component">Mood component</var>
            }          .#{$ns}image-teaser__background {     </var>
       height: 73%;              @include media('>=tablet') {      <var name="model">special-variant</var>
                           height: 54%;
 <var name="default"> </var>
          }         }          .#{$ns}image-teaser__figure {<var name="frontend_type">css_class</var>
              display: flex;         </var>
   flex-direction: column;             justify-content: space-between;  </var>
      }     }
}

Custom will will be applied to all image-teaser based component (f.e. hero, icon component)

In order to hide a custom field in a specific component configuration hide them with styles, f.e.

Code Block
.cc-image-teaser-configurator--teaser-and-text, 
.cc-image-teaser-configurator--icon {

   .cc-custom-fields__form-group:has(.cc-input--special-variant)     </var>
            </var>
        </var>
    </var>
</vars>

Style component that is wrapped in a container with and extra modifier

components/image-teaser/image-teaser.scss

Styles example:

Code Block
.#{$ns}container--mood-component {
    .#{$ns}image-teaser {
        display--base-size: none100%;
    }
}

The CSS class of a custom field follows the pattern: .cc-input--[name]

Styles for CC configurator must be placed in a module, not in the child theme, f.e. under the following path:

customization-[project]/magesuite-custom-content-constructor-components/custom-components-configurator.scss

Place an additional element below mobile navigation in offcanvas

The common design pattern is to place some elements like my account icon or language switcher below mobile navigation. In the theme-creativeshop icons are placed in the header or mobile, but there is an easy way to move them into offcanvas if there is a such design requirement. It is also possible to place other, custom elements in mobile offcanvas navigation.

Storefront

...

Offcanvas drawer template hotspots

In the MageSuite_Navigation/templates/offcanvas/drawer.phtml template serevral hotspots are prepared:

Code Block
  <?= $block->getChildHtml('navigation.offcanvas.after.list'); ?>
  <?= $block->getChildHtml('navigation.offcanvas.after.authorization'); ?>
  <?= $block->getChildHtml('navigation.offcanvas.after.language'); ?>
  <?= $block->getChildHtml('navigation.offcanvas.after'); ?>

They can be used in order to place inside them some new elements f.e. static block:

Code Block
<referenceBlock name="navigation.offcanvas">
    <block class="MageSuite\ThemeHelpers\Block\Cms\CacheableBlock" name="navigation.offcanvas.after.list">
        <arguments>    --gap: 0;

        --slogan-font-size: 2rem;
        --description-font-size: 1.4rem;

        @include media('>=laptop') {
            --slogan-font-size: 2.4rem;
            --description-font-size: 1.6rem;
        }

        .#{$ns}image-teaser__background {
            height: 73%;

            @include media('>=tablet') {
                height: 54%;
            }
        }

        .#{$ns}image-teaser__figure {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    }
}

Custom will will be applied to all image-teaser based component (f.e. hero, icon component)

In order to hide a custom field in a specific component configuration hide them with styles, f.e.

Code Block
.cc-image-teaser-configurator--teaser-and-text, 
.cc-image-teaser-configurator--icon {

   .cc-custom-fields__form-group:has(.cc-input--special-variant) {
        display: none;
    }
}

The CSS class of a custom field follows the pattern: .cc-input--[name]

Styles for CC configurator must be placed in a module, not in the child theme, f.e. under the following path:

customization-[project]/magesuite-custom-content-constructor-components/custom-components-configurator.scss

Place an additional element below mobile navigation in offcanvas

The common design pattern is to place some elements like my account icon or language switcher below mobile navigation. In the theme-creativeshop icons are placed in the header or mobile, but there is an easy way to move them into offcanvas if there is a such design requirement. It is also possible to place other, custom elements in mobile offcanvas navigation.

Storefront

...

Offcanvas drawer template hotspots

In the MageSuite_Navigation/templates/offcanvas/drawer.phtml template serevral hotspots are prepared:

Code Block
  <?= $block->getChildHtml('navigation.offcanvas.after.list'); ?>
  <?= $block->getChildHtml('navigation.offcanvas.after.authorization'); ?>
  <?= $block->getChildHtml('navigation.offcanvas.after.language'); ?>
  <?= $block->getChildHtml('navigation.offcanvas.after'); ?>

They can be used in order to place inside them some new elements f.e. static block:

Code Block
<referenceBlock name="navigation.offcanvas">
    <block class="MageSuite\ThemeHelpers\Block\Cms\CacheableBlock" name="navigation.offcanvas.after.list">
        <arguments>
            <argument name="block_id" xsi:type="string">company-menu</argument>
        </arguments>
    </block>
</referenceBlock>

Show search input on the desktop as a dropdown

By default in MageSuite above defined breakpoint search input is visible as a normal header element (layer), by default between the logo & user nav.

Code Block
$global_header-mobile-search-in-offcanvas-breakpoint: 'tablet' !default

...

The other possible option is to place search input below header - in the same way as on mobile.

...

In order to change this behavior in src/config/variables.scss file of your there set the following variable:

Code Block
$global_header-hide-search-item-trigger-breakpoint: false;
$global_header-searchbox-as-layer-breakpoint: false;

Integrate self-hosted fonts

To provide self-hosted, preloaded fonts, define specific arguments in fonts XML block.

  • Step 1: provide (in local_fonts) CSS file in which custom @font-face rules are defined. Example:

Code Block
<argument name="local_fonts" xsi:type="array">
    <item name="local.fonts.css" xsi:type="string">css/font.css</item>
</argument>

  • Step 2: provide (in local_fonts_file) paths to fonts.Example:

Code Block
<argument name="local_fonts_file" xsi:type="array">
    <item name="local.fonts.path_1" xsi:type="string">fonts/PT-Sans_Regular.woff2</item>
    <item name="local.fonts.path_2" xsi:type="string">fonts/PT-Sans_Bold.woff2</item>
</argument>

  • Step 3: Define custom fonts rules in CSS file defined in first step. Example:

Code Block
@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PT-Sans_Regular.woff2') format('woff2'),
        url('../fonts/PT-Sans_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PT-Sans_Bold.woff2') format('woff2'),
        url('../fonts/PT-Sans_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

Another possibility for font-display is optional. It is used in some of the project, and it’s working, BUT in this case block period is extremely short (~3s). In this case, user’s connection speed might be a determining factor, where slower connections are less likely to receive custom font.

To avoid CLS while using font-display: swap; consider using fallback font: https://web.dev/articles/css-size-adjust (https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Poppins ). Example of implementation in projects: https://gitlab.creativestyle.pl/toys4fun/theme-toys4fun/-/merge_requests/343.

Change category links component mobile layout from dropdown to scrollable list

Example:

...

In order to introduce a scrollable list for the category links component override the following files in your theme:

  1. src/MageSuite_ContentConstructorFrontend/templates/component/category_links.phtml

    1. remove initialisation of collapsible widget: data-mage-init='{"collapsible":{"mediaQueryScope":"(max-width: 767px)"},"ccCategoryLinks":{}}'

    2. remove dropdown trigger: cs-category-links__subtitle | cs-category-links-dropdown__trigger

  2. src/components/category-links/index.ts

    1. In order to avoid including not used styles remove import 'components/category-links/category-links-dropdown.scss'; import. Leave only import components/category-links/category-links.scss'; import

In etc/view.xml file decide how many items should be shown in the component. To always show every subcategory, which was selected in the admin panel, use a high number, f.e.

Code Block
<var name="category_links">
    <var name="hide_links_breakpoints">
        <var name="tablet">
            <var name="hide_from">99</var>
        </var>
        <var name="laptop">
            <var name="hide_from">99</var>
        </var>
        <var name="laptopLg">
            <var name="hide_from">99</var>
        </var>
        <var name="desktop">
            <var name="hide_from">99</var>
        </var>
    </var>
</var>

The following CSS can be helpful in order to make a native scroll on a list with subcategory items. use it in src/components/category-links/category-links.scss file.

Code Block
&__list-wrapper {
    display: flex;
    padding-left: $page_edge-gutter;
    padding-right: $page_edge-gutter;
    scroll-padding-left: $page_edge-gutter;
    scroll-padding-right: $page_edge-gutter;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
}

Share icons for PDP

The following code can be an inspiration when you have to add share icons on PDP.

.Example:

...

Files:

sharing.phtml

Code Block
<?php
$product = $block->getProduct();
$url = $product->getProductUrl();
$encodedUrl = urlencode($url);
$shareText = __('Check that out: %1 #[marketing hash] %2', $product->getName(), $url);
?>
<div class="cs-buybox__sharing">
    <ul class="cs-share">
        <li class="cs-share__item cs-share__item--facebook">
            <a onclick="window.open(this.href, '_blank', 'width=600,height=460'); return false;" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?= $encodedUrl ?>[optional campaing identifier]" rel="nofollow noopener" data-rel="popup" title="<?= __('Share on Facebook'); ?>" role="button" aria-label="<?= __('Share on Facebook'); ?>" class="cs-share__link cs-share__link--facebook">
                <?= $this->getLayout()
                         ->createBlock('MageSuite\ThemeHelpers\Block\Icon')
                         ->setIconUrl('images/socials/facebook.svg')
                         ->setCssClass('cs-share__icon cs-share__icon--facebook')
                         ->setAltText(__('Share on facebook'))
                         ->setInlined(true)
                         ->setLazyLoaded(true)
                         ->toHtml();
                ?>
                <span class="cs-visually-hidden"><?= __('Share on Facebook'); ?></span>
            </a>
        </li>
        <li class="cs-share__item cs-share__item--pinterest">
            <a onclick="window.open(this.href, '_blank', 'width=600,height=460'); return false;" target="_blank" href="https://www.pinterest.com/pin/create/link/?url=<?= $encodedUrl ?>[optional campaign identifier]&amp;media=<?= [ get encoded image url ]?>&amp;description=<?= urlencode($shareText) ?>[optional campaing identifier]" data-rel="popup" title="<?= __('Pin at Pinterest'); ?>" role="button" aria-label="<?= __('Pin at Pinterest'); ?>" rel="nofollow noopener" class="cs-share__link cs-share__link--pinterest">
                [icon (similarly as above)]
                [visually hidden text for screen readers (similarly as above)]
            </a>
        </li>
        <li class="cs-share__item cs-share__item--whatsapp">
            <a onclick="window.open(this.href, '_blank', 'width=600,height=460'); return false;" target="_blank" href="whatsapp://send?text=<?= urlencode($shareText) ?>[optional campaing identifier]" title="<?= __('Share with Whatsapp'); ?>" rel="nofollow noopener" role="button" aria-label="<?= __('Share with Whatsapp'); ?>" class="cs-share__link cs-share__link--whatsapp">
                [icon (similarly as above)]
                [visually hidden text for screen readers (similarly as above)]
            </a>
        </li>
        <li class="cs-share__item cs-share__item--copy">
            <a href="#" title="<?= __('Copy to clipboard'); ?>" role="button" aria-label="<?= __('Copy to clipboard'); ?>" class="cs-share__link cs-share__link--copy">
                [icon (similarly as above)]
                [visually hidden text for screen readers (similarly as above)]
                <input type="text" class="cs-visually-hidden copytoclipboard" aria-label="<?= __('Copy to clipboard'); ?>" value="<?= $shareText ?>?utm_source=copy&utm_medium=social&utm_campaign=user-share-copy">
            </a>
            <span class="cs-share__feedback-tooltip"><?= __('Product url has beed copied to your clipboard.'); ?></span>
        </li>
    </ul>
</div>

catalog_product_view.xml

Code Block
<referenceContainer name="product.info.main">
    <block class="Magento\Catalog\Block\Product\View" name="product.info.main.sharing" template="Magento_Catalog::product/view/sharing.phtml" after="-" />
</referenceContainer>

share.ts

Code Block
export default class Share {
    protected _link: HTMLLinkElement;
    protected _copySource: HTMLInputElement;
    protected _sharingText: String;
    protected _feedback: HTMLSpanElement;
    
    public constructor() {
        this._link = document.querySelector('.cs-share__link--copy');
        this._copySource = document.querySelector('#copytoclipboard');
        this._feedback = document.querySelector('.cs-share__feedback-tooltip');

        this._setEvents();
    }

    protected _copyToClipboard(): void {
        this._copySource.select();
        document.execCommand('copy');
        
   <argument name="block_id" xsi:type="string">company-menu</argument>   if (this._feedback) {
   </arguments>     </block> </referenceBlock>

Show search input on the desktop as a dropdown

By default in MageSuite above defined breakpoint search input is visible as a normal header element (layer), by default between the logo & user nav.

Code Block
$global_header-mobile-search-in-offcanvas-breakpoint: 'tablet' !default

...

The other possible option is to place search input below header - in the same way as on mobile.

...

In order to change this behavior in src/config/variables.scss file of your there set the following variable:

Code Block
$global_header-hide-search-item-trigger-breakpoint: false;
$global_header-searchbox-as-layer-breakpoint: false;

Integrate self-hosted fonts

To provide self-hosted, preloaded fonts, define specific arguments in fonts XML block.

  • Step 1: provide (in local_fonts) CSS file in which custom @font-face rules are defined. Example:

Code Block
<argument name="local_fonts" xsi:type="array">
    <item name="local.fonts.css" xsi:type="string">css/font.css</item>
</argument>

  • Step 2: provide (in local_fonts_file) paths to fonts.Example:

Code Block
<argument name="local_fonts_file" xsi:type="array">
    <item name="local.fonts.path_1" xsi:type="string">fonts/PT-Sans_Regular.woff2</item>
    <item name="local.fonts.path_2" xsi:type="string">fonts/PT-Sans_Bold.woff2</item>
</argument>

  • Step 3: Define custom fonts rules in CSS file defined in first step. Example:

Code Block
@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PT-Sans_Regular.woff2') format('woff2'),  this._feedback.classList.add('cs-share__feedback-tooltip--active');
        }
    }
    
    protected _setEvents(): void {
        this._link.addEventListener('click', (e: MouseEvent): void => {
            e.preventDefault();

            if (this._copySource) {
                this._copyToClipboard();
        url('../fonts/PT-Sans_Regular.woff') format('woff');   }
 font-weight: 400;     font-style: normal; });

     font-display: optional; } 
@font-face {if (this._feedback) {
             font-family: 'PT Sans';this._feedback.addEventListener('animationend', (): void => {
     src: url('../fonts/PT-Sans_Bold.woff2') format('woff2'),         url('this../fonts/PT-Sans_Bold.woff') format('woff');_feedback.classList.remove('cs-share__feedback-tooltip--active');
           font-weight: 700; });
      font-style: normal; }
   font-display: optional; }
}

Styles according to the project design