آموزش اضافه کردن دکمه افزودن به سبد خرید در ووکامرس
فهرست موضوعات در این آموزش
بنام و یاد خدا سلام خدمت تمام دوستان و همراهان همیشگی وبسایت پاسخ وردپرس در خدمت شما هستم یا یکی دیگه از جلسات آموزش توابع ووگامرس در این جلسه می خواهیم آموزش اضافه کردن دکمه افزودن به سبد خرید در ووکامرس
خدمت شما به صورت آموزش بدیم پس تا آخر این آموزش همراه من باشید .
یکی از مواردی که همیشه در موقع کار با وردپرس و فروشگاه ساز ووکامرس ذهن ما را درگیر می کرد این بود که چرا ووکامرس قابلیت ایجکس را به صفحات دسته بندی محصولات خودش داده است ولی این کار را برای صفحات داخلی خود محصول انجام نداده که همین موضوع شاید باعث کاهش نرخ رشد باشد .
اکثر مواقع دکمه ” اضافه به سبد خرید ” به صورت ایجکسی باشد به نظر ما اجرای بهتری دارد چرا که بدون نیاز به بارگزاری مجدد صفحه محصول شما به سبد خرید اضافه می شود .
دکمه افزودن به سبد خرید در ووکامرس
اگر شما صاحب یک سایت فروشگاهی هستید حتما برای شما این مشکل پیش آمده است که بخواهید در صفحه‌ی محصول خود دکمه افزودن به سبد خرید را اضافه کنید
ما در این آموزش قصد داریم تا کد دکمه افزودن به سبد خرید را آموزش دهیم .
قبل از شروع اگر قصد طراحی قالب وردپرس دارید میتوانید دوره طراحی قالب وردپرس را که به صورت حرفه ای آموزش داده شده است تهیه فرمایید.
ایجکس ( AJAX ) چیست ؟
Ajax ( ایجکس ) مخفف عبارت Asynchronous JavaScript and XML می باشد و فرایند ترکیب جاوا اسکریپت و xml به صورت غیرهمزمان و ناهمگام است .
اما ایجکس دقیقا به چه کاری می آید ؟ اگر به طرز کار صفحات وب توجه کرده باشید برای نمایش هر مطلب یا صفحه ای جدید وب سایت بارگزاری مجدد یا همان Refresh می شود .
تکنولوژی ایجکس به شما کمک می کند که کل صفحه یا بخشی از اطلاعات یک صفحه بدون نیاز به بارگزاری مجدد ، داده هایی را به سرور ارسال کند و آن را پردازش و در نهایت در خروجی به شما نمایش دهد .
نمونه هایی همچون ” پیشنهاد های گوگل در جستجو ” ، ” امتیاز ستاره ای ” ، ” اضافه به سبد خرید ” و خیلی از این موارد را می توان مثال زد .
کد افزودن به سبد خرید ایجکس برای محصولات ووکامرس
سپس قطعه کد زیر را در هر جای که میخواهید دگمه افزودن به سبد خرید نمایش داده بشه قرار بدید . مربوط به نمایش مطالب ووکامرس که به صورت اختصاصی در پوسته استفاده کرده اید، قرار دهید.
این قطعه کد در کوئری خود ووکامرس در فایل content-product.php قرار دارد.
اگر از فایلهای استاندارد خود ووکامرس استفاده میکنید نیازی به قرار دادن کد زیر در کوئری ووکامرس نمیباشد.
|
1 |
<?php do_action('woocommerce_after_shop_loop_item');?> |
دقت داشته باشید در صورت که استایلی مناسب نداشته باشه حتما داخل body قالب خود (woocommerce) کلاس woocommerce را اضافه نمایید .
پس از قرار دادن کد در کوئری محصولات ووکامرس، دگمه افزودن به سبد خرید در محصولات نمایش داده خواهد شد که با کلیک بر روی آن فرآیند افزودن محصول به سبد خرید به شکل کاملا ajax ایجکس انجام و بعد از افزودن محصول به سبد خرید، لینک نمایش سبد خرید نمایش داده می شود.
نمایش جزئیات سبد خرید ووکامرس
یکی از ابزارهای لازم و ضروری در هر فروشگاه نمایش سبد خرید و تعداد اقلام موجود در سبد خرید هستش. اینکه من وقتی روی “افزودن به سبد خرید” کلیک می کنم همون لحضه سبد خریدم آپدیت بشه و تعداد نهایی رو نشون بده. در حالت پیش فرض بعد اضافه کردن محصول این اتفاق می افته چون صفحه رفرش میشه و سبد خرید مقدار جدید رو می گیره. اما مسئله زمانی هستش که “افزودن به سبد خرید” به صورت ajax اتفاق می افته و عملا لود دوباره صفحه نداریم و یا زمانی که توی صفحه سبد خرید به محصول حذف می کنیم و ولی عدد تغیری نمیکنه اینم باز به دلیل ای جکسی بودن هستش. حل این مسئاله بسیار راحته دو تا کد براتون آماده کردم که می تونید ازش استفاده کنید.کد اول:
|
1 2 3 4 5 6 7 8 |
<div class="widget"> <h5 class="widget-title">تعداد محصولات </h5> <div class="text-widget"> <p> <a href="<?php echo wc_get_cart_url()?>"><span class="replyWp_count"></span></a> </p> </div> </div> |
این کد رو می تونید توی هدر یا هر جایی که برای نمایش سبد خرید در نظر گرفتید قرار بدید. خوب ما لینکش رو هم براش قرار دادیم تا وقتی کاربر کلیک کرد لیست کامل رو بهش نشون بده و یا حتی براش یه آیکن هم در نظر بگیرید.
کد نمایش جزئیات سبد خرید ووکامرس
برای این منظور ابتدا باید کدهای زیر را در انتهای فایل فانکشن functions.php قالب وردپرس کپی کنید.
قبل از هر اقدامی از Functions.php یک کپی تهیه کنید تا در صورت بروز هر مشکل بتوانید آن را بازیابی کنید.
|
1 2 3 4 5 6 7 8 9 |
add_filter('woocommerce_add_to_cart_fragments','wc_count_add_to_cart_fragment'); function wc_count_add_to_cart_fragment($fragment){ ob_start(); ?> <span class="replyWp_count"><?php echo sprintf(_n('%d','%d',WC()->cart->get_cart_contents_count()),WC()->cart->get_cart_contents_count());?></span> <?php $fragment['.replyWp_count'] = ob_get_clean(); return $fragment; } |
ولی یادتون باشه که “class=”replyWp_count بسیار بسیار ضروریه اگر این کلاس رو تغییر بدید دیگه کار نمیکنه. اگر هم می خواین تغییر بدین باید توی هر دوتا کد تغییر بدین.
اگر سوالی داشتین کامنت بگذارید اولین زمان ممکن پاسخ خواهم داد.
امیدوارم که این آموزش هم مورد توجه و پسند شما قرار گرفته باشه و با استفاده از اون تونسته باشید تا نسبت اضافه کردن دکمه افزودن به سبد خرید در ووکامرس اقدام کرده و با استفاده از این روش فروش خوبی را برای خودتون فراهم کرده و مشتریان زیادی را به خودتون جذب کنید.
در صورتی که در رابطه با این آموزش اضافه کردن دکمه افزودن به سبد خرید در ووکامرس سوال یا مشکلی داشتید در بخش دیدگاه‌ها اعلام کنید تا در کوتاه‌ترین زمان ممکن پاسخگوی شما باشم.
سلام استاد
امیدوارم که سلامت باشید
ببخشید استاد برای ساخت یک دکمه چسبان برای هر صفحه یعنی هر پستی که ایجاد می‌کنم می‌خوام مثل ووکامرس هس که یه دکمه داره وقتی می‌ریم به سمت پایین و دکمه خرید ووکامرس چسبیده به پایین صفحه منظورم یه همچین دکمه‌ای برای ایجاد در هر صفحه چه افزونه‌ای رو باید استفاده کرد؟
من توی یک صفحه چند محصول رو معرفی می‌کنم مثلاً ۵ تا کرم پودر رو معرفی می‌کنم و می‌خوام یک دکمه داشته باشم که چسبید به صفحه باشه و توی اون دکمه لینک صفحه مثلاً پرفروشترین محصولات کرم پودر رو قرار بدم که بعدش کاربر بر که اون محصولات رو ببینه چه افزونه‌ای برای ساخت یه همچین دکمه‌ای وجود داره الان من تو اینترنت گشتم و یک دکمه پیدا کردم که کارش کلیه و نمی‌شه واسه هر صفحه جدا دکمه شناور قرار داد.
این هم اسم افزونه floatton
اگه راهنمایی بکنید ممنون میشم با تشکر
سلام خدمت شما دوست گرامی برای این کار بنده افزونه ای نمیشناسم اما میتوانید توسط متاباکس ها به راحتی پیاده سازی کنید طبق گفته شما داخل هر محصول میخواهید متفاوت باشه درسته
برای همین به تعداد نیاز میتوانید فیلد متاباکس پیاده سازی کنید و هر محصول را به صورت جدا شخصی سازی فرمایید امید وارم که تونسته باشم راهنمایی کنم
آروز دارم در زندگی موفق و سر بلند باشید در تمام جنبه های زندگی