افزودن به سبد خرید ایجکس در ووکامرس Ajax Add To Cart

یکی از امکاناتی که در طراحی قالب ووکامرس میتوان ایجاد کرد، قابلیت افزودن به سبد خرید ایجکس در ووکامرس می باشد. در این مطلب از ایران تمز قصد آموزش ایجاد این قابلیت در پوسته woocommerce را داریم پس تا انتها همراه ما باشید.

کد افزودن به سبد خرید ایجکس برای محصولات ووکامرس

برای این منظور ابتدا باید کدهای زیر را در انتهای فایل فانکشن functions.php قالب وردپرس کپی کنید.

<?php
add_filter('woocommerce_add_to_cart_fragments','woocommerce_header_add_to_cart_fragment');
function woocommerce_header_add_to_cart_fragment($fragments){ ob_start(); ?>
<span class="number"><?php echo sprintf (_n( '%d', '%d', WC()->cart->get_cart_contents_count()), WC()->cart->get_cart_contents_count()); ?></span>
<?php $fragments['.number'] = ob_get_clean(); return $fragments;}
add_filter('woocommerce_product_single_add_to_cart_text','woo_custom_cart_button_text');
function woo_custom_cart_button_text(){return __('افزودن به سبد','woocommerce');}

سپس قطعه کد زیر را در کوئری مربوط به نمایش مطالب ووکامرس که به صورت اختصاصی در پوسته استفاده کرده اید، قرار دهید. این قطعه کد در کوئری خود ووکامرس در فایل content-product.php قرار دارد.

اگر از فایلهای استاندارد خود ووکامرس استفاده میکنید نیازی به قرار دادن کد زیر در کوئری ووکامرس نمیباشد.

<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

پس از قرار دادن کد در کوئری محصولات ووکامرس، لینکی شبیه تصویر زیر در محصولات نمایش داده خواهد شد که با کلیک بر روی آن فرآیند افزودن محصول به سبد خرید به شکل کاملا ajax ایجکس انجام و بعد از افزودن محصول به سبد خرید، لینک نمایش سبد خرید نمایش داده می شود.

کد نمایش جزئیات سبد خرید ووکامرس

معمولا در هدر و یا ستون کناری قالبهای ووکامرس بخشی را برای نمایش جزئیات سبد خرید قرار میدهند تا بازدیدکنندگان بتوانند تعداد و قیمت محصولاتی که سفارش داده اند را مشاهده کنند. معمولا با کلیک بر روی این بخش به سبد خرید هدایت میشویم تا مراحل خرید را نهایی کنیم. برای اینمنظور میتوانید از ابزارک سبد خرید ووکامرس هم استفاده کنید. در صورتیکه امکان استفاده از ابزارک (ویجت) نبود میتوانید کد زیر را در محل مورد نظر قرار دهید.

<?php global $woocommerce; ?><a href="<?php echo $woocommerce->cart->get_cart_url(); ?>"><span class="number"></span></a>