Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Use jQuery in WordPress WooCommerce page to filter content in div with siblings

I have a long list of documents added to wooCommerce products which I am able to show as a complete list.
I want to create a searchfield to filter the results making it much more userfriendly. Preferable with a jQuery script.

This is the output:

<div class="woocommerce"><h3 class="woocommerce-product-documents-title">2C metall</h3><div class="woocommerce-product-documents-491 woocommerce-product-documents ui-accordion ui-widget ui-helper-reset" role="tablist">

<h3 class="ui-accordion-header ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span></h3>

<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">

<ul>
   <li><a href="sitename.com/27_2C-Metal_1476_no.pdf" target="_self">Datablad</a></li>
   <li><a href="http://sitename.com/wp-content/uploads/2019/09/2c-metal_TI_EN.pdf" target="_self">teknisk informasjon</a></li>
</ul>
</div>

The rendered list looks somewhat like this:

2C metall
– Safety Document
– Technical Document

The div containing the productname is always in a div with class-name: “woocommerce-product-documents-title”.
The sibling div that contains the document list is always in a class named: woocommerce-product-documents-491 (Where 491 is a random number)

So my task is to create a livesearch using regex that search through the divs for productnames, then toggle (hide) the non-corresponding divs with siblings.

I am able to add the searchfield on top of the list using prepend:
$(“.woocommerce”).prepend(‘

Filter List

‘);

I am able to search the divs for a productname, but I am unable to select the next sibling div. I have tried .next(), .nextAll(), .first(). My main goal is to hide all divs, then unhide the one matching the search.

anyone got a great “starter-script” ?

This is what I have got so far:

 $(".wooDocList").prepend('<p><label>Filter List</label><input type="text" class="wooDocFilter"></p>');

 $('.wooDocFilter').keyup(function(){

   // Search text
   var text = $(this).val();

   // Hide all content class element
   $('.woocommerce-product-documents-title').toggle();
   $('.woocommerce-product-documents').toggle();

  // Search 
   $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').closest('.woocommerce-product-documents-title').toggle();

  var test = $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').next().prop("classList")
  //$('.info').text(test[0] + '!!');

  $(test[0]).toggle();
 });
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is my solution: 

     $(".wooDocList").prepend('<p><label>Filter List</label><input type="text" class="wooDocFilter"></p>');

$('.wooDocFilter').keyup(function(){

  // Search text
  var text = $(this).val();

  // Hide all content class element
  $('.woocommerce-product-documents-title').hide();
  $('.woocommerce-product-documents').hide();

  // Search 
  $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').closest('.woocommerce-product-documents-title').toggle();

 var test = $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').next().prop("classList")
   $('.info').text(test[0] + '!!');

 $('.'+test[0]).show();
 });

  2. 0

    The way that you’re selecting the sibling elements is probably unnecessary, as jQuery will allow you to chain methods to selectors. So, once you have an array of elements found via $('...').next() you can call .toggle() or .show() and it will apply to all classes that match, which will also include partial matches to your search as an added bonus.

    Here’s the adjusted code and a link to a js fiddle (doesn’t contain a search bar but you can run the script and debug through it)

    $(".wooDocList").prepend('<p><label>Filter List</label><input type="text" class="wooDocFilter"></p>');

$('.wooDocFilter').keyup(function(){

  // Search text
  var text = $(this).val();

  // Hide all content class element
  $('.woocommerce-product-documents-title').hide();
  $('.woocommerce-product-documents').hide();

  // Search 
  $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').closest('.woocommerce-product-documents-title').toggle();

  // Display sibling rows
  $('.woocommerce .woocommerce-product-documents-title:contains("'+text+'")').next().toggle();
 });

    Fiddle is here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search