to add dropdown and searchbar of product in wordpress woocommerce

PHOTO EMBED

Wed Feb 28 2024 07:16:18 GMT+0000 (Coordinated Universal Time)

Saved by @Alihaan #php 

// Function to create the custom product dropdown shortcode
function custom_product_dropdown_shortcode() {
  ob_start(); // Start output buffering

  // Get the referring URL and selected product name
  $referring_url = wp_get_referer();
  $selected_product_name = '';
  $selected_product_id = ''; // Initialize for product ID selection

  if ($referring_url) {
    $url_parts = parse_url($referring_url);
    if (isset($url_parts['path'])) {
      $path_parts = explode('/', $url_parts['path']);
      $product_index = array_search('product', $path_parts);
      if ($product_index !== false && isset($path_parts[$product_index + 1])) {
        $selected_product_name = $path_parts[$product_index + 1];
        $selected_product_id = $path_parts[$product_index + 1]; // Assuming product ID in URL
      }
    }
  }

  // Create the dropdown with search functionality using Select2
  echo '<select id="product_name" name="product_name">';
  echo '<option value="">Select Product</option>';
  echo '<option data-tokens="Search Products" disabled hidden></option>'; // Search placeholder

  $products = array(); // Store product data for filtering

  $query = new WP_Query(array(
    'post_type' => 'product',
    'post_status' => 'publish',
    'posts_per_page' => '-1'
  ));

  if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
      $product = wc_get_product(get_the_ID());
      $price = $product->get_price_html();
      $selected = '';
      // Use product name for comparison
      if (get_the_title() === $selected_product_name) {
        $selected = 'selected="selected"';
      }

      $products[] = array(
        'id' => get_the_title(), // Store product name instead of ID
        'text' => get_the_title() 
      );
    endwhile;
  else:
    echo '<option value="">No products found</option>';
  endif;

  wp_reset_postdata();

  foreach ($products as $product) {
    echo '<option value="' . $product['id'] . '" ' . $selected . '>' . $product['text'] . '</option>';
  }

  echo '</select>';

  // Enqueue JavaScript for search functionality
  wp_enqueue_script('select2'); // Assuming you've added the Select2 library
  ?>
  <script>
    jQuery(function($) {
      $('#product_name').select2({
        data: <?php echo json_encode(array_map(function($product) {
          return array('id' => $product['id'], 'text' => $product['text']);
        }, $products)); ?>,
        placeholder: 'Search Products'
      });
    });
  </script>
  <?php

  return ob_get_clean(); // Return the output and clean buffer
}

// Add the shortcode to WordPress
add_shortcode('custom_product_dropdown', 'custom_product_dropdown_shortcode');







//below code is same as above but instead of product name is saving in back the product ID is saving :






// Function to create the custom product dropdown shortcode
function custom_product_dropdown_shortcode() {
  ob_start(); // Start output buffering

  // Get the referring URL and selected product name
  $referring_url = wp_get_referer();
  $selected_product_name = '';
  $selected_product_id = ''; // Initialize for product ID selection

  if ($referring_url) {
    $url_parts = parse_url($referring_url);
    if (isset($url_parts['path'])) {
      $path_parts = explode('/', $url_parts['path']);
      $product_index = array_search('product', $path_parts);
      if ($product_index !== false && isset($path_parts[$product_index + 1])) {
        $selected_product_name = $path_parts[$product_index + 1];
        $selected_product_id = $path_parts[$product_index + 1]; // Assuming product ID in URL
      }
    }
  }

  // Create the dropdown with search functionality using Select2
  echo '<select id="product_name" name="product_name">';
  echo '<option value="">Select Product</option>';
  echo '<option data-tokens="Search Products" disabled hidden></option>'; // Search placeholder

  $products = array(); // Store product data for filtering

  $query = new WP_Query(array(
    'post_type' => 'product',
    'post_status' => 'publish',
    'posts_per_page' => '-1'
  ));

  if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
      $product = wc_get_product(get_the_ID());
      $price = $product->get_price_html();
      $selected = '';
      // Use product ID for comparison
      if (get_the_ID() === $selected_product_id) {
        $selected = 'selected="selected"';
      }

      $products[] = array(
        'id' => get_the_ID(), // Add ID for selection
        'text' => get_the_title() 
      );
    endwhile;
  else:
    echo '<option value="">No products found</option>';
  endif;

  wp_reset_postdata();

  echo '</select>';

  // Enqueue JavaScript for search functionality
  wp_enqueue_script('select2'); // Assuming you've added the Select2 library
  ?>
  <script>
    jQuery(function($) {
      $('#product_name').select2({
        data: <?php echo json_encode(array_map(function($product) {
          return array('id' => $product['id'], 'text' => $product['text']);
        }, $products)); ?>,
        placeholder: 'Search Products'
      });
    });
  </script>
  <?php

  return ob_get_clean(); // Return the output and clean buffer
}

// Add the shortcode to WordPress
add_shortcode('custom_product_dropdown', 'custom_product_dropdown_shortcode');

ChatGPT








// by below code the search bar for page using shortcode not drodown a searchbar


function product_search_shortcode() {
    ob_start(); ?>

    <div class="product-search-container">
        <input type="text" id="product-search-input" placeholder="Search for a product...">
        <div id="product-search-results"></div>
    </div>

    <script>
    jQuery(document).ready(function($) {
        $('#product-search-input').keyup(function() {
            var searchQuery = $(this).val();

            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                type: 'POST',
                data: {
                    'action': 'product_search',
                    'search_query': searchQuery
                },
                success: function(response) {
                    $('#product-search-results').html(response);
                }
            });
        });

        $(document).on('click', '.product-item', function() {
            var selectedProduct = $(this).text();
            $('#product-search-input').val(selectedProduct);
            $('#product-search-results').html('');
        });
    });
    </script>

    <?php
    return ob_get_clean();
}
add_shortcode('product_search', 'product_search_shortcode');

function product_search_callback() {
    $search_query = $_POST['search_query'];

    $products = wc_get_products(array(
        'status' => 'publish',
        'limit' => -1,
        's' => $search_query,
    ));

    if ($products) {
        foreach ($products as $product) {
            echo '<div class="product-item">' . $product->get_name() . '</div>';
        }
    } else {
        echo '<div class="product-item">No products found</div>';
    }

    wp_die();
}
add_action('wp_ajax_product_search', 'product_search_callback');
add_action('wp_ajax_nopriv_product_search', 'product_search_callback');
content_copyCOPY