Magento 2.3.4: Add new column to Manage Options of Product Attribute

Question

Like the title, I'm trying add new column to Manage Options. The problem is that the style of the row I want to add is select. It is showing but when I click on the select box, the list of options is not showing and I cannot select another value.

please help me to do this. Thanks a lot.

Answer 1

This is working like this because the table is sortable. An easy solution would be to disable the sortable option for the table.

Override somehow this template in your vendor

vendor/magento/module-catalog/view/adminhtml/templates/catalog/product/attribute/options.phtml

and at the bottom of the file you can see the js configuration for the options js file, something like this

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Catalog/js/options": {
                "attributesData": <?= /* @noEscape */ json_encode($values, JSON_HEX_QUOT) ?>,
                "isSortable":  <?= (int)(!$block->getReadOnly() && !$block->canManageOptionDefaultOnly()) ?>,
                "isReadOnly": <?= (int)$block->getReadOnly() ?>
            },
            "Magento_Catalog/catalog/product/attribute/unique-validate": {
                "element": "required-dropdown-attribute-unique",
                "message": "<?= $block->escapeHtml(__("The value of Admin must be unique.")) ?>"
            }
        }
    }
</script>

Just replace the value for the isSortable key with false and make it look like this

"isSortable": false,

This will make the select tag work but you won't be able to sort the table anymore.

If you want to keep the sorting functionality you can override/extend the vendor/magento/module-catalog/view/adminhtml/web/js/options.js. Look for this piece of code

$('[data-role=options-container]').sortable({
   distance: 8,
   tolerance: 'pointer',
   cancel: 'input, button',
   axis: 'y',
   update: function () {
   $('[data-role=options-container] [data-role=order]').each(function (index, element) {
     $(element).val(index + 1);
   });
 }}); 

Here just add the select html tag in the cancel parameter, something like this

cancel: 'input, button, select'