Forum

Thread tagged as: Question

repeater and carousel on detail page

In the middle of my product detail template I have the code for a standard bootstrap carousel, using a repeater so that the customer can add a number of images, which is great.

The problem is that above the repeater section is an un-ordered list for the carousel indicators(the spots you can click on to skip to an image). The amount of list items(spots) should be dependent on the number of images that have been added in the repeater section e.g. 4 images 4 spots

The template pages are html, so even if I could get the item_count from the repeater section I can't see how I can do this dynamically with PHP.

Is there a way around this or do I have to rely on Javascript to inject the dom elements into the page instead?

Part of the code is below. Thanks.

<div class='itemBox'>
                    <perch:categories id="categories" label="Machine Types" set="Machines" required="true"/>
                    <h4 class='itemTitle'><perch:content id="model" type="text" label="Machine Model" required="true" title="true" /></h4>
                    <div id="machinesCarousel" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ul class="carousel-indicators">
                            <li data-target="#machinesCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#machinesCarousel" data-slide-to="1"></li>
                            <li data-target="#machinesCarousel" data-slide-to="2"></li>
                            <li data-target="#machinesCarousel" data-slide-to="3"></li>
                            <li data-target="#machinesCarousel" data-slide-to="4"></li>
                        </ul>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <perch:repeater id="slideimages" label="Slide Images" max="5">
                            <perch:if exists="perch_item_first">
                            <div class="item active">
                            <perch:else />
                            <div class="item">
                            </perch:if>
                                <perch:content id="image" type="image" label="Image" output="tag" />
                            </div>
                            </perch:repeater>
                        </div>

                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#machinesCarousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#machinesCarousel" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <h3 class='separator'>Details</h3>
                    <div class='item'>
                        <perch:content id="desc" type="textarea" label="Description" textile="true" editor="markitup" />
                        <h4 class='price'>Price: <perch:content id="price" type="text" label="Price" /></h4>
                    </div>
                </div>
            </div>

Russell Gooday 0 points

4 years ago

Simon Clay 127 points

4 years ago

Hi Russell,

Here's how I do it:

On the page:

<?php 

//create the region
    perch_content_create('Banner Slides', array(
        'template' => 'carousel.html',
        'multiple' => true,
        'edit-mode' => 'listdetail',
        'columns' => 'title, image',
    ));


// perch content custom for the indicators  
    perch_content_custom('Banner Slides', [
        'template'=>'_carousel_indicators.html',
      ]);

// perch content for the slides
    perch_content('Banner Slides'); 

?>

Template for _carousel_indicators.html:

<perch:before>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
          <ol class="carousel-indicators">
</perch:before>
            <li data-target="#carousel-example-generic" data-slide-to="<perch:content id="perch_item_zero_index" />" <perch:if exists="perch_item_first">class="active"</perch:if>></li>
<perch:after>
          </ol>
</perch:after>

carousel.html template:

<perch:before>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
</perch:before>

        <div class="item <perch:if exists="perch_item_first">active</perch:if>">
            <img src="<perch:content type="image" id="image" label="Image" width="1920" height="700" crop="true" bucket="banners" />" alt="<perch:content type="text" id="heading" label="Heading" title="true" />">
            <div class="carousel-caption">
                <h2><perch:content type="text" id="heading" label="Heading" title="true" /></h2>
                    <perch:content id="text" type="textarea" label="Text" html="true" editor="redactor" imagewidth="750" imageheight="480" />
                </div>
            </div>
        </div>

<perch:after>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</perch:after>

Russell Gooday 0 points

4 years ago

Thanks a lot for that Simon. A bit frazzled at the moment, but I will have a look through your solution.

I did manage to solve it with a bit of javascript, but would prefer to use perch/php if possible.

Simon Clay 127 points

4 years ago

I know the feeling :)

I'm pretty sure I made a version using repeaters that only needed one template and one call to perch_content on the page. I'll see if I can dig it out.