Magento 2 + how to remove character limit from meta keyword field in product
-
26-02-2021 - |
解決
After some debugging I found out that all inputs have 255 length limit and they all have the same template. The limit is set by the html template itself (kinda hard-coded). The file path is:
vendor/magento/module-ui/view/base/web/templates/form/element/input.html
So we have to override it into a custom adminhtml theme.
Before you start, please replace the "Vendor" and "Theme" with your "Vendor" and "Module" names
If you do not have one:
Create the following files:
app/design/adminhtml/Vendor/Theme/composer.json
{
"name": "<vendor>/<theme>",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/theme-adminhtml-backend": "*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "1.0.0",
"license": [
],
"autoload": {
"files": [
"registration.php"
]
}
}
app/design/adminhtml/Vendor/Theme/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'adminhtml/<Vendor>/<Theme>',
__DIR__
);
app/design/adminhtml/Vendor/Theme/theme.xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Theme</title>
<parent>Magento/backend</parent>
</theme>
These are the theme files.
Now we have to create a custom module to make this work:
app/code/Vendor/Theme/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_Theme',
__DIR__
);
app/code/Vendor/Theme/composer.json
{
"name": "vendor/theme",
"description": "",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/magento-composer-installer": "*"
},
"suggest": {
},
"type": "magento2-module",
"version": "0.1.0",
"license": [
],
"autoload": {
"files": [
"registration.php"
],
"psr-4": {
"Vendor\\Theme\\": ""
}
},
"extra": {
"map": [
[
"*",
"Vendor/Theme"
]
]
}
}
app/code/Vendor/Theme/etc/module.xml
<?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="Vendor_Theme" setup_version="0.1.0">
</module>
</config>
app/code/Vendor/Theme/etc/di.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Theme\Model\View\Design">
<arguments>
<argument name="themes" xsi:type="array">
<item name="adminhtml" xsi:type="string">Vendor/Theme</item>
</argument>
</arguments>
</type>
</config>
Now we have a custom adminhtml(backend) theme that overrides the Magento_Backend theme.
Here comes the magic:
The input template file for ui components is:
vendor/magento/module-ui/view/base/web/templates/form/element/input.html
We copy it in a relative path in our custom theme:
app/design/adminhtml/Vendor/Theme/Magento_Catalog/web/form/element/input.html
We modify the content into:
<!--Overrides: vendor/magento/module-ui/view/base/web/templates/form/element/input.html -->
<!-- ko if: inputName == "product[meta_keyword]" -->
<input class="admin__control-text" type="text"
data-bind="
event: {change: userChanges},
value: value,
hasFocus: focused,
valueUpdate: valueUpdate,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
}"/>
<!--/ko-->
<!-- ko ifnot: inputName == "product[meta_keyword]" -->
<input class="admin__control-text" type="text"
data-bind="
event: {change: userChanges},
value: value,
hasFocus: focused,
valueUpdate: valueUpdate,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled,
maxlength: 255
}"/>
<!-- /ko -->
As you can see here, we tell to knockoutjs to render the input without the maxlength condition only when the input name is "product[meta_keyword]" (thats our input we want) else, we render the input normally to not do something we don't want to.
Now, we have to make our template override the Magento_Ui template file:
As we see in the Magento_Ui requirejs_config.js of base,
vendor/magento/module-ui/view/base/requirejs-config.js
There is a namespace for the template paths of the ui components:
....
paths: {
'ui/template': 'Magento_Ui/templates'
},
....
That means all the templates paths that are from "Magento_Ui/templates" are replaced with "ui/template".
So, we create our requirejs_config.js:
app/design/adminhtml/Vendor/Theme/Magento_Catalog/requirejs-config.js
var config = {
map: {
"*": {
"ui/template/form/element/input": "Magento_Catalog/form/element/input"
}
}
};
Now clear the cache, clear the static files (or deploy them) and refresh the page, and you should see something like this:
This works for 2.3.1, and it should work for the lower versions