Featured products in Magento 2 with Catalog Products List widget

Featured products in Magento 2 with Catalog Products List widget

By checking various e-commerce websites one thing which can be found in almost all of them are featured products. A list of hand-picked products, usually placed on the home page, used for promotion. So far Magento lacked that most requested feature and developers had to look for other solutions or to code one of their own. Let’s look what’s the situation like in Magento 2.

To finally sort this thing out, Magento 2 comes with a new widget that enables product selection based on condition based filters from various attributes and categories. If anyone has ever worked with Shopping Cart Price Rules this approach won’t be a new thing to them. Conditions can be created based on any combination of product attributes and categories where only products that are matched by the rule will be displayed.

Product List Widget

What are the options for configuration?

Besides defining conditions, widget offers a few other options for configuration, like defining the title, enabling the pagination, template selection out of which a simple product list can be created. Defining conditions is a very nice feature which gives flexibility in product selection, rather than plain product selection (which can also be achieved by defining the condition by SKU attribute), but there’s a drawback of this approach. By defining conditions, and not the specific products, there’s not much what can be done with the output which is basically unknown until it’s displayed on frontend. One thing that most of us need and want is defining the order or sort of items in product list, which is not possible with this approach.

How to create one?

Well, there are two ways of doing that. The first way would be creating and including them as a part of the content of CMS blocks and pages (available in the admin are in Content > Elements > Pages/Blocks). In WYSIWYG editor there’s an Insert Widget button which allows their fast creation and inserting them on the place of the cursor in the content. Select Catalog Products List option from the dropdown and fill in the fields.

The other way is by creating them and inserting in the place of Layout Updates. Navigate to Content > Elements > Widgets and select the Catalog Products List as a type and your current design theme. Layout updates section allows a selection on which pages the widget will be displayed and in what part of the page.

Layout Updates in Widgets

Including the products list widget into Magento is a step forward, making development a bit easier with having such a feature already packed with the installation. Creating and including the product list widget is easy and fast and will definitely be used on many new websites for those who don’t really need a total control of the products list.

Let us know what you think! Make sure to ask for our detailed custom report based on our technical audit – we would be happy to offer some insider tips&tricks. 🙂

 

You made it all the way down here so you must have enjoyed this post! You may also like:

3 best open-source eCommerce platforms in 2021 Zrinka Antolovic
Zrinka Antolovic, | 8

3 best open-source eCommerce platforms in 2021

Introducing BrexitCart by Inchoo – a new cart abandonment solution Aron Stanic
Aron Stanic, | 1

Introducing BrexitCart by Inchoo – a new cart abandonment solution

Ready for 2nd Meet Magento Croatia with agenda focused on PWA? Book the dates! Maja Kardum
Maja Kardum, | 0

Ready for 2nd Meet Magento Croatia with agenda focused on PWA? Book the dates!

12 comments

  1. In this Way the product is Showing but the product swatches are not displaying…

    I need to show the Configurable Product with Swatches option in Home page by CMS block.

    how can i show the products with swatch option in home page…??

    could you please help me …???

    thank you…

  2. Hi guys!
    Could you please highlight every step which I should take to obtain the required effect – I want to display on my page a featured products section.
    I would be grateful 🙂

  3. Hello,

    Is it possible to have the last added product to display first in the carousel. My website displays the very first added products in the site as featured products [ sale ]
    Thanks for the help in advance.

  4. Hi Damir, Nice article!!

    Do you know if its possible to output this widget along with a layered navigation?

    Thanks

  5. Hi, i need to change the product colomn count to 4 instead of 5. There is any option via xml or phtml?

  6. Create a file widget.xml in etc directory with content:

    <?xml version="1.0" encoding="UTF-8"?>
    <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
        <widget id="products_list">
            <parameters>
                <parameter name="template" xsi:type="select">
                    <options>
                        <option name="my_option" value="my_template.phtml">
                            <label translate="true">My Grid Template</label>
                        </option>
                    </options>
                </parameter>
            </parameters>
        </widget>
    </widgets>

    Place my_template.phtml in view/frontend/templates directory. Make sure to clean cache with “bin/magento cache:clean” in CLI.

    1. Thank you for your time.
      “Place my_template.phtml in view/frontend/templates directory”. Where do you mean? In “app/design/frontend/Magento/[MyTheme]/view/frontend/templates”? Or “app/design/frontend/Magento/[MyTheme]/Magento_CatalogWidget/templates”? Or somewhere else?

      Thank you very much.

    2. Thanks for the snippet! This works great for adding the option but unless I put the file under /vendor/magento/module-catalog-widget/view/frontend/templates it won’t work and this doesn’t seem to be the correct way, would this get overwritten on update? I’m using a custom module to add the option so I also tried /app/code/Vender/Module/view/frontend/templates as well as /app/design/frontend/Twisted/viper/Magento_Catalog_Wiget and neither of those would work.

    3. @Niklas – You cannot create or extend widgets in a theme so to do what you are wanting you would have to create a module. You would place your template in app/design/Vendor/Module/view/frontend/templates/my_template.phtml and you would place your widget.xml file in app/design/Vendor/Module/etc/widget.xml

      @Matt – See my response to Niklas above.

      You both will want to add a Vendor_Module:: prefix to your template path in your widget.xml file otherwise the block that loads the template will assume the template exists within it’s own module. In this case that is Magento_CatalogWidget. So for your value attribute on your option node, you will want to set the value to Vendor_Module::my_template.phtml.

      @Damir – I’ve tried creating a module that uses your widget.xml file and I get this error

      Invalid Document 
      Element 'label': This element is not expected.
      Line: 34

      The line 34 this error is referring to is in vendor/magento/module-catalog-widget/etc/widget.xml

      Can you try creating a module and implementing your solution to include a template in that widget? I think you may get the same error as me. If you do I will submit an issue on github. If not at least I will know I am doing something wrong.

  7. I’d like to know the same as Niklas, on a theme level, how do I add a template to the dropdown.

  8. Hi, do you know how I get an extra template in the template dropdown? So I can create my own template an also use this widget?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.