结帐时的城市和街道验证

Question

我是Magento2的新手，面临着下一个任务。我必须做的城市和街道输入的自定义验证在结帐页面的运输和支付步骤。有两个问题我完全误解了。

1. ，我可以研究城市和街道的模板，都是由Knockout插入的。要获得城市和街道列表，我必须在脚本标记中插入php方法。这个php方法为我提供了下一个Ajax请求的URL。由于具有“.html”类型的一般Knockout模板，所以我无法在那里插入php代码。那么，如何从Knockout模板调用我的js文件呢？

、

1. 、City和street输入必须在下面的列表中为第一个输入的字母提供巧合(这是Ajax请求的结果)。如何实现此列表？

我读过Magento和很多社区，但是找不到易懂的解释。抱歉，可能重复一遍。

app/design/frontend/Vendor/Theme/Magento_Checkout/web/template/shipping-address/form.html (输入插入到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>

我正要在form.html里面写这样的东西：

<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>

我的JS文件并不重要，因为它目前是无法访问的。

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
            }
        }
    }
};

Answer 1

首先，Magento对checkout_index_index.xml的验证不能正常工作，所以您必须在替换街道字段时插入规则。您可以通过创建插件并在布局AfterProcessor中插入字段来做到这一点。

namespace/module/etc/frontend/di.xml

..。

<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
    <plugin name="rewrite-street" type="Namespace\Module\Model\Checkout\LayoutProcessorPlugin" sortOrder="10"/>
</type>

..。

LayoutProcessorPlugin应该如下所示：(请参阅附件) https://pastebin.com/AE6AiLxk

可以在验证数组中插入所需的任何验证规则。

Answer 2

因此，您要做的是打开签出并查找要验证的字段。我会选择你的第一个领域，城市。Opening dev tools给了我以下内容：

<input class="input-text" type="text" data-bind=" ..." name="city" ...>

所以我们可以用这个名字做一些事情，因为我们没有真正有用的id。我从你的问题中看出你已经有这部分了！

既然你说你想要运输和付款步骤，我就去最后一步。因此，为了做到这一点，我们需要一个自定义验证器的付款步骤。我想您已经有了一个自定义扩展，类似于Vendor_MyCheckoutValidator。首先，我们将在Vendor/MyCheckoutValidator/view/frontend/layout中创建一个checkout_index_index.xml副本(来自Magento模块)，我们将省略所有我们不需要的东西。只需将步骤复制到付款：

<body>
  <referenceBlock name="checkout.root">
    <arguments>
      [... all the way down to payment ...]
       <item name="payment" xsi:type="array">
         <item name="children" xsi:type="array">
           <item name="additional-payment-validators" xsi:type="array">
             <item name="children" xsi:type="array">
               <item name="my-city-validator" xsi:type="array">
                 <item name="component" xsi:type="string">Vendor_MyCheckoutValidator/js/view/finalcheck-validation</item>
                 </item>
                 [... and all the way back down again ...]

在这里，我把它命名为我的城市验证器，它指向Vendor_MyCheckoutValidator/js/view/finalcheck-validation.。

让我们在Vendor/MyCheckoutValidator/view/frontend/web/js/view:下的模块中创建finalcheck-validation.js

define(
 [
  'uiComponent',
  'Magento_Checkout/js/model/payment/additional-validators',
  'Vendor_MyCheckoutValidator/js/model/final-address-check-validator'
 ],
  function (Component, additionalValidators, finalAddressCheckValidator) {
   'use strict';
   additionalValidators.registerValidator(finalAddressCheckValidator);
   return Component.extend({});
  }
);

它看起来比它更复杂，但简单地说，我们的定义说它是一个支付加法验证器，它可以在js/model/final-address-check-验证器中找到，然后在函数中使用这些。因此，我们现在需要最后一个位，应该在Vendor/MyCheckoutValidator/view/frontend/web/js/model中的最终地址检查-valdator.js：

注意:在Vendor_MyCheckoutValidator/js/view/finalcheck-validation中提到的路径是Vendor_MyCheckoutValidator/js/model/final-address-check-validator，在上面的js中，它是Vendor_MyCheckoutValidator/js/model/final-address-check-validator，但在现实中，您也需要“视图/前端/web”位(Magento知道在哪里可以找到它，但这可能会使新开发人员感到困惑)，所以我们的路径是Vendor/MyCheckoutValidator/view/frontend/web/js/view和Vendor/MyCheckoutValidator/view/frontend/web/js/model。

回到我们的最后一步，最后的地址检查-验证. to。这里我们有一个不知道id的问题，但是我们有输入的名称，如我的文章开头所看到的，名称是"city“。所以让我们看看它是否以Z开头，因为我们不想把东西发送到以Z开头的城市。

我们需要一些标准的东西，如mage/translate和(错误) messageList，当然还有jquery：

define(
['jquery', 'mage/translate', 'Magento_Ui/js/model/messageList'],
function ($, $t, messageList) {
 'use strict';
 return {
  validate: function () {
    var cityIsFine = true,
      city = $('input[name="city"]').val(); // getting our city input by name!
    if(city.match("^Z") { 
      messageList.addErrorMessage({ message: $t('We are sorry, your city starts with a Z.') });
      cityIsFine = false;
    }
    // you could do some checks here and maybe a console.log
    console.log(city);
    if(!cityIsFine) {
       return false;
    }
    return true;
   } 
  }
 }
);

安装您的模块，确保清除所有缓存！尤其是前端缓存！部署您的前端，彻底清除浏览器缓存并尝试使用一个名为Zen的城市。你应该能够填写一切罚款，然后你按下付款按钮，你得到一个错误！

正如您所看到的，我没有使用任何模板、混合器或其他东西(我可以，但这里根本不需要它)。您只需在付款步骤上声明您的自定义验证器，将其添加到其他验证器中，并在其中执行一些jquery魔术。

我专注于城市，但你也可以在街上做同样的事。看看你的正面，它的名字是什么。如果它有name="street“，那么您的jQuery值将类似于street0 =$(‘street0[name=”street“]’).val()；

您还可以从立即抛出一个错误开始，在添加regex和其他规则之前使其工作。那你就知道你的工作是:-)

define(
['jquery', 'mage/translate', 'Magento_Ui/js/model/messageList'],
function ($, $t, messageList) {
 'use strict';
 return {
  validate: function () {
    console.log('Sorry!');
    messageList.addErrorMessage({ message: $t('We are sorry you will never get past the payment button') });
    return false;
   }
  }
 }
);

这个部分我还没有试过，但是我认为您可以在上面的验证器中执行ajax调用。我不确定你是否想从你的问题中得到一种自动完成，所以我在上面的答案中集中讨论了城市的验证。