Forum

Thread tagged as: Question, Suggestions, Runway

Repeater inside related content.

I have a collection that has a repeater used for a gallery/slideshow.

I'm able to populate the collection as expected, however when I try to add in as related to the page (using template below) - I'm able to select my product's description, but the repeater for the gallery is not being rendered. The repeater does show up when editing the page, but because of that it doesn't link/relate to the original content from the collection.

I'm not sure if there is some other syntax I should be using in <perch:related> that will indicate to the system that the repeater is part of the related content.

I did poke around the forum, and found a couple that had a similar problem - but since they were from a year or more ago, I wanted to check in to see if there was anything new.

<perch:related id="gallery" collection="myProducts" label="Select a product">
 <section class="main-container padding-bottom-clear">

        <div class="container">
          <div class="row">

            <!-- main start -->
            <!-- ================ -->
            <div class="main col-12">
              <h3 class="title"><strong><perch:content id="heading" type="text" label="Heading" required title></strong></h3>
              <div class="separator-2"></div>
              <div class="row">
                <div class="col-lg-6"><perch:content id="body" type="textarea" label="Body"  editor="redactor" html="true" imagewidth="800">
                </div>
                <div class="col-lg-6">
                  <div class="slick-carousel content-slider-with-controls">
                    <perch:repeater id="carousel_items" label="Slideshow images">
                        <div class="overlay-container overlay-visible">
                          <img src="<perch:content id="carouselImage" type="image" width="800" label="Image" bucket="carouselImages"/>" alt="">
                          <a href="<perch:content id="carouselImage" type="image" width="1600" label="Image" bucket="carouselImages"/>" class="slick-carousel--popup-img overlay-link" title="<perch:content id="carousel_img_alt" type="text" label="Text" />"><i class="fa fa-plus"></i></a>
                        </div>
                    </perch:repeater>
                  </div>
                </div>
              </div>
            </div>
            <!-- main end -->

          </div>
        </div>
</section>
</perch:related>
Raymond Wiggins

Raymond Wiggins 0 points

  • 2 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

2 years ago

I don't think there's anything new on this - it remains an open issue.
Raymond Wiggins

Raymond Wiggins 0 points

2 years ago

For others, my workaround was to have the content loaded in via AJAX. May not be the most elegant solution, but it works as expected.

<perch:related id="gallery" collection="myProducts" label="Select a product">

$(document).ready(function(){
    $( "#contenthere" ).load( "/incProductMain.php?id=<perch:content id="slug" type="slug" for="heading" editable>", function() {
    });
}); 
</script>
<div id="contenthere"></div>
</perch:related>

and for incProductMain.php

<?php include('perch/runtime.php'); ?>
<?php
$myLocation = "defaultCollectionItem";
if (isset($_GET['id'])) {
    $myLocation=$_GET['id'];
}

perch_collection('myProducts', [
        'filter'   => 'slug',
        'match'       => 'eq',
        'value' => $myLocation
    ]);

?>