...
ورود | ثبت نام

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

منبع مقاله: مشاهده مقاله اصلی

معرفی قابلیت

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

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

نحوه عملکرد

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

کاربر می‌تواند محصول پیشنهادی را مشاهده کرده، آن را به سبد خرید اضافه کند یا بدون انتخاب محصول جدید به روند خرید خود ادامه دهد.

نحوه اجرا

برای ایجاد این قابلیت بخش‌های زیر پیاده‌سازی می‌شوند:

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

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

نحوه استفاده

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

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

مزایا

  • افزایش فروش محصولات مکمل
  • افزایش میانگین مبلغ هر سفارش
  • نمایش پیشنهاد مناسب در زمان خرید
  • ایجاد تجربه خرید حرفه‌ای‌تر
  • کاهش وابستگی به افزونه‌های جانبی

این قابلیت یک روش کاربردی برای بهینه‌سازی فرآیند فروش در ووکامرس است و می‌تواند به افزایش تعامل کاربران و رشد فروش فروشگاه کمک کند.

/**  * WooCommerce Custom Upsell / Extras Popup  * Minimal & Animated Design  */  // ========================================================================= // 1. بخش تنظیمات (بدون نیاز به دانش برنامه‌نویسی ویرایش کنید) // ========================================================================= function wpx_get_extras_config() {     return array(         // گروه اول (مثلا بسته‌بندی - اجباری)         'packaging' => array(             'title'    => 'نوع بسته‌بندی (ضروری)',             'required' => true,             'type'     => 'radio', // radio = فقط یک انتخاب مجاز است             'choices'  => array(                 'pack_normal' => array('label' => 'معمولی', 'price' => 0),                 'pack_vip'    => array('label' => 'بسته‌بندی ویژه کادویی', 'price' => 25000), // قیمت به واحد پول سایت             )         ),         // گروه دوم (مثلا اقلام اضافه - اختیاری)         'addons' => array(             'title'    => 'اقلام همراه (اختیاری)',             'required' => false,             'type'     => 'checkbox', // checkbox = امکان انتخاب چند مورد             'choices'  => array(                 'extra_sauce'   => array('label' => 'سس اضافه', 'price' => 5000),                 'extra_cutlery' => array('label' => 'قاشق و چنگال اضافه', 'price' => 3000),                 'candle'        => array('label' => 'شمع تولد', 'price' => 15000),             )         )     ); }  // ========================================================================= // 2. جلوگیری از ادغام محصولات در سبد خرید (تا هر محصول اکستراهای خودش را داشته باشد) // ========================================================================= add_filter( 'woocommerce_add_cart_item_data', 'wpx_force_unique_cart_item', 10, 3 ); function wpx_force_unique_cart_item( $cart_item_data, $product_id, $variation_id ) {     $cart_item_data['wpx_unique_key'] = md5( microtime() . rand() );     return $cart_item_data; }  // ========================================================================= // 3. تشخیص افزودن به سبد خرید و فعال کردن پاپ‌آپ // ========================================================================= add_action('woocommerce_add_to_cart', 'wpx_set_popup_session', 10, 6); function wpx_set_popup_session($cart_item_key, $product_id, $quantity, $variation_id, $variation, $cart_item_data) {     if (isset($cart_item_data['wpx_extras'])) return;     WC()->session->set('wpx_show_popup_for', $cart_item_key); }  // ========================================================================= // 4. نمایش پاپ‌آپ در فوتر سایت (همراه با انیمیشن و استایل مینیمال) // ========================================================================= add_action('wp_footer', 'wpx_render_extras_popup'); function wpx_render_extras_popup() {     if (!WC()->session) return;     $cart_item_key = WC()->session->get('wpx_show_popup_for');          if ($cart_item_key && isset(WC()->cart->cart_contents[$cart_item_key])):          $config = wpx_get_extras_config();         ?>         <style>             #wpx-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; animation: wpxFadeIn 0.3s forwards; backdrop-filter: blur(4px); direction: rtl; font-family: inherit; }             #wpx-popup-box { background: #fff; width: 90%; max-width: 450px; border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transform: translateY(20px); animation: wpxSlideUp 0.4s forwards; }             .wpx-popup-title { font-size: 1.3rem; font-weight: bold; margin-top: 0; margin-bottom: 20px; text-align: center; color: #333; }             .wpx-group { margin-bottom: 20px; border-bottom: 1px dashed #eee; padding-bottom: 15px; }             .wpx-group:last-child { border-bottom: none; }             .wpx-group-title { font-size: 1rem; font-weight: 600; margin-bottom: 10px; color: #444; }             .wpx-choice { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: background 0.2s; }             .wpx-choice:hover { background: #f9f9f9; }             .wpx-choice input { margin-left: 10px; width: 18px; height: 18px; accent-color: #000; }             .wpx-price { color: #888; font-size: 0.9rem; }             .wpx-submit-btn { width: 100%; background: #000; color: #fff; border: none; padding: 14px; border-radius: 12px; font-size: 1.1rem; cursor: pointer; transition: opacity 0.2s; font-family: inherit; font-weight: bold; }             .wpx-submit-btn:hover { opacity: 0.8; }             .wpx-loading { opacity: 0.5; pointer-events: none; }             @keyframes wpxFadeIn { to { opacity: 1; } }             @keyframes wpxSlideUp { to { transform: translateY(0); } }         </style>          <div id="wpx-popup-overlay">             <div id="wpx-popup-box">                 <h3 class="wpx-popup-title">سفارشی‌سازی محصول</h3>                 <form id="wpx-extras-form">                     <input type="hidden" name="cart_item_key" value="<?php echo esc_attr($cart_item_key); ?>">                                          <?php foreach ($config as $group_key => $group): ?>                         <div class="wpx-group">                             <div class="wpx-group-title"><?php echo esc_html($group['title']); ?></div>                             <?php foreach ($group['choices'] as $choice_key => $choice): ?>                                 <label class="wpx-choice">                                     <div>                                         <input type="<?php echo esc_attr($group['type']); ?>"                                                 name="extras[<?php echo esc_attr($group_key); ?>]<?php echo $group['type'] === 'checkbox' ? '[]' : ''; ?>"                                                 value="<?php echo esc_attr($choice_key); ?>"                                                 <?php echo $group['required'] ? 'required' : ''; ?>>                                         <span><?php echo esc_html($choice['label']); ?></span>                                     </div>                                     <span class="wpx-price"><?php echo $choice['price'] > 0 ? '+ ' . wc_price($choice['price']) : 'رایگان'; ?></span>                                 </label>                             <?php endforeach; ?>                         </div>                     <?php endforeach; ?>                      <button type="submit" class="wpx-submit-btn">تایید و ادامه</button>                 </form>             </div>         </div>          <script>         document.getElementById('wpx-extras-form').addEventListener('submit', function(e) {             e.preventDefault();             var form = this;             var btn = form.querySelector('.wpx-submit-btn');             btn.innerHTML = 'در حال ثبت...';             btn.classList.add('wpx-loading');              var formData = new FormData(form);             formData.append('action', 'wpx_save_extras');              fetch('<?php echo admin_url('admin-ajax.php'); ?>', {                 method: 'POST',                 body: formData             }).then(response => response.json()).then(data => {                 if(data.success) {                     // بروزرسانی فرگمنت‌های سبد خرید و بستن پاپ‌آپ                     jQuery(document.body).trigger('wc_fragment_refresh');                     document.getElementById('wpx-popup-overlay').style.display = 'none';                 }             });         });         </script>         <?php         WC()->session->__unset('wpx_show_popup_for');     endif; }  // ========================================================================= // 5. ذخیره انتخاب‌های کاربر در سبد خرید از طریق AJAX // ========================================================================= add_action('wp_ajax_wpx_save_extras', 'wpx_save_extras_callback'); add_action('wp_ajax_nopriv_wpx_save_extras', 'wpx_save_extras_callback'); function wpx_save_extras_callback() {     $cart_item_key = sanitize_text_field($_POST['cart_item_key']);     $selected_groups = isset($_POST['extras']) ? $_POST['extras'] : array();          // تبدیل آرایه تو در تو به یک آرایه مسطح از کلیدهای انتخاب شده     $flat_selections = array();     foreach ($selected_groups as $group_selections) {         if (is_array($group_selections)) {             $flat_selections = array_merge($flat_selections, $group_selections);         } else {             $flat_selections[] = $group_selections;         }     }      if (isset(WC()->cart->cart_contents[$cart_item_key])) {         WC()->cart->cart_contents[$cart_item_key]['wpx_extras'] = array_map('sanitize_text_field', $flat_selections);         WC()->cart->set_session();         wp_send_json_success();     }     wp_send_json_error(); }  // ========================================================================= // 6. محاسبه و افزودن هزینه اقلام به قیمت اصلی محصول // ========================================================================= add_action('woocommerce_before_calculate_totals', 'wpx_calculate_extras_price', 10, 1); function wpx_calculate_extras_price($cart) {     if (is_admin() && !defined('DOING_AJAX')) return;      $config = wpx_get_extras_config();     $flat_prices = array();     foreach ($config as $group) {         foreach ($group['choices'] as $key => $data) {             $flat_prices[$key] = $data['price'];         }     }      foreach ($cart->get_cart() as $cart_item) {         if (isset($cart_item['wpx_extras'])) {             $extra_cost = 0;             foreach ($cart_item['wpx_extras'] as $extra_key) {                 if (isset($flat_prices[$extra_key])) {                     $extra_cost += $flat_prices[$extra_key];                 }             }             if ($extra_cost > 0) {                 $cart_item['data']->set_price($cart_item['data']->get_price() + $extra_cost);             }         }     } }  // ========================================================================= // 7. نمایش اقلام انتخاب شده در سبد خرید و صفحه تسویه حساب // ========================================================================= add_filter('woocommerce_get_item_data', 'wpx_display_extras_in_cart', 10, 2); function wpx_display_extras_in_cart($item_data, $cart_item) {     if (isset($cart_item['wpx_extras'])) {         $config = wpx_get_extras_config();         $flat_labels = array();         foreach ($config as $group) {             foreach ($group['choices'] as $key => $data) {                 $flat_labels[$key] = $data;             }         }          foreach ($cart_item['wpx_extras'] as $extra_key) {             if (isset($flat_labels[$extra_key])) {                 $price = $flat_labels[$extra_key]['price'];                 $display_val = $price > 0 ? ' (' . wc_price($price) . ')' : '';                 $item_data[] = array(                     'name'  => 'آیتم افزوده',                     'value' => $flat_labels[$extra_key]['label'] . $display_val                 );             }         }     }     return $item_data; }  // ========================================================================= // 8. ذخیره اقلام در جزئیات سفارش (برای نمایش در پنل ادمین و ایمیل فاکتور) // ========================================================================= add_action('woocommerce_checkout_create_order_line_item', 'wpx_add_extras_to_order_items', 10, 4); function wpx_add_extras_to_order_items($item, $cart_item_key, $values, $order) {     if (isset($values['wpx_extras'])) {         $config = wpx_get_extras_config();         $flat_labels = array();         foreach ($config as $group) {             foreach ($group['choices'] as $key => $data) {                 $flat_labels[$key] = $data;             }         }          foreach ($values['wpx_extras'] as $extra_key) {             if (isset($flat_labels[$extra_key])) {                 $price = $flat_labels[$extra_key]['price'];                 $display_val = $price > 0 ? ' (' . wc_price($price) . ')' : '';                 $item->add_meta_data('آیتم افزوده', $flat_labels[$extra_key]['label'] . $display_val, true);             }         }     } }
مشاهده بیشتر