I've seen this customizeNameListeners method in the product add/edit form modifier.

Inside it, there is an array that contains a member called imports

    'imports' => [
                'handleNameChanges' => '${$.provider}:data.product.name',
                'handleDescriptionChanges' => '${$.provider}:data.product.description',
                'handleSkuChanges' => '${$.provider}:data.product.sku',
                'handleColorChanges' => '${$.provider}:data.product.color',
                'handleCountryChanges' => '${$.provider}:data.product.country_of_manufacture',
                'handleGenderChanges' => '${$.provider}:data.product.gender',
                'handleMaterialChanges' => '${$.provider}:data.product.material',
                'handleShortDescriptionChanges' => '${$.provider}:data.product.short_description',
                'handleSizeChanges' => '${$.provider}:data.product.size'

I understand that its purpose is to modify on the fly field values depending on other field values. For example, when adding a product, the SKU is filled in automatically from the product name value.
I also understand that this

'handleNameChanges' => '${$.provider}:data.product.name',

means that the function handleNameChanges from the import-handled.js is called and receives the parameter '${$.provider}:data.product.name'.

What I don't understand is how is this all bound together and how ${$.provider}:data.product.name is parsed.
How/where is the change event (or onkeyup or anything else) is bound to the name field?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.