WordPress как на ладони
5 премиум тем, 7 плагинов, 4 лендинга и 45 дизайнерских блоков для WordPress с 96% скидкой. От TemplateMonster.com wordpress jino

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

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

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

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

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

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

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

    alfasaiya 1.5 год назад

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

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

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

    stepan 1.5 год назад

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

    stepan 1.5 год назад

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

    alfasaiya 1.5 год назад
    <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 1.5 год назад
    <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 1.5 год назад

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

    alfasaiya 1.5 год назад

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

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