I am a newcomer in Magento2 and face with a next task. I have to do custom validation for city and street inputs at Checkout page for both shipping and payment steps.
There are 2 issues I am misunderstanding totally.
- As I could investigate templates for city and street are inserted by Knockout. To get cities and streets list I have to insert php method in script tag. This php method provides to me URL for next Ajax request. Because of general Knockout template with ‘.html’ type I can’t insert php code there.
So how can I call my js file from Knockout html template? - City and street inputs must offer coincidences for first entered letters (as a result of Ajax request) in their lists below. How this lists can be realized?
I have read Magento devdocs and a lot of communities but couldn’t find intelligible explanation. Sorry for possible repeat.
app/design/frontend/Vendor/Theme/Magento_Checkout/web/template/shipping-address/form.html (inputs are inserted inside id="shipping-new-address-form")
<div class="amtheme-shipping-wrap">
<form class="form form-shipping-address amtheme-form-address"
id="co-shipping-form"
data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
<div class="step-title" data-bind="text: setAddressTitle" data-role="title"></div>
<!-- ko foreach: getRegion('before-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div id="shipping-new-address-form" class="fieldset address">
<!-- ko foreach: getRegion('additional-fieldsets') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- ko if: (isCustomerLoggedIn) -->
<div class="field choice" data-bind="visible: !isFormInline">
<input type="checkbox" class="checkbox" id="shipping-save-in-address-book" data-bind="checked: saveInAddressBook" />
<label class="label" for="shipping-save-in-address-book">
<span data-bind="i18n: 'Save in address book'"></span>
</label>
</div>
<!-- /ko -->
<div class="amtheme-address-toolbar" data-bind="visible: !isFormInline && !isFormPopUpVisible()">
<button type="button"
class="action action-cancel"
click="hideNewAddress"
text="$t('Cancel')"
data-bind="attr: {title: $t('Cancel')}">
</button>
<button type="button"
class="action action-save"
click="saveNewAddress"
text="$t('Ship here')"
data-bind="attr: {title: $t('Ship here')}">
</button>
</div>
</div>
</form>
</div>
I was about to write inside form.html something like this:
<script>
require([
'jquery',
'Magento_Theme/js/govaddress-validation'
], function($) {
$(function () {
$('input[name="city"]').keyup(function () {
console.log('keyup event worked');
govAddressValidation.getCityList('<?php echo $this->getUrl("opgovaddress"); ?>');
});
})
})
</script>
My JS file is not matter as it is unreachable for now
app/design/frontend/Vendor/Theme/Magento_Theme/web/js/govaddress-validation.js
define([
'jquery'
], function ($) {
'use strict';
return {
url: '',
getCityList: function (url) {
var inputValue = $('input[name="city"]').val();
this.inputValue = inputValue;
this.url = url;
this.ajaxCall();
console.log('getCityList');
},
...
}
})
app/design/frontend/Vendor/Theme/Magento_Theme/requirejs-config.js
var config = {
map: {
'*': {
backTop: 'Magento_Theme/js/components/back-to-top',
amMenu: 'Magento_Theme/js/components/am-menu',
amQty: 'Magento_Theme/js/components/am-qty',
amSelect: 'Magento_Theme/js/components/am-select',
amFileUpload: 'Magento_Theme/js/components/am-file-upload',
amStickyHeader: 'Magento_Theme/js/components/am-sticky-header',
govAddressValidation: 'Magento_Theme/js/govaddress-validation'
}
},
config: {
mixins: {
'mage/validation': {
'Magento_Theme/js/lib/mage/validation-mixin': false
},
'mage/menu': {
'Magento_Theme/js/lib/mage/menu-mixin': true
}
}
}
};