Forum

Thread tagged as: Question

Single Page List Detail With Category Filters

I'm trying to put together a single list-detail page listing attractions with a category listing in the sidebar that would filter the list of attractions by the categories they belong to, which is what I'm currently stuck on.

The code for the list-detail page looks like so:

<?php

perch_content_create('Attractions', array(
 'template'   => 'attractions/attraction.html',
 'multiple'    => true,
 'edit-mode' => 'listdetail',
));

?>
    <?php
if (perch_get('s')) {
echo'';
 // Detail mode
 perch_content_custom('Attractions', array(
      'template' => 'attractions/attraction.html',
      'filter' => 'slug',
      'match' => 'eq',
      'value' => perch_get('s'),
      'count' => 1,
 )); 


} else {

 // List mode
  echo'<div class="container-fluid">
  <div class="row center-xs">
    <div class="col-xs-12 col-sm-10 col-md-4 col-lg-3" style="margin-bottom:2rem;">
      <h1 class="pageTitle">Attractions</h1><span></span>
    </div>
  </div>
</div>';
  echo'<div class="container-fluid"><div class="row"><div class="col-xs-12 col-sm">';
  echo'<p>Categories</p>';

if (perch_get('cat')) {
      perch_category(perch_get('cat'),array(
        'template'=>'categories/attraction_category.html'
    ));
    perch_content_custom('Attractions', array(
      'template' => 'attractions/attraction_listing.html',
      'page'=>'/attractions',
      'category' => perch_get('cat')
    ));
    } else {
      perch_categories();
    }

echo'</div>';
 perch_content_custom('Attractions', array(
      'template' => 'attractions/attraction_listing.html',
 )); 
 echo'</div></div>';
}

?>

The listing and detailing works fine, and the listing of categories shows up, but when I click on a category link, it shows an empty content area with header and footer. The debug message on that page is as follows:


Debug Message SELECT * FROM perch2_pages WHERE pagePath='/attractions/index.php' LIMIT 1 SELECT regionKey, regionHTML FROM perch2_content_regions WHERE regionPage='/attractions/index.php' OR regionPage='*' ORDER BY regionPage DESC Using template: /templates/search/search-form.html SELECT regionID, regionTemplate, regionPage, regionRev AS rev FROM perch2_content_regions WHERE regionKey='Attractions' AND (regionPage='/attractions/index.php' OR regionPage='*') SELECT * FROM ( SELECT idx.itemID, c.regionID, idx.pageID, c.itemJSON, idx2.indexValue as sortval FROM perch2_content_index idx JOIN perch2_content_items c ON idx.itemID=c.itemID AND idx.itemRev=c.itemRev AND idx.regionID=c.regionID JOIN perch2_content_index idx2 ON idx.itemID=idx2.itemID AND idx.itemRev=idx2.itemRev AND idx2.indexKey='_order' WHERE ((idx.regionID=37 AND idx.itemRev=66)) AND ((idx.indexKey='slug' AND idx.indexValue='downtown-bloomington/')) AND idx.itemID=idx2.itemID AND idx.itemRev=idx2.itemRev ) as tbl GROUP BY itemID ORDER BY sortval ASC LIMIT 0, 1 Using template: /templates/content/attractions/attraction.html Using sub-template: /templates/content/attractions/attraction_maps.html SELECT DISTINCT settingID, settingValue FROM perch2_settings WHERE userID=0

My guess on my problem is that while there is a listing function for the categories, there is no detail function, so it doesn't show anything. I'm not sure how to get to that from where I'm at though. I'd want to use the same attraction_listing template for listing the attractions within a category.

I'm on 2.8.6.

Gary Iverson

Gary Iverson 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

What does your URL look like when you filter by category?

On the page: /attractions/historical-places/ and in the template <a href="/<perch:category id="catPath" />">

Should it have a query string?

Drew McLellan

Drew McLellan 2638 points
Perch Support

Are you using Runway?

No, regular perch.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Do you have rewrite rules in place for those paths?

I do.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Ok, so rewrites historical-places to ?cat=historical-places ?

If so, you'll need to add the set name to the front to create a full category path.

It's rewriting the attractions slug

RewriteRule ^attractions/([a-zA-Z0-9-/]+)$ /attractions/?s=$1 [L]

for each individual attraction in the list-detail setup in a subfolder called attractions. Not the categories, at least that's not my intention. Though looking at it that may be what it's doing.

So the link to the categories in the attractions set needs to look like href="attractions/<perch:category id="catPath" />" ?

Drew McLellan

Drew McLellan 2638 points
Perch Support

You don't need to change the link. You just need to make sure you use the set name to form a full category path when filtering on the category.

'category' => 'your-set-slug/'.perch_get('cat')

Okay, so that goes into the second function?

if (perch_get('cat')) {
      perch_category(perch_get('cat'),array(
        'template'=>'categories/attraction_category.html'
    ));
    perch_content_custom('Attractions', array(
      'template' => 'attractions/attraction_listing.html',
      'page'=>'/attractions',
      'category' => 'attractions/'.perch_get('cat')
    ));
    }
    else{

      perch_categories(array(
        'category' => 'attractions/'.perch_get('cat')

        ));
 }

I still need to put something in the detail mode section of the code for the filtered result to show up on the page, right?

Drew McLellan

Drew McLellan 2638 points
Perch Support

Did that bit work?

Can you list out the states the page displays in?

No, that did not work. Thinking about it, I don't need a detail section for the categories because it's filtering the list mode.

The page displays in list mode with a list of categories in a sidebar, and detail mode. Here's the link to the dev site if it's helpful in visualizing: https://vc.garyriverson.com/attractions/

Drew McLellan

Drew McLellan 2638 points
Perch Support

So:

  1. List of attractions
  2. Attraction detail
  3. ???

And category links which filter on the list of attractions, if that counts as a third mode.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Like this?

  1. List of attractions (all)
  2. Attraction detail
  3. List of attractions by category

Yes, that's right.

Drew McLellan

Drew McLellan 2638 points
Perch Support

So the framework of your code should be something like:

$match_found = false;


if (perch_get('cat')) {
    ... show listing by category ...
    $match_found = true;
}

if (perch_get('s')) {
    ... show item detail ...
    $match_found = true;
}

if (!$match_found) {
    ... show listing ....
}

Okay, the categories list is now persistent, but the listing by category still does not appear.

This is what I've got:


<?php $match_found = false; perch_content_create('Attractions', array( 'template' => 'attractions/attraction.html', 'multiple' => true, 'edit-mode' => 'listdetail', )); // Detail mode if (perch_get('s')) { perch_content_custom('Attractions', array( 'template' => 'attractions/attraction.html', 'filter' => 'slug', 'match' => 'eq', 'value' => perch_get('s'), 'count' => 1, )); $match_found = true; } echo'<div class="container-fluid"> <div class="row center-xs"> <div class="col-xs-12 col-sm-10 col-md-4 col-lg-3" style="margin-bottom:2rem;"> <h1 class="pageTitle">Attractions</h1><span></span> </div> </div> </div> <div class="container-fluid"><div class="row"><div class="col-xs-12"> <p>Categories</p>'; // Show categories list perch_categories(array('category' => 'attractions/'.perch_get('cat'))); if (perch_get('cat')) { // Show attractions from selected category perch_category(perch_get('cat'),array( 'template'=>'categories/attraction_category.html', )); perch_content_custom('Attractions', array( 'template' => 'attractions/attraction_listing.html', 'category' => 'attractions/'.perch_get('cat') )); $match_found = true; } echo'</div></div></div>'; // Listing mode if (!$match_found) { echo'<div class="container-fluid"><div class="row"><div class="col-xs-12">'; perch_content_custom('Attractions', array( 'template' => 'attractions/attraction_listing.html' )); echo'</div></div></div>'; } ?>

Maybe you'll see something in the templates that I'm missing, so here they are:

Attractions from selected category

<a href="/attractions/<perch:category id="catPath" />"><perch:category id="catTitle" type="smarttext" label="Title" required="true" /></a>
<perch:category id="catSlug" type="slug" for="catTitle" suppress="true" />
<perch:category id="desc" type="textarea" label="Description" editor="redactor" html="true" size="xs" />

Listing

<div class="row">
    <div class="col-xs col-sm-2">
        <img src="<perch:content id="attrImage" type="image" label="Main Image" bucket="Attractions"/>">
    </div>
    <div class="col-xs col-sm-6">
        <h3><a href="/attractions/<perch:content id="slug" type="slug" />"><perch:content id="attrPlaceName" type="text" /></a></h3>
    </div>
 </div>

Detail

<section class="pageHeader" style="background:url(<perch:content id="attrImage" type="image" order="2" label="Main Image" bucket="Attractions"/>);background-size:cover;background-position:center center;"></section>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
        <nav class="breadcrumbs">
        <a href="/">Home</a> / <a href="/attractions">Attractions</a> / <span><perch:content id="attrPlaceName" type="text" label="Place name"/></span>
        </nav>
        <h1 style="border-bottom:1px solid #ddd;margin-bottom:0;"><perch:content id="attrPlaceName" type="text" order="1" title="true" label="Place name"/></h1>
        <div class="row">
            <div class="col-xs col-sm-4">
                <p><perch:categories id="attrCategory" label="Category" set="attractions" divider-before="Categories" required="true"><a class="attrCatLink" href="/<perch:category id="catPath" />"><perch:category id="catTitle" /></a></perch:categories></p>
            </div>
            <div class="col-xs col-sm-3 col-md-3">
                <p><i class="fa fa-usd <perch:if id="cost" value="10" match="gte">active</perch:if>"></i><i class="fa fa-usd <perch:if id="cost" value="20" match="gte">active</perch:if>"></i><i class="fa fa-usd <perch:if id="cost" value="30" match="gte">active</perch:if>"></i><i class="fa fa-usd <perch:if id="cost" value="31" match="gte">active</perch:if>"></i></p>
<perch:content id="cost" type="select" options="$0-10|10|,$10-20|20, $20-30|30 ,$30+|31" label="Cost" suppress="true" divider-before="Attraction Cost"/>
            </div>


        </div>

        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-8">
         <h2 style="font-size:1.25rem;"><perch:content id="marketingIntro" order="2" type="textarea" size="s" label="Intro" help="One sentence to describe/attract."/></h2>
         <perch:content id="attrDescription" type="textarea" divider-before="Details" order="3" html="true" editor="redactor" size="l" label="Description"/>
         </div>

        <div class="col-xs-12 col-sm col-sm-offset-1" style="border-left:1px solid rgba(0,0,0,0.1);padding-left:2rem;">
                    <div class="blockCard time">
                    <p>Hours
                    <perch:if exists="mondayHours"><br>Monday: <perch:content id="mondayHours" type="text" label="Monday Hours" divider-before="Hours"/></perch:if>
                    <perch:if exists="tuesdayHours"><br>Tuesday: <perch:content id="tuesdayHours" type="text" label="Tuesday Hours"/></perch:if>
                    <perch:if exists="wednesdayHours"><br>Wednesday: <perch:content id="wednesdayHours" type="text" label="Wednesday Hours"/></perch:if>
                    <perch:if exists="thursdayHours"><br>Thursday: <perch:content id="thursdayHours" type="text" label="Thursday Hours"/></perch:if>
                    <perch:if exists="fridayHours"><br>Friday: <perch:content id="fridayHours" type="text" label="Friday Hours"/></perch:if>
                    <perch:if exists="saturdayHours"><br>Saturday: <perch:content id="saturdayHours" type="text" label="Saturday Hours"/></perch:if>
                    <perch:if exists="sundayHours"><br>Sunday: <perch:content id="sundayHours" type="text" label="Sunday Hours"/></perch:if>
                    </p>
                    </div>

                    <div class="blockCard map" style="margin-top: 1.75rem;">
            <address>
            <perch:template path="content/attractions/attraction_maps.html" />
            </address>
            <p><span class="telephone"><perch:content id="attrPhone" type="text" label="Phone number" order="7"/></span>
            <br><span class="website"><a href="<perch:content id="attrWeb" type="url" label="Website URL" order="8" help="Prefix with https://"/>" target="_blank">Visit website</a></span></p>
            <p><a class="attrGetDirections" href="https://google.com/maps?q=<perch:content id="attrAddress" type="text" label="Address"/>+<perch:content id="attrCity" type="text" label="City"/>+<perch:content id="attrState" type="select" label="State"/>" target="_blank">Get Directions</a></p>
</div>

            <perch:repeater id="attrImages" label="Images" max="3" divider-before="Additional images">  
                <perch:before>
                    <div class="row top-xs attrMorePhotos">
                        <div class="col-xs-12">
                        <h3>More photos</h3>

                </perch:before>
                <div style="margin-bottom:1rem;">
                <a rel="lightbox" href="<perch:content id="attrImageAdd" type="image" bucket="Attractions" label="Image" density="3"/>" data-fluidbox>
                <img src="<perch:content id="attrImageAdd" type="image" bucket="Attractions" label="Image" />" alt="<perch:content id="attrImageAddCaption" type="textarea" label="Caption"/>" srcset="<perch:content id="attrImageAdd" type="image" bucket="Attractions" label="Image" density="2" /> 2x, <perch:content id="attrImageAdd" type="image" bucket="Attractions" label="Image" density="3" /> 3x">
                </a>
                <span><perch:content id="attrImageAddCaption" type="textarea" size="xs" label="Caption"/></span>
                </div>
                <perch:after>
                        </div>
                    </div>
                </perch:after>
            </perch:repeater>
        </div>
    </div>
</div>
<perch:content id="slug" for="attrPlaceName" type="slug" suppress="true" />
Drew McLellan

Drew McLellan 2638 points
Perch Support

Which part is your listing by category?

I've been trying to use the second one, the Listing template.