Magento – Product Chooser in Custom Module

product-chooser

I am wondering if this is possible.

I would like to create same functionality as this image in my custom module.

I could use a widget- product chooser, however that is letting me choose only one product. I need to select more than one product.

I will have just a button where I can click and then it will render the product chooser grid and then when selected multiple items, it sends id or sku in the input field.

Then later on I will save this info in to database.

Please suggest.

Best Answer

This feature relies heavily on the Javascript vor the Magento Promotional rules.

It's location in file js/mage/adminhtml/rules.js. The method you want to look at is showChooserElement, which is called by initParam, this part to be exact.

var trig = elem.down('.rule-chooser-trigger');
if (trig) {
   Event.observe(trig, 'click', this.toggleChooser.bind(this, container));
}

So calling VarienRulesForm.showChooserElement(element); with the right kind of element (having all the required attributes) should in theory give you the chooser. Still, you'll need to do a lot of tweaking I guess.

Related Solutions

Magento – Magento 2 – Use \Magento\Catalog\Block\Adminhtml\Product\Widget\Chooser with multiple selections

 <fieldset name="assign_products" sortOrder="40">
            <settings>
                <collapsible>true</collapsible>
            <label translate="true">Products</label>
            </settings>
                <container name="assign_products_container" sortOrder="160">
                 <htmlContent name="html_content">
                     <block name="my_assigned_products" class="Magento\Catalog\Block\Adminhtml\Product\Grid">
                     <arguments>
                            <argument name="button" xsi:type="array">
                             <item name="open" xsi:type="string" translate="true">Select Product...</item>
                            </argument>
                     </arguments>
                     </block>
            </htmlContent>
            </container>
</fieldset>

Magento – How to use Product Chooser Widget with UI Component Form

You can"t use widget block in uiform. It will not work, because it rendering differently as in widget form. But you can use this functionality creating form extending Magento\Backend\Block\Widget\Form\Generic But it is deprecated

Example

class Form extends \Magento\Backend\Block\Widget\Form\Generic
{  


    protected $_entityRepository;

    public function __construct(
        Context $context,
        Registry $registry,
        FormFactory $formFactory,      
        EntityRepositoryInterface $_entityRepository,
        array $data = []
    ) {
        $this->_entityRepository= $_entityRepository;
        parent::__construct($context, $registry, $formFactory, $data);
    }

    protected function _prepareForm()
    {
        $entityId = $this->_coreRegistry->registry('entity_id');
        if($entityId ){
            $entity = $this->_entityRepository->getById($entityId );
        }
        /** @var \Magento\Framework\Data\Form $form */
        $form = $this->_formFactory->create(
            ['data' => ['id' => 'edit_form', 'action' => $this->getData('action'), 'method' => 'post']]
        );

        $fieldset = $form->addFieldset('entity_details', ['legend' => __('EntityDetails')]);

        if ($entityId ) {
            $fieldset->addField('id', 'hidden', ['name' => 'id']);
        }

        $productChooser = $fieldset->addField(
            'product_id',
            'label',
            [
                'label' => __('Product'),
                'required' => true,
                'class' => 'widget-option',
                'visible' => '1',
                'name' => 'product_id',
                'value' => $entityId ?'product/'.$entity ->getProductId():''
            ]
        );
        $chooser = $this->_layout->createBlock('\Magento\Catalog\Block\Adminhtml\Product\Widget\Chooser');
        $configChooser = [
            'button' => [
                'open' => __('Select Products'),
                'type' => '\Magento\Catalog\Block\Adminhtml\Product\Widget\Chooser',
            ]
        ];
        $chooser->setConfig($configChooser)
            ->setFieldsetId('entity_details')
            ->prepareElementHtml($productChooser);

        $this->setForm($form);
        return parent::_prepareForm();
    }

Best Answer

Related Solutions

Magento – Magento 2 – Use \Magento\Catalog\Block\Adminhtml\Product\Widget\Chooser with multiple selections

Magento – How to use Product Chooser Widget with UI Component Form

Related Topic