WordPress.org

Ready to get started?Download WordPress

Forums

Advance WP Query Search Filter
[resolved] Search Form Customization (7 posts)

  1. BigDogSF
    Member
    Posted 1 year ago #

    Hi...Regarding the Search Form:

    1. I would like to be able to have a separate "header" (for lack of better words) for the Taxonomy and Meta sections. The headers should be separate from the Form Title field. I want to use them to add directions...like this:

    Taxonomy: Header="Select Product Category"
    Meta: Header="Select Location"

    2. Is there a way to place the String Search Box at the top of the form instead of the bottom?

    Regards,
    Will

    http://wordpress.org/extend/plugins/advance-wp-query-search-filter/

  2. TC.K
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,
    1. No, the plugin don't have this features. However, why don't you add the 'header' before the shortcode? eg

    "Select Product Category"
    [formid="123"]
    "Select Location"
    [formid="321"]

    2. No. There are no easy way but editing the plugin file. It is not a good practice to editing the plugin file,though.

  3. BigDogSF
    Member
    Posted 1 year ago #

    Ok...so this is not optimal...but I can work around it. It's always easy to make suggestions when one is not doing the work...(talking about myself here).

    My suggestion is that the form needs a way to insert text boxes that are not related to custom meta or taxonomy...that way a long form can be broken up into sections with headers.

    I'm very happy with the results of this form...and btw..I was using the w3tc cache plugin and it was not playing nice with the search results. I switched to wp super cache and it works really well with this plugin.

    Regards
    Will

  4. Chrisdigital
    Member
    Posted 1 year ago #

    There's a two additional ways you could do this. with Javascript or JQuery. You could prepend html to any element in the form and it shouldn't hurt anything. Or you could go to the extreme of hiding the whole form, sucking out the html and spitting back to the page for display with whatever html you like (a lot of gallery plugins do this.)

    http://api.jquery.com/append/
    http://api.jquery.com/prepend/
    http://api.jquery.com/html/
    http://api.jquery.com/text/

    This might come in handy too: http://james.padolsey.com/javascript/regex-selector-for-jquery/

    I have the same issue and I'm contemplating to what extreme I want to do this without touching the plugin.

  5. Chrisdigital
    Member
    Posted 1 year ago #

    Here's how I moved the taxonomies, below my meta data filters...( at client request)

    //Edits to search form
      //Select bottom div with button, (use to mark bottom of the form) stick a container div above (before) it
      //http://api.jquery.com/before/
      jQuery("div[class='awqsf_box']").before('<div class="tax-container"></div>');
    
      //Select all taxonomy checks (search options at top) using this tip...
      //http://stackoverflow.com/questions/10498896/select-all-elements-with-class-name-start-by-specific-string-by-jquery
      //hide them first, move them to bottom in our new container, then show them again (I'm chaining all the actions together)
      //http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element
      jQuery("div[class*=' taxocheck-']").hide().appendTo('.tax-container').show();

    I hope this helps!

  6. Chrisdigital
    Member
    Posted 1 year ago #

    Just learned a little tip.... the form script ignores any divs on the "awqsf_box" level if you try to dynamically create and insert divs/text in between form sections on that level.

    Here's where I ended up. I'm probably screwed if the class structure changes in the plugin but I was able to beat the crap out of this form to get it into a three column responsive grid...

    The following code should all be in a jQuery document ready call...

    //Select all taxonomy checks using (options at top)
      //http://stackoverflow.com/questions/10498896/select-all-elements-with-class-name-start-by-specific-string-by-jquery
      //hide them first, move them to bottom, then show them again
      //http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element
      jQuery("div[class*=' taxocheck-']").hide().appendTo('.tax-container').show().css({display:'inline-block'});
      jQuery("div[class*=' cmfcheck-']").hide().appendTo('.meta-data-container').show().css({display:'inline-block'});
      //Select neighborhoods label and move it outside the scrollable area
      jQuery("label[class='taxo-label-1']").hide().appendTo('.taxocheck-label-holder').show();
    
      //Get rid of all the br's we no longer need
      jQuery("label[class*='taxo-cmf-']").nextAll('br').remove();
      jQuery('.op_neighborhoods br:first').remove();
    
      //get rid of mystery divs that the plugin uses for block clears
      jQuery("label[class*='cmfcheckbox']").nextAll('div').remove();
    
      //throw in some css in preparation of making this responsive
      jQuery("div[class*='cmfcheck-']").css({padding:'0 0 0 0 !important',width:'33%',display:'inline-block'});
      jQuery("label.taxcheckbox").css({width:'33%',display:'inline-block'});
  7. Chrisdigital
    Member
    Posted 1 year ago #

    My client ended up asking me for this exactly... here's how I did it with jQuery...

    I set up two arrays, the headers and then the target placement, then fire off a loop if the form exists to pop in the header dividers between a section of checkboxes.

    if (jQuery('.awqsf_box')){
        function salad() {
    var topheadings = ['Schedule','Duration','Day of Week','Are you representing a Group?'];
    
    var targetplacement = ['cmfcheck-0','cmfcheck-3','cmfcheck-6','cmfcheck-8'];
    
    for (var i = 0; i < topheadings.length; i++) {
    
    var headingdivider = '<div class="awqsf_box taxocheck-divider-' + i +'" style="display: block;\"><label class="taxo-label-' + i + '">' + topheadings[i] + '</label></div>';
    var target = "div.awqsf_box."+ targetplacement[i];
    //console.log(headingdivider);
    //console.log(target);
     jQuery(target).before(headingdivider);
    }
    }
    
    salad();
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic