참조 링크를 사용하여 한 페이지 결제에서 아래 배송 방법에 맞춤 블록을 추가하는 방법은 무엇입니까? 하단에 추가 배송 블록을 만들 수 있습니다.
그러나 배송 방법을 선택할 때 콘텐츠 만 표시하고 싶습니다. 고객이 운송 방법을 선택하면 커서가 추가 정보 및 사용자 정의 필드로 이동하여 사용자가 데이터를 입력해야합니다.
다른 배송 방법을 선택할 때 해당 정보가 있으면 div가 숨겨져 있어야합니다.
Magento 2의 http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/ 와 동일 합니다. Magento 1에서 구현했습니다.
답변:
먼저 다음 과 같은 shippingAdditional파일을 만들어서 새로운 요소를 정의합니다view/frontend/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">
<item name="shippingAdditional" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">shippingAdditional</item>
<item name="children" xsi:type="array">
<item name="carrier_custom" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping/carrier_custom</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>그런 다음 파일 view/frontend/web/js/view/checkout/shipping/carrier_custom.js을 다음 과 같이 작성하십시오.
define([
'jquery',
'ko',
'uiComponent',
'Magento_Checkout/js/model/quote'
], function ($, ko, Component, quote) {
'use strict';
return Component.extend({
defaults: {
template: 'Vendor_Module/checkout/shipping/carrier_custom'
},
initObservable: function () {
this.selectedMethod = ko.computed(function() {
var method = quote.shippingMethod();
var selectedMethod = method != null ? method.carrier_code + '_' + method.method_code : null;
return selectedMethod;
}, this);
return this;
},
});
});그런 다음 파일을 만듭니다 view/frontend/web/template/checkout/shipping/carrier_custom.html
<div id="my-carrier-custom-block-wrapper" data-bind="visible: selectedMethod() == 'mycarrier_mymethod'">
<p data-bind="i18n: 'This is custom block shown only when selected specific method'"></p>
</div>기본적으로 XML 파일은 uiComponent 인 js 파일을 시작하도록 체크 아웃에 지시합니다. 녹아웃 템플릿을 시작하고 selectedMethod함수를 사용 하여 현재 선택된 배송 (carrier_method) 값을 가져옵니다. 값이 원하는 값이면 블록이 표시됩니다. 필요에 따라 수정할 수 있습니다. 선택한 운송 업체 만 확인합니다. 때문에 selectedMethod로 정의 knockout.computed()가 있기 때문에 때마다 사용자가 통신사를 변경 재평가받을 것이다 quote.shippingMethod()관측이다.
템플릿 경로가 잘못되어 업데이트되었습니다.