반응형
WooCommerce - Ajax 장바구니에 추가 및 업데이트 합계
홈페이지에서 카트에 제품을 추가할 수 있는 웹사이트를 만들고 있습니다.Ajax를 통해 카트에 제품을 추가할 수 있는 웹 사이트의 몇 가지 리소스와 기타 SO 질문을 온라인으로 확인했지만 페이지를 새로고침하지 않으면 카트 합계가 업데이트되지 않습니다.
WooCommerce의 문서에서는cpp_header_add_to_cart_fragment이 기능은 원래부터 나왔는데 전혀 작동하지 않는 것 같아요.원래 사용하고 있었는데add_to_cart_fragments하지만 나는 그것이 더 이상 사용되지 않는다는 것을 알게 되었고woocommerce_add_to_cart_fragments하지만 그 변화도 도움이 되지 않아요.
코드를 읽으면 읽을수록...fragment가 ajax 콜에서 반환되고 있는 것을 알 수 있기 때문에 카트 합계를 나타내는html을 javascript에서 반환된 것으로 대체해야 한다고 생각합니다.
page_home을 클릭합니다.php
<!-- Cart link to be updated when products are added -->
<a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>">
<?php echo WC()->cart->get_cart_total(); ?>
</a>
기능들.php
add_action('wp_enqueue_scripts', 'cpp_enqueue_scripts');
function cpp_enqueue_scripts() {
/* Other enqueue/registers */
wp_register_script('diy_kits', get_template_directory_uri().'/js/diy_kit.js');
wp_enqueue_script('diy_kits');
wp_localize_script(
'diy_kits',
'cpp_ajax',
array(
'ajaxurl' => admin_url('admin-ajax.php'),
'diy_product_nonce' => wp_create_nonce('diy_product_nonce')
)
);
}
add_action('wp_ajax_nopriv_cpp_ajax-submit', 'cpp_ajax_submit');
add_action('wp_ajax_cpp_ajax-submit', 'cpp_ajax_submit');
function cpp_ajax_submit() {
global $woocommerce;
$nonce = $_POST['nonce'];
if(!wp_verify_nonce($nonce, 'diy_product_nonce')) {
wp_die('Busted!');
}
// Add product to cart... this works
$product_id = $_POST['product_id'];
if( $woocommerce->cart->add_to_cart( $product_id ) ) {
$data = apply_filters('woocommerce_add_to_cart_fragments', array());
do_action('woocommerce_ajax_added_to_cart', $product_id);
} else {
$data = array( 'success' => false, 'product_id' => $product_id );
}
$response = json_encode($data);
header("Content-Type: application/json");
echo $response;
exit;
}
cpp_caps_add_to_caps_caps
// CART UPDATE AJAX this doesn't work
add_filter('woocommerce_add_to_cart_fragments', 'cpp_header_add_to_cart_fragment');
function cpp_header_add_to_cart_fragment( $fragments ) {
global $woocommerce;
ob_start(); ?>
<a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>">
<?php echo WC()->cart->get_cart_total(); ?>
</a>
<?php
$fragments['a.cart-contents'] = ob_get_clean();
return $fragments;
}
diy_parames.diy
// setup and other stuff...
links.click(function(e) {
/* unrelated stuff */
jQuery.post(
cpp_ajax.ajaxurl,
{
action : 'cpp_ajax-submit',
nonce : cpp_ajax.diy_product_nonce,
product_id : jQuery(this).attr('data-product-id')
},
function(response) {
console.log(response);
}
);
});
만약 누군가 이걸 보게 된다면... woocommerce_add_to_cart_fragments$fragments 배열에서 새로운 html 문자열을 반환하고 json 객체로 변환된jax 함수에서 호출한 이후.그래서 제 안에diy_kit.jsjquery 함수의 성공 부분에서는 카트 합계를 업데이트하기 위해 그 문자열을 사용해야만 했습니다.아래 편집 내용을 붙여넣습니다.
page_home을 클릭합니다.php
<div id="cart_container">
<a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>">
<?php echo WC()->cart->get_cart_total(); ?>
</a>
</div>
diy_kit.syslog
/*inside jQuery.post() function */
function(response) {
jQuery('#cart_container').html(response['a.cart-contents']);
}
add_filter( 'woocommerce_add_to_cart_fragments', function($fragments) {
ob_start();
?>
<li class="my_cart"><a href="javascript:void(0)" id="sidebarCollapse" class="carticonmain"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="shopping-cart" viewBox="0 0 700 700"><title>shopping-cart</title>
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"></path>
<path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"></path>
<path d="m360.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"></path>
</symbol>
</svg><svg class="icon" viewBox="0 0 40 40"><use xlink:href="#shopping-cart" x="12%" y="16%"></use></svg><i class="item_number">
<?php echo WC()->cart->get_cart_contents_count(); ?>
</i></a></li>
<?php $fragments['li.my_cart'] = ob_get_clean();
return $fragments;
} );
add_filter( 'woocommerce_add_to_cart_fragments', function($fragments) {
ob_start();
?>
<?php woocommerce_mini_cart(); ?>
<?php $fragments['div.minicart_all_data'] = ob_get_clean();
return $fragments;
} );
언급URL : https://stackoverflow.com/questions/30873147/woocommerce-ajax-add-to-cart-and-update-total
반응형
'programing' 카테고리의 다른 글
| Woocommerce 3의 주문 항목 보호 데이터 액세스 (0) | 2023.02.21 |
|---|---|
| Ajax(fetch, XHR 등) 요청에 대한 응답으로 리다이렉트 반환 (0) | 2023.02.21 |
| 봄에는 왜 정전기장을 자동 배선할 수 없는 거죠? (0) | 2023.02.21 |
| 레디스를 사용한 MongoDB (0) | 2023.02.21 |
| 네이티브 변경 리스닝 포트 대응 (0) | 2023.02.21 |