• optional

    • CatalogProductListingCompatibility (optional)

    Owned by Marta Siewierska-Stańczak
    Last updated: May 20, 2024 by Bartłomiej Podgórski
    2 min read

    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.

    It allows you to add Magesuite’s Product Carousel, Product grid and Product teaser in Magento’s Product List Widget too.

     

    Installation

    This module is optional.

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

    Admin settings

    Since you can select Magesuite Grid template in the Catalog Products List widget, there is possibility to adjust number of rows per breakpoint (as in CC component).

    Zrzut ekranu 2024-05-20 o 15.03.35.png
    Catalog Products List - grid rows adjustments

    It works only for grid template, nothing will happen if you select Magesuite Carousel.

    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.

     

    Â