Convert function into view to filter category

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

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',
            ],
        ],
    ] );
}