Skip to content

Instantly share code, notes, and snippets.

@zoerooney
Last active September 7, 2016 03:38
Show Gist options
  • Save zoerooney/2f5a5ae07bee820c9a4d to your computer and use it in GitHub Desktop.
Save zoerooney/2f5a5ae07bee820c9a4d to your computer and use it in GitHub Desktop.
Shopify product breadcrumbs showing tag-based subcategories. Full tutorial here: http://zoerooney.com/blog/tutorials/shopify-product-breadcrumbs-with-tag-support/
<div class="breadcrumbs">
<a href="/" class="homepage-link">Home</a>
{% if collection.handle %}
&gt;
{% capture url %}/collections/{{ collection.handle }}{% endcapture %}
<a href="{{ collection.url }}" class="collection-link">{{ collection.title }}</a>
{% endif %}
<span class="bc-tags"></span><!-- this is a placeholder for the tag if there is one -->
</div> <!-- end .breadcrumbs -->
<script>
// get URL parameter (added in the grid link)
tag = window.location.search.substring(1).split("=")[1];
jQuery(document).ready(function($){
// get the active menu item (the top level item)'s text - could be different than the collection title
// if you might have more than one active item in your nav structure, you may need to be more specific
var parent = $('.active').text();
// update the displayed collection title to match the nav item label
$('.collection-link').text(parent);
// check if there's a URL parameter for the tag
if ( tag ) {
console.log(tag); // output it in console for debugging
// find the nav item for this tag using the data attribute for the slug
var tagElement = $('a[data-tag-slug="' + tag + '"]');
// get the display name from the other data attribute
var tagname = tagElement.data('tag-name');
// output the tag link in the placeholder area
$('.bc-tags').html(' &gt; <a href="/{{ collection.url }}/' + tag + '">' + tagname + '</a>');
} else {
// output a message to console if there's no parameter, for debugging
console.log('sorry, no tag parameter here');
}
});
</script>
<ul>
{% for link in linklists.main-menu.links %}
{% assign handle = link.title | handle %}
<li>
<a{% if link.active %} class="active"{% endif %} href="{{ link.url }}">{{ link.title }}</a>
{% if linklists[handle].links.size > 0 %}
<ul class="child">
{% assign parenthandle = link.url | remove: '/collections/' %}
{% for link in linklists[handle].links %}
<li>
<a href="{{ link.url }}" data-tag-slug="{{ link.url | remove: '/collections/' | remove: parenthandle | remove: '/' }}" data-tag-name="{{ link.title }}" >
{{ link.title }}
</a>
</li>
{% endfor %}
</ul> <!-- end .child -->
{% endif %}
</li>
{% endfor %}
</ul>
@Informer
Copy link

Informer commented Jan 8, 2016

Hi Zoe.

Nice resource. Just to a quick note to say that your blog/tutorials link is down!!

@georgebutter
Copy link

Bump! Tutorial link is still down. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment