Skip Navigation

[Resolved] How to create front end ajax filtering with buttons or links?

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Tagged: 

This topic contains 9 replies, has 3 voices.

Last updated by brettH-2 7 years, 1 month ago.

Assigned support staff: Waqas.

Author
Posts
#241032

Hello,
I've been through all forum topics and documentation but I cannot figure out how to make nice filtering in front end.
Here is the example of what I want to do: hidden link
There are buttons you click to filter content.

On my page I have created custom post types, custom taxonomies, with Views I created a grid view of all items of the custom post type, but now I want to have filter. How do I make a filter like on example page? (I don't want radio buttons, check boxes or similar, I'd like to have buttons/links which immediately filter content without refreshing page)

Thank you in advance,
Lidija

#241144

Waqas
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

This is very simple to achieve with Views and Isotope (3rd party JS plugin). Please follow the steps below carefully and you are all set.

Step 1:
For an example scenario, I have used standard word press Posts and Post Categories (taxonomy as button filters). My view looks like below:

<!-- Standard show all results view. This isn't a Parametric Search view. -->
[wpv-layout-start]
	<div id="filters" class="button-group">
      <button data-filter="*">show all</button>
      <button data-filter=".Modern">Modern</button>
      <button data-filter=".Classic">Classic</button>
      <button data-filter=".Future">Future</button>
      <button data-filter=".Uncategorized">Uncategorized</button>
    </div>

	[wpv-items-found]
	<!-- wpv-loop-start -->
		<div id="myposts">
          <wpv-loop>
			<!-- Using WPV-POST-TAXONOMY short-code to product category name as an additional CSS class. -->
			<!-- The category name as class, is being used to enable filters above. -->
          	<div class='item [wpv-post-taxonomy type="category" separator=" " format="text" show="name" order="asc"]'>
              [wpv-post-link]
              [wpv-post-date]
            </div>
          </wpv-loop>
        </div>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		[wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
	[/wpv-no-items-found]
[wpv-layout-end]

If you take a look right after the first line, I have added a DIV with ID "filters". There I have defined a few buttons to use as filters. These button filters represent Post Categories and using a special attribute "data-filter". Each attribute is using the same class name, as I have defined via short-code "WPV-POST-TAXONOMY" in the items (posts) loop below that filter DIV.

Step 2:
Add following CSS in Views CSS Editor. Although it is not necessary, but just a little visual aid to the posts. You may want to add your flavour preferably.

.item {
  width: 25%;
  border: 1px solid darkgray;
  background-color: #eee;
  padding: 10px;
  text-align: center;
}

Step 3:
Please visit hidden link to download packaged plugin file. And upload these file to your theme's directory (or whatever is the best suitable place under your theme directory).

After uploading the Isotope packaged file, you may want to include this in your Word Press. There are 2 possible ways, please adopt whichever is feasible for you:

- Add a <script> tag to your theme's header.php, to include the Isotope package file, such as below.

<script src="<?php echo get_template_directory_uri() ?>/isotope.pkgd.min.js" type="text/javascript"></script>

- If above is not possible, please add following code to your functions.php. This rolls out through the standard script registration and enqueue process.

function add_isotope_js() {
    wp_enqueue_script( "isotope-js", get_template_directory_uri() . 'https://cdn.toolset.com/isotope.pkgd.min.js');

}
add_action('wp_enqueue_scripts', 'add_isotope_js');

Please remember to adjust Isotope package file name and path accordingly.

Step 4:
Finally, add following Java Script code in your view's JS Editor:

var $container = jQuery('#myposts');	// Container for the all post items

// init
$container.isotope({
  // options
  itemSelector: '.item',	// Individual post item selector
  layoutMode: 'fitRows'
});

// Enable filter buttons to behave as expected
jQuery('#filters').on( 'click', 'button', function() {
  var filterValue = jQuery(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

That is all. Please consider following points for an understanding around all above:

- Adjust your view according to your requirements.
- Notice the "syntax" required by Isotope, to layout the resulting items as well as the button filters.
- Please visit hidden link for a detailed help and examples on Isotope.

I hope this will give you pretty much a good start, and you can customize it as per your needs.

Please let me know if I can help you with anything related.

#241289

Hi Waqas,
thank you for your thorough reply. However, I don't know if I will be able to implement it correctly for what I need. I'd like to add it to my existing views, and the code of the views is as follows:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
[wpml-string context="wpv-views"]Kategorije portfolia:[/wpml-string]
[wpv-control taxonomy="photo-galleries" url_param="wpv-photo-galleries" type="multi-select" hide_empty="true"]
[/wpv-filter-controls]
[wpv-filter-end]

[wpv-layout-start]
[wpv-items-found]
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row"><!-- Open Row -->
<div class="fusion-one-third one_third fusion-column">
[wpv-post-featured-image size=??full??]
<h2 class="naslov">[wpv-post-link]</h2>
</div>

[wpv-item index=other]
<div class="fusion-one-third one_third fusion-column">
[wpv-post-featured-image size=??full??]
<h2 class="naslov">[wpv-post-link]</h2>
</div>

[wpv-item index=3]
<div class="fusion-one-third one_third fusion-column last">
[wpv-post-featured-image size=??full??]
<h2 class="naslov">[wpv-post-link]</h2>
</div>
</div>

[wpv-item index=pad]

[wpv-item index=pad-last]

</wpv-loop>
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

So, this is 3 column grid for custom posts types "Portfolia nekretnine", which are supposed to be filtered by custom taxonomy called "Kategorije portfolia". Both are created by Types plugin.

I understand the part with adding isotope js code, but I'm not sure about the views code, can you add filtering code to this existing view? Because I'm not programmer, I know coding, but I'm not that good at it (to modify it successfully)

Thank you very much,
Lidija

#241396

Waqas
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Can you please setup a test site, so I can update your code accordingly? or if you already have this on an existing site, please provide the access details.

I have enabled Private Details box for this purpose.

#241474

Thank you for quick reply, your support is awesome.

My site is live with maintenance mode enabled right now.

Test page with View: hidden link

There is only one view: Portfolio 3 columns - I used it on that test page. Right now I have multiple selection filter enabled, but it is not working.
So, I'd like to have buttons which would filter the content immediately.

*****
One more thing: is it possible to have images in that grid to also act like a link to portfolio item?

Thank you very very much.
Lidija

#241855

Waqas
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Please see it working at hidden link

I made a duplicate of your existing view, so your existing code doesn't affect. Please notice new view named as "Portfolio 3 Columns NEW". I used a new page to test this too, just as you notice from the URL above.

Here a few things to consider, please read below:

1. Please see added classes to the opening row div and post-item div (in the loop).
2. Please notice added Taxonomy slug via wpv-post-taxonomy short code to each post-item div. This work like a tag applied to each item, so it can be grouped by Isotope lately.
3. Please give special attention to JS Editor of this view. I have done followings:

3.1 - Since you are using Views builtin filter options, so I just used jQuery to add "data-filter" attribute to each radio button. I used the value of each radio button, as the value of "data-filter" attribute. So Isotope can be aware of it's target items for grouping purposes (point 2 above)

3.2 - I bind a java script "click" event with each radio button, to invoke the Isotope with desired filter.

You may want to re-structure your DIVs architecture to make it look more cool and elegant. However, please take care of the syntax required for Isotope to work appropriately (HTML and Javascript).

Please let me know if I can help you with anything related.

#241911

Hello,
thank you for your help.
Just a few things:
1. I wanted normal buttons, not radio buttons. Just plain, clickable buttons which look much nicer than radios or check boxes. How can I put buttons instead of radios?
2. Filter works, but then filtered items are not aligned properly, i.e. there's only one in the first row, two in the second, three in the third and then all over again (try filtering Apartments). Category Hotels, for example, has each item in new row. Can you see why?
3. Sorry if solution is obvious to you but I'm far from being programmer and I cannot find my way through the code easily. Maybe you should consider adding button filters option to future Views releases (to make your job easier).

Thank you,
Lidija

#242140

Waqas
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Please see the modified View (HTML, CSS and Java Script).

I have commented out default View Filter code, while have added the filters manually - as I mentioned in a previous example too. Filter controls in View offer some certain types of controls, however, to achieve a custom functionality you can draw your own controls. This way you can extend the functionality, look and feel according to your choice.

For details on View Filter Controls, please see https://toolset.com/documentation/views-shortcodes/#vf-153286

You can extend your buttons outlook via CSS, even you can use IMG tag to replace buttons, but of course you will have to modify a little bit of CSS and JS accordingly.

In the context of your query in point #2: This is your HTML/CSS architecture, which defines how you want to layout things on a page. Please notice the changes I made to bring all these results into single container, so these can be aligned even after filter is applied.

I hope this sorts out the said problem. W3Schools is a good place to learn about HTML, CSS and Java Script, please visit hidden link .

Please let me know if I can help you with anything related.

#242306

Thaat's great, I can work by myself from here.

Thank you very much for your help!

Lidija

#361175

Waqas can you help me do the same for my website using Isotope and Views to filter posts?