5

I have a requirement in Magento 2 to create a new custom container , so that while adding a new widget from admin end , under the select container section it should come as an option. Mainly my requirement is to create a container for home page.

Please check the attachment for reference.

enter image description here

Thanks in advance

5

To not edit Magento files, I need to write a mini module.

1) Create the following folders:

  • app\code\MyCustom
  • app\code\MyCustom\CustomWidget

2) To register the module, create a registration.php file in the app\code\MyCustom\CustomWidget folder with the following code:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'MyCustom_CustomWidget',
    __DIR__
);

3) Now that we have a module folder, we need to create a module.xml file in the app\code\MyCustom\CustomWidget\etc folder with the following code:

    <?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="MyCustom_CustomWidget" setup_version="1.0.0"/>
</config>

4) We need to create a widget.xml file, where there will be a new position, in the app\code\MyCustom\CustomWidget\etc folder with the following code:

    <?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="new_products" class="Magento\Catalog\Block\Product\Widget\NewWidget" is_email_compatible="true"
            placeholder_image="Magento_Catalog::images/product_widget_new.png" ttl="86400">
        <containers>
            <container name="content.new">
                <template name="grid" value="default" />
                <template name="list" value="list" />
            </container>
        </containers>
    </widget>
</widgets>

5) Now we need to create a position for your custom theme app\design\frontend\package\theme\Magento_Theme\layout\default.xml

<?xml version="1.0"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="main">
            <container name="content.new" label="New Container"/>
        </referenceContainer>
    </body>
</page>

The result of such enter image description here

| improve this answer | |
  • I tested this solution, but didn't work – zekia Nov 19 '19 at 14:25
  • You are using Catalog New Products List or Catalog Products List? – Andrey Rad Nov 19 '19 at 14:36
0

You can actually simply do this by adding a label attribute to any container in your layout xml. This way it is available for all widgets.

If you want it on the homepage you can add it to a cms_index_index.xml file in the layout folder of your theme or module.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <container name="name.of.container" label="Label text in the backend dropdown" after="-" />
        </referenceContainer>
    </body>
</page>
| improve this answer | |
0

1) Create the following folders:

app\code\MyCustom\CustomWidget

2) To register the module, create a registration.php file in the app\code\MyCustom\CustomWidget folder with the following code:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'MyCustom_CustomWidget',
    __DIR__
);

3) Now that we have a module folder, we need to create a module.xml file in the app\code\MyCustom\CustomWidget\etc folder with the following code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="MyCustom_CustomWidget" setup_version="1.0.0"/>
</config>

4) Now we need to create a default.xml app\code\MyCustom\CustomWidget\frontend\layout\default.xml with the following code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <container name="new_container" label="New Container" />
        </referenceContainer>
    </body>
</page>

The new container is ready to use. Thanks

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.