skip to Main Content

I need to display a category description ABOVE + BELOW the product listing.

The description above is supposed to be a short, but the description below is a long description for SEO purposes. I don’t want to display a long description on top, as it’ll push products too far down.

Is there any known way to achieve this in Magento 2?

Example: https://marketplace.magento.com/magetoday-module-secondcatdescription.html
Unfortunately, this module appears broken and doesn’t work the way it should.

I’ve been working with WooCommerce (WordPress) for many years and easily achieved this through explode() on those websites. I split the category description into two pieces, whereof the first was displayed above and the second below the product listing. This was very efficient, because I wouldn’t have to struggle with new input fields, database changes and so on. I have no idea how to do this in Magento though.

2

Answers


  1. I would add an extra field to the categories an split it. But then you have a separate database field etc.

    The other way would be calling the description twice on the category pages an filtering it with php.

    First of all you should decide which way is better for you.

    In my case I added some more fields for short_description, excerpt and thumbnail to the categories – so if you are interested let me know.

    Login or Signup to reply.
  2. Firstly, you need to create a category attribute then you can pull the contents in the product listing page.

    Create a basic module and add the following files in your module.

    1. Create a category attribute.

    Create the bottom_description attribute in the database.

    app/code/MilanDev/BottomDescription/Setup/InstallData.php

    <?php
    namespace MilanDevBottomDescriptionSetup;
    
    use MagentoFrameworkSetupInstallDataInterface;
    use MagentoFrameworkSetupModuleContextInterface;
    use MagentoFrameworkSetupModuleDataSetupInterface;
    use MagentoEavSetupEavSetup;
    use MagentoEavSetupEavSetupFactory;
    use MagentoEavModelEntityAttributeScopedAttributeInterface;
    
    class InstallData implements InstallDataInterface
    {
    
        private $eavSetupFactory;
    
        /**
         * Constructor
         *
         * @param MagentoEavSetupEavSetupFactory $eavSetupFactory
         */
        public function __construct(EavSetupFactory $eavSetupFactory)
        {
            $this->eavSetupFactory = $eavSetupFactory;
        }
    
        /**
         * {@inheritdoc}
         */
        public function install(
            ModuleDataSetupInterface $setup,
            ModuleContextInterface $context
        ) {
            $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
    
            $eavSetup->addAttribute(
                MagentoCatalogModelCategory::ENTITY,
                'bottom_description',
                [
                    'type' => 'text',
                    'label' => 'Description',
                    'input' => 'textarea',
                    'required' => false,
                    'sort_order' => 4,
                    'global' => ScopedAttributeInterface::SCOPE_STORE,
                    'wysiwyg_enabled' => true,
                    'is_html_allowed_on_front' => true,
                    'group' => 'General Information',
                ]
            );
        }
    }
    

    Show the attribute in the backend (under Description field for any category).

    app/code/MilanDev/BottomDescription/view/adminhtml/ui_component/category_form.xml

    <?xml version="1.0" ?>
    <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
        <fieldset name="content">
            <field name="bottom_description" template="ui/form/field" sortOrder="60" formElement="wysiwyg">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="wysiwygConfigData" xsi:type="array">
                            <item name="height" xsi:type="string">100px</item>
                            <item name="add_variables" xsi:type="boolean">false</item>
                            <item name="add_widgets" xsi:type="boolean">false</item>
                            <item name="add_images" xsi:type="boolean">true</item>
                            <item name="add_directives" xsi:type="boolean">true</item>
                        </item>
                        <item name="source" xsi:type="string">category</item>
                    </item>
                </argument>
                <settings>
                    <label translate="true">Bottom Description</label>
                    <dataScope>bottom_description</dataScope>
                </settings>
                <formElements>
                    <wysiwyg class="MagentoCatalogUiComponentCategoryFormElementWysiwyg">
                        <settings>
                            <rows>8</rows>
                            <wysiwyg>true</wysiwyg>
                        </settings>
                    </wysiwyg>
                </formElements>
            </field>
        </fieldset>
    </form>
    

    2. Pull contents in the product listing page.

    Get the contents in template file.

    app/code/MilanDev/BottomDescription/view/frontend/templates/product/list/bottom_description.phtml

    <?php if ($_bottomDescription = $block->getCurrentCategory()->getBottomDescription()): ?>
        <div class="category-bottom-description">
            <?= /* @escapeNotVerified */ $this->helper('MagentoCatalogHelperOutput')->categoryAttribute($block->getCurrentCategory(), $_bottomDescription, 'bottom_description') ?>
        </div>
    <?php endif; ?>
    

    Show the contents to bottom in the product listing page.

    app/code/MilanDev/BottomDescription/view/frontend/layout/catalog_category_view.xml

    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceContainer name="content">
                <block class="MagentoCatalogBlockCategoryView" name="bottom.description" template="MilanDev_BottomDescription::product/list/bottom_description.phtml" after="-"/>
            </referenceContainer>
        </body>
    </page>
    

    This should work or you can check the details here.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search