WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Шаблоны сайтов на русском

Табы из категорий и запсией в них

Верстаю тему, есть блок табов, в которые планируется вывод категории произвольных записей (товары), при клике на каждый таб, чтобы в каждом табе отображались товары из нужной категории.

Пример как выглядит - http://presentlaboratory.ru/

Как можно реализовать? Заранее всем спасибо!

0
alfasaiya
2 года назад
  • 1
    stepan1188 cайт: www.weblancer.net/users/stepanko/?affili...

    Если Вы уже сверстали и вопрос только в том, как вывести в каждый таб-блок нужные товары, то в каждом таб-блоке список товаров выводите с помощью get_posts, в параметрах которой можно указать категорию/таксономию, с которой выбирать товары.

    Не понимаю - в чем может быть сложность ?..

    alfasaiya 2 года назад

    Извиняюсь чуть не правильно написал вопрос.

    Суть в том что, есть например категории произвольных записей, нужно чтобы они автоматически выводились табами этими, и по клику на каждый таб (категорию), в соответствующем ей блоке были товары только этой категории.

    Я не сильно опытен в wordpress и php, но что-то мне подсказывает что без ajax не обойтись, вот хотел узнать есть ли решения проще.

    stepan 2 года назад

    Если скинете HTML код своих табов - я напишу php, который будет заполнять табы товарами.

    stepan 2 года назад

    Аякс нужен - если ГРУЗИТЬ не все сразу товары, а только при клике на вкладку таба подгружать выбранные.
    Здесь уже вопрос в другом - как много будет товаров, как много категорий.
    Если в каждой категории будет много товаров - то только аякс. Потому что выводить сразу ВСЕ товары нерационально.

    alfasaiya 2 года назад
    <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, на второй вывод товаров вне зависимости от категорий, третья пустая.

    stepan 2 года назад
    <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>
    stepan 2 года назад

    Не забывайте ставить вопрос решенным.
    Спасибо!
    (код проверял на своем хостинге)

    alfasaiya 2 года назад

    Огромнейшее спасибо! Шикарно!

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация