Hi guys,

I'm trying to wrap my head around how to approach a clients website needs, if anyone has any suggestions or ideas to make achieving the desired outcome easier, please do let me know!

The website is a "Dress hire" website, our client does not have any wishes for E-commerce, but we do need to display all of the available dresses on the site, in the past they've just been listed on one long page with some anchor tags linking to the section of dresses (for example, if you click a designers name in the top-menu, you'll be taken to that block of dresses). This site is 15 years old and obviously that's no longer good for UX.

We're converting the entire site to couch, we plan to use the gallery template for all of the dresses, what we want to be able to do is have some various tags to add to each dress (that fit those tags). We don't want overly complex filtering, but the client would like to be able to filter by colour, designer (name), collection (name of collection), type of dress (wedding, ball, prom etc etc).

As far as I've been able to think about it, the easiest possible way is to use relations for each of the different filter categories (especially designers, because they will require some other information for each designer, like a small write-up.). The same for dress types, I'm unsure if it's the best way to go for the colours? But I would assume so.

The collections is probably going to be the folders inside of the gallery template (easier for sorting and also URLs, because each will be inside their respective collection).

What I'm really trying to wrap my head around for now is how I would incorporate this into the front-end to provide searching by these specific things, we don't really want to have seperate pages for each filter (this is bad for seo but also what would happen if somebody had multiple filter queries?).

It's likely the solution will be to use javascript filtering of some sort to filter the outputted images to show only the ones in the selected filter searches. I've never achieved something like this so I'm wondering if there's an easy or specific way to do it? and how would it tie in to couch (and difficult using relations?).
Sorry if it's a little confusing, it is only a concept right now while I try to wrap my head around how exactly to achieve it, the clients current site has one of the highest rankings on google in its area, which is very difficult to achieve so everything we do has to be analysed carefully for how it's going to affect the SEO of the site, ideally we would have just one list-view of dresses which is filterable via javascript for the user. but I'm not sure how to achieve it.

Dave

One idea is to filter using a Couch form and the custom_field parameter of the pages tag.

So, on the back end each dress is a page in a clonable template. The template includes dropdown menus (if there can be only one filter criteria in that category) or checkboxes (if there can be multiple true conditions) for each of the filter categories.

The list view of the front end page includes a form for filtering using matching dropdowns and/or checkboxes. So you show only the list view including all of the dresses. The user can filter the entire list based on their criteria.

This is a rough draft based on a similar filter I've used.

Code: Select all

<cms:form id="filter" method="post" anchor='0'>
    <cms:if k_success>
        <!--build the filter-->
        <cms:if frm_category1 != '-' >
            <cms:set filter="<cms:concat filter 'category1=' frm_category1 />"  scope='global'/>
        </cms:if>
            
        <cms:if frm_category2 != '-' >
            <cms:set filter="<cms:concat filter ' | category2=' frm_category2 ' />"  scope='global'/>
        </cms:if>
            
        <cms:if frm_category3 != '-' >
            <cms:set filter="<cms:concat filter ' | category3=' frm_category3 />"  scope='global'/>
        </cms:if>       
    </cms:if>

        <!--the filter form-->
    <p><strong>Filter by:</strong><br/>
        <cms:input type="dropdown" name="category1"
           opt_values='Category1=- | Choice1 | Choice2 | Choice3 | Choice4'/><br />

        <cms:input type="dropdown" name="category2" 
         opt_values='Category2=- | Choice1 | Choice2 | Choice3 | Choice4'/><br />

        <cms:input type="dropdown" name="category3" 
         opt_values='Category3=- | Choice1 | Choice2 | Choice3 | Choice4'/><br />
    </p>
    
       <cms:input name="submit" type="submit" value="Apply Filter" />

       <input name="clear" type="button" value="Clear Filter" onclick="window.location.href=window.location.href" />

</cms:form>

        <!--display the results-->
    <cms:pages masterpage='dresses.php' custom_field="<cms:show filter />">
       Display page content however you like.
    </cms:pages>

Don't know if this is what you want, but it's simple and straightforward, takes advantage of the power of Couch, maintains the single page seo juju, and completely sidesteps potentially messy javascript coding. The filter refreshes the page, so the UX won't be as snappy as javascript.

Since you're feeling kind of muddled, I'd suggest you start with simple. Add on from there only as necessary.

Anyway, it's an idea and a start. Hope it helps.

P.S. I'm pretty sure I lifted this almost verbatim from the documentation. I wish I remembered where.

Here's an idea for a javascript-based solution. Again, we'll need some dropdowns and checkboxes in the back end so the administrator can assign the dresses to the right categories.

Code: Select all

<cms:editable name='color' 
    label="Color" desc="Check all that are available"
    opt_values='Carmine | Pumpernickel | Puce | Pearly Gates=white | Persimmon | Slate | Poppy Seed=poppy-seed'
    required='1'
    type='checkbox' />

<cms:editable name='designer'
    label="designer"
    opt_values='Jimmy | Claudio | Klara | Bert & Klive=bert-klive'
    required='1'
    type='dropdown' />
        
<cms:editable name='collection'
    label="Collection"
    opt_values='Poofy | Slinky | Semi-formal | Casual'
    type='dropdown' />

<cms:editable name='type'
    label="Type"
    opt_values='Wedding | Ball | Prom '
    required='1'
    type='dropdown' />

On the front end we'll populate the element's class with these categories.

Code: Select all

<cms:pages>
   <div class="<cms:each color/> <cms:show designer/> <cms:if collection><cms:show collection></cms:if> <cms:show type/>">
      Pictures, text, prices, and such in here.
   </div>
</cms:pages>

Now you can use javascript to show/hide each item based on its class names.

I've never used relations myself, so I won't speak to that, but I'm sure you'll be able to figure out how to integrate relationships and dynamic folders into this basic framework.