|
Joost
|
March 20, 2017 at 2:49 am
Despite not being an actual developer, I have been able to modify the layout and contents of Event Table add-on to my needs: http://www.plukdeliefde.nl/agenda/. What I did is to replace the table part altogether by a series of cards.
In terms of layout this is perfect for me but unfortunately I’ve apparently screwed up the category filter. Frankly, I can’t figure out where in the original code the actual filtering is done. The code below build the drop-down menu (and is also part of the custom code). But where is the filtering/selection on category done? Perhaps with that input I can proceed myself (as I appreciate you cannot write custom code for me).
|
|
Joost
|
March 20, 2017 at 2:50 am
<?php if ($category_filter != ‘false’){ ?>
<p class=”category-filter”>
<label><?php echo $category_filter_text; ?></label>
<select class=”” id=”ee_filter_cat”>
<option class=”ee_filter_show_all”><?php echo __(‘Show All’, ‘event_espresso’); ?></option>
<?php
$taxonomy = array(‘espresso_event_categories’);
$args = array(‘orderby’=>’name’,’hide_empty’=>true);
$ee_terms = get_terms($taxonomy, $args);
foreach($ee_terms as $term){
echo ‘<option class=”‘ . $term->slug . ‘”>’. $term->name . ‘</option>’;
}
?>
</select>
</p>
<?php } ?>
|
|
Tony
|
March 20, 2017 at 8:41 am
Hi there,
The category filtering is done by JavaScript.
It looks for the ‘class’ value of the selected category and then hides any elements that DON’T have that class from the table.
You’ve changed the output of the table and now the ‘cards’ don’t have the category slug as a class anymore, so the filtering doesn’t work.
So the filtering is done using the code within \ee4-events-table-template\scripts\espresso_events_table_template.js
From the original template you’ll notice the row container for each event uses the $category_slugs variable as part of the classes, you’ll need to do the same on your cards.
|
|
Joost
|
March 20, 2017 at 9:10 am
Ha, that’s why I couldn’t find it! I was only looking the PHP code. Thanks for the pointer Tony and I’ll see if I can make sense of it. I assume that I can put the modified js file in the upload folder as I did with the template php file, right?
|
|
Joost
|
March 20, 2017 at 9:43 am
It is working fine now. I had to do two things: 1) add the category slug as class to the card (as you suggested) 2) change filter class espresso-table-row in the js file to the class of my cards.
What is apparently not correct yet is the location of the modified js file. I tried to put it in wp-content\uploads\espresso\scripts but that does not work. I have now modified the original file which is of course not good practice. What is the correct location?
|
|
Tony
|
March 21, 2017 at 5:32 am
There is no ‘correct location’ for modified version of the script.
You would need to de-register the current version of the script and then register your custom version and load it on the page.
https://premium.wpmudev.org/blog/replacing-default-wordpress-scripts/
Or another option for this is just simply add the espresso-table-row class in additional to your others to the cards and continue to use the default JS file with your custom template.
|
|
Joost
|
March 24, 2017 at 1:31 am
Hi Tony,
You are right, adding the espresso-table-row class to my cards is the simplest way to do it. Thanks for the adequate support!
Joost
|
