Magento 2 如何使用淘汰赛 JS 自动填充文本字段
Posted
技术标签:
【中文标题】Magento 2 如何使用淘汰赛 JS 自动填充文本字段【英文标题】：How does Magento 2 auto fill text fields using knockout JS 【发布时间】：2017-01-28 06:38:51 【问题描述】：请告诉我哪个 JS 文件处理产品创建模块中的自动填充功能？他们在输入“产品名称”字段时自动填写“SKU”字段。我搜索了“afterkeydown”属性，但没有找到。
我需要此功能用于可配置变体创建部分，如下所述
在可配置变体创建部分，我编辑了 summary.js（将其扩展为 summary-custom.js）以显示其他简单属性。 在这里我们可以看到，对于“尺寸 1”，所有 8 个简单属性值都应该相同。例如，如果“Base color: Anthracite, size: 1” has “Height” => 1，那么“Base color: Blue Tones, size: 1”的“Height”应该像 Magento 一样自动填充“1”当我们输入“产品名称”字段时，“sku”字段更新完成。
我该怎么做？我可以使用“summary.js”来实现吗？
这是我的 summary-custom.js
define([
'uiComponent',
'jquery',
'ko',
'underscore',
'Magento_Ui/js/grid/paging/paging',
'mage/translate',
'Magento_ConfigurableProduct/js/variations/steps/summary'
], function (Component, $, ko, _, paging, summary)
'use strict';
return Component.extend(
defaults:
modules:
variationsComponent: '$ $.variationsComponent ',
modalComponent: '$ $.modalComponent '
,
notificationMessage:
text: null,
error: null
,
gridExisting: [],
gridNew: [],
gridDeleted: [],
variationsExisting: [],
variationsNew: [],
variationsDeleted: [],
pagingExisting: paging(
name: 'configurableWizard.pagingExisting',
sizesConfig:
component: 'Magento_ConfigurableProduct/js/variations/paging/sizes',
name: 'configurableWizard.pagingExisting_sizes'
),
pagingNew: paging(
name: 'configurableWizard.pagingNew',
sizesConfig:
component: 'Magento_ConfigurableProduct/js/variations/paging/sizes',
name: 'configurableWizard.pagingNew_sizes'
),
pagingDeleted: paging(
name: 'configurableWizard.pagingDeleted',
sizesConfig:
component: 'Magento_ConfigurableProduct/js/variations/paging/sizes',
name: 'configurableWizard.pagingDeleted_sizes'
),
attributes: [],
attributesName: [$.mage.__('Images'), $.mage.__('SKU'), $.mage.__('Quantity'), $.mage.__('Height'), $.mage.__('Lower length'), $.mage.__('Lower width'), $.mage.__('Planting depth'), $.mage.__('Planting length'), $.mage.__('Planting width'), $.mage.__('Upper length'), $.mage.__('Upper width'), $.mage.__('Price')],
sections: [],
gridTemplate: 'Magento_ConfigurableProduct/variations/steps/summary-grid'
,
initObservable: function ()
var pagingObservables =
currentNew: ko.getObservable(this.pagingNew, 'current'),
currentExisting: ko.getObservable(this.pagingExisting, 'current'),
currentDeleted: ko.getObservable(this.pagingDeleted, 'current'),
pageSizeNew: ko.getObservable(this.pagingNew, 'pageSize'),
pageSizeExisting: ko.getObservable(this.pagingExisting, 'pageSize'),
pageSizeDeleted: ko.getObservable(this.pagingDeleted, 'pageSize')
;
this._super().observe('gridExisting gridNew gridDeleted attributes sections');
this.gridExisting.columns = ko.observableArray();
this.gridNew.columns = ko.observableArray();
this.gridDeleted.columns = ko.observableArray();
_.each(pagingObservables, function (observable)
observable.subscribe(function ()
this.generateGrid();
, this);
, this);
return this;
,
nextLabelText: $.mage.__('Generate Products'),
variations: [],
calculate: function (variations, getSectionValue)
var productSku = this.variationsComponent().getProductValue('sku'),
productPrice = this.variationsComponent().getProductPrice(),
productWeight = this.variationsComponent().getProductValue('weight'),
variationsKeys = [],
gridExisting = [],
gridNew = [],
gridDeleted = [];
this.variations = [];
_.each(variations, function (options)
var product, images, sku, quantity, price, size_height, size_lower_length, size_lower_width, size_planting_depth, size_planting_length, size_planting_width, size_upper_length, size_upper_width, variation,
productId = this.variationsComponent().getProductIdByOptions(options);
size_height = '';
size_lower_length = '';
size_lower_width = '';
size_planting_depth = '';
size_planting_length = '';
size_planting_width = '';
size_upper_length = '';
size_upper_width = '';
if (productId)
product = _.findWhere(this.variationsComponent().variations,
productId: productId
);
console.log("here");
size_height = product.size_height;
size_lower_length = product.size_lower_length;
size_lower_width = product.size_lower_width;
size_planting_depth = product.size_planting_depth;
size_planting_length = product.size_planting_length;
size_planting_width = product.size_planting_width;
size_upper_length = product.size_upper_length;
size_upper_width = product.size_upper_width;
images = getSectionValue('images', options);
sku = productSku + _.reduce(options, function (memo, option)
return memo + '-' + option.label;
, '');
quantity = getSectionValue('quantity', options);
if (!quantity && productId)
quantity = product.quantity;
price = getSectionValue('price', options);
if (!price)
price = productId ? product.price : productPrice;
if (productId && !images.file)
images = product.images;
variation =
options: options,
images: images,
sku: sku,
name: sku,
quantity: quantity,
price: price,
size_height: size_height,
size_lower_length: size_lower_length,
size_lower_width: size_lower_width,
size_planting_depth: size_planting_depth,
size_planting_length: size_planting_length,
size_planting_width: size_planting_width,
size_upper_length: size_upper_length,
size_upper_width: size_upper_width,
productId: productId,
weight: productWeight,
editable: true
;
if (productId)
variation.sku = product.sku;
variation.weight = product.weight;
variation.name = product.name;
gridExisting.push(this.prepareRowForGrid(variation));
else
gridNew.push(this.prepareRowForGrid(variation));
this.variations.push(variation);
variationsKeys.push(this.variationsComponent().getVariationKey(options));
, this);
_.each(_.omit(this.variationsComponent().productAttributesMap, variationsKeys), function (productId)
gridDeleted.push(this.prepareRowForGrid(
_.findWhere(this.variationsComponent().variations,
productId: productId
)
));
.bind(this));
this.variationsExisting = gridExisting;
this.variationsNew = gridNew;
this.variationsDeleted = gridDeleted;
,
generateGrid: function ()
var pageExisting = this.pagingExisting.pageSize * this.pagingExisting.current,
pageNew = this.pagingNew.pageSize * this.pagingNew.current,
pageDeleted = this.pagingDeleted.pageSize * this.pagingDeleted.current;
this.pagingExisting.totalRecords = this.variationsExisting.length;
this.gridExisting(this.variationsExisting.slice(pageExisting - this.pagingExisting.pageSize, pageExisting));
this.pagingNew.totalRecords = this.variationsNew.length;
this.gridNew(this.variationsNew.slice(pageNew - this.pagingNew.pageSize, pageNew));
this.pagingDeleted.totalRecords = this.variationsDeleted.length;
this.gridDeleted(this.variationsDeleted.slice(pageDeleted - this.pagingDeleted.pageSize, pageDeleted));
,
prepareRowForGrid: function (variation)
var row = [];
row.push(_.extend(
images: []
, variation.images));
row.push(variation.sku);
row.push(variation.quantity);
row.push(variation.size_height);
row.push(variation.size_lower_length);
row.push(variation.size_lower_width);
row.push(variation.size_planting_depth);
row.push(variation.size_planting_length);
row.push(variation.size_planting_width);
row.push(variation.size_upper_length);
row.push(variation.size_upper_width);
_.each(variation.options, function (option)
row.push(option.label);
);
row.push(this.variationsComponent().getCurrencySymbol() + ' ' + variation.price);
return row;
,
getGridTemplate: function ()
return this.gridTemplate;
,
getGridId: function ()
return _.uniqueId('grid_');
,
getColumnsName: function (attributes)
var columns = this.attributesName.slice(0);
attributes.each(function (attribute, index)
columns.splice(11 + index, 0, attribute.label);
, this);
return columns;
,
render: function (wizard)
this.wizard = wizard;
this.sections(wizard.data.sections());
this.attributes(wizard.data.attributes());
this.gridNew([]);
this.gridExisting([]);
this.gridDeleted([]);
this.gridExisting.columns(this.getColumnsName(this.wizard.data.attributes));
this.gridNew.columns(this.getColumnsName(this.wizard.data.attributes));
this.gridDeleted.columns(this.getColumnsName(this.variationsComponent().productAttributes));
this.calculate(wizard.data.variations, wizard.data.sectionHelper);
this.generateGrid();
,
force: function ()
this.variationsComponent().render(this.variations, this.attributes());
this.modalComponent().closeModal();
,
back: function ()
);
);
【问题讨论】：
【参考方案1】：因为他们不直接使用“afterkeydown”事件。他们使用敲除value 绑定和valueUpdate 作为附加绑定。它在引擎盖下。对于开发人员来说，它看起来像是字段级别的属性valueUpdate。
在DataProvider/../Modifier/General.php file 中，您可以发现 javascript 组件已从默认值更改。它是一个import-handler.js，其中属性valueUpdate is assigned 的新值。
【讨论】：
以上是关于Magento 2 如何使用淘汰赛 JS 自动填充文本字段的主要内容，如果未能解决你的问题，请参考以下文章
Magento 2 Knockout Js登录后不绑定客户数据和愿望清单计数