WooCommerce AJAX 장바구니에 추가 – 단계별 자습서
게시 됨: 2019-11-20몇 주 전에 우리는 프로그래밍 방식으로 장바구니 기능을 추가하여 판매를 늘리는 방법에 대해 이야기했습니다. 오늘 은 WooCommerce 제품의 장바구니 담기 버튼에서 AJAX를 구현하는 방법을 살펴보겠습니다. 이렇게 하면 사용자 경험과 전반적인 판매 프로세스가 개선되어 매장을 최적화하고 수익을 높이는 데 도움이 됩니다.
오늘날 성공적인 매장을 운영하려면 사이트에서 장바구니를 동적으로 업데이트하는 것이 중요합니다. 그렇지 않으면 사용자가 장바구니에 제품을 추가할 때마다 페이지가 새로고침되어 구매 프로세스가 매우 느려지고 고객이 이탈할 가능성이 높아집니다. 그렇기 때문에 WooCommerce AJAX 장바구니에 추가 기능으로 매장을 개조하면 장바구니 포기를 줄이고 매출을 높일 수 있습니다.
이 가이드에서는 단계별로 수행하는 방법을 보여줍니다.
WooCommerce에서 AJAX의 이점
요약하자면 상점에서 AJAX를 사용하면 다음과 같은 이점이 있습니다.
- 서버 부하 및 대역폭 감소
- 구매 프로세스 가속화
- 고객 경험 향상
- 장바구니 포기 줄이기
- 전환율 증가
튜토리얼: WooCommerce AJAX 장바구니에 담기
WooCommerce 에서 AJAX 장바구니에 추가 기능을 적용하려면 두 가지 옵션이 있습니다.
- 플러그인으로
- 직접 코딩하기
각각의 방법을 살펴보자.
1) AJAX 플러그인으로 장바구니에 추가
코딩 경험이 없거나 쉬운 솔루션을 선호하는 경우 플러그인을 사용하는 것이 탁월한 선택입니다. AJAX 장바구니에 담기 WooCommerce 플러그인을 다운로드하고 설치하기만 하면 나머지는 소프트웨어에서 알아서 처리합니다.
Ajax WooCommerce 장바구니에 추가
WooCommerce용 AJAX 장바구니 추가 는 WooCommerce 장바구니 에 추가 버튼에 AJAX를 추가하는 최고의 플러그인 중 하나입니다. 이 도구를 사용하면 쇼핑객이 매번 사이트를 다시 로드할 필요 없이 장바구니에 단일 또는 다양한 제품을 포함할 수 있습니다. 더 좋은 점은 WordPress 테마의 99%에서 원활하게 실행되고 초기 설정이 필요하지 않다는 것입니다. 설치하면 바로 사용할 수 있습니다.
2) 직접 코딩
코딩 기술이 있고 WooCommerce AJAX 장바구니에 추가 버튼을 사용자 정의하는 것을 선호합니까? 이 가이드에서는 단계별로 수행하는 방법을 보여줍니다.
가) 하위 테마 설치
가장 먼저 해야 할 일은 자식 테마 를 만드는 것입니다. 플러그인이 없으면 플러그인을 사용할 수 있습니다. 여러 가지가 있으므로 가장 좋아하는 것을 선택하여 상점에 설치하십시오. 왜 자식 테마를 설치해야 합니까? 테마 파일을 직접 사용자 지정하면 다음에 테마를 업데이트할 때 새 파일이 변경 사항을 대체하고 모든 사용자 지정 사항이 손실되기 때문입니다. 그러나 자식 테마를 사용자 지정하면 수정 사항이 무시되지 않습니다.
나) 자바스크립트(JS) 파일 포함
하위 테마의 functions.php 파일에 wp_enqueue_script 후크를 이용하여 자바스크립트 파일을 포함합니다. 이것은 WordPress가 웹 사이트를 사용자 정의하기 위해 제공하는 가장 인기 있는 후크 중 하나입니다. 아래 ajax_add_to_cart.js 파일이 포함된 스크립트를 살펴보겠습니다.
기능 ql_woocommerce_ajax_add_to_cart_js() {
if (function_exists('is_product') && is_product()) {
wp_enqueue_script('custom_script', get_bloginfo('stylesheet_directory') . '/js/ajax_add_to_cart.js', array('jquery'),'1.0' );
}
}
add_action('wp_enqueue_scripts', 'ql_woocommerce_ajax_add_to_cart_js');2행의 조건부 if (function_exists('is_product') && is_product()) 를 사용하여 JQuery가 제품 페이지에만 적용되는지 확인합니다.
다) JS 파일 생성
완료되면 이전 단계에서 포함된 파일을 만듭니다. cPanel 로 이동한 다음 하위 테마 폴더 로 이동합니다. 그런 다음 wp_content /themes/ folder 경로를 따르세요. 거기에서 js 라는 하위 테마에 새 폴더를 만든 다음 그 안에 ajax-add-to-cart.js 후크에서 사용한 것과 같은 이름의 파일을 만듭니다. 이 단계는 FTP 클라이언트를 사용하는 경우에도 작동합니다. 자식 테마에 이미 JS 폴더가 있는 경우 새로 만들지 않고도 사용할 수 있습니다.
D) JQuery/JS 파일
다음 단계는 하위 테마에 업로드한 JQuery 파일에서 작업하는 것입니다. 해당 파일이 비어 있으므로 스크립트를 추가해야 합니다. 먼저 다음 스크립트를 사용 하여 장바구니에 추가 버튼이 페이지를 다시 로드하지 못하도록 합니다.
$('.single_add_to_cart_button').on('클릭', function(e) {
e.preventDefault();
});버튼을 클릭할 때 AJAX 호출을 트리거하기 위해 $('.single_add_to_cart_button') 선택기를 사용합니다. 다음 스크립트는 모두 이 함수 안에 들어갈 것이기 때문에 이것을 이해해야 합니다.
E) JQuery WooCommerce AJAX 단일 제품 장바구니에 추가
따라서 단일 제품의 장바구니에 추가하는 AJAX용 전체 JQuery 스크립트는 다음과 같습니다.
jQuery(문서).ready(함수($) {
$('.single_add_to_cart_button').on('클릭', 기능(e){
e.preventDefault();
$이 버튼 = $(이),
$form = $thisbutton.closest('form.cart'),
아이디 = $thisbutton.val(),
product_qty = $form.find('입력[이름=수량]').val() || 1,
product_id = $form.find('input[이름=product_id]').val() || ID,
변형 ID = $form.find('입력[이름=변이 ID]').val() || 0;
변수 데이터 = {
액션: 'ql_woocommerce_ajax_add_to_cart',
product_id: product_id,
product_sku: '',
수량: product_qty,
변형 ID: 변형 ID,
};
$.ajax({
유형: '게시물',
URL: wc_add_to_cart_params.ajax_url,
데이터: 데이터,
beforeSend: 함수(응답) {
$thisbutton.removeClass('추가됨').addClass('로드 중');
},
완료: 기능(응답) {
$thisbutton.addClass('추가됨').removeClass('로드 중');
},
성공: 함수(응답) {
if (response.error & response.product_url) {
window.location = 응답.product_url;
반품;
} 또 다른 {
$(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
}
},
});
});
});F) PHP 스크립트
그런 다음 PHP 핸들러가 필요합니다. 가장 좋은 방법은 일부 WooCommerce 필터 후크를 사용하여 장바구니에 추가 기능을 구축하는 것입니다. 이번에는 AJAX를 사용하여 수행합니다. JS 파일을 포함하는 데 사용한 이전 스크립트 아래에 하위 테마의 functions.php 파일에 다음 스크립트를 복사하여 붙여넣기만 하면 됩니다.
add_action('wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');
add_action('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');
기능 ql_woocommerce_ajax_add_to_cart() {
$product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
$quantity = 비어 있음($_POST['quantity']) ? 1 : wc_stock_amount($_POST['수량']);
$variation_id = absint($_POST['variation_id']);
$passed_validation = apply_filters('ql_woocommerce_add_to_cart_validation', true, $product_id, $quantity);
$product_status = get_post_status($product_id);
if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && '게시' === $product_status) {
do_action('ql_woocommerce_ajax_added_to_cart', $product_id);
if ('예' === get_option('ql_woocommerce_cart_redirect_after_add')) {
wc_add_to_cart_message(array($product_id => $quantity), true);
}
WC_AJAX :: get_refreshed_fragments();
} 또 다른 {
$data = 배열(
'오류' => 참,
'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
에코 wp_send_json($data);
}
wp_die();
}그게 다야! WooCommerce AJAX 장바구니에 추가 버튼 을 만들었습니다! 그러나 모든 것을 올바르게 수행했는지 어떻게 알 수 있습니까? 쉽게 확인하실 수 있습니다. 장바구니에 담기 버튼을 클릭하면 페이지를 새로고침하지 않고 제품을 장바구니에 담을 수 있습니다.
결론
전반적으로 상점을 최적화하려면 WooCommerce AJAX 장바구니에 추가 기능이 필수입니다. 적용하는 쉬운 방법은 AJAX 장바구니에 추가 WooCommerce 플러그인을 사용하는 것입니다. 그러나 코딩 기술이 있는 경우 위에서 설명한 대로 자식 테마와 약간의 PHP를 사용하여 AJAX를 코딩 하여 장바구니에 추가 할 수 있습니다.
두 옵션 모두 우수하므로 필요와 기술에 더 적합한 옵션을 선택하십시오. 이는 사용자 경험을 개선하고 전환율을 높이는 데 도움이 됩니다. 아래 의견 섹션에 귀하의 생각을 알려주십시오.
마지막으로 WooCommerce에 대한 추가 가이드를 보려면 WooCommerce 제품을 추가하는 방법과 WooCommerce에서 기본 제품 속성을 만드는 방법에 대한 가이드를 확인하는 것이 좋습니다.