유효성 확인 후 후 주문 전에 Woocmerce 체크아웃에서 만들기
주문 확인을 위해 체크아웃 단계를 만들려고 합니다.장소 주문 버튼을 클릭하고 체크아웃 필드가 유효할 때 JS를 실행하여 모달이나 다른 것을 보여줄 수 있을까 생각 중입니다.
확인 후 실행되는 체크아웃_place_order와 유사한 JS 트리거/이벤트가 있습니까?예를 들어, 저는 다음을 사용할 수 있지만, 그것은 검증 전에 발생합니다.내부에서 검증을 시작하고 이를 바탕으로 제 모달을 표시하는 방법이 있을까요?
var checkout_form = $('form.checkout');
checkout_form.on('checkout_place_order', function () {
// do your custom stuff
return true; // continue to validation and place order
return false; // doesn't validate or place order
});
wocommerce_After_checkout_validation hook도 있는데 어떻게 활용해야 내가 추구하는 것을 이룰 수 있을지 모르겠습니다.
나는 생각에 열려있습니다...
드디어 알아낼 수 있었습니다. 확실한 방법이 없는 것 같아서 해결책에 가깝습니다.
주문하기 버튼을 클릭하면 바로 체크아웃_place_order 이벤트를 사용하여 값이 1로 설정된 숨겨진 필드를 배치합니다.
var checkout_form = $('form.checkout');
checkout_form.on('checkout_place_order', function () {
if ($('#confirm-order-flag').length == 0) {
checkout_form.append('<input type="hidden" id="confirm-order-flag" name="confirm-order-flag" value="1">');
}
return true;
});
다음으로 hook woocmerce_after_checkout_validation을 사용하여 숨겨진 입력을 확인하고 값이 1개일 경우 오류를 추가합니다(이것은 주문 진행을 중지합니다).
function add_fake_error($posted) {
if ($_POST['confirm-order-flag'] == "1") {
wc_add_notice( __( "custom_notice", 'fake_error' ), 'error');
}
}
add_action('woocommerce_after_checkout_validation', 'add_fake_error');
마지막으로 checkout_error 이벤트를 사용하여 실제 유효성 검사가 있었는지 또는 오류가 1개만 있는 경우 오류를 추가했는지 확인합니다.오류가 1개만 있으면 검증을 통과한 것이므로 우리는 우리의 모달(또는 당신이 해야 할 모든 것)을 보여줄 수 있습니다.
$(document.body).on('checkout_error', function () {
var error_count = $('.woocommerce-error li').length;
if (error_count == 1) { // Validation Passed (Just the Fake Error I Created Exists)
// Show Confirmation Modal or Whatever
}else{ // Validation Failed (Real Errors Exists, Remove the Fake One)
$('.woocommerce-error li').each(function(){
var error_text = $(this).text();
if (error_text == 'custom_notice'){
$(this).css('display', 'none');
}
});
}
});
내 모달 안에 숨겨진 필드 값을 아무것도 아닌 것으로 설정하고 장소 순서 버튼을 다시 클릭하는 확인 버튼이 있습니다.이번에는 숨겨진 입력 값 1을 확인하고 있기 때문에 주문이 진행될 예정입니다.
$('#confirm-order-button').click(function () {
$('#confirm-order-flag').val('');
$('#place_order').trigger('click');
});
제가 알기로는 검증과 주문 작성 프로세스 사이에 어떤 고리도 존재하지 않으며, 이를 통해 고객과 상호 작용하여 몇 가지 조치를 취할 수 있습니다.
jQuery 및 Sweet Alert 구성 요소(SWAL 2)를 사용하면 확인 버튼과 함께 Sweet Alert를 표시하는 "주문하기" 버튼을 비활성화하는 코드의 예가 여기에 있습니다.완벽하진 않지만 질문에 부분적으로 대답해줍니다.
고객의 확인이 완료되면 "주문하기" 버튼이 다시 활성화되고 코드에 의해 트리거됩니다.고객님께서 취소 버튼을 이용하시면 체크아웃 리뷰 오더가 새로워집니다(Ajax).
코드:
add_action( 'wp_footer', 'checkout_place_order_script' );
function checkout_place_order_script() {
// Only checkout page
if( is_checkout() && ! is_wc_endpoint_url() ):
// jQuery code start below
?>
<script src="https://unpkg.com/sweetalert2@8.8.1/dist/sweetalert2.all.min.js"></script>
<script src="https://unpkg.com/promise-polyfill@8.1.0/dist/polyfill.min.js"></script>
jQuery( function($){
var fc = 'form.checkout',
pl = 'button[type="submit"][name="woocommerce_checkout_place_order"]';
$(fc).on( 'click', pl, function(e){
e.preventDefault(); // Disable "Place Order" button
// Sweet alert 2
swal({
title: 'Are you sure?',
text: "You are about proceed the order",
type: 'success',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: "Yes let's go!"
}).then((result) => {
if (result.value) {
$(fc).off(); // Enable back "Place Order button
$(pl).trigger('click'); // Trigger submit
} else {
$('body').trigger('update_checkout'); // Refresh "Checkout review"
}
});
});
});
</script>
<?php
endif;
}
코드가 작동합니다.활성 하위 테마(또는 활성 테마)의 php 파일입니다.테스트를 거쳐 작동합니다.
파티에 늦었지만 위의 다양한 답변을 공유하고 싶었습니다.
jQuery(document).ready(function($){
/* on submit */
$('form#FORMID').submit( function(e) {
/* stop submit */
e.preventDefault();
/* count validation errors */
var error_count = $('.woocommerce-error li').length;
/* see if terms and conditions are accepted */
var terms = $('input#terms').is(':checked');
/* if there are no validation errors and terms are accepted*/
if( error_count == 0 && terms ) {
/* trigger confirmation dialogue */
if( confirm('Are you sure?') ){
/* resume default submit */
$(this).unbind('submit').submit();
} else {
/* do nothing */
e.stopPropagation();
}
}
});
});
이 경우에 저는 빠르고 간단한 JS 결정을 받았습니다(우커머스 형태와 스트라이프 형태가 있었습니다).그것은 체크아웃 버튼이 제출되지 않도록 하는 것에 기반을 두고 있지만, 여전히 양식을 확인합니다.
// making the wrap click event on dinamic element
$('body').on('click', 'button#place_order_wrap', function(event) {
// main interval where all things will be
var validatoins = setInterval(function(){ happen
// checking for errors
if(no_errors==0){
// making the setTimeout() function with limited time like 200ms
// to limit checkout function for just make verification
setTimeout(function(){
// triggering original button
$('button#place_order').click();
// if there some errors, stop the interval, return false
if(($('element').find('ul.woocommerce_error').length!==0)||($('element').find('.woocommerce-invalid-required-field').length!==0)){
clearInterval(validatoins);
return false;
}else{
no_errors=1;
}
}, 200);
}
if(no_errors==1){
// same error checking
if($('#step5').find('ul.woocommerce_error').length!=0||($('#step5').find('.woocommerce-invalid-required-field').length!==0)){
// if there some errors, stop the interval, return false
clearInterval(validatoins);
return false;
}
setTimeout(function(){
// if no errors
if(($('#step5').find('ul.woocommerce_error').length==0)&&($('#step5').find('.woocommerce-invalid-required-field').length==0)){
// do something, mark that finished
return false;
}
}, 1000);
// if something finished
if() {
setTimeout(function(){
// trigger original checkout click
$('button#place_order').click();
clearInterval(validatoins);
}, 1000);
}
}
}, 1000);
}
언급URL : https://stackoverflow.com/questions/52726635/hooking-after-validation-but-before-order-create-in-woocommerce-checkout
'programing' 카테고리의 다른 글
| 단일 레이블에 여러 글꼴 색 사용 (0) | 2023.09.15 |
|---|---|
| 빈 값을 정수 필드로 저장하는 방법 (0) | 2023.09.15 |
| 지원되지 않는 SQL92 오류를 수정하려면 어떻게 해야 합니까? (0) | 2023.09.15 |
| Oracle에서 윤초를 처리하는 방법 (0) | 2023.09.15 |
| AFNetworking에 누락된 ASIHTTP 요청 주요 기능은 무엇입니까? (0) | 2023.09.15 |