Symphony.

Wow! Sites in the Showcase section always amaze me.

Whisky Connosr looks like a community-driven review site. I’d love to get some behind-the-scenes on how that was implemented. Did it require a lot of extensions? It’s pretty amazing what Symphony can do.

Yes, quite impressive.

That is quite amazing!

I concur!

Whisky Connosr I think it is one of the best Symphony implementation in the showcase.

Thanks for the shout guys, much appreciated.

I’ve got quite a lot on at the moment but I will pen an insight and share with you soon :-)

Cheers

Jean-Luc

Excellent.

look forward to it. Even wonder about little details, like the anchor browsing of the alfabethic wiskeys, that happens not with #anchors but with /anchors in the url param.
Is that the extension to get clean GET’s in your urlbar?

newnomad: That was done with jQuery and the jQuery-Plugin scrollTo:

    $('ol.list-az li a').live("click", function() {
        letter = '#' + $(this).text();
        $.scrollTo($(letter.toLowerCase()), 800, {
            offset: { top: -30 },
            onAfter: function() {}
        });
        return false;
    });

As long as you return false, the default event (browsing to the link’s URL) will not be executed and the page will simply scroll.

GET-variables have nothing to do with it because 1. its not a GET-variable and 2. scrolling has nothing to do with the server.

So, do you block these in robots.txt, or do they get spidered as 404s?

@phoque

I realised how the animation was done, I have used scrollTo before, in the localscroll plugin. I had just set it up to extend normal anchorlink behavior. I just was puzzled how this could have be done without the anchorlinks, for a moment I thought the # were cleaned by modrewrite, like the ? and : were cleaned/replaced in the clean url parameters extension

So basicly indeed its just setup to listen to the links in the a to z list. Not fully clear how the jquery identifies the whiskey it should scroll to, they have no id classes? So it just uses jquery to find the first instance of a list with name with first letter as selected?

Advantages I see:

• exact control over position (anchors: safari tends to just put in viewport, not at top)
• clean urls

Disadvantages I see:

• not degradable/no fallback, no JS is no effect?
• links are not spidered…then again the headers with class are….

any other thoughts on how to handle these kinds of scrollto things in innovative ways?

And no spidering either?

I imagine the intention is to make the actual URI spiderable i.e. /b/ will reload the page just with the B bottles visible. But it’s a good example of hijacking links with unobtrusive JavaScript.

Each letter has markup like this <h2 id="e">E<h2>, to which line 2 of the JavaScript above builds a reference ('#' + letter). That should be enough to figure it out ;-)

nickdunn: yup

newnomad: no, you cannot use mod_rewrite as it can only do serverside URL-manipulations. In this case the browser never sends a request.

@ nick thanks, thats crystalclear, I somehow didn’t spot the letters with their id in the markup at first. In fact the actual URI isn’t spiderable, there is no param set for the letters, and you get a 404 when you try. The question is ofcourse if it is usefull to be spidered…
Since the entire page, and its titles are spidered, the scrolling is merely a behaviour thing and not a content thing? I am fascinated too about hijacking links with unobtrusive JavaScript, but am not fully convnced yet about this method VS actual anchors extended with the animation.

@ phoque, doh! true, anchors are all clientside, so not rewritable with apache. Athough the URI can be rewritten with JS, so that would possibly be another way to achieve this effect; use normal #anchors, but rewrite them as /anchor, just to have a clean look.(what I am really after) And then catch the links as described?

Well lets see what Jean Luc has to say about not using a url handle for the letters and the effect on SEO.

Old thread I know, but I'm very interested in getting the same functionality in the Whiskies section whereby alphabetical links are disabled when a no whisky begins with that letter.

How is that done in Symphony?

You could use a named template with a param that runs over all letters like so:

<xsl:template name="alphabet">
    <xsl:param name="number" select="1"/>
    <xsl:number value="$number" format="a"/>        
    <xsl:if test="$number &lt;= 26">
        <xsl:call-template name="alphabet">
            <xsl:with-param name="number" select="$number + 1"/>
        </xsl:call-template>
    </xsl:if>
</xsl:template>

This would give you a list from a-z. Not very useful, yet, but when you add a little more logic:

<xsl:template name="alphabet">
    <xsl:param name="number" select="1"/>
    <xsl:choose>
        <xsl:when test="/data/whisky/entry[substring(title@handle,1,1) = format-number($number, 'a')]">
            <a href="{$root}/whiskies/{format-number($number, 'a')}"><xsl:number value="$number" format="a"/></a>
        </xsl:when>
        <xsl:otherwise>
            <xsl:number value="$number" format="a"/>
        </xsl:otherwise>
    </xsl:choose>
    <xsl:if test="$number &lt;= 26">
        <xsl:call-template name="alphabet">
            <xsl:with-param name="number" select="$number + 1"/>
        </xsl:call-template>
    </xsl:if>
</xsl:template>

... you should get a nice clickable list. Of course, you can add more fancy stuff here, like a nice list, but I think you get the idea:)

Note: untested!

Hi Huib,

Thanks for this. You're suggesting I do this in the template using XPath and a generated list of titles. This was going to be my fall-back method, though I was worried that when the product list gets too long there would be performance and memory issues.

If I could create a cacheable datasource that does the same I could avoid these performance issues for every page load.

Was thinking that if I had a static data source

<alphabet>
    <letter>a</letter>
    <letter>b</letter>
    ...etc.
</alphabet>

could I filter that by the first letter of all the product names? Ideally filter the alphabet data source with a regexp that tests "Is this the first letter of any of these products?". I can't seem to find a MySQL regexp that can do this...

@tim, I think you're best off writing a custom DS then.

To get you started, you could use query like this: select substring(d.handle, 1,1) as letter from sym_entries_data_1 as d where d.handle regexp '^[a-zA-Z]' group by letter order by d.handle asc to get you the letters that have products starting with it. You can then use that in the XSLT I pasted above.

Edit: if you only want a-z characters, that is. If you don't mind having 1-9 (or other characters) in the list, feel free to leave the regex out of it. The query runs pretty darn fast on my machine (less than a 100ms on 300k records), but be sure to check if it does so on your server, too. Grouping and Regexing are known to be quite slow if you don't have the proper indexes set.

Thank you @huib! Your example not only did the trick perfectly, but also helped me take the step from chaining and modifying standard datasources to writing my own from scratch.

I was going to ask if there's a way of determining which tables relate to which fields without trawling through them looking for values that fit, but your thread here answers that question for now. A very interesting discussion I'll be keeping an eye on.