فرهاد

استفاده از carousel بوت استرپ در کوئری محصولات وکامرس

1 پست در این موضوع قرار دارد

سلام و عرض ادب خدمت همه دوستان وردپرسی

 

داشتم یه قالب مینوشتم که متاسفانه به یه مشکلی بر خوردم که نتونستم حل کنمش

 

برای صفحه ای از سایت نیاز است که آخرین محصولات وکامرس رو کوئری بگیریم و نمایش بدیم

قالب با بوت استرپ نوشته شده و خواستم از پلاگین carousel بوت استرپ استفاده کنم

اما مشکل اینجاست که فقط تونستم برای نمایش یک محصول بنویسم

اما من نیاز دام که چرخش برای هر 4 محصول یکبار اکشن بشه

 

قبلا با carousel WOW استفاده میکردم اما الان نیاز هست که قالب خیلی سبک باشه و مجبورم از قابلیت های بوت استرپ استفاده کنم

لطفا کدی در  زیر قرار میدم رو ببینید و جوری اصلاح کنید که 4 محصول نمایش داده بشه و بعد با اجرای carousel فقط یک محصول بچرخد مثل سایت های فروشگاهی 

 

		<div class="row">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
                                <?php
                                $params = array('posts_per_page' => 12, 'post_type' => 'product');
                                $wc_query = new WP_Query($params);
                                ?>

                                <?php if ($wc_query->have_posts()) : ?>
                                    <?php
                                    while ($wc_query->have_posts()) :
                                        $wc_query->the_post();
                                        ?>
										
                                        <div class="carousel-item <?php echo 'item ';
                                            if ($i == 1) {
                                                echo 'active';
                                            }?>"><div class="col-md-20">
                                            <a href="<?php the_permalink(); ?>">
                                                <?php the_post_thumbnail( 'shop_catalog' ); ?>
                                            </a> 
                                            
                                            <div class="margin-top-10">
                                                <a href="<?php the_permalink(); ?>">
                                                    <h4>
                                                        <?php the_title(); ?>
                                                    </h4>
                                                </a>                                            
                                                <p>
                                                    <?php
                                                        $product = new WC_Product(get_the_ID());
                                                        echo wc_price($product->get_regular_price());                                                        
                                                        echo wc_price($product->get_sale_price());
                                                        $product = get_product(get_the_ID());
                                                    ?>
                                                </p>
                                            </div>
                                            
                                           
                                        
                                        </div>
                                        </div>

                                <?php $i++; endwhile; ?>
                                    <?php wp_reset_postdata(); ?>
                                <?php endif; ?>
	</div>
</div>
</div>

 

چیزی که در ذهن من هست :

12Untitled.thumb.jpg.23a920c593ab84eafce73b92db4e2115.jpg

0

به اشتراک گذاری این پست


لینک به پست

  • مطالب مشابه

    • توسط mohammdkhalilii
      با سلام و عرض خسته نباشید به تمامی دوستانم ، سوالی که از خدمتتون داشتم 
      من یه افزونه میخوام که مثل این قسمت وبسایت http://irselfmade.com/ 
      هم توی موبایل و تبلت هم توی دسکتاپ اسلایدر (به قول معروف چرخ فلکی ) افقی باشه 
      ممنونم 

    • توسط فرهاد
      سلام و عرض ادب خدمت همه دوستان وردپرسی
       
      داشتم یه قالب مینوشتم که متاسفانه به یه مشکلی بر خوردم که نتونستم حل کنمش
       
      برای صفحه ای از سایت نیاز است که آخرین محصولات وکامرس رو کوئری بگیریم و نمایش بدیم
      قالب با بوت استرپ نوشته شده و خواستم از پلاگین carousel بوت استرپ استفاده کنم
      اما مشکل اینجاست که فقط تونستم برای نمایش یک محصول بنویسم
      اما من نیاز دام که چرخش برای هر 4 محصول یکبار اکشن بشه
       
      قبلا با carousel WOW استفاده میکردم اما الان نیاز هست که قالب خیلی سبک باشه و مجبورم از قابلیت های بوت استرپ استفاده کنم
      لطفا کدی در  زیر قرار میدم رو ببینید و جوری اصلاح کنید که 4 محصول نمایش داده بشه و بعد با اجرای carousel فقط یک محصول بچرخد مثل سایت های فروشگاهی 
       
      <div class="row"> <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <?php $params = array('posts_per_page' => 12, 'post_type' => 'product'); $wc_query = new WP_Query($params); ?> <?php if ($wc_query->have_posts()) : ?> <?php while ($wc_query->have_posts()) : $wc_query->the_post(); ?> <div class="carousel-item <?php echo 'item '; if ($i == 1) { echo 'active'; }?>"><div class="col-md-20"> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail( 'shop_catalog' ); ?> </a> <div class="margin-top-10"> <a href="<?php the_permalink(); ?>"> <h4> <?php the_title(); ?> </h4> </a> <p> <?php $product = new WC_Product(get_the_ID()); echo wc_price($product->get_regular_price()); echo wc_price($product->get_sale_price()); $product = get_product(get_the_ID()); ?> </p> </div> </div> </div> <?php $i++; endwhile; ?> <?php wp_reset_postdata(); ?> <?php endif; ?> </div> </div> </div>  
       
      چیزی که در ذهن من هست :
       

    • توسط premier
      دوستان به یک مشکل عجیب خوردم
      از این اسلایدر برای سایت استفاده می کنم :
      http://owlgraphic.com/owlcarousel/
      تو صفحه عادی عمل میکنه ولی به محض اینکه به قالب میبرم عمل نمیکنه !!
      یعنی اصلا لود نمیشه !!
      من کد اونو میزارم اگه راهی هست کمک کنید


      <!-- Owl Carousel Assets -->
      <link href="<?php bloginfo('template_url'); ?>/css/owl.carousel.css" rel="stylesheet">
      <link href="<?php bloginfo('template_url'); ?>/css/owl.theme.css" rel="stylesheet">

      <div id="owl-demo" class="owl-carousel">

      <div class="item"><h1>1</h1></div>
      <div class="item"><h1>2</h1></div>
      <div class="item"><h1>3</h1></div>
      <div class="item"><h1>4</h1></div>
      <div class="item"><h1>5</h1></div>
      <div class="item"><h1>6</h1></div>
      <div class="item"><h1>7</h1></div>
      <div class="item"><h1>8</h1></div>
      <div class="item"><h1>9</h1></div>
      <div class="item"><h1>10</h1></div>
      <div class="item"><h1>11</h1></div>
      <div class="item"><h1>12</h1></div>
      <div class="item"><h1>13</h1></div>
      <div class="item"><h1>14</h1></div>
      <div class="item"><h1>15</h1></div>
      <div class="item"><h1>16</h1></div>
      </div>
      <div class="customNavigation">
      <a class="btn prev">Previous</a>
      <a class="btn next">Next</a>
      <a class="btn play">Autoplay</a>
      <a class="btn stop">Stop</a>
      </div>
      <script src="<?php bloginfo('template_url'); ?>/js/jquery-1.9.1.min.js"></script>
      <script src="<?php bloginfo('template_url'); ?>/js/owl.carousel.js"></script>
      <script type="text/javascript">
      var jq191 = jQuery.noConflict(true);
      </script>
      <script>
      $(document).ready(function() {
      var owl = $("#owl-demo");
      owl.owlCarousel({
      items : 10, //10 items above 1000px browser width
      itemsDesktop : [1000,5], //5 items between 1000px and 901px
      itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
      itemsTablet: [600,2], //2 items between 600 and 0;
      itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option

      });
      // Custom Navigation Events
      $(".next").click(function(){
      owl.trigger('owl.next');
      })
      $(".prev").click(function(){
      owl.trigger('owl.prev');
      })
      $(".play").click(function(){
      owl.trigger('owl.play',1000);
      })
      $(".stop").click(function(){
      owl.trigger('owl.stop');
      })

      });
      </script>
      <!-- Demo -->
      <style>
      #owl-demo .item{
      background: #3fbf79;
      padding: 30px 0px;
      margin: 10px;
      color: #FFF;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      text-align: center;
      }
      .customNavigation{
      text-align: center;
      }
      .customNavigation a{
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }
      </style>