Karadjordje Karadjordje - 3 years ago 166
jQuery Question

Combining boostrap carousel with checkboxes in WordPress

Hello guys I'm working on implementing bootstrap carousel in my WordPress project. I'm using checkboxes to list my categories it looks something like this:
enter image description here

I would like for users to be able to change content of my carousel based on categories they choose.

Basically I need to change my query based on which checkboxes user has choosen. My query needs to change based on what categories user has choosen for example something like this 'category_name' => 'test1, test2'

This is my code:

<div class="col-md-7 col-md-offset-4 main-content">
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" name="allRadios" id="allRadios" value="all">
all
</label>
<label class="checkbox-inline">
<input type="checkbox" name="frontendRadios" id="frontendRadios" value="frontend" checked>
front end
</label>
<label class="checkbox-inline">
<input type="checkbox" name="wordpressRadios" id="wordpressRadios" value="wordpress" checked>
wordpress
</label>
<label class="checkbox-inline">
<input type="checkbox" name="designRadios" id="designRadios" value="design" checked>
design
</label>
<label class="checkbox-inline">
<input type="checkbox" name="seoRadios" id="seoRadios" value="seo" checked>
seo
</label>
</div>
</div>

<!-- Here starts carousel loop -->
<?php $carauselLoop = new WP_Query( array( 'post_type' => 'post', 'posts_per_page' => -1, 'category_name' => 'testing' ) ); ?>
<?php $i=1; ?>
<div class="col-md-4 our-work-info">
<div class="clients-num">
<h5 title="01">01</h5>
</div>
<span class="glyphicon glyphicon-link"></span>
<h3>Crossroads</h3>
<h4 class="sub-heading">front end / wordpress</h4>
</div>

<div class="col-md-7">

<div id="our-work-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php while ( $carauselLoop->have_posts() ) : $carauselLoop->the_post(); ?>
<div class="item <?php if ($i == 1) echo 'active'; ?>">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="<?php the_title(); ?>">


<div class="carousel-caption">
<a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a>
</div>
</div>
<?php $i++; ?>
<?php endwhile; wp_reset_query(); ?>
</div>

<!-- Indicators -->
<ol class="carousel-indicators our-work-indicators">
<li data-target="#our-work-carousel" data-slide-to="0" class="active"></li>
<li data-target="#our-work-carousel" data-slide-to="1"></li>
<li data-target="#our-work-carousel" data-slide-to="2"></li>
</ol>

<!-- Controls -->
<a class="left carousel-control" href="#our-work-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#our-work-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>




Is there a way to achieve this and how should I approach it ?

Answer Source

I've decided to take a different approach in solving this. My idea was to load all posts from different categories and give them CSS classes which I would then show or not show based on which checkboxes user selected.
This is my HTML:

    <div class="carousel-inner" role="listbox">
    <?php while ( $carouselLoop->have_posts() ) : ?>
        <?php $carouselLoop->the_post(); ?>
        <?php
            $categories = get_the_category();
            $cat = '';
            if ( ! empty( $categories ) ) {
                $cat = esc_html( $categories[0]->name );
            }
        ?>
        <div
            class="cat-all cat-<?= strtolower($cat) ?> item <?php if ($i == 1) echo 'active'; ?>"
            data-title="<?php the_title() ?>"
            data-category="<?= strtolower($cat) ?>"
        >
            <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="<?php the_title(); ?>">
            <div class="carousel-caption">
                <a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a>
            </div>
        </div>
        <?php $i++; ?>
    <?php endwhile; ?>
    <?php wp_reset_query(); ?>
</div>

This is my JQ:

    var checkedCategories = {
    frontend: false,
    testing: false,
    uncategorized: false,
    wordpress: false,
    design: false,
    seo: false,
};

function checkedKeys() {
    return Object.keys(checkedCategories).filter(function(key) {
        return checkedCategories[key];
    });
}

function toggleAll() {
    Object.keys(checkedCategories).forEach(function(key) {
        checkedCategories[key] = false;
        $('#' + key + 'Chb').attr('checked', false);
    });
    $('.cat-all').addClass('item').removeClass('hidden');
    $('.cat-all').eq(0).addClass('active');

    $('#allChb').attr({
        disabled: true,
        checked: true
    });
}

$('#category-checkboxes').on('change', 'input:checkbox', function(e) {
    var $chb = $(this);
    var category = $chb.data('category');

    $('.cat-all').removeClass('active');

    if (category == 'all') {
        if (this.checked) {
            toggleAll();
            return;
        } else {
            $(this).attr('disabled', true);
        }
    }

    $('.cat-all').removeClass('item').addClass('hidden');

    if (this.checked) {
        $('#allChb').attr({
            disabled: false,
            checked: false
        });
    }

    var $catItems = $('.cat-' + category);
    checkedCategories[category] = this.checked;

    var categories = checkedKeys();
    if (categories.length === 0) {
        toggleAll();
        return;
    }

    categories.forEach(function(cat) {
        var checked = checkedCategories[cat];
        var $catItems = $('.cat-' + cat);
        $catItems.addClass('item');
        $catItems.removeClass('hidden');
    });

    $('.cat-all.item').eq(0).addClass('active');
});

If anyone runs into similar issue I hope this will help him.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download