Magento 2如何使用淘汰赛自动填充文本字段JS
问题描述:
请让我知道哪个JS文件处理产品创建模块中的自动填充功能?他们在“产品名称”字段中输入时自动填充“SKU”字段。我搜索了“afterkeydown”属性,但找不到任何。Magento 2如何使用淘汰赛自动填充文本字段JS
予需要此功能可配置变化创建部分下面
所解释在可配置的变化创建部分,我已编辑summary.js(它延伸摘要-custom.js)以显示其他简单属性。 这里我们可以看到,对于“大小1”,所有8个简单属性值都应该是相同的。例如,如果“Base color:Anthracite,size:1”的“Height”=> 1,那么Magento的“Base color:Blue Tones,size:1”的“Height”应该自动填充“1”当我们输入“产品名称”字段时,为“sku”字段更新完成。
我该怎么做?我可以使用“summary.js”来实现吗?
这里是我的总结,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() {
}
});
});
答
因为他们不直接使用 “afterkeydown” 事件。他们使用敲除value
绑定和valueUpdate
作为附加绑定。它在引擎盖下。对于开发人员来说,它在外地级别看起来像属性valueUpdate
。
在DataProvider/../Modifier/General.php
file中,您可以发现JavaScript组件已从默认值更改。这是一个import-handler.js
,其中物业的新值为valueUpdate
is assigned。