افزودن به سبدخرید ایجکسی به ووکامرس

وقتی دارین قالب مینویسید با وردپرس یک سری چیزها برای امکانات یک سایت فروشگاهی الزامی هست. درواقع اگر باشه تعامل توی سایت بیشتر ایجاد میشه. مثلا اگر سبدخرید شما فقط یک دکمه باشه که توی هدر میزارین و وقتی کلیک شد بره توی صفحه سبدخرید یک مدل لینک هست. اینجا نیاز به این هست که از سبدخرید ایجکسی استفاده بشه.

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

حالا اگر این قابلیت رو بخواهیم به سایت اضافه کنیم چطوری میشه انجام داد؟

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

افزودن به سبدخرید ajax  با افزونه

داخل مخزن وردپرس افزونه هایی از قبل طراحی و کدنویسی شده که میتونید به سایت خود اضافه کنید. کافیست به منوی افزونه ها / افزودن وارد شوید. و کلمه ajax add to cart سرچ بزنید و افزونه ها را تست کنید و اگر با قالب شما بدون مشکل کار میکند استفاده کنید.

برای لینک افزونه ajax add to cart در مخزن وردپرس کلیک کنید.

افزودن به سبدخرید ajax  بدون افزونه

قدم اول :

برای اینکه بدون افزونه از این قابلیت استفاده کنید اول در فایل header.php باید یک آیکون و یک عدد در هدر بزارین مثل کد زیر :

<?php $items_count = WC()->cart->get_cart_contents_count();?>

<li class=”top-cart”>
<a href=”javascript:void(0)”><i class=”flaticon-bag”></i>
<span class=”mini-cart-count”>
<?php echo $items_count ? $items_count : ‘0’; ?>
</span>
</a>
<div class=”cart-drop shop-cart-mini”>
<div class=”shop-cart-mini-inner”>
<?php woocommerce_mini_cart(); ?>
</div>
</div>
</li>

توضیح کد بالا :

خط اول تمام سبدخرید لود میشه اینکه چه تعدادی داخل سبد ذخیره شده. اما الان عدد ثابته این عدد بعد از دکمه افزودن به سبدخرید کد زیر را فراخوانی میکنه (عدد قبلی پاک میشه و عدد جدید جایگزین میشه.)

تابع woocommerce_mini_cart هم یک تابع ووکامرس هست برای فراخوانی سبدخرید مینی ووکامرس که اطلاعاتی از تعداد محصول و نام و … را نمایش میدهد.

قدم دوم :

پاینکه کد زیر را در function.php اضافه کنید :

//ajax add to cart
add_filter(‘woocommerce_add_to_cart_fragments’, ‘wc_refresh_mini_cart_count’);
function wc_refresh_mini_cart_count($fragments){
ob_start();
$items_count = WC()->cart->get_cart_contents_count();
?>
<span class=”mini-cart-count”>
<?php echo $items_count ? $items_count : ‘0’ ; ?>
</span>
<?php
$fragments[‘.mini-cart-count’] = ob_get_clean();
ob_start();
?>
<div class=”shop-cart-mini-inner”>
<?php woocommerce_mini_cart(); ?>
</div>
<?php
$fragments[‘.shop-cart-mini-inner’] = ob_get_clean();

return $fragments;
}

قدم سوم :

یک کد js هست که داخل فایل جاوااسکریپت قالب بزارین.

(function($) {

$(document).on(‘added_to_cart’, function(event, fragments, cart_hash, $button) {
// به روزرسانی محتوای سبد خرید در هدر با Ajax
$.ajax({
url: wc_add_to_cart_params.ajax_url,
type: ‘POST’,
data: {
action: ‘woocommerce_get_refreshed_fragments’
},
success: function(response) {
if (response && response.fragments) {
$.each(response.fragments, function(key, value) {
$(key).replaceWith(value);
});
}
}
});
});
})(jQuery);

خلاصه کلام :

ما با افزونه معروف که از مخزن وردپرس هست، افزودن سبدخرید ایجکسی رو آموزش دادیم. هم اینکه بدون نیاز به افزونه هم به همراه کد گذاشتیم. مخصوصا زمانیکه یک قالب اختصاصی طراحی میکنید برای مشتری یا حتی سایت های ژآکت و راست چین این موضوع خیلی به فروش و جلب مشتری کمک میکنه.

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