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

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

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

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

برای این منظور ابتدا باید کدهای زیر را در انتهای فایل فانکشن 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>
درباره نویسنده
رضا کیانوش

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

بازدیدکنندگان قبلی مشاهده مطالب زیر را به شما پیشنهاد کرده اند

دیدگاهی بنویسید.

بهتر است دیدگاه شما در ارتباط با همین مطلب باشد.

  1. حمید
    ۲۹ مهر ۱۳۹۷ ساعت ۲۳:۴۴

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

    • رضا کیانوش
      ۳۰ مهر ۱۳۹۷ ساعت ۰۶:۵۰

      سلام قوت بخیر، به احتمال خیلی زیاد در طراحی قالب ووکامرس تون چنین امکانی برای محصول قرار داده نشده.

  2. علی
    ۳۰ مرداد ۱۳۹۷ ساعت ۱۱:۱۹

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

    • رضا کیانوش
      ۳۱ مرداد ۱۳۹۷ ساعت ۱۳:۴۷

      سلام وقت بخیر، برای اینکار باید تابع مبوط به فراخوانی فرم خرید ووکامرس یا edd رو در ستون کناری صفحه توضیحات محصول بزارید. موفق باشید

      • علی
        ۲۸ شهریور ۱۳۹۷ ساعت ۰۸:۵۴

        خوب چطور این کار رو انجام بدم؟ کد ها رو از کجا پیدا کنم؟

        • رضا کیانوش
          ۲۸ شهریور ۱۳۹۷ ساعت ۱۷:۵۰

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