Табы из категорий и запсией в них
Верстаю тему, есть блок табов, в которые планируется вывод категории произвольных записей (товары), при клике на каждый таб, чтобы в каждом табе отображались товары из нужной категории.
Пример как выглядит - http://presentlaboratory.ru/
Как можно реализовать? Заранее всем спасибо!
Если Вы уже сверстали и вопрос только в том, как вывести в каждый таб-блок нужные товары, то в каждом таб-блоке список товаров выводите с помощью get_posts, в параметрах которой можно указать категорию/таксономию, с которой выбирать товары.
Не понимаю - в чем может быть сложность ?..
Извиняюсь чуть не правильно написал вопрос.
Суть в том что, есть например категории произвольных записей, нужно чтобы они автоматически выводились табами этими, и по клику на каждый таб (категорию), в соответствующем ей блоке были товары только этой категории.
Я не сильно опытен в wordpress и php, но что-то мне подсказывает что без ajax не обойтись, вот хотел узнать есть ли решения проще.
Если скинете HTML код своих табов - я напишу php, который будет заполнять табы товарами.
Аякс нужен - если ГРУЗИТЬ не все сразу товары, а только при клике на вкладку таба подгружать выбранные.
Здесь уже вопрос в другом - как много будет товаров, как много категорий.
Если в каждой категории будет много товаров - то только аякс. Потому что выводить сразу ВСЕ товары нерационально.
<div class="row prod-tabs"> <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#cat1" data-toggle="tab">Категория 1</a></li> <li><a href="#cat2" data-toggle="tab">Категория 2</a></li> <li><a href="#cat3" data-toggle="tab">Категория 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="cat1"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 product-item"> <div class="prod-box"> <a href="#portfolioModal6" class="product-link" data-toggle="modal"> <div class="product-hover"> <div class="product-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img src="img/prod.jpg" class="img-responsive" alt=""> </a> <div class="portfolio-caption"> <h4>Кухня вишнёвая 1</h4> <p class="text-muted">от 50.000 руб.</p> <a href="#portfolioModal1" class="product-link" data-toggle="modal">Заказать</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 product-item"> <div class="prod-box"> <a href="#portfolioModal6" class="product-link" data-toggle="modal"> <div class="product-hover"> <div class="product-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img src="img/prod.jpg" class="img-responsive" alt=""> </a> <div class="portfolio-caption"> <h4>Кухня вишнёвая 1</h4> <p class="text-muted">от 50.000 руб.</p> <a href="#portfolioModal1" class="product-link" data-toggle="modal">Заказать</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 product-item"> <div class="prod-box"> <a href="#portfolioModal1" class="product-link" data-toggle="modal"> <div class="product-hover"> <div class="product-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img src="img/prod.jpg" class="img-responsive" alt=""> </a> <div class="portfolio-caption"> <h4>Кухня вишнёвая 1</h4> <p class="text-muted">от 50.000 руб.</p> <a href="#portfolioModal1" class="product-link" data-toggle="modal">Заказать</a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 product-item"> <div class="prod-box"> <a href="#portfolioModal1" class="product-link" data-toggle="modal"> <div class="product-hover"> <div class="product-hover-content"> <i class="fa fa-plus fa-3x"></i> </div> </div> <img src="img/prod.jpg" class="img-responsive" alt=""> </a> <div class="portfolio-caption"> <h4>Кухня вишнёвая 1</h4> <p class="text-muted">от 50.000 руб.</p> <a href="#portfolioModal1" class="product-link" data-toggle="modal">Заказать</a> </div> </div> </div> </div> <div class="tab-pane" id="cat2"> <?php $mypost = array( 'post_type' => 'product', ); $loop = new WP_Query( $mypost ); ?> <?php while ( $loop->have_posts() ) : $loop->the_post();?> <div id="post-<?php the_ID(); ?>" class="col-lg-3 col-md-3 col-xs-6 product-item"> <div class="prod-box"> <a href="#portfolioModal1" class="product-link" data-toggle="modal"> <?php the_post_thumbnail( array( 220, 280 ) ); ?> </a> <div class="portfolio-caption"> <h4><?php the_title(); ?></h4> </header> <p class="text-muted">от 50.000 руб.</p> <a href="#portfolioModal6" class="product-link topz" data-toggle="modal">Заказать</a> </div> <div class="entry-content"><?php //the_content(); ?></div> </div> </div> <?php endwhile; ?> </div> <div class="tab-pane" id="cat3"> </div> <script> $(function () { $('#myTab a:first').tab('show') }) </script> </div> </div>Если получится было бы здорово.
У меня там на первой вкладке просто html, на второй вывод товаров вне зависимости от категорий, третья пустая.
<div class="row prod-tabs"> <?php $terms_product_cat = get_terms( array( 'taxonomy' => 'product_cat' ) ); if ( ! empty( $terms_product_cat ) ) { ?> <ul class="nav nav-tabs" id="myTab"> <?php foreach ( $terms_product_cat as $key => $product_cat ) { ?> <li <?php if ( $key == 0 ) echo 'class="active"'; ?>><a href="#cat<?php echo $product_cat->term_id; ?>" data-toggle="tab"><?php echo $product_cat->name; ?></a></li> <?php } ?> </ul> <div class="tab-content"> <?php foreach ( $terms_product_cat as $key => $product_cat ) { ?> <div class="tab-pane <?php if ( $key == 0 ) echo 'active'; ?>" id="cat<?php echo $product_cat->term_id; ?>"> <?php $mypost = array( 'post_type' => 'product', 'product_cat' => $product_cat->slug ); $products = get_posts( $mypost ); ?> <?php foreach ( $products as $post ) { setup_postdata( $post ); ?> <div id="post-<?php the_ID(); ?>" class="col-lg-3 col-md-3 col-xs-6 product-item"> <div class="prod-box"> <a href="#portfolioModal1" class="product-link" data-toggle="modal"> <?php the_post_thumbnail( array( 220, 280 ) ); ?> </a> <div class="portfolio-caption"> <h4><?php the_title(); ?></h4> </header> <p class="text-muted">от 50.000 руб.</p> <a href="#portfolioModal6" class="product-link topz" data-toggle="modal">Заказать</a> </div> <div class="entry-content"><?php //the_content(); ?></div> </div> </div> <?php } wp_reset_postdata(); ?> </div> <?php } ?> <script> $(function () { $('#myTab a:first').tab('show') }) </script> </div> <?php } ?> </div>Не забывайте ставить вопрос решенным.
Спасибо!
(код проверял на своем хостинге)
Огромнейшее спасибо! Шикарно!
Подскажите а как сделать вместо постов подкатегории. Заранее спасибо
подсказать не смогу, нет свободного времени.