Post by cssninjah » Fri Mar 29, 2019 8:42 pm

Hi people, here is a short guide how to customize your breadcrubms.

Breadcrubms consist from next: (you should remember that fact that they have not similar structure in every template they are located)

1 .html + twig template

Code: Select all

  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  
2. language (varibale for homepage link) part that located in /catalog/language/en-gb.php

Code: Select all

$_['text_home']             = '<i class="fa fa-home"></i>';
3. contoller output like this (example: /catalog/controller/information/information.php)

Code: Select all

		$data['breadcrumbs'] = array();

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('text_home'),
			'href' => $this->url->link('common/home')
		);
Most common question from people using opencart is like: how to remove link from product name and make them not as ordered list. So i'll try to explain how you can edit them for your desire.

Code: Select all

	<div class="my-breadcrumbs">
        {% for breadcrumb in breadcrumbs %}
        //start of iteration, where breadcrumb is a value of breadcrumbs array key
        
           //custom first breadcrumb (index page link and/or shop name)
           {% if loop.first %}
                <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
                
	   //custom last breadcrumb (product name and link)
            {% if loop.last %}
            //you can remove html tag and get only product name/category name as result
                <span class="last">{{ breadcrumb.text }}</span>
                
            {% else %}
            // output for any breadcrumb that is not first and/or last
                <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
                
            {% endif %}
           //required END of {IF - ELSE} construction
            
        {% endfor %}
         //iteration end
         </div>
If you need just remove last element hyperlink, use this code:

Code: Select all

	<div class="my-breadcrumbs">
                {% for breadcrumb in breadcrumbs %}        
                    {% if loop.last %}
                        <span class="last">{{ breadcrumb.text }}</span>
                    {% else %}
                        <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
                    {% endif %}
                {% endfor %}
         </div>
If you want/need to change default bootstrap style of breadcrumbs you should change class name from "breadcrumb" to any other to exclude styles conflict.

Code: Select all

.my-breadcrumbs {
/* defaults for wrapper*/
}
.my-breadcrumbs a,
my-breadcrumbs a:visited {
/* hyperlink styles*/
}
.my-breadcrumbs a:hover,
.my-breadcrumbs a:active,
.my-breadcrumbs a:focus {
/* css goes here */
}
.my-breadcrumbs .last { /* OR .my-breadcrumbs span {} */
/* css goes here */
}

Hope this guide was helpfull :)
Last edited by cssninjah on Thu Apr 04, 2019 8:59 am, edited 2 times in total.

User avatar
Newbie

Posts

Joined
Fri Mar 29, 2019 7:59 pm

Post by xxvirusxx » Sat Mar 30, 2019 4:16 pm

You should post a screenshot....how it looks.

Active Member

Posts

Joined
Tue Jul 17, 2012 10:35 pm
Location - RO
Who is online

Users browsing this forum: No registered users and 4 guests