Forum

Thread tagged as: Question, Problem

Data select isn't working correctly.

Perch: 3.0.8, PHP: 7.0.19, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: b5c5906d452ec590732a93b051f3827e02749b83 $, with PDO
Server OS: Linux, cgi-fcgi
Installed apps: content (3.0.8), assets (3.0.8), categories (3.0.8)
App runtimes: <?php $apps_list = [ ];
PERCH_LOGINPATH: /test/christie/perch
PERCH_PATH: /home/studiowolf/domains/studiowolf.be/public_html/test/christie/perch
PERCH_CORE: /home/studiowolf/domains/studiowolf.be/public_html/test/christie/perch/core
PERCH_RESFILEPATH: /home/studiowolf/domains/studiowolf.be/public_html/test/christie/perch/resources
Image manipulation: GD
PHP limits: Max upload 64M, Max POST 64M, Memory: 128M, Total max file upload: 64M
F1: 0c66c2e1f82f9e0b7617b2cb8270f2c7
Resource folder writeable: Yes
SCRIPT_NAME: /test/christie/perch/core/settings/diagnostics/index.php
REQUEST_URI: /test/christie/perch/core/settings/diagnostics/
DOCUMENT_ROOT: /home/studiowolf/domains/studiowolf.be/public_html
HTTP_HOST: studiowolf.be

Hello,

I've just installed the latest Perch 3 version. I want a data-select for this page: https://studiowolf.be/test/christie/shop-christies-interieur-perch.php. When customer uploads a new product, he/she can choose a product categorie (antiques, lighting, tables, ...). When there is a visitor, he can select a categorie in the top bar to only display the correct items. https://studiowolf.be/test/christie/categories.php

Portfolio filter on shop-christies-interieur-perch.php

<li class="activeFilter"><a href="#" data-filter="*">Show all products</a></li>
                        <li><a href="#" data-filter=".pf-antiques">Antiques</a></li>
                        <li><a href="#" data-filter=".pf-lighting">Lighting</a></li>
                        <li><a href="#" data-filter=".pf-storage">Storage</a></li>
                        <li><a href="#" data-filter=".pf-tables">Tables</a></li>
                        <li><a href="#" data-filter=".pf-mirrors">Mirrors</a></li>
                        <li><a href="#" data-filter=".pf-accessories-objects">Accessories and Objects</a></li>
                        <li><a href="#" data-filter=".pf-seating">Seating</a></li>
                        <li><a href="#" data-filter=".pf-other">Other</a></li>
<?php perch_content('shop-toevoegen'); ?>

shop-toevoegen.html:

<article class="col-md-3 portfolio-item <perch:content id="category" type="dataselect" label="Selecteer Product categorie" page="/categories.php" region="Categories" options="categoryName" values="categorySlug" />">  
                        <div class="portfolio-image">
                            <a href="#">
                                <img src="<perch:content id="images" type="image" label="Afbeelding product" width="400px" height="300px" crop="true" />" >
                            </a>
                        </div>
                        <div class="portfolio-desc-b">
                            <h3><perch:content id="titel_product" type="smarttext" label="Unieke titel product" required="true" title="true" /></h3>
                            <span><perch:content id="body" type="textarea" label="Korte beschrijving product" html="true" editor="ckeditor" size="m" required="false" /><br><a href="mailto:shop@christiesinterieur.be?SUBJECT=Question%20about%20<perch:content id="titel_product" type="text" label="Unieke titel product" required="true" escape="true" urlencode="true" />" class="button button-border button-rounded button-fill button-dark"><span>Meer info</span></a></span>
                        </div>
                    </article>  

categories.php

<p><?php perch_content('categorie-toevoegen'); ?></p>

categories.html

<perch:content id="categoryName" type="text" label="Category name" required="true" />
<perch:content id="categorySlug" type="slug" for="categoryName" hidden="true" />

What am I doing wrong? Is a less complex configuration possible instead of working with an extra categories.php page?

Kind Regards, Frederic

Frederic Desauw

Frederic Desauw 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

I don't really follow. What problem are you seeing?

categories I see the data-select in the CMS, but it doesn't work. I don't see the different categories (like lighting, tables, mirrors, ...). It's empty. When I'll be able to select a categorie, the image filter will work on the page.

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Hello Frederic,

If I understand correctly, I think you want:

  1. To be able to select a category in the product edit form
  2. To filter by category to display products from that category on a page

For (1), assuming all product categories are in a set called 'Products' you can add this to your template:

<perch:categories id="category" set="products" label="Category">
</perch:categories>

For (2), have a look at the Category Filtering in the documentation.

Hope this helps!

I don't understand 100%. So I have to place the perch:categories in my shop-toevoegen.html file like this? How/where can I define the products set?

<article class="col-md-3 portfolio-item <perch:categories id="category" set="products" label="Selecteer Product categorie"> ">  

                        <div class="portfolio-image">
                            <a href="#">
                                <img src="<perch:content id="images" type="image" label="Afbeelding product" width="400px" height="300px" crop="true" />" >
                            </a>
                        </div>
                        <div class="portfolio-desc-b">
                            <h3><perch:content id="titel_product" type="smarttext" label="Unieke korte titel product" required="true" title="true" /></h3>
                            <span><perch:content id="body" type="textarea" label="Korte beschrijving product (max 200 karakters)" html="true" editor="ckeditor" size="m" required="false" /><br><a href="mailto:shop@christiesinterieur.be?SUBJECT=Question%20about%20<perch:content id="titel_product" type="text" label="Unieke titel product" required="true" escape="true" urlencode="true" />" class="button button-border button-rounded button-fill button-dark"><span>Meer info</span></a></span>
                        </div>
                    </article>      
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

To add a set:

  1. Log in to Perch
  2. Click on Categories
  3. Add a set (top right)
  4. Add your product categories (Antiques, Lighting, etc) to the Products set

You may also find the Category Template documentation helpful.

I don't see the solution. Maybey I have to make it more clear.

This is my original filter on my html page, now php:

<ul id="portfolio-filter" class="portfolio-filter clearfix" data-container="#portfolio">
                        <li class="activeFilter"><a href="#" data-filter="*">Show all products</a></li>
                        <li><a href="#" data-filter=".pf-antiques">Antiques</a></li>
                        <li><a href="#" data-filter=".pf-lighting">Lighting</a></li>
                        <li><a href="#" data-filter=".pf-storage">Storage</a></li>
                        <li><a href="#" data-filter=".pf-tables">Tables</a></li>
                        <li><a href="#" data-filter=".pf-mirrors">Mirrors</a></li>
                        <li><a href="#" data-filter=".pf-accessories-objects">Accessories and Objects</a></li>
                        <li><a href="#" data-filter=".pf-seating">Seating</a></li>
                        <li><a href="#" data-filter=".pf-other">Other</a></li>
                    </ul>
                    <div id="portfolio-shuffle" class="portfolio-shuffle" data-container="#portfolio">
                        <i class="icon-random"></i>
                    </div>

When selecting f.e. "Antiques", the data-filter sorts the articles with ".pf-antiques", in the class of the article:

<article class="col-md-3 portfolio-item pf-antiques">
                        <div class="portfolio-image">
                            <a href="#">
                                <img src="images/shop/8.jpg" alt="lighting">
                            </a>
                        </div>
                        <div class="portfolio-desc-b">
                            <h3>Antiques product A</h3>
                            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a risus suscipit, tincidunt massa et, interdum nunc.<br><a href="mailto:info@website.com?SUBJECT=Question%20about%20Antiques%20product%20A" class="button button-border button-rounded button-fill button-dark"><span>More information</span></a></span>
                        </div>
                    </article>

What is the best way to do this? I suppose replace the pf-antiques in <article class="col-md-3 portfolio-item pf-antiques"> with some perch content?

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Ok so you just want to to add a class to the <article> with the Category's slug prefixed by pf-?

<article class="col-md-3 portfolio-item <perch:categories id="category" set="products" label="Selecteer Product categorie">pf-<perch:category id="catSlug" /></perch:categories> "> 

This still requires you to have all the categories in a set called Products. You can call it whatever you want, just change the set value in your code.

OK this works! Thx a lot!

One other question: how can I limit to choose only 1 option/category?

Now I can choose more categories, but then the datafilter doesn't work. Solution is to make a second perch:categories, then it works, but I can still choose multiple categories within 1 perch-categories.

<article class="col-md-3 portfolio-item <perch:categories id="category" set="products" label="Selecteer Product categorie">pf-<perch:category id="catSlug" /></perch:categories> <perch:categories id="categoryB" set="products" label="Selecteer tweede product categorie (indien nodig)">pf-<perch:category id="catSlug" /></perch:categories> ">
Drew McLellan

Drew McLellan 2638 points
Perch Support

You can use max="1"

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

You can add a max attribute to your <perch:categories> to specify the maximum number of categories that can be selected:

<perch:categories id="category" set="products" max="1" label="Selecteer Product categorie">pf-<perch:category id="catSlug" /></perch:categories>