Breadcrumb navigation with Wayfinder

11 Posts

vladimir.plokhov Reply #1, 14 years, 5 months ago

I try to do breadcrumb menu with submenus (Modx Evo-1.06). It needs for awesome jQuery plugin. For work it must look like this style:

<ul class="xbreadcrumbs" id="breadcrumbs-1">
                    <li>
                        <a href="#" class="home">Home</a>
                        <ul>
                            <li><a href="#">Scripts</a></li>
                            <li><a href="#">Tutorials</a></li>
                            <li><a href="#">About Us</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Scripts</a>
                        <ul>
                            <li><a href="#">jQuery</a></li>
                            <li><a href="#">MooTools</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">jQuery Framework</a>
                        <ul>
                            <li><a href="#">bgStretcher</a></li>
                            <li><a href="#">QueryLoader</a></li>
                            <li><a href="#">qTip</a></li>
                        </ul>
                    </li>
                    <li class="current"><a href="#">xBreadcrumbs (Extended Breadcrumbs) jQuery Plugin Demo</a></li>
                </ul>

Default breadcrumbs snippet can't build submenus. I try to configure wayfinder for it. For beginning i use http://wiki.modxcms.com/index.php/Breadcrumb_navigation_with_Wayfinder And when I try adding submenus, it does not work as expected... Anybody, who more experienced with wayfinder, help me with this problem, please.

2,310 Posts

bunk58 Reply #2, 14 years, 5 months ago

Untested but try this config file :

<?php	
	$startId = 0;
	$parentClass = '';
	$outerClass = '';
	$selfClass = 'current';
	$outerTpl = '@CODE:<ul class="xbreadcrumbs" id="breadcrumbs-1">
	        [+wf.wrapper+]
	    </ul>';

	$rowTpl = '@CODE:<li [+wf.classes+]><a [+wf.attributes+] href="#" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>';
?>

Name it jquery.config.php
Place it in assets/snippets/wayfinder/configs/
Call it like so :

[!Wayfinder? &config=`jquery`!]

To get the class home for the home page item you'll ned to add

class="home"

in the link attributes field of the home page

11 Posts

vladimir.plokhov Reply #3, 14 years, 5 months ago

Thanks, but It not work as expected too. Problem with structure of wayfinder output. it must looks like:

<ul>
                    <li>
                        <a href="#" class="home">Category</a>
                        <ul>
                            <li><a href="#">Subcategory1</a></li>
                            <li><a href="#">Subcategory2</a></li>
                            <li><a href="#">Subcategory3</a></li>
                            <li><a href="#">Subcategory4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Subcategory2.3(for example - if it is parrent)</a>
                        <ul>
                            <li><a href="#">Subcategory2.3.1</a></li>
                            <li><a href="#">Subcategory2.3.2</a></li>
                            <li><a href="#">Subcategory2.3.3</a></li>
                            <li><a href="#">Subcategory2.3.4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Subcategory2.3.2(for example - if it is parrent)</a>
                        <ul>
                            <li><a href="#">Subcategory2.3.2.1</a></li>
                            <li><a href="#">Subcategory2.3.2.2</a></li>
                            <li><a href="#">Subcategory2.3.2.3</a></li>
                        </ul>
                    </li>
                    <li class="current"><a href="#">Current Item of Subcategory2.3.2.2 (if it is parrent)</a></li>
                </ul>

But wayfinder output always include subcategories childs only in they parrent. And i can't avoid it

11 Posts

vladimir.plokhov Reply #4, 14 years, 5 months ago

I think that with wayfinder it is very hard or impossible... I write my own snippet for this task. Maybe it will be interesting to somebody:

<?php
$menu=array();
$current=$modx->documentIdentifier;
while(1)
{
	if ($current==1) {break;}
	$parent = $modx->getParent($current,'','id');
	$menu[]= $parent['id'];
	$current=$parent['id'];
}
$menu = array_reverse ($menu );
echo('<ul class="xbreadcrumbs" id="breadcrumbs-2">');
foreach($menu as $key => $value)
{
	$document=$modx->getDocument($value);
	$childs=$modx->getChildIds($value,1);
	if ($key==0)
	{
		echo('<li><a href="'.$modx->makeUrl(intval($value)).'" class="home">'.$document["pagetitle"].'</a>' );
	}
	else
	{
		echo('<li><a href="'.$modx->makeUrl(intval($value)).'">'.$document["pagetitle"].'</a>' );
	}
	if (count($childs)>1)
	{
		echo('<ul>');
		foreach($childs as $key_child => $value_child)
		{
			$document_child=$modx->getDocument($value_child);
			echo('<li><a href="'.$modx->makeUrl(intval($value_child)).'">'.$document_child["pagetitle"].'</a></li>' );
		}
		echo('</ul></li>');
	}
}
$current_doc=$modx->getDocument($modx->documentIdentifier);
$current_id=$current_doc['id'];
if (count($menu)>0)
{
	echo('<li class="current"><a href="'.$modx->makeUrl(intval($current_id)).'">'.$current_doc["pagetitle"].'</a></li></ul>');
}
else
{
	echo('<li class="current"><a href="'.$modx->makeUrl(intval($current_id)).'" class="home">'.$current_doc["pagetitle"].'</a></li></ul>');
}
?>

[ed. note: vladimir.plokhov last edited this post 14 years, 5 months ago.]