Enabling Product Selection and Displaying Product Grid in Magento 2 System Configuration

Wednesday, November 6, 2024

The Dynamic Product module enables you to select specific products directly from the product grid within the system configuration tab. These selections are then saved in the core_config_data table, allowing you to access and display them wherever needed.

You can find the complete module on GitHub at Magelearn_DynamicProduct

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/DynamicProduct

Add registration.php file in it:

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

Add composer.json file in it:

{
    "name": "magelearn/magento2-module-dynamic-product",
    "description": "The Dynamic Product module enables you to select specific products directly from the product grid within the system configuration tab. These selections are then saved in the `core_config_data` table, allowing you to access and display them wherever needed.",
    "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-product",
            "version": "1.0",
            "source": {
                "url": "https://github.com/vijayrami/Magelearn_DynamicProduct.git",
                "type": "git",
                "reference": "main"
            }
        }
    }
    ],
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "Magelearn\\DynamicProduct\\": ""
        }
    }
}

Add etc/module.xml file in it:

<?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_DynamicProduct" 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.

<?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_DynamicProduct::config" title="Magelearn DynamicProduct Grid 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.

<?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>Select Products From Grid</label>
            <tab>magelearn</tab>
            <resource>Magelearn_DynamicProduct::config</resource>
            <group id="selection" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General Configuration</label>
                <field id="select_product" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Select Product</label>
                    <frontend_model>Magelearn\DynamicProduct\Block\Adminhtml\System\Config\Product</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

Now as per highlighted code above, we will add
Block/Adminhtml/System/Config/Product.php file.

<?php
declare(strict_types=1);

namespace Magelearn\DynamicProduct\Block\Adminhtml\System\Config;

use Magento\Backend\Block\Template\Context;
use Magento\Framework\Data\Form\Element\AbstractElement;
use Magento\Config\Block\System\Config\Form\Field;
use Magento\Backend\Block\Widget\Grid\Extended;

class Product extends Field
{
    protected $_template = 'Magelearn_DynamicProduct::system/config/product.phtml';
    
    public function __construct(
        Context $context,
        array $data = []
        ) {
            parent::__construct($context, $data);
    }
    
    protected function _getElementHtml(AbstractElement $element)
    {
        $this->setElement($element);
        return $this->_toHtml();
    }
    
    public function getProductGridUrl()
    {
        return $this->getUrl('dynamicproduct/product/grid', [
            'element_id' => $this->getElement()->getHtmlId()
        ]);
    }
    
    public function getFormKey()
    {
        return $this->formKey->getFormKey();
    }
}

Now as per highlighted code above, we will add our template file and route file.

Add view/adminhtml/templates/system/config/product.phtml file.

<?php
/** @var \Magelearn\DynamicProduct\Block\Adminhtml\System\Config\Product $block */
$element = $block->getElement();
$fieldId = $element->getHtmlId();
?>
<div class="admin__field">
    <div class="admin__field-control">
        <input type="text" 
               id="<?= $block->escapeHtmlAttr($fieldId) ?>"
               name="<?= $block->escapeHtmlAttr($element->getName()) ?>"
               value="<?= $block->escapeHtmlAttr($element->getValue()) ?>"
               class="input-text admin__control-text"
               readonly="readonly" />
        <button type="button" 
                class="action-default scalable" 
                id="<?= $block->escapeHtmlAttr($fieldId) ?>_button">
            <span><?= $block->escapeHtml(__('Select Product')) ?></span>
        </button>
        <div id="<?= $block->escapeHtmlAttr($fieldId) ?>_modal" class="product-chooser-modal" style="display:none;"></div>
    </div>
</div>

<script>
    require([
        'jquery',
        'Magento_Ui/js/modal/modal',
        'mage/url',
        'productChooser'
    ], function($, modal, urlBuilder, productChooser) {
        'use strict';
        
        productChooser({
            fieldId: '<?= $block->escapeJs($fieldId) ?>',
            gridUrl: '<?= $block->escapeJs($block->getProductGridUrl()) ?>',
            formKey: '<?= $block->escapeJs($block->getFormKey()) ?>'
        });
    });
</script>

Also add etc/adminhtml/routes.xml file.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route id="dynamicproduct" frontName="dynamicproduct">
            <module name="Magelearn_DynamicProduct" />
        </route>
    </router>
</config>

Now add Controller file at Controller/Adminhtml/Product/Grid.php

<?php
declare(strict_types=1);

namespace Magelearn\DynamicProduct\Controller\Adminhtml\Product;

use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\LayoutFactory;

class Grid extends Action
{
    protected $resultLayoutFactory;

    public function __construct(
        Context $context,
        LayoutFactory $resultLayoutFactory
    ) {
        parent::__construct($context);
        $this->resultLayoutFactory = $resultLayoutFactory;
    }

    public function execute()
    {
        $resultLayout = $this->resultLayoutFactory->create();
        $resultLayout->getLayout()->getBlock('product.grid');
        return $resultLayout;
    }
}

Also add layout file at
app/code/Magelearn/DynamicProduct/view/adminhtml/layout/dynamicproduct_product_grid.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <container name="root" label="Root">
        <block class="Magelearn\DynamicProduct\Block\Adminhtml\Product\Grid" name="product.grid"/>
    </container>
</layout>

Now as per highlighted code above, add our block class at
app/code/Magelearn/DynamicProduct/Block/Adminhtml/Product/Grid.php

<?php
declare(strict_types=1);

namespace Magelearn\DynamicProduct\Block\Adminhtml\Product;

use Magento\Backend\Block\Widget\Grid\Extended;
use Magento\Backend\Block\Template\Context;
use Magento\Backend\Helper\Data;
use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory;
use Magento\Catalog\Model\Product\Visibility;
use Magento\Catalog\Model\Product\Attribute\Source\Status;

class Grid extends Extended
{
    protected $productCollectionFactory;
    protected $visibility;
    protected $status;
    
    public function __construct(
        Context $context,
        Data $backendHelper,
        CollectionFactory $productCollectionFactory,
        Visibility $visibility,
        Status $status,
        array $data = []
        ) {
            $this->productCollectionFactory = $productCollectionFactory;
            $this->visibility = $visibility;
            $this->status = $status;
            parent::__construct($context, $backendHelper, $data);
    }
    
    protected function _construct()
    {
        parent::_construct();
        $this->setId('productGrid');
        $this->setDefaultSort('entity_id');
        $this->setDefaultDir('DESC');
        $this->setUseAjax(true);
        $this->setSaveParametersInSession(false);
        // Set this to false to show radio buttons instead of checkboxes
        $this->setMassactionBlockName('Magento\Backend\Block\Widget\Grid\Massaction');
    }
    
    protected function _prepareCollection()
    {
        $collection = $this->productCollectionFactory->create();
        $collection->addAttributeToSelect(['name', 'sku', 'price', 'status'])
        ->addAttributeToFilter('status', ['in' => $this->status->getVisibleStatusIds()])
        ->addAttributeToFilter('visibility', ['in' => $this->visibility->getVisibleInSiteIds()]);
        
        $this->setCollection($collection);
        return parent::_prepareCollection();
    }
    
    protected function _prepareColumns()
    {
        // Add checkbox column before other columns
        $this->addColumn('in_products', [
            'header_css_class' => 'a-center',
            'type' => 'checkbox', // Use 'radio' for single selection, 'checkbox' for multiple
            'name' => 'in_products',
            'values' => $this->_getSelectedProducts(),
            'align' => 'center',
            'index' => 'entity_id',
            'header' => false,
            'renderer' => 'Magelearn\DynamicProduct\Block\Adminhtml\Grid\Renderer\Checkbox'
            //'html_name' => 'product_id' // For Radio Button only
        ]);
        
        $this->addColumn('entity_id', [
            'header' => __('ID'),
            'type' => 'number',
            'index' => 'entity_id',
            'header_css_class' => 'col-id',
            'column_css_class' => 'col-id'
        ]);
        
        $this->addColumn('name', [
            'header' => __('Name'),
            'index' => 'name'
        ]);
        
        $this->addColumn('sku', [
            'header' => __('SKU'),
            'index' => 'sku'
        ]);
        
        $this->addColumn('price', [
            'header' => __('Price'),
            'type' => 'currency',
            'currency_code' => (string)$this->_scopeConfig->getValue(
                \Magento\Directory\Model\Currency::XML_PATH_CURRENCY_BASE,
                \Magento\Store\Model\ScopeInterface::SCOPE_STORE
                ),
            'index' => 'price'
        ]);
        
        return parent::_prepareColumns();
    }
    
    protected function _getSelectedProducts()
    {
        $selected = $this->getRequest()->getParam('selected', []);
        return is_array($selected) ? $selected : [];
    }
    
    public function getGridUrl()
    {
        return $this->getUrl('dynamicproduct/product/grid', ['_current' => true]);
    }
    
    // This function is important for row click handling
    public function getRowUrl($row)
    {
        return '#';
    }
}

Now as per the highlighted code above, to render the checkboxes add our renderer class at
app/code/Magelearn/DynamicProduct/Block/Adminhtml/Grid/Renderer/Checkbox.php

<?php
declare(strict_types=1);

namespace Magelearn\DynamicProduct\Block\Adminhtml\Grid\Renderer;

use Magento\Framework\DataObject;

class Checkbox extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\Checkbox
{
    public function render(DataObject $row)
    {
        $entityId = $row->getData($this->getColumn()->getIndex());
        $htmlName = 'product_id'; // Define the custom HTML name here

        return '<input type="checkbox" name="' . $htmlName . '[]" value="' . $entityId . '" class="checkbox" />';
    }
}

Now as per the highlighted code in templates view/adminhtml/templates/system/config/product.phtml file,

We will add our JS file.

For that add file at view/adminhtml/requirejs-config.js

var config = {
    map: {
        '*': {
            productChooser: 'Magelearn_DynamicProduct/js/product-chooser'
        }
    }
};

Now as per the highlighted code above add the file at view/adminhtml/web/js/product-chooser.js

define([
    'jquery',
    'Magento_Ui/js/modal/modal',
    'mage/translate'
], function($, modal, $t) {
    'use strict';
    
    return function(config) {
        var fieldId = config.fieldId;
        var buttonId = fieldId + '_button';
        var modalId = fieldId + '_modal';
        
        // Initialize modal
        var modalElement = $('#' + modalId);
        var modalOptions = {
            type: 'slide',
            responsive: true,
            innerScroll: true,
            modalClass: 'product-chooser-modal-container',
            title: $t('Choose Product'),
            buttons: [{
                text: $t('Select'),
                class: 'action-primary',
                click: function() {
                    var selected = modalElement.find('input[name="product_id[]"]:checked');
                    if (selected.length) {
                        var productIds = selected.map(function() {
                            return $(this).val();
                        }).get();
                        var productName = selected.closest('tr').find('td:nth-child(3)').text().trim();
                        console.log('Selected product name:', productName);
                        $('#' + fieldId).val(productIds.join(','));
                        modalElement.modal('closeModal');
                    } else {
                        alert($t('Please select a product.'));
                    }
                }
            }, {
                text: $t('Cancel'),
                class: 'action-secondary',
                click: function() {
                    modalElement.modal('closeModal');
                }
            }]
        };
        
        modalElement.modal(modalOptions);
        
        // Handle button click
        $('#' + buttonId).on('click', function(e) {
            e.preventDefault();
            
            $.ajax({
                url: config.gridUrl,
                type: 'POST',
                dataType: 'html',
                data: {
                    form_key: config.formKey
                },
                showLoader: true,
                success: function(data) {
                    modalElement.html(data).trigger('contentUpdated');
                    modalElement.modal('openModal');
                    
                    // Add click handler for rows
                    modalElement.on('click', 'tr.data-row', function(e) {
                        // Don't trigger if clicking on the checkbox button itself
                        if (!$(e.target).is('input[type="checkbox"]')) {
                            var checkbox = $(this).find('input[type="checkbox"]');
                            checkbox.prop('checked', !checkbox.prop('checked'));
                        }
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Error loading product grid:', error);
                }
            });
        });
    };
});

Now to display product chooser modal window properly, we will add our CSS file at
view/adminhtml/web/css/source/_module.less

Tag : Magento2, Magento2 Extensions, Magento2 Product, Magento2 Product Grid

Magento 𝟮

Enabling Product Selection and Displaying Product Grid in Magento 2 System Configuration

0 Comments On "Enabling Product Selection and Displaying Product Grid in Magento 2 System Configuration"

Enabling Product Selection and Displaying Product Grid in Magento 2 System Configuration

Next

0 Comments On "Enabling Product Selection and Displaying Product Grid in Magento 2 System Configuration"