Magento ๐Ÿฎ

Magento2 | PWA | GraphQL

ยป ยป ยป Configuring CMS Pages as Dynamic Rows in Magento 2 Store Settings

Configuring CMS Pages as Dynamic Rows in Magento 2 Store Settings

By

The Magento 2 Dynamic CMS Page List module provides a seamless way to manage and display CMS pages directly from the store configuration settings.

This module enables you to dynamically add CMS pages with customizable labels within a configurable dropdown list, allowing for easy management of page-specific details at the store level.

Perfect for administrators, this tool simplifies the customization of CMS page lists and descriptions through a user-friendly interface in the configuration settings.

You can find the complete module on GitHub at Magelearn_DynamicPageList

Or Check the below images for a better understanding of the functionality of this module.





Let's start it by creating a custom extension. 

Create a folder inside app/code/Magelearn/DynamicPageList

Add registration.php file in it:

?
1
2
3
4
5
6
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magelearn_DynamicPageList',
    __DIR__
);

Add composer.json file in it:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
    "name": "magelearn/magento2-module-dynamic-page-list",
    "description": "The Dynamic Row Image Upload Magento module enables administrators to upload and manage multiple images directly in Admin System Configuration with dynamic rows.",
    "type": "magento2-module",
    "license": "Apache-2.0",
    "authors": [
        {
            "name": "Vijay Rami",
            "email": "vijaymrami@gmail.com"
        }
    ],
    "minimum-stability": "dev",
    "prefer-stable": true,
    "version":"1.0",
    "require": {
        "php": ">=8.0.0"
    },
    "repositories": [
    {
        "type": "package",
        "package": {
            "name": "magelearn/magento2-module-dynamic-file-upload",
            "version": "1.0",
            "source": {
                "url": "https://github.com/vijayrami/Magelearn_DynamicFileUpload.git",
                "type": "git",
                "reference": "main"
            }
        }
    }
    ],
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "Magelearn\\DynamicPageList\\": ""
        }
    }
}

Add etc/module.xml file in it:

?
1
2
3
4
5
6
7
8
9
10
<?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="Magelearn_DynamicPageList" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Backend"/>
            <module name="Magento_Config"/>
            <module name="Magento_Cms"/>
        </sequence>
    </module>
</config>

Add etc/acl.xml file.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Magento_Backend::stores">
                    <resource id="Magento_Backend::stores_settings">
                        <resource id="Magento_Config::config">
                            <resource id="Magelearn_DynamicPageList::config" title="Magelearn DynamicPageList Section" sortOrder="50" />
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

Now to give the CMS Page list options at System configuration at admin,

we will add etc/adminhtml/system.xml file.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="magelearn" translate="label" sortOrder="10">
            <label>Magelearn Modules</label>
        </tab>
        <section id="dynamic_list" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Dynamic CMS Page List</label>
            <tab>magelearn</tab>
            <resource>Magelearn_DynamicPageList::config</resource>
            <group id="selection" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General Configuration</label>
                <field id="cms_pages" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>CMS Page Mapping</label>
                    <frontend_model>Magelearn\DynamicPageList\Block\Adminhtml\Form\Field\DynamicRows</frontend_model>
                    <backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
                    <class>required-entry validate-select</class>
                </field>
            </group>
        </section>
    </system>
</config>

Now as per highlighted code above, we will add
app/code/Magelearn/DynamicPageList/Block/Adminhtml/Form/Field/DynamicRows.php file

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?php
 
declare(strict_types=1);
 
namespace Magelearn\DynamicPageList\Block\Adminhtml\Form\Field;
 
use Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray;
use Magento\Framework\DataObject;
use Magento\Framework\Exception\LocalizedException;
 
class DynamicRows extends AbstractFieldArray
{
    /**
     * @var CmsPageOptions
     */
    private $cmsPageRenderer;
     
    /**
     * Prepare rendering the new field by adding all the needed columns
     */
    protected function _prepareToRender()
    {
        $this->addColumn('cms_page', [
            'label' => __('CMS Page'),
            'renderer' => $this->getCmsPageRenderer()
        ]);
        $this->addColumn('custom_text', [
            'label' => __('Custom Text'),
            'class' => 'required-entry'
        ]);
        $this->_addAfter = false;
        $this->_addButtonLabel = __('Add Row');
    }
     
    /**
     * Get CMS Page renderer
     *
     * @return CmsPageOptions
     * @throws LocalizedException
     */
    private function getCmsPageRenderer()
    {
        if (!$this->cmsPageRenderer) {
            $this->cmsPageRenderer = $this->getLayout()->createBlock(
                CmsPageOptions::class,
                '',
                ['data' => ['is_render_to_js_template' => true]]
                );
        }
        return $this->cmsPageRenderer;
    }
     
    /**
     * Prepare existing row data object
     *
     * @param DataObject $row
     * @throws LocalizException
     */
    protected function _prepareArrayRow(DataObject $row)
    {
        $options = [];
        $cmsPage = $row->getCmsPage();
        if ($cmsPage) {
            $options['option_' . $this->getCmsPageRenderer()->calcOptionHash($cmsPage)] = 'selected="selected"';
        }
        $row->setData('option_extra_attrs', $options);
    }
}

And as per highlighted above, we will add
app/code/Magelearn/DynamicPageList/Block/Adminhtml/Form/Field/CmsPageOptions.php file.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<?php
declare(strict_types=1);
 
namespace Magelearn\DynamicPageList\Block\Adminhtml\Form\Field;
 
use Magento\Framework\View\Element\Html\Select;
use Magento\Framework\View\Element\Context;
use Magento\Cms\Model\ResourceModel\Page\CollectionFactory;
 
class CmsPageOptions extends Select
{
    /**
     * @var CollectionFactory
     */
    private $collectionFactory;
 
    /**
     * @param Context $context
     * @param CollectionFactory $collectionFactory
     * @param array $data
     */
    public function __construct(
        Context $context,
        CollectionFactory $collectionFactory,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->collectionFactory = $collectionFactory;
    }
 
    /**
     * Set "name" for <select> element
     *
     * @param string $value
     * @return $this
     */
    public function setInputName($value)
    {
        return $this->setName($value);
    }
 
    /**
     * Set "id" for <select> element
     *
     * @param string $value
     * @return $this
     */
    public function setInputId($value)
    {
        return $this->setId($value);
    }
 
    /**
     * Render block HTML
     *
     * @return string
     */
    public function _toHtml(): string
    {
        $this->setClass('required-entry validate-select');
        if (!$this->getOptions()) {
            $this->setOptions($this->getCmsPageOptions());
        }
        return parent::_toHtml();
    }
 
    /**
     * Get CMS pages options
     *
     * @return array
     */
    private function getCmsPageOptions(): array
    {
        $collection = $this->collectionFactory->create();
        $options = [];
         
        $options[] = ['label' => __('-- Please Select --'), 'value' => ''];
         
        foreach ($collection as $page) {
            $options[] = [
                'label' => $page->getTitle(),
                'value' => $page->getId()
            ];
        }
         
        return $options;
    }
}

Related Post:

0 Comments On "Configuring CMS Pages as Dynamic Rows in Magento 2 Store Settings"

Back To Top