Ajax Pro Search layout change

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Ajax Pro Search layout change

This topic contains 7 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 2 years, 10 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #33141
    Celin72
    Celin72
    Participant

    Hi Ernest,

    Thank you for the wonderful plugin.
    My customer wants changes to the layout as shown below. Can you please help me to achieve this?

    Requirement 1 : The layout is as shown in Now.png. I would like to get as Change-required.png.

    I want to remove the arrow icon pointing down to show and hide advanced option. Instead I would like to add a text below the search bar like “Advanced Search” to show and hide the category options.

    Requirement 2 : I have 9 categories, Now all the categories list one below the other. I like to show the categories Strand A to Strand E in one column under the title “Filter by Strands”. In the second column I want to list all the Year categories from Year 7 to Year 10 with title “Filter by Year”.

    All of them are normal WordPress categories. Now I get only ‘Filter by Categories’ title above categories.

    The website is private and is hosted with WordPress.com. Looking forward to hearing from you soon.

    Kind regards
    Celin

    Attachments:
    You must be logged in to view attached files.
    #33157
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    1. Well, you can try a custom CSS for that:

    .prosettings, .prosettings .innericon {
        width: 80px !important;
    }
    
     .prosettings .innericon::after {
        content: "My Text" !important; 
        color: black;
        line-height: 32px !important;
     }
    
    .prosettings .innericon svg {
        display: none !important;
    }

    The values need to be adjusted of course, but it should be very close to a possible custom solution.

    2. I’m afraid this is only possible if the items are in separate taxonomies. Items from the same taxonomy will be displayed in the same fieldset group. This will very likely change in a future release once we finish the rework on the filters interface.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #33166
    Celin72
    Celin72
    Participant

    Thanks you for the quick reply.

    Requirement 1: Works fine – even though customer wanted the text outside and below of the search bar, this is also acceptable. Thanks for that.

    Requirement 2: I tried to write code as below but doesn’t seem to work. My intention is to add a class to the div with class name asp_option_label and value “Strand E – Morality and Justice”. So I can add a space and then title after that if cannot make in to two column.

    Can you please help me to fix this?

    var filter = document.getElementsByClassName(“asp_option_label”);
    if (‘ Strand E – Morality and Justice’ == filter[0].innerHTML)
    {
    filter[0].setAttribute(“class”, “new-filter”);
    }

    Looking forward to hear from you!
    Celin

    #33170
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    2. Sure, that is a great idea. I recommend something like this instead:

      jQuery(function($){
        $('.asp_option_label').each(function(){
    		if ( $(this).text().trim() == 'Strand E – Morality and Justice' ) {
    			$(this).addClass('new-filter');
    		}
    	});
      });

    Make sure this is added as a footer script so the page is rendered before it is executed.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #33178
    Celin72
    Celin72
    Participant

    Hi Ernest.

    Thanks for the response. Unfortunately this doesn’t seem to append Class. Is there anywhere in plugin files I can do changes to make it appear like that. I do manual update for the plugin so I can replace the code for every plugin update until this feature is released.

    Thanks

    #33179
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    That should work, I was able to test it on our local server. Try this variation maybe placing to the functions.php file in your theme directory:

    add_action('wp_footer', 'asp_add_script_to_footer', 999999);
    function asp_add_script_to_footer() {
    	?>
    	<script>
    	jQuery(function($){
    		$('.asp_option_label').each(function(){
    			if ( $(this).text().trim() == 'Strand E – Morality and Justice' ) {
    				$(this).addClass('new-filter');
    			}
    		});
    	});
    	<script>
    	<?php
    }

    If no luck, then you can try the filters templating feature. That lets you make changes to the filters layout without losing them on plugin updaes.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #33226
    Celin72
    Celin72
    Participant

    Thank you. The custom class is added when code is changed as above. Also I’ll have a look at the filters templating feature for more options.
    Thanks for your support and prompt reply as always.

    Best wishes
    Celin

    #33230
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    You are very welcome 🙂

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.