Magento 2: How do I override the grid thumbnail preview copy?
-
06-10-2020 - |
Question
Using 2.1.3 - I've added a thumbnail image in a column to my admin grid - I like the built in preview ability, but want to change the copy underneath the image in the preview window. It looks like it's hardcoded into the vendor/magento/module-ui/view/base/web/js/grid/columns/thumbnail.js
file:
....
preview: function (row) {
var modalHtml = mageTemplate(
thumbnailPreviewTemplate,
{
src: this.getOrigSrc(row), alt: this.getAlt(row), link: this.getLink(row),
linkText: $.mage.__('Go to Details Page')
}
);
....
I've tried creating a copy of the thumbnail.js file in my own Namespace_Module
directory (app/code/Namespace/Module/view/base/web/js/grid/columns/thumbnail.js)
and pointed the grid element config to that directory, but don't see any changes:
<item name="config" xsi:type="array">
<item name="indexField" xsi:type="string">file_path</item>
<item name="component" xsi:type="string">Namespace_Module/js/grid/columns/thumbnail</item>
<item name="sortable" xsi:type="boolean">false</item>
<item name="has_preview" xsi:type="string">0</item>
<item name="label" xsi:type="string" translate="true">Photo</item>
</item>
How can I override the hard coded copy in the thumbnail preview window?
Solution
Ok - figured it out - posting an answer to help anyone looking for the solution - the first line in app/code/Namespace/Module/view/base/web/js/grid/columns/thumbnail.js
file defines an include of a relative path to column.js
, so changing:
define([
'./column',
'jquery',
...
to:
define([
'Magento_Ui/js/grid/columns/column',
'jquery',
and the page includes the overridden file without error, and you can change the copy in the overridden file.