Page Comparison

https://github.com/magesuite/theme-helpers

...

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.

...

import 'components/tooltip';

JsMageInit

If you want to initialize some JS without creating or editing template, you can add MageSuite\ThemeHelpers\Block\JsMageInit block. It allows you to specify selector, component and js configuration (static). Example:

<block name="example_block" class="MageSuite\ThemeHelpers\Block\JsMageInit">
    <arguments>
        <argument name="selector" xsi:type="string">#component_selector</argument>
        <argument name="component" xsi:type="string">collapsible</argument>
        <argument name="js_config" xsi:type="array">
            <item name="content" xsi:type="string">ul.accordion</item>
            <item name="header" xsi:type="string">.block-title</item>
            <item name="mediaQueryScope" xsi:type="string">(max-width: 767px)</item>
        </argument>
    </arguments>
</block>

Above initialization will render standard Magento text/x-magento-init script:

<script type="text/x-magento-init">
{
    ".sidebar\u0020.block\u002Dcategories": {
        "collapsible": {
            "content": "ul.accordion",
            "header": ".block-title",
            "mediaQueryScope": "(max-width: 767px)"
        }    
    }
}
</script>

mgsGetJqueryWidgetInstance

Helper function that returns jQuery widget instance.

Source: MageSuite_ThemeHelpers/js/utils/get-jquery-widget-instance.js

Requirejs alias: mgsGetJqueryWidgetInstance

Example:

define('mgsGetJqueryWidgetInstance', function (getJqueryWidgetInstance) {
  return async function () {
    const swatchesWidgetHtmlElement = document.querySelector('[data-role=swatch-options]');
    if (!swatchesWidgetHtmlElement) {
      return
    }
    const swatchesWidget = await getJqueryWidgetInstance({
        element: swatchesWidgetHtmlElement,
        widgetName: 'mage-SwatchRenderer',
        widgetCreateEventName: 'swatchrenderercreate'
    }, true);
  }
})

That block of code will bring you swatch renderer widget instance.

Params description and how to get them:

• First argument: widget data (object type)

  • element: html element (not jQuery object) that widget is attatched to. You can check this in two ways:

    • by widget initialization script: "[data-role=swatch-options]",

    • by console.log(this.element) in one of the widget's methods,

  • widgetName: jQuery widget name. You can check it in two ways:

    • open devtools, click on element to which widget is attached and select “Properties” tab:
      

      Image Added

    • console.log(this.widgetFullName) in one of the widget's methods

  • widgetCreateEventName - this parameter is required if you pass second (wait) parameter as true. It's event name that's triggered after widget initialization. In 99% of cases it's `${widget's name}create`.toLowerCase(). How to get widget name:

    • it’s word after prefix in widgets initialization: $.widget('mage.SwatchRenderer', {... <- swatchrenderer,

    • you can console.log(this.widgetName) in one of the widget's methods,

    • if above methods don’t work, you can always put console.log(event) somewhere here: lib/web/jquery/ui-modules/widget::_trigger. This will list you all widgets create events, so you can find yours.

• Second argument: wait (boolean type):

  • false (default) - if widget is not initialized yet, you will get null as promise resolve,

  • true - function will wait until widget is initialized.