0

I want to create a bootstrap carousel with a enclosing schortcode.

The final shortcode will be something like this:
[product_carousel][product id="1"][product id="2"][product id="3"][/product_carousel]

The shortcode [product id="X"] already works and has this as a output:

<div class="col-sm-4">
    <div class="thumb-wrapper">
        <div class="img-box">
            <img src="image-url" class="img-responsive img-fluid" alt="">
        </div>
        <div class="thumb-content">
            <h4>Title</h4>
            <p>Description</p>
            <form method="post" action="action-url" style="display: inline-block;">
                <button type="submit" class="theme-button" value="11" name="id[]">Value</button>
            </form>
            <a href="some-url" class="theme-button">Value</a>
        </div>
    </div>
</div>

Above code needs to be inserted in a carousel template which can be found here.

Simplyfied HTML

<div class="container">
  <div class="row">
    <div class="col-md-10 col-center m-auto">
      <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
          <div class="item carousel-item">
            <div class="row">
             <!-- Start of shortcode [product id="1"] -->
              <div class="col-sm-4">
                <div class="thumb-wrapper">
                  <div class="img-box">
                    <img src="http://via.placeholder.com/2500x2000" class="img-responsive img-fluid" alt="">
                  </div>
                  <div class="thumb-content">
                    <h4>Rio De Janeiro</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam.</p>
                    <a href="#" class="btn btn-primary">More <i class="fa fa-angle-right"></i></a>
                    <a href="#" class="btn btn-primary">More <i class="fa fa-angle-right"></i></a>
                  </div>
                </div>
              </div>
              <!-- End of shortcode [product id="1"] -->
              <!-- Start of shortcode [product id="2"] -->
              <!-- End of shortcode [product id="2"] -->
              <!-- Start of shortcode [product id="3"] -->
              <!-- End of shortcode [product id="3"] -->
            </div>
          </div>
        </div>
        <!-- Carousel controls -->
        <a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
          <i class="fa fa-angle-left"></i>
        </a>
        <a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
          <i class="fa fa-angle-right"></i>
        </a>
      </div>
    </div>
  </div>
</div>

The output of the shortcodes need to be loaded between <!-- Start of shortcode [product id="X"] --> and <!-- End of shortcode [product id="X"] -->.

But when I have more carousel items than 3 lets say 6 I have to repeat

<div class="item carousel-item">
    <div class="row">
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
    </div>
</div>
<div class="item carousel-item">
    <div class="row">
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
          <!-- Start of shortcode [product id="X"] -->
          <!-- End of shortcode [product id="X"] -->
    </div>
</div>

How can I achieve this? Do I have to use more shortcodes?
I.e. [product_carousel][slide][product id="1"][product id="2"][product id="3"][/silde][slide][product id="4"][product id="5"][product id="6"][/silde][/product_carousel]

  • in your shortcode "product_carousel" you retrieve the product shortocdes list in $content before shortcode are rendered. then you can group them as you want. – mmm Jan 9 '18 at 13:34
0

Here is my solution:

function getProductCarousel($atts) {
    $productIds = explode(',',$atts['product_ids']);
    ?>
        <div class="col-center m-auto">
          <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
            <!-- Carousel indicators -->
            <ol class="carousel-indicators">
            <?php $slide = 0; ?>
            <?php foreach($productIds as $index => $productId) { ?>
                <?php if ($index % 3 == 0) { ?>
                    <li data-target="#myCarousel" data-slide-to="<?= $slide++; ?>" <?= $index == 0 ? 'class="active"': ''; ?>></li>
                <?php } ?>
            <?php } ?>
            </ol>
            <!-- Wrapper for carousel items -->
            <div class="carousel-inner">
                <div class="item carousel-item active">
                    <div class="row">
                        <?php foreach($productIds as $index => $productId) { ?>
                            <?php if ($index % 3 == 0 && $index > 0) { ?>
                                </div></div>
                                <div class="item carousel-item"><div class="row">
                            <?php } ?>
                            <?= getSingleProduct(['id' => $productId]); ?>
                        <?php } ?>
                    </div>
                </div>
            </div>
            <!-- Carousel controls -->
            <a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
              <i class="fa fa-angle-left"></i>
            </a>
            <a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
              <i class="fa fa-angle-right"></i>
            </a>
          </div>
        </div>
    <?php
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.