Magento 2에서 결제 프로세스를 사용자 정의하는 방법
게시 됨: 2018-04-23목차
Magento 2에서는 더 빠르고 쉬운 경험을 위해 결제 프로세스가 재설계되었습니다. 체크아웃 페이지는 고객에게 프로세스의 2가지 간단한 단계를 안내합니다. 계정에 로그인한 고객은 많은 정보가 이미 계정에 있기 때문에 빠르게 결제를 완료할 수 있습니다. 결제 프로세스의 첫 번째 단계는 고객이 배송 주소 정보를 작성하고 배송 방법을 선택하는 것입니다. 두 번째 단계에서 고객은 결제 방법을 선택하고 쿠폰을 적용하여 구매를 완료합니다.
Magento 2의 기본 체크아웃 사용자 지정
새 결제 단계를 추가하거나 기존 결제의 보기를 변경하여 기본 결제를 원하는 대로 사용자 지정할 수 있습니다.
새 결제 단계 추가
사용자 정의 체크아웃 단계를 추가할 수 있으며 이는 UI 구성요소로 구현되어야 합니다. 호환성, 업그레이드 가능성 및 쉬운 유지 관리를 위해 기본 Magento 코드를 편집하지 말고 별도의 모듈에 사용자 정의를 추가하십시오.
1단계: 결제 단계 구성 요소의 보기 부분 만들기
새 결제 단계의 보기 부분을 생성하려면:
- 모듈 디렉토리를 추가하십시오. 모든 사용자 정의 파일은 거기에 저장해야 합니다. 체크아웃 사용자 정의가 올바르게 적용되려면 사용자 정의 모듈이
Magento_Checkout모듈에 의존해야 합니다. 경로를 지정할 때 필요한%Vendor%_Ui표기법이 문제를 일으킬 수 있으므로 사용자 정의 모듈 이름에Ui를 사용하지 마십시오. - 뷰 모델을 구현하는
.js파일을 만듭니다. - 구성 요소에 대한
.html템플릿을 만듭니다.
각 단계는 아래에 자세히 설명되어 있습니다.
1. 새 단계를 구현하는 JavaScript 파일 추가
새로운 체크아웃 단계는 UI 구성요소로 구현되어야 합니다. 즉, JavaScript 구현은 JavaScript 모듈이어야 합니다.
파일은 <your_module_dir>/view/frontend/web/js/view 디렉터리에 저장해야 합니다.
<your_module_dir> 표기법은 루트 디렉토리에서 모듈 디렉토리로의 경로를 나타냅니다. 일반적으로 app/code/<YourVendor>/<YourModule> 또는 vendor/<yourvendor>/module-<module>-<name> 중 하나입니다.
주석이 있는 샘플 my-step-view.js 는 다음과 같습니다.
정의하다(
['ko', 'uiComponent', '밑줄', 'Magento_Checkout/js/모델/단계 - 내비게이터'],
기능(
코,
요소,
_,
스텝내비게이터
) {'
엄격한 사용';
/**
*
* mystep – 구성 요소의 .html 템플릿 이름입니다.
* <Vendor>_<Module> – 모듈 디렉토리의 이름입니다.
*
*/
반환 Component.extend({
기본값: {
템플릿: ' < 공급업체 > _ < 모듈 > /mystep'
},
// 여기에 단계를 표시할 논리를 추가합니다.
isVisible: ko.observable(true),
/**
*
* @반환 {*}
*/
초기화: function() {
this._super();
// 단계 등록
stepNavigator.registerStep(
//단계 코드는 구성 요소 템플릿에서 단계 콘텐츠 ID로 사용됩니다.
'단계 코드',
//단계 별칭
없는,
//단계 제목 값
'단계 제목',
// 단계를 표시하거나 단계를 숨길 때 논리가 있는 관찰 가능한 속성
this.isVisible,
_.bind(this.navigate, this),
/**
* 정렬 순서 값
* 'sort order value' < 10: 배송 단계 전 단계 표시;
* 10 < 'sort order value' < 20 : 배송 단계와 결제 단계 사이의 단계 표시
* 'sort order value' > 20 : 결제 단계 후 단계 표시
*/
15
);
이것을 반환하십시오;
},
/**
* navigation() 메소드는 체크아웃 단계 사이의 탐색을 담당합니다.
* 체크아웃 시. 일부 조건과 같은 사용자 정의 논리를 추가할 수 있습니다.
* 사용자 정의 단계로 전환하기 위해
*/
탐색: function() {
},
/**
* @반환 무효
*/
NavigationToNextStep: 함수() {
stepNavigator.next();
}
});
}
);2. .html 템플릿 추가
모듈 디렉토리에서 구성 요소에 대한 .html 템플릿을 추가합니다. <your_module_dir>/view/frontend/web/template 디렉토리 아래에 있어야 합니다.
샘플 mystep.html 은 다음과 같습니다.
<!–.js 파일의 'step_code' 값을 사용해야 합니다.–>
<li data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: '단계 제목'" data-role="title"></div>
<div class="step-content" 데이터 역할="content">
<form data-bind="제출: navigationToNextStep" novalidate="novalidate">
<div class="actions-toolbar">
<div 클래스="기본">
<button data-role="opc-continue" type="submit" class="버튼 작업 계속 기본">
<span><!– ko i18n: '다음'–><!– /ko –></span>
</버튼>
</div>
</div>
</form>
</div>
</li>2단계: 결제 페이지 레이아웃에 단계 추가
페이지에 새 단계를 표시하려면 checkout_index_index.xml 에 정의된 Checkout 페이지 레이아웃에서 이를 선언해야 합니다.
따라서 다음 위치에 확장 checkout_index_index.xml 레이아웃 파일을 추가해야 합니다. <your_module_dir>/view/frontend/layout/checkout_index_index.xml
샘플 checkout_index_index.xml 은 다음과 같습니다.
<페이지 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<본체>
<referenceBlock name="checkout.root">
<인수>
<인수 이름="jsLayout" xsi:type="배열">
<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="my-new-step" xsi:type="array">
<item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
<!–배송 단계 전에 단계 내용을 표시하려면 "sortOrder" 값이 < 1–>이어야 합니다.
<!–배송 단계와 결제 단계 1 사이의 단계 내용을 표시하려면 < "sortOrder" < 2 –>
<!–결제 단계 "sortOrder" 이후 단계 내용을 표시하려면 >2 –>
<item name="sortOrder" xsi:type="string">2</item>
<item name="children" xsi:type="array">
<!–단계에 대한 하위 구성요소 선언을 여기에 추가–>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</인수>
</인수>
</referenceBlock>
</바디>
</페이지> 
Magento 2 Checkout 사용자 정의 필드
$119,00
Magento 2 원스텝 체크아웃
$99 $119,00
기존 결제 보기 사용자 지정
Magento 애플리케이션에서 체크아웃은 UI 구성요소를 사용하여 구현됩니다. 구성 요소에 대한 JavaScript 구현 또는 템플릿을 변경하고 구성 요소를 추가, 제거 또는 비활성화하여 각 단계를 사용자 정의할 수 있습니다.
1단계: 구성 요소의 .js 구현 및 템플릿 변경
구성 요소 렌더링에 사용되는 .js 구현 및 템플릿을 변경하려면 결제 페이지 레이아웃에서 새 파일을 선언해야 합니다. 이렇게 하려면 다음 단계를 수행하십시오.
- 사용자 정의 모듈 디렉토리에서 다음 새 파일을 작성하십시오.
<your_module_dir>/view/frontend/layout/checkout_index_index.xml. (체크아웃 사용자 정의가 올바르게 적용되려면 사용자 정의 모듈이 Magento_Checkout 모듈에 의존해야 합니다.) - 이 파일에 다음을 추가합니다.
<페이지 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<본체>
<referenceBlock name="checkout.root">
<인수>
<인수 이름="jsLayout" xsi:type="배열">
<!– 당신의 커스터마이징이 여기에 있을 것입니다 –>
…
</인수>
</인수>
</referenceBlock>
</바디>
</페이지>-
<Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml파일에서 사용자 지정해야 하는 구성 요소를 찾습니다. 해당 노드와 모든 상위 노드를<argument>까지 복사합니다. 변경하지 않을 예정이므로 상위 노드의 모든 속성과 값을 그대로 둘 필요가 없습니다. - 구성 요소의
.js파일, 템플릿 또는 기타 속성에 대한 경로를 변경합니다.
예시:
Magento_Shipping 모듈은 배송 단계에 배송 정책 정보에 대한 링크로 렌더링된 구성 요소를 추가합니다.
<Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml
다음과 같이 보입니다.
<페이지 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<본체>
<referenceBlock name="checkout.root">
<인수>
<인수 이름="jsLayout" xsi:type="배열">
<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="before-shipping-method-form" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping_policy" xsi:type="array">
<item name="component" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</인수>
</인수>
</referenceBlock>
</바디>
</페이지> 2단계: 결제 페이지 레이아웃에 새 구성 요소 추가
모든 UI 구성 요소는 체크아웃 단계 구성 요소가 추가되는 방식과 유사하게 checkout_index_index.xml 에 추가됩니다.
상위 구성 요소에 의해 올바르게 렌더링되도록 구성 요소를 선언해야 합니다. 상위 구성 요소가 일반 UI 구성 요소( uiComponent 별칭으로 참조됨)인 경우 해당 하위 구성 요소는 조건 없이 렌더링됩니다. 그러나 부모 구성 요소가 일반 UI 구성 요소의 확장인 경우 자식 렌더링이 특정 방식으로 제한될 수 있습니다. 예를 들어 구성 요소는 특정 displayArea 의 자식만 렌더링할 수 있습니다.
3단계 : 구성 요소 비활성화
checkout_index_index.xml 에서 구성 요소를 비활성화하려면 다음 지침을 사용하십시오.
<item name="%the_component_to_be_disabled%" xsi:type="array">
<항목 이름="구성" xsi:type="배열">
<item name="componentDisabled" xsi:type="boolean">참</item>
</항목>
</항목>4단계: 구성 요소 제거
레이아웃 렌더링에서 구성 요소를 제거하려면 \Magento\Checkout\Block\Checkout\LayoutProcessor::process 메서드에 대한 플러그인을 만들어야 합니다. 플러그인에서 런타임에 해당 레이아웃 노드를 제거하는 around 메서드를 구현합니다.
다음 샘플은 구성 요소를 제거하는 around 메서드의 예입니다.
unset($jsLayout['구성 요소']['체크아웃']['자식']['단계'][%path_to_target_node%]); //%path_to_target_node%는 checkout_index_index.xml에 있는 구성 요소 노드의 경로입니다. 반환 $jsLayout;
(코드에서 이 샘플을 사용하려면 %path_to_target_node% 자리 표시자를 실제 값으로 바꾸십시오.)
*구성 요소 비활성화 대 제거: 구성 요소를 비활성화하면 구성 요소가 로드되지만 렌더링되지는 않습니다. 구성 요소를 제거하면 로드되지 않습니다.
관련 게시물:
Magento에서 결제에 할인 코드를 추가하는 방법
Magento 2 Checkout에 사용자 정의 결제를 추가하는 방법