[resolved] Ditto Menu: insert spacer div every 4 - exclude .active from count

486 Posts

nickf08 Reply #1, 15 years, 10 months ago

Hello,

I am using a bit of a complicated* way to show thumbnails / captions and would like to use it as an on page product subnav using Wayfinder.
(*the thumb box contains skewed boxes so there is a bit of extra markup to included the top and bottom skewed images.)

I have a wayfinder demo which is pretty close to the mark with the exception of the following tricks.

There are 3 things I am not sure how to do:

1. Every second thumb box (eg every second menu item) requires the opposite skewed borders
Eg
odd’s - skew faces right with:

<div class="thBoxT1"></div>
<div class="thBoxB2"></div>

even’s - skew faces left with:

<div class="thBoxT2"></div>
<div class="thBoxB1"></div>

2. After every four thumb boxes (eg after every four menu items), I need the auto inclusion of a spacer div
Eg

<div class="thSpacer"></div>

3. I would like Wayfinder to auto include the .first, .last and .active classnames like it does with "li" items ([+wf.classnames+]) but it doesn’t seem to way to play ball with my current templates (.active is the one I am most interested in so that I can hide the thumb box for each active page).

How on earth can I make this happen?

This is what I have so far:

Wayfinder Call:

[[Wayfinder? &startId=`3` &level=`2` &titleOfLinks=`description` &sortBy=`alias` &outerTpl=`prodOuter` &rowTpl=`prodsubRow`]]

&outerTpl=`prodOuter`:

<div class="thWrapper">
[+wf.wrapper+]
<div class="clear"></div>
</div>

&rowTpl=`prodsubRow`:

<div class="thBox [+wf.classnames+]">
<div class="thBoxCt">
<a class="th" href="[+wf.link+]" title="[+wf.title+]"><img [+wf.attributes+] height="100" width="100" /></a>
<p><a class="t1" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></p>
</div>
<div class="thBoxT2"></div>
<div class="thBoxB1"></div>
</div>

and this is what I need auto inserted after every four menu items (otherwise the layout will break):

<div class="thSpacer"></div>

and this is what I need in the row templates for odd’s:

<div class="thBoxT1"></div>
<div class="thBoxB2"></div>

and this is what I need in the row templates for even’s:

<div class="thBoxT2"></div>
<div class="thBoxB1"></div>

Is there a count system in Wayfinder? Or some other way to do this?

Anyone care to throw their hat into the ring?

Thanks in advance.

Web design Adelaide
http://gocreate.com.au

4,205 Posts

dev_cw Reply #2, 15 years, 10 months ago

If possible I would consider using Ditto for this. It has the built in altTpl for every other item, the new version (I think it may be the production release) has a count feature that you could extend to work with a snippet or PHx to do something to every fourth item.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

4,205 Posts

dev_cw Reply #3, 15 years, 10 months ago

I was able to reproduce this easily with Ditto 2.1 by doing the following:

1) installing Ditto 2.1

2) set up the tpl chunk with the odd styled output

3) set up the altTpl chunk with the even styled chunk

4) use a custom snippet to display the spacer div after every X number of iterations and use the new ditto_iteration feature in 2.1 to count and identify which iteration is being processed. You can add this snippet at the bottom of both the tpl and altTpl chunks.

Here is the snippet I used for this:
[!setSpacer? &n=`[+ditto_iteration+]` &x=`4` !]
where &n is the input number which is being provided by the ditto_iteration placeholder, and &x is the number of iterations before the spacer div is output.

<?php
$n = isset($n) ? ($n+1) : ""; // iteration - we add one since it starts with 0
$x = isset($x) ? $x : "4"; //  times before adding spacer
$output = "";
if ($n != "") {
    if (($n%$x)==0) { $output = "<div class=\"thSpacer\"></div>"; }
}
return $output;
?>

We could take this further and make this into a PHx modifier or/and use chunk to format the output. The options are endless with MODx.

Hope this helps. grin

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

486 Posts

nickf08 Reply #4, 15 years, 10 months ago

Hello Shane,

Thank you so much for helping me - I really really appreciate it.

My ditto is working really well now with the odd and even templates alternating and the active page being hidden - absolutely awesome.

I just can’t seem to wrap my head around the snippet call and get it working though....

This is what I have so far:

I have created a new snippet and called it: setSpacer

This is my ditto call:

<div class="thWrapper">
[!Ditto? &parents=`3` &display=`all` &tpl=`Even4` &tplAlt=`Odd4` &tplCurrentDocument=`Current4` &sortBy=`pagetitle` &sortDir=`ASC`!]
<div class="clear" /></div>
</div>

This is my even template:

<div class="thBox">
<div class="thBoxCt">
<a href="[~[+id+]~]" class="th" title="[+introtext+]"><img src="[+productThumbTV+]" width="100" height="100"></a>
<p><a href="[~[+id+]~]" class="t1" title="[+introtext+]">[+pagetitle+]</a></p>
</div>
<div class="thBoxT1"></div>
<div class="thBoxB2"></div>
</div>

This is my odd template:

<div class="thBox">
<div class="thBoxCt">
<a href="[~[+id+]~]" class="th" title="[+introtext+]"><img src="[+productThumbTV+]" width="100" height="100"></a>
<p><a href="[~[+id+]~]" class="t1" title="[+introtext+]">[+pagetitle+]</a></p>
</div>
<div class="thBoxT2"></div>
<div class="thBoxB1"></div>
</div>

I interpret this: [!setSpacer? &n=`[+ditto_iteration+]` &x=`4` !]...

... as meaning: [!setSpacer? &n=`[+Ditto? &parents=`3` &display=`all` &tpl=`Even4` &tplAlt=`Odd4` &sortBy=`pagetitle` &sortDir=`ASC`+]` &x=`4` !]

However when I include that in the even and odd templates above like:

<div class="thBox">
<div class="thBoxCt">
<a href="[~[+id+]~]" class="th" title="[+introtext+]"><img src="[+productThumbTV+]" width="100" height="100"></a>
<p><a href="[~[+id+]~]" class="t1" title="[+introtext+]">[+pagetitle+]</a></p>
</div>
<div class="thBoxT1"></div>
<div class="thBoxB2"></div>
</div>
[!setSpacer? &n=`[+Ditto? &parents=`3` &display=`all` &tpl=`Even4` &tplAlt=`Odd4` &sortBy=`pagetitle` &sortDir=`ASC`+]` &x=`4` !]

I get this showing on the actual screen which also upsets the thumb display:

[!setSpacer? &n=`` &x=`4` !]

Sorry for the low level question, but what have I missed??

Thanks and best regards,

Nick

Web design Adelaide
http://gocreate.com.au

623 Posts

cbaone Reply #5, 15 years, 10 months ago

From Mark himself:

Ditto iteration simply counts up from 0 for each item included in the results. So if you had three results, the placeholder would be 0 first, 1 second, and 2 third.

Also, don’t put in the whole ditto call, it needs to be exactly as dev_cw said - [+ditto_iteration+]

Reference this please, http://modxcms.com/forums/index.php/topic,23163.msg160304.html#msg160304

The MODx has you...
Utah Web Design

486 Posts

nickf08 Reply #6, 15 years, 10 months ago

Hello Mark and Shane,

Thanks for that - I tried that initially but it didn;t work for me either.

Then I thought I better do a version check - I initially read my version of Ditto as 2.2 - it actually was 2.0.2. That’s another newbie mistake!!! So have downloaded and installed 2.1 so at least I’m on the same page now.

You can see the count now working as it shows on screen.

This is what’s now in the bottom of the odd and even templates:

[img]

<div class="thBox">
<div class="thBoxCt">
<a href="[~[+id+]~]" class="th" title="[+introtext+]"><img src="[+productThumbTV+]" width="100" height="100"></a>
<p><a href="[~[+id+]~]" class="t1">[+pagetitle+]</a></p>
</div>
<div class="thBoxT2"></div>
<div class="thBoxB1"></div>
</div>
[!setSpacer? &n=`[+ditto_iteration+]` &x=`4` !]

and ditto call is the same:

<div class="thWrapper">
[!Ditto? &parents=`3` &display=`all` &tpl=`Even4` &tplAlt=`Odd4` &tplCurrentDocument=`Current4` &sortBy=`pagetitle` &sortDir=`ASC`!]
<div class="clear" /></div>
</div>

I still get this showing on the actual screen for each thumb box which upsets the thumb display - it does show the count working now though:
[!setSpacer? &n=`` &x=`4` !]

Now all I need to get working is getting the count off screen / stop it breaking the layout and insert the thSpacer div.

What am I missing?

Thanks so much for being coding wizards!!

Web design Adelaide
http://gocreate.com.au

4,205 Posts

dev_cw Reply #7, 15 years, 10 months ago

When using snippets within other snippets you need to alternate the cache settings so that the outer snippet call is uncached [[Ditto?...]] and the embeded one is cached [!setSpacer?...!] (or is it the other way around, I can never remember). This should resolve the problem.

Hope this helps.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

486 Posts

nickf08 Reply #8, 15 years, 10 months ago

Hello Shane,

You are an absolute genius - that works a treat with [[Ditto... and [!setSpacer...

Thank you so much.

All the best

Web design Adelaide
http://gocreate.com.au

486 Posts

nickf08 Reply #9, 15 years, 10 months ago

Hello Shane,

Sorry - me again.

One more question: How do I exclude the .active page from the count?
(Or add +1 extra in the snippet to allow for the .active page? )

At the moment I hide the .active page content with css using display: none (call="thBoxActive"). The active page does not show on screen but it is clearly visible in the source code - and this affects the count dictating when the thSpacer div is included.

I am using the snippet call at the top of each template as I rethought the insertion process - if there are only 4 products I don’t want the thSpacer insertion. If there are 5 I want it inserted above the 5th - and this works a treat on the pages without .active content. But on the .active pages, the thSpacer is inserted too early.

At the top of the Odd and Even Templates I have:
[!setSpacer? &n=`[+ditto_iteration+]` &x=`4` !]

At the top of the current template I have the same (have tried &x=`5`, &x=`3` and not even having it in there) but that doesn’t make a difference.

Any ideas?

Sorry that this is dragging on.

Thanks again and all the best.

Web design Adelaide
http://gocreate.com.au

4,205 Posts

dev_cw Reply #10, 15 years, 10 months ago

The way to do this would be to take advantage of the filtering in Ditto to exclude the current document. Add this to your Ditto call:

&filter=`id,[*id*],2`

This will remove the current document from the results.
Give this a try and see if it does the trick.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]