Installation

This module is a part of MageSuite metapackage

composer require "creativestyle/magesuite-theme-helpers" ^1.0.0

Functionalities

Icon

Block introduce in order to easily add icons into phtml templates.

\MageSuite\ThemeHelpers\Block\Icon

Example

<block class="MageSuite\ThemeHelpers\Block\Icon" name="icon.name">
    <arguments>
        <argument name="icon_url" xsi:type="string">icon path</argument> //f.e. images/icons/icon-arrow-up.svg
        <argument name="css_class" xsi:type="string">css class</argument>
        <argument name="alt_text" xsi:type="string" translate="true">Alt text</argument>
        <argument name="lazy_loaded" xsi:type="boolean">true</argument> // true/false
        <argument name="inlined" xsi:type="boolean">true</argument> // true/false
        <argument name="width" xsi:type="number">200</argument>
        <argument name="height" xsi:type="number">150</argument>
    </arguments>
</block>

For lazy loading theme-creativeshop/src/web/js/vendor/lazyload.js script is used.

SVG file can be inlined. theme-creativeshop/src/web/js/vendor/inline-svg.js script is used in order to inline svg file.

Example of inlined icon

Example of lazyloaded, not inlined icon:

Image View Model

If you want to fetch product’s main image, you can do it via MageSuite\ThemeHelpers\ViewModel\Image view model. Example usage:

layout.xml:

<block name="sample" class="Magento\Catalog\Block\Category\View">
    <arguments>
        <argument name="image_view_model" xsi:type="object">MageSuite\ThemeHelpers\ViewModel\Image</argument>
    </arguments>
</block>

block.phtml:

<?php
/** @var \Magento\Catalog\Block\Category\View $block */
/** @var \MageSuite\ThemeHelpers\ViewModel\Image $imageViewModel */
$imageViewModel = $block->getImageViewModel();
$product = $block->getProduct();
?>

<img src="<?= /* @noEscape */ $imageViewModel->getImageUrl($product, 'swatch_image') ?>" />

You can find optional third attributes parameter here: MageSuite_ThemeHelpers\ViewModel\Image.

Category page headline

Category pages use an enhanced headline template. Collection size can be displayed.

\MageSuite\ThemeHelpers\Block\Category\View\Headline

Additional methods are provided:

$block->getHeadline()

$block->getCollectionSize()

$block->getIcon()

Collection size can be switch off by xml setting:

  <block class="MageSuite\ThemeHelpers\Block\Category\View\Headline" name="category.page.headline" template="MageSuite_ThemeHelpers::category/headline.phtml">
      <arguments>
          <argument name="show_collection_size" xsi:type="boolean">true</argument>
      </arguments>
  </block>

Page scroll

In order to display scroll to top button page_scroll.xml layout is added. It can be used as a layout update to show scroll to top button on all pages on a specific kind of page (f.e. cms pages).

<update handle="page_scroll" />

There are the following xml setting for scroll to top functionality:

  <block name="page.scroll" template="MageSuite_ThemeHelpers::page-scroll.phtml" after="-">
      <arguments>
          <argument xsi:type="string" name="wrapper_tag">div</argument>
          <argument xsi:type="string" name="wrapper_css_class">cs-page-scroll cs-visually-hidden</argument>
          <argument xsi:type="string" name="button_css_class">cs-page-scroll__button</argument>
          <argument name="label" xsi:type="string" translate="true">Go to Top</argument>
          <argument name="visible" xsi:type="boolean">true</argument>
      </arguments>
</block>

Styling and scripts

Styling and scripts are not included by default in theme-creativeshop as the component is optional.

Styles: theme-creativeshop/src/components/page-scroll/page-scroll.scss

Scripts: theme-creativeshop/src/components/page-scroll/page-scroll.scss

In order to add tooltip styles and scripts in the child theme import the tooltip component in an entry file:

import 'components/page-scroll';

Qty Increment

Template used to enhanced usability on numeric input type by adding -/+ button. This template is used across the whole shop.

Example of the qty-increment implementation: theme-creativeshop/src/Magento_Checkout/templates/cart/item/qty/qty.phtml

<?php
$item = $block->getData('item');

echo $this->getLayout()
    ->createBlock(\Magento\Framework\View\Element\Template::class)
    ->setInputName('cart[' . $item->getId() . '][qty]')
    ->setInputSize(1)
    ->setInputInitialValue($block->getQty())
    ->setInputAdditionalParams('data-validate="{required:true}" id="cart-' . $block->escapeHtmlAttr($item->getId()) .'-qty" data-cart-item-id="' . $block->escapeHtmlAttr($item->getSku()) . '" data-role="cart-item-qty"')
    ->setDecrementIconUrl($block->getVar('qty_increment/icons/decrement', 'MageSuite_ThemeHelpers'))
    ->setIncrementIconUrl($block->getVar('qty_increment/icons/increment', 'MageSuite_ThemeHelpers'))
    ->setTemplate($block->getVar('qty_increment/template', 'MageSuite_ThemeHelpers'))
    ->toHtml();
?>

Styling and scripts

Styling and scripts are included by default in theme-creativeshop

Styles: theme-creativeshop/src/components/qty-increment/qty-increment.scss

Scripts: theme-creativeshop/src/components/qty-increment/qty-increment.scss

Tooltip

Magesuite introduces its own tooltip functionality with touch device support.

Component not included in any entry by default,
For all touch devices, tooltip changes into modal
Tooltip alignment can be set as setAlignment (top/bottom/left/right)