Custom Fields
Re-Envisioned
Support MB Views Convert function into view to filter category

  • Creator
    Topic
  • #29052
    Kirb
    Participant

    I need some help, how can I convert this function in order to filter the data by category when the specific category is clicked in view. I found this tutorial but I think this is dependent on the JustReadTheme.

    Reference: https://metabox.io/filter-posts-custom-fields-custom-taxonomies-archive-pages/

    Here's my working view imported via shortcode in a page but I just need to have a filter on it. How can I implement it? FYI, I'm not a coder 🙁

    <div class="nm-dishes-wrap">
        <div class="nm-dishes">
            {% set args = { post_type: "dish", posts_per_page: 6 } %}
            {% set posts = mb.get_posts( args ) %}
            {% for post in posts %}
                <div class="nm-dishes--card">
                    <div class="nm-dishes--card-header">
                            <h4>{{ post.post_title }} 
                                {% if mb.checkbox( post.dish_gluten, 'Yes', 'No' ) == 'Yes' %}
                                    <span><img src="/wp-content/uploads/2021/06/gluten.svg" height="30" weight="auto" class="nm-dish-gluten"></span>
                                {% else %}
                                    
                                {% endif %}
                            </h4>
                        <span class="nm-dishes--price">{{ post.dish_price }}</span>
                    </div>
                    <div class="nm-dishes--body">
                        <p class="nm-dishes--desc">
                            {{ post.dish_description }}
                        </p>
                        <img src="/wp-content/uploads/2021/06/nm-camera-icon.svg" height="40"  weight="auto" class="icon-camera">
                        <div class="nm-hidden">{{ mb.get_the_post_thumbnail( post.ID, 'medium') }}</div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    Code I want to implement covert to fit my view code and have a filtered by category

    function justread_filter_archive( $query ) {
            if ( is_admin() ) {
                    return;
            }
            if ( is_archive() ) {
                    if ( 'cat' === $_GET['getby'] ) {
                                $taxquery = array(
                                        array(
                                                'taxonomy' => 'custom-taxonomy',
                                                'field' => 'slug',
                                                'terms' => $_GET['cat'],
                                        ),
                                );
                                $query->set( 'tax_query', $taxquery );
                    }
            }
    
            return $query;
    }
    add_action( 'pre_get_posts', 'justread_filter_archive');
Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #29064
    Long Nguyen
    Moderator

    Hi,

    Here is the filter code that you need to convert and add to the View

    <div class="filter-custom-taxonomy">
        <?php
        $terms = get_terms( 'publisher' );
        foreach ( $terms as $term ) : ?>
        <a href="?getby=cat&cat=<?php echo esc_attr( $term->slug ); ?>">
                <?php echo esc_html( $term->name ); ?>
        </a>
        <?php endforeach; ?>
    </div>

    The function to handle the filter should be added to the file functions.php in the theme/child theme folder or Code Snippets plugin

    function justread_filter_archive( $query ) {
        ...
    }
    add_action( 'pre_get_posts', 'justread_filter_archive');
    #29068
    Kirb
    Participant

    Hi, where do I place this? This doesn't work with my view.

    <div class="filter-custom-taxonomy">
        <?php
        $terms = get_terms( 'publisher' );
        foreach ( $terms as $term ) : ?>
        <a href="?getby=cat&cat=<?php echo esc_attr( $term->slug ); ?>">
                <?php echo esc_html( $term->name ); ?>
        </a>
        <?php endforeach; ?>
    </div>
    #29070
    Kirb
    Participant

    I want to add a button category that filters data on the view. Is this possible?

    #29087
    Long Nguyen
    Moderator

    Hi,

    It is possible. But you need to have a basic knowledge about PHP code and WordPress template to get the right way. Run a PHP function in View: https://docs.metabox.io/extensions/mb-views/#running-php-functions

    The code to show filter in the View is

    <div class="filter-custom-taxonomy">
        {% set terms = mb.get_terms( { taxonomy: 'custom-taxonomy' } ) %}
        {% for term in terms %}
        <a href="?getby=cat&cat={{ mb.esc_attr( term.slug ) }}">
            {{ mb.esc_html( term.name ) }}
        </a>
        {% endfor %}
    </div>

    remember to change custom-taxonomy in the filter, the function hooked above to your taxonomy slug. And Type, Location of View set to Post type (Dish) archive.

    #29240
    Kirb
    Participant

    Hi, Metabox. The categories are showing now but the filter doesn't work. Any idea how I can add filter that stays on the page, without loading? In my MB views, I connect the DISH post type to the STOREpost type using the MB Relation and target the single post in STORE. So within that single store post I can add multiple dishes in every single store. Now, I would like to add filter that only show only the category for the dishes that are being added via relation in the store and filter the data without loading the page. Can you help me? Thanks.

    I'm not a coder like you guys 🙁

    Output:
    https://markuphero.com/share/asYRuYmgQnXCXLlnPe3O

    <!-- header image  -->
    {% for post in query.posts %}
        <div class="fullwidth-header" style="background-image:url({{ post.thumbnail.thumbnail.url }}); background-repeat: no-repeat; object-fit: cover; background-position: center;background-size:cover;">
        </div>
    {% endfor %}
    <!-- end header image -->
    
    <!-- dishes wrapper -->
    <div class="nm-dishes-wrap">
        <!-- filter links for category    -->
        <div class="nm-category-filter nm--pointer-underline nm--pointer-overline">
            <ul class="nm-cat-inline">
                {% set terms = mb.get_terms( { taxonomy: 'dish-category' } ) %}
                {% for term in terms %}
                <li><a href="?getby=cat&cat={{ mb.esc_attr( term.slug ) }}" class="nm-item">{{ mb.esc_html( term.name ) }}</a></li>
                {% endfor %}
            </ul>
        </div>
        <!-- List of the dishes to be filter by category -->
        <!-- By default it shows all the dishes specific for specific store   -->
        <div class="nm-dishes">
        {% set relationship = attribute( relationships, 'dish-single-store' ) %}
        {% for post in relationship.from %}
            <!-- card items starts -->
            <div class="nm-dishes--card">
                <div class="nm-dishes--card-header">
                    <h4>{{ post.post_title }}
                    <!-- check if the dish has vegetables -->
                    {% if mb.checkbox( post.dish_vegetable, 'Yes', 'No' ) == 'Yes' %}
                    <span>
                        <img src="/wp-content/uploads/2021/06/nm-vegetable-checker.svg" height="30" weight="auto" class="nm-dish-vegetable"></span>
                    {% else %}   
                    {% endif %}
                        
                    <!-- check if the dish has gluten -->
                    {% if mb.checkbox( post.dish_gluten, 'Yes', 'No' ) == 'Yes' %}
                    <span>
                        <img src="/wp-content/uploads/2021/06/gluten.svg" height="30" weight="auto" class="nm-dish-gluten"></span>
                    {% else %}   
                    {% endif %}
                    </h4>
                    <span class="nm-dishes--price">{{ post.dish_price }}</span>
                </div>
                <div class="nm-dishes--body">
                    <p class="nm-dishes--desc">
                        {{ post.dish_description }}
                    </p>
                    <img src="/wp-content/uploads/2021/06/nm-camera-icon.svg" height="40"  weight="auto" class="icon-camera">
                    <div class="nm-hidden">{{ mb.get_the_post_thumbnail( post.ID, 'medium') }}</div>
                </div>
                <!-- end nm-dishes--body -->
            </div>
            <!-- nm-dishes--card -->
        {% endfor %}
        </div>
        <!-- end nm-dishes -->
    </div>
    <!-- end nm-dishes-wrap -->
    <?php
    add_action( 'mb_relationships_init', 'your_prefix_function_name' );
    
    function your_prefix_function_name() {
        MB_Relationships_API::register( [
            'id'   => 'dish-single-store',
            'from' => [
                'object_type'   => 'post',
                'post_type'     => 'dish',
                'empty_message' => 'No connection',
                'admin_column'  => [
                    'position' => 'after title',
                    'title'    => 'Stores',
                    'link'     => 'view',
                ],
                'meta_box'      => [
                    'title'    => 'Add Store',
                    'context'  => 'normal',
                    'priority' => 'high',
                    'closed'   => true,
                ],
                'field'         => [
                    'name'       => 'Add dishes',
                    'add_button' => 'Add more dishes',
                ],
            ],
            'to'   => [
                'object_type'   => 'post',
                'post_type'     => 'store',
                'empty_message' => 'No connection',
                'admin_column'  => [
                    'position' => 'after title',
                    'title'    => 'Dishes',
                    'link'     => 'view',
                ],
                'meta_box'      => [
                    'title'    => 'Add Dishes',
                    'context'  => 'normal',
                    'priority' => 'high',
                ],
                'field'         => [
                    'name'       => 'Connect store',
                    'query_args' => [
                        '5fv72mho16w' => [
                            'id'    => '5fv72mho16w',
                            'key'   => '',
                            'value' => '',
                        ],
                    ],
                    'add_button' => 'Add more dish',
                ],
            ],
        ] );
    }
    #29245
    Long Nguyen
    Moderator

    Hi Kirb,

    To show the filter value on the page without reloading, you need to use the AJAX and some complicated code. If you are not familiar with coding, please create a request ticket here https://metabox.io/contact/ and give full requirements. Our developers will estimate the job and get back to you with a quote.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.