وردپرس ووکامرس

آپدیت سبد خرید ووکامرس بعد از تغییر تعداد محصول

0
Please log in or register to do it.

سلام امروز داشتم روی ی پروژه وردپرسی کار میکردم که سیستم فروشگاهی خودش رو با استفاده از ووکامرس پیاده سازی کرده بود و مشتری میخواست که توی سبد خرید با تغییر تعداد محصول، سبد خرید مجدد بروز بشه قیمتش مثل تصویر زیر

آپدیت سبد خرید ووکامرس بعد از تغییر تعداد محصول

بررسی مشکل

خب چیزی که مشتری میخواد چیز پیچیده ای نیست. میخواد که وقتی ی input عددی مقدارش تغییر کرد، سبد خرید بروز بشه. پس ما باید یکسری کد رو داخل رویداد change اون input عددی بنویسیم.

پیشفرض خود ووکامرس چیه؟

خب باید ی بررسی هم بکنیم ببینیم خود ووکامرس چه قابلیتی رو برای ما گذاشته

ووکامرس برای اینکه کاربرا نخوان برای مشاهده سبد خرید بعد از هربار تغییر صفحه رو رفرش کنن، اومده و ی دکمه گذاشته برای بروزرسانی سبد خرید، که شما بعد از هربار کلیک روی اون، تغییراتی که توی سبد خریدتون اعمال کردین رو به وسیله js و یک درخواست ajax به php میفرستین و اونجا پردازش های لازم انجام میشه و نتیجه سبد خرید مجدد دریافت میشه و تغییرات توی صفحه مشاهده میشه. بدونه اینکه صفحه رفرش (دوباره لود) بشه.

نتیجه بررسی ها

خب پس ما اول فهمیدیم باید بیایم و توی رویداد change اون input ی کدی رو بنویسیم و بعدش هم فهمیدیم که خود ووکامرس میاد و ی دکمه واس بروزرسانی واسمون میذاره. خب اگه ما بیایم و توی اون رویداد change کدی بنویسیم که بیاد و عملیات کلیک روی اون دکمه بروزرسانی رو انجام بده همچی تمومه. ایول پس بریم تو کارش❤️

مراحل انجام کار و حل مشکل

حذف دکمه بروزرسانی ووکامرس

خب توی حرکت اول ما باید بیایم و اون دکمه رو از چشم کاربر مخفی کنیم. اول باید پیداش کنیم.

من گشتم و متوجه شدم که با ووکامرس ی تگ button و یک تگ input قراره میده و name جفتشون رو قرار میده update_cart حالا اگه شما کمی دانش css داشته باشید میتونید اون هارو مخفی کنید. چطوری؟

.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
	display: none;
}

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

add_action( 'wp_head', function() {

	?><style>
	.woocommerce button[name="update_cart"],
	.woocommerce input[name="update_cart"] {
		display: none;
	}</style><?php
	
} );

این کد میاد به انتهای تگ head استایل هایی که بالاتر گفتم رو اضافه میکنه.

شبیه سازی حالت کلیک روی دکمه بروزرسانی

تا اینجا کار موفق شدیم که دکمه بروزرسانی و مخفی کنیم حالا باید توی رویداد change اون input بیایم عملیات کلیک رو شبیه سازی کنیم. این کار رو با استفاده از جی کوئری انجام میدیم. چیزی که من گشتم و پیدا کردم این بود که کلاس اون المان input مقدارش qty و با استفاده از این مقدار میتونیم بهش دسترسی پیدا کنیم و کار های لازم رو انجام بدیم.

jQuery( function( $ ) {
	$('.woocommerce').on('change', 'input.qty', function(){
		$("[name='update_cart']").trigger("click");
	});
} );

خب توی کد بالا ما با استفاده از همون کلاسی که گفتم اون مقدار تعداد رو بهش دسترسی پیدا کردیم و با استفاده از همون مقدار name=’update_cart’ عملیات کلیک رو شبیه سازی کردیم. اگر مثل css بلد نیستین که این کد رو به کدوم فایل js اضافه کنید، میتونید فایل function.php قالبتون رو باز کنید و کد زیر رو به اخر اون اضافه کنید.

add_action( 'wp_footer', function() {
	
	?><script>
	jQuery( function( $ ) {
	    $('.woocommerce').on('change', 'input.qty', function(){
		$("[name='update_cart']").trigger("click");
	    });
	} );
	</script><?php
	
} );

یکم کدو بهینه ترش کنیم

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

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

	jQuery( function( $ ) {
		let timeout;
		$('.woocommerce').on('change', 'input.qty', function(){
			if ( timeout !== undefined ) {
				clearTimeout( timeout );
			}
			timeout = setTimeout(function() {
				$("[name='update_cart']").trigger("click"); // trigger cart update
			}, ۱۰۰۰ ); // ۱ second delay, half a second (500) seems comfortable too
		});
	} );

اینطوری?با ی تایمر ساده این کار رو انجام میدیم.

خب دیگه کار تمومه و کد ما آمادس. کد کامل رو براتون میذارم که اون رو راحت تر استفاده کنید. کافیه کد زیر رو در فایل function.php قرار بدین? امیدوارم که این کد هم براتون مفید بوده باشه❤️

<?php
/**
 * Update Cart Automatically on Quantity Change
 *
 * @author Omid Moghadasi
 * @url https://mrjunior.com/update-cart-automatically-on-quantity-change
 */
add_action( 'wp_head', function() {

	?><style>
	.woocommerce button[name="update_cart"],
	.woocommerce input[name="update_cart"] {
		display: none;
	}</style><?php
	
} );

add_action( 'wp_footer', function() {
	
	?><script>
	jQuery( function( $ ) {
		let timeout;
		$('.woocommerce').on('change', 'input.qty', function(){
			if ( timeout !== undefined ) {
				clearTimeout( timeout );
			}
			timeout = setTimeout(function() {
				$("[name='update_cart']").trigger("click"); // trigger cart update
			}, ۱۰۰۰ ); // ۱ second delay, half a second (500) seems comfortable too
		});
	} );
	</script><?php
	
} );

منبع: rudrastyh

ساخت ویجت سفارشی برای المنتور
نتایج نظرسنجی از دولوپرهای stackoverflow 2022 منتشر شد

Reactions

فعلا کسی لایک نکرده

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *