Magento 2 checkout knockout.js in custom template error - telephone fieldOverriding template files in own theme, loaded through JS (Knockout.js)Change the telephone field from 'Telephone' to only 'Mobile Number' at CheckoutMagento 2 EE Checkout Page not working (JS error)Knockout.js breaks in /checkout in my themeMagento 2.2.1: Add Custom Upload file attribute in Checkoutadd custom js to the certain input element on the checkout pageMagento 2.2.1 : Add Custom Field in Login Form On Checkout PageMagento 2 | Remove telephone from checkout addressHow to add custom validation to checkout phone fieldRequire custom checkout field from extension
Why is the voltage measurement of this circuit different when the switch is on?
How to split an equation over two lines?
Distance Matrix (plugin) - QGIS
Impossible darts scores
Alphabet completion rate
How can I repair scratches on a painted French door?
How risky is real estate?
Could Sauron have read Tom Bombadil's mind if Tom had held the Palantir?
Can ADFS connect to other SSO services?
How to get cool night-vision without lame drawbacks?
Story-based adventure with functions and relationships
Can the negators "jamais, rien, personne, plus, ni, aucun" be used in a single sentence?
No IMPLICIT_CONVERSION warning in this query plan
Is this one of the engines from the 9/11 aircraft?
Does the posterior necessarily follow the same conditional dependence structure as the prior?
Why do textbooks often include the solutions to odd or even numbered problems but not both?
What do you call a weak person's act of taking on bigger opponents?
Using “sparkling” as a diminutive of “spark” in a poem
Fedora boot screen shows both Fedora logo and Lenovo logo. Why and How?
Would a two-seat light aircaft with a landing speed of 20 knots and a top speed of 180 knots be technically possible?
Can’t attend PhD conferences
Why does the numerical solution of an ODE move away from an unstable equilibrium?
How well known and how commonly used was Huffman coding in 1979?
Importance of the principal bundle in Chern-Simons theory
Magento 2 checkout knockout.js in custom template error - telephone field
Overriding template files in own theme, loaded through JS (Knockout.js)Change the telephone field from 'Telephone' to only 'Mobile Number' at CheckoutMagento 2 EE Checkout Page not working (JS error)Knockout.js breaks in /checkout in my themeMagento 2.2.1: Add Custom Upload file attribute in Checkoutadd custom js to the certain input element on the checkout pageMagento 2.2.1 : Add Custom Field in Login Form On Checkout PageMagento 2 | Remove telephone from checkout addressHow to add custom validation to checkout phone fieldRequire custom checkout field from extension
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I'm trying to create a mask for telephone field in Magento 2.2.2 checkout. In order to do so. I placed a checkout_index_index.xml with a new template for telephone field at
vendor/mytheme/Magento_Checkout/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<!-- The name of the form the field belongs to -->
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<!-- the field you are customizing -->
<item name="telephone" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/masked</item>
<item name="config" xsi:type="array">
<!-- Assigning a new template -->
<item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/telefone</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
In the folder vendor/mytheme/web/js/view/masked.js I place bellow code
define(['jquery', 'uiComponent', 'ko', ], function ( $, Component, ko)
'use strict';
return Component.extend(
defaults:
template: 'Magento_Checkout/telefone'
,
initialize: function ()
var self = this;
this._super();
ko.bindingHandlers.maskedInput =
init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
,
update: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).mask(allBindings.get('mask'));
valueAccessor()($(element).val());
;
var ViewModel = function()
this.phone = ko.observable("");
this.phone('123123451212');
;
ko.applyBindings(new ViewModel());
)
);
And the I created template telefone.html at vendor/mytheme/Magento_Checkout/web/template
<input class="input-text" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
maskedInput: phone,
mask: '(999) 999-9999',
hasFocus: focused,
attr:
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
" />
But when I go to checkout I get error: Uncaught Error: You cannot apply bindings multiple times to the same element. Does someone know a proper way to apply phone mask to telephone input at checkout. Or, if my method is correct, what am I missing or doing wrong?
magento2 checkout javascript knockoutjs
edited Jul 5 '18 at 13:46
7ochem
5,9399 gold badges37 silver badges70 bronze badges
asked Apr 13 '18 at 13:50
GabrielaGabriela
267 bronze badges
add a comment |
I'm trying to create a mask for telephone field in Magento 2.2.2 checkout. In order to do so. I placed a checkout_index_index.xml with a new template for telephone field at
vendor/mytheme/Magento_Checkout/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<!-- The name of the form the field belongs to -->
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<!-- the field you are customizing -->
<item name="telephone" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/masked</item>
<item name="config" xsi:type="array">
<!-- Assigning a new template -->
<item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/telefone</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
In the folder vendor/mytheme/web/js/view/masked.js I place bellow code
define(['jquery', 'uiComponent', 'ko', ], function ( $, Component, ko)
'use strict';
return Component.extend(
defaults:
template: 'Magento_Checkout/telefone'
,
initialize: function ()
var self = this;
this._super();
ko.bindingHandlers.maskedInput =
init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
,
update: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).mask(allBindings.get('mask'));
valueAccessor()($(element).val());
;
var ViewModel = function()
this.phone = ko.observable("");
this.phone('123123451212');
;
ko.applyBindings(new ViewModel());
)
);
And the I created template telefone.html at vendor/mytheme/Magento_Checkout/web/template
<input class="input-text" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
maskedInput: phone,
mask: '(999) 999-9999',
hasFocus: focused,
attr:
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
" />
But when I go to checkout I get error: Uncaught Error: You cannot apply bindings multiple times to the same element. Does someone know a proper way to apply phone mask to telephone input at checkout. Or, if my method is correct, what am I missing or doing wrong?
magento2 checkout javascript knockoutjs
edited Jul 5 '18 at 13:46
7ochem
5,9399 gold badges37 silver badges70 bronze badges
asked Apr 13 '18 at 13:50
GabrielaGabriela
267 bronze badges
When you use component there is no need toapplyBindingson it.It will do it automatically
– Zaheerabbas
Apr 13 '18 at 14:04
I removed " ko.applyBindings(new ViewModel());" and now I get ReferenceError: Unable to process binding "css: function ()return additionalClasses " Message: Can't find variable: additionalClasses
– Gabriela
Apr 13 '18 at 14:54
@Gabriela, Have you got any solution for this?
– Pushpendra Singh
Jun 22 '18 at 9:48
Sorry, I didn't find a solution. If you have any, please post it here.
– Gabriela
Jun 29 '18 at 13:05
add a comment |
I'm trying to create a mask for telephone field in Magento 2.2.2 checkout. In order to do so. I placed a checkout_index_index.xml with a new template for telephone field at
vendor/mytheme/Magento_Checkout/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<!-- The name of the form the field belongs to -->
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<!-- the field you are customizing -->
<item name="telephone" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/masked</item>
<item name="config" xsi:type="array">
<!-- Assigning a new template -->
<item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/telefone</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
In the folder vendor/mytheme/web/js/view/masked.js I place bellow code
define(['jquery', 'uiComponent', 'ko', ], function ( $, Component, ko)
'use strict';
return Component.extend(
defaults:
template: 'Magento_Checkout/telefone'
,
initialize: function ()
var self = this;
this._super();
ko.bindingHandlers.maskedInput =
init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
,
update: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).mask(allBindings.get('mask'));
valueAccessor()($(element).val());
;
var ViewModel = function()
this.phone = ko.observable("");
this.phone('123123451212');
;
ko.applyBindings(new ViewModel());
)
);
And the I created template telefone.html at vendor/mytheme/Magento_Checkout/web/template
<input class="input-text" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
maskedInput: phone,
mask: '(999) 999-9999',
hasFocus: focused,
attr:
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
" />
But when I go to checkout I get error: Uncaught Error: You cannot apply bindings multiple times to the same element. Does someone know a proper way to apply phone mask to telephone input at checkout. Or, if my method is correct, what am I missing or doing wrong?
magento2 checkout javascript knockoutjs
edited Jul 5 '18 at 13:46
7ochem
5,9399 gold badges37 silver badges70 bronze badges
asked Apr 13 '18 at 13:50
GabrielaGabriela
267 bronze badges
I'm trying to create a mask for telephone field in Magento 2.2.2 checkout. In order to do so. I placed a checkout_index_index.xml with a new template for telephone field at
vendor/mytheme/Magento_Checkout/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<!-- The name of the form the field belongs to -->
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<!-- the field you are customizing -->
<item name="telephone" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/masked</item>
<item name="config" xsi:type="array">
<!-- Assigning a new template -->
<item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/telefone</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
In the folder vendor/mytheme/web/js/view/masked.js I place bellow code
define(['jquery', 'uiComponent', 'ko', ], function ( $, Component, ko)
'use strict';
return Component.extend(
defaults:
template: 'Magento_Checkout/telefone'
,
initialize: function ()
var self = this;
this._super();
ko.bindingHandlers.maskedInput =
init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
,
update: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).mask(allBindings.get('mask'));
valueAccessor()($(element).val());
;
var ViewModel = function()
this.phone = ko.observable("");
this.phone('123123451212');
;
ko.applyBindings(new ViewModel());
)
);
And the I created template telefone.html at vendor/mytheme/Magento_Checkout/web/template
<input class="input-text" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
maskedInput: phone,
mask: '(999) 999-9999',
hasFocus: focused,
attr:
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
" />
But when I go to checkout I get error: Uncaught Error: You cannot apply bindings multiple times to the same element. Does someone know a proper way to apply phone mask to telephone input at checkout. Or, if my method is correct, what am I missing or doing wrong?
magento2 checkout javascript knockoutjs
magento2 checkout javascript knockoutjs
edited Jul 5 '18 at 13:46
7ochem
5,9399 gold badges37 silver badges70 bronze badges
asked Apr 13 '18 at 13:50
GabrielaGabriela
267 bronze badges
edited Jul 5 '18 at 13:46
7ochem
5,9399 gold badges37 silver badges70 bronze badges
asked Apr 13 '18 at 13:50
GabrielaGabriela
267 bronze badges
edited Jul 5 '18 at 13:46
7ochem
5,9399 gold badges37 silver badges70 bronze badges
edited Jul 5 '18 at 13:46
7ochem
5,9399 gold badges37 silver badges70 bronze badges
edited Jul 5 '18 at 13:46
7ochem
5,9399 gold badges37 silver badges70 bronze badges
5,9399 gold badges37 silver badges70 bronze badges
asked Apr 13 '18 at 13:50
GabrielaGabriela
267 bronze badges
asked Apr 13 '18 at 13:50
GabrielaGabriela
267 bronze badges
asked Apr 13 '18 at 13:50
GabrielaGabriela
267 bronze badges
267 bronze badges
When you use component there is no need toapplyBindingson it.It will do it automatically
– Zaheerabbas
Apr 13 '18 at 14:04
I removed " ko.applyBindings(new ViewModel());" and now I get ReferenceError: Unable to process binding "css: function ()return additionalClasses " Message: Can't find variable: additionalClasses
– Gabriela
Apr 13 '18 at 14:54
@Gabriela, Have you got any solution for this?
– Pushpendra Singh
Jun 22 '18 at 9:48
Sorry, I didn't find a solution. If you have any, please post it here.
– Gabriela
Jun 29 '18 at 13:05
add a comment |
When you use component there is no need toapplyBindingson it.It will do it automatically
– Zaheerabbas
Apr 13 '18 at 14:04
I removed " ko.applyBindings(new ViewModel());" and now I get ReferenceError: Unable to process binding "css: function ()return additionalClasses " Message: Can't find variable: additionalClasses
– Gabriela
Apr 13 '18 at 14:54
@Gabriela, Have you got any solution for this?
– Pushpendra Singh
Jun 22 '18 at 9:48
Sorry, I didn't find a solution. If you have any, please post it here.
– Gabriela
Jun 29 '18 at 13:05
When you use component there is no need to
applyBindings on it.It will do it automatically– Zaheerabbas
Apr 13 '18 at 14:04
When you use component there is no need to
applyBindings on it.It will do it automatically– Zaheerabbas
Apr 13 '18 at 14:04
I removed " ko.applyBindings(new ViewModel());" and now I get ReferenceError: Unable to process binding "css: function ()return additionalClasses " Message: Can't find variable: additionalClasses
– Gabriela
Apr 13 '18 at 14:54
I removed " ko.applyBindings(new ViewModel());" and now I get ReferenceError: Unable to process binding "css: function ()return additionalClasses " Message: Can't find variable: additionalClasses
– Gabriela
Apr 13 '18 at 14:54
@Gabriela, Have you got any solution for this?
– Pushpendra Singh
Jun 22 '18 at 9:48
@Gabriela, Have you got any solution for this?
– Pushpendra Singh
Jun 22 '18 at 9:48
Sorry, I didn't find a solution. If you have any, please post it here.
– Gabriela
Jun 29 '18 at 13:05
Sorry, I didn't find a solution. If you have any, please post it here.
– Gabriela
Jun 29 '18 at 13:05
add a comment |
2 Answers
2
active
oldest
votes
There is seems to be a conflict because below layout you have already mentioned the template of element and re-defined the template in your component js file also,
vendor/mytheme/Magento_Checkout/layout/checkout_index_index.xml
<!-- the field you are customizing -->
<item name="telephone" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/masked</item>
<item name="config" xsi:type="array">
<!-- Assigning a new template -->
<item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/telefone</item>
</item>
</item>
Hence try replace below component script with your,
vendor/mytheme/web/js/view/masked.js
define([
'underscore', 'ko',
'mageUtils',
'Magento_Ui/js/form/element/abstract',
'uiLayout'
], function (_, ko, utils, Abstract, layout)
'use strict';
return Abstract.extend(
initialize: function ()
this._super();
//add your custom code or call custom functions
ko.bindingHandlers.maskedInput =
init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
,
update: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).mask(allBindings.get('mask'));
valueAccessor()($(element).val());
;
var ViewModel = function()
this.phone = ko.observable("");
this.phone('123123451212');
;
ko.applyBindings(new ViewModel());
return this;
);
);
Note : script extends from Magento_Ui/js/form/element/abstract
answered Aug 29 '18 at 6:49
Dasitha AbeysingheDasitha Abeysinghe
12 bronze badges
Didn't work either
– Gabriela
Oct 8 '18 at 17:23
add a comment |
My goal is just to put a mask for the telephone field in Magento2 Checkout. Since the Knockout method didn't work I simple declared a new template in checkout_index_index.xml with the bellow code:
<input class="input-text" type="text" placeholder= (__)_____-____ data-bind="
value: value,
valueUpdate: 'keyup',
attr:
name: inputName,
id: uid
" name="telephone" aria-required="true" aria-invalid="false" autocomplete="off" onfocus="this.value='(';" onkeyup="var telephone = this.value;
if (telephone.match(/^(d2$/) !==null)
this.value = telephone + ')';
else if (telephone.match(/^(d2)d5$/) !== null)
this.value = telephone + '-';
" maxlength="14"/>
answered Dec 9 '18 at 1:47
GabrielaGabriela
267 bronze badges
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f222229%2fmagento-2-checkout-knockout-js-in-custom-template-error-telephone-field%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
There is seems to be a conflict because below layout you have already mentioned the template of element and re-defined the template in your component js file also,
vendor/mytheme/Magento_Checkout/layout/checkout_index_index.xml
<!-- the field you are customizing -->
<item name="telephone" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/masked</item>
<item name="config" xsi:type="array">
<!-- Assigning a new template -->
<item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/telefone</item>
</item>
</item>
Hence try replace below component script with your,
vendor/mytheme/web/js/view/masked.js
define([
'underscore', 'ko',
'mageUtils',
'Magento_Ui/js/form/element/abstract',
'uiLayout'
], function (_, ko, utils, Abstract, layout)
'use strict';
return Abstract.extend(
initialize: function ()
this._super();
//add your custom code or call custom functions
ko.bindingHandlers.maskedInput =
init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
,
update: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).mask(allBindings.get('mask'));
valueAccessor()($(element).val());
;
var ViewModel = function()
this.phone = ko.observable("");
this.phone('123123451212');
;
ko.applyBindings(new ViewModel());
return this;
);
);
Note : script extends from Magento_Ui/js/form/element/abstract
answered Aug 29 '18 at 6:49
Dasitha AbeysingheDasitha Abeysinghe
12 bronze badges
Didn't work either
– Gabriela
Oct 8 '18 at 17:23
add a comment |
There is seems to be a conflict because below layout you have already mentioned the template of element and re-defined the template in your component js file also,
vendor/mytheme/Magento_Checkout/layout/checkout_index_index.xml
<!-- the field you are customizing -->
<item name="telephone" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/masked</item>
<item name="config" xsi:type="array">
<!-- Assigning a new template -->
<item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/telefone</item>
</item>
</item>
Hence try replace below component script with your,
vendor/mytheme/web/js/view/masked.js
define([
'underscore', 'ko',
'mageUtils',
'Magento_Ui/js/form/element/abstract',
'uiLayout'
], function (_, ko, utils, Abstract, layout)
'use strict';
return Abstract.extend(
initialize: function ()
this._super();
//add your custom code or call custom functions
ko.bindingHandlers.maskedInput =
init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
,
update: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).mask(allBindings.get('mask'));
valueAccessor()($(element).val());
;
var ViewModel = function()
this.phone = ko.observable("");
this.phone('123123451212');
;
ko.applyBindings(new ViewModel());
return this;
);
);
Note : script extends from Magento_Ui/js/form/element/abstract
answered Aug 29 '18 at 6:49
Dasitha AbeysingheDasitha Abeysinghe
12 bronze badges
Didn't work either
– Gabriela
Oct 8 '18 at 17:23
add a comment |
There is seems to be a conflict because below layout you have already mentioned the template of element and re-defined the template in your component js file also,
vendor/mytheme/Magento_Checkout/layout/checkout_index_index.xml
<!-- the field you are customizing -->
<item name="telephone" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/masked</item>
<item name="config" xsi:type="array">
<!-- Assigning a new template -->
<item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/telefone</item>
</item>
</item>
Hence try replace below component script with your,
vendor/mytheme/web/js/view/masked.js
define([
'underscore', 'ko',
'mageUtils',
'Magento_Ui/js/form/element/abstract',
'uiLayout'
], function (_, ko, utils, Abstract, layout)
'use strict';
return Abstract.extend(
initialize: function ()
this._super();
//add your custom code or call custom functions
ko.bindingHandlers.maskedInput =
init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
,
update: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).mask(allBindings.get('mask'));
valueAccessor()($(element).val());
;
var ViewModel = function()
this.phone = ko.observable("");
this.phone('123123451212');
;
ko.applyBindings(new ViewModel());
return this;
);
);
Note : script extends from Magento_Ui/js/form/element/abstract
answered Aug 29 '18 at 6:49
Dasitha AbeysingheDasitha Abeysinghe
12 bronze badges
There is seems to be a conflict because below layout you have already mentioned the template of element and re-defined the template in your component js file also,
vendor/mytheme/Magento_Checkout/layout/checkout_index_index.xml
<!-- the field you are customizing -->
<item name="telephone" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/masked</item>
<item name="config" xsi:type="array">
<!-- Assigning a new template -->
<item name="elementTmpl" xsi:type="string">Magento_Checkout/form/element/telefone</item>
</item>
</item>
Hence try replace below component script with your,
vendor/mytheme/web/js/view/masked.js
define([
'underscore', 'ko',
'mageUtils',
'Magento_Ui/js/form/element/abstract',
'uiLayout'
], function (_, ko, utils, Abstract, layout)
'use strict';
return Abstract.extend(
initialize: function ()
this._super();
//add your custom code or call custom functions
ko.bindingHandlers.maskedInput =
init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
,
update: function(element, valueAccessor, allBindings, viewModel, bindingContext)
ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
$(element).mask(allBindings.get('mask'));
valueAccessor()($(element).val());
;
var ViewModel = function()
this.phone = ko.observable("");
this.phone('123123451212');
;
ko.applyBindings(new ViewModel());
return this;
);
);
Note : script extends from Magento_Ui/js/form/element/abstract
answered Aug 29 '18 at 6:49
Dasitha AbeysingheDasitha Abeysinghe
12 bronze badges
answered Aug 29 '18 at 6:49
Dasitha AbeysingheDasitha Abeysinghe
12 bronze badges
answered Aug 29 '18 at 6:49
Dasitha AbeysingheDasitha Abeysinghe
12 bronze badges
answered Aug 29 '18 at 6:49
Dasitha AbeysingheDasitha Abeysinghe
12 bronze badges
12 bronze badges
Didn't work either
– Gabriela
Oct 8 '18 at 17:23
add a comment |
Didn't work either
– Gabriela
Oct 8 '18 at 17:23
Didn't work either
– Gabriela
Oct 8 '18 at 17:23
Didn't work either
– Gabriela
Oct 8 '18 at 17:23
add a comment |
My goal is just to put a mask for the telephone field in Magento2 Checkout. Since the Knockout method didn't work I simple declared a new template in checkout_index_index.xml with the bellow code:
<input class="input-text" type="text" placeholder= (__)_____-____ data-bind="
value: value,
valueUpdate: 'keyup',
attr:
name: inputName,
id: uid
" name="telephone" aria-required="true" aria-invalid="false" autocomplete="off" onfocus="this.value='(';" onkeyup="var telephone = this.value;
if (telephone.match(/^(d2$/) !==null)
this.value = telephone + ')';
else if (telephone.match(/^(d2)d5$/) !== null)
this.value = telephone + '-';
" maxlength="14"/>
answered Dec 9 '18 at 1:47
GabrielaGabriela
267 bronze badges
add a comment |
My goal is just to put a mask for the telephone field in Magento2 Checkout. Since the Knockout method didn't work I simple declared a new template in checkout_index_index.xml with the bellow code:
<input class="input-text" type="text" placeholder= (__)_____-____ data-bind="
value: value,
valueUpdate: 'keyup',
attr:
name: inputName,
id: uid
" name="telephone" aria-required="true" aria-invalid="false" autocomplete="off" onfocus="this.value='(';" onkeyup="var telephone = this.value;
if (telephone.match(/^(d2$/) !==null)
this.value = telephone + ')';
else if (telephone.match(/^(d2)d5$/) !== null)
this.value = telephone + '-';
" maxlength="14"/>
answered Dec 9 '18 at 1:47
GabrielaGabriela
267 bronze badges
add a comment |
My goal is just to put a mask for the telephone field in Magento2 Checkout. Since the Knockout method didn't work I simple declared a new template in checkout_index_index.xml with the bellow code:
<input class="input-text" type="text" placeholder= (__)_____-____ data-bind="
value: value,
valueUpdate: 'keyup',
attr:
name: inputName,
id: uid
" name="telephone" aria-required="true" aria-invalid="false" autocomplete="off" onfocus="this.value='(';" onkeyup="var telephone = this.value;
if (telephone.match(/^(d2$/) !==null)
this.value = telephone + ')';
else if (telephone.match(/^(d2)d5$/) !== null)
this.value = telephone + '-';
" maxlength="14"/>
answered Dec 9 '18 at 1:47
GabrielaGabriela
267 bronze badges
My goal is just to put a mask for the telephone field in Magento2 Checkout. Since the Knockout method didn't work I simple declared a new template in checkout_index_index.xml with the bellow code:
<input class="input-text" type="text" placeholder= (__)_____-____ data-bind="
value: value,
valueUpdate: 'keyup',
attr:
name: inputName,
id: uid
" name="telephone" aria-required="true" aria-invalid="false" autocomplete="off" onfocus="this.value='(';" onkeyup="var telephone = this.value;
if (telephone.match(/^(d2$/) !==null)
this.value = telephone + ')';
else if (telephone.match(/^(d2)d5$/) !== null)
this.value = telephone + '-';
" maxlength="14"/>
answered Dec 9 '18 at 1:47
GabrielaGabriela
267 bronze badges
answered Dec 9 '18 at 1:47
GabrielaGabriela
267 bronze badges
answered Dec 9 '18 at 1:47
GabrielaGabriela
267 bronze badges
answered Dec 9 '18 at 1:47
GabrielaGabriela
267 bronze badges
267 bronze badges
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f222229%2fmagento-2-checkout-knockout-js-in-custom-template-error-telephone-field%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
When you use component there is no need to
applyBindingson it.It will do it automatically– Zaheerabbas
Apr 13 '18 at 14:04
I removed " ko.applyBindings(new ViewModel());" and now I get ReferenceError: Unable to process binding "css: function ()return additionalClasses " Message: Can't find variable: additionalClasses
– Gabriela
Apr 13 '18 at 14:54
@Gabriela, Have you got any solution for this?
– Pushpendra Singh
Jun 22 '18 at 9:48
Sorry, I didn't find a solution. If you have any, please post it here.
– Gabriela
Jun 29 '18 at 13:05