https://github.com/magesuite/catalog-product-listing-compatibility

This module allows using MageSuite product carousel as a template for "Recently viewed products" and "Recently compared products" widgets. It aligns displaying products to the other parts of the shop, using MageSuite's carousel and product tile.

Installation

composer require "creativestyle/magesuite-catalog-product-listing-compatibility" ^1.0.0

Admin settings

There are no admin settings.

Backend

There are no backend functionalities in the module.

Frontend

The module changes the path of Magento_Catalog/template/product/list/listing.html to the module's one MageSuite_CatalogProductListingCompatibility/template/product/list/listing.html.

It adds an additional condition to the html template to check if displayAsMagesuiteCarousel is set to true and if carouselMarkup is ready.

<!-- ko if: displayAsMagesuiteCarousel && carouselMarkup -->
    <div data-bind="html: carouselMarkup"></div>
<!-- /ko -->

The default value of displayAsMagesuiteCarousel is in the mixin false, however, true value can be passed in a widget phtml template:

<?php /* @noEscape */ echo $block->renderApp([
    'widget_columns' => [
        'displayMode' => 'grid',
        'displayAsMagesuiteCarousel' => true
    ],
    'image' => [
        'imageCode' => 'recently_viewed_products_grid_content_widget'
    ]
]);

The module provides a mixin to the product listing UI component, allowing usage of the carousel instead of the default view.

carouselMarkup is fetched from magesuiteCarouselRendererEndpoint ('/products_renderer/recommendation/carousel/') based on productIds array. The response from the server is expected to contain HTML markup for MageSuite carousel, which is passed to the carouselMarkup observable, and then mage.apply is called.