Ajmal Afif

Shopify theming tips with Bootstrapify

6th August 2014

First of all, I made it a habit to extend files instead of changing them. The reason being is that so if I update Bootstrapify, it will not override the code I've amended or changed.

So there are few times I found myself extending the basic menu to Mega Menu format (credit to this Mega Menu on BootSnipp). These are the files that I changed to make it works:

Checklist

navbar-main.liquid

Change the include navbar snippet (around line 6-8):

{% if settings.main-navbar-linklist %}
{% assign main_linklist = linklists[settings.main-navbar-linklist] %}
  {% if main_linklist %}
  <ul class="nav navbar-nav {% if settings.main-nav-alignment == 'left' %}navbar-left{% elsif settings.main-nav-alignment == 'center' %}navbar-center{% elsif settings.main-nav-alignment == 'right' %}navbar-right{% endif %}">
    {% for l in main_linklist.links %}
    {% include '_pm-navbar-link' %}
    {% comment %}{% include 'navbar-link' %}{% endcomment %}
    {% endfor %}
  </ul>
  {% endif %}
{% endif %}

Notice I replace {% include 'navbar-link' %} with {% include '_pm-navbar-link' %}, as I mentioend earlier, I chose to create new file and extend on top of the default Bootstrapify. So that means the next file we'll look at will be a new file (not necessarily new code though, most of them are recycled).

_pm-navbar-link.liquid

For this snippet, we will call another extend file {% include '_pm-navbar-sub-links' %}:

{% assign submenu = l.title | handleize %}
{% if linklists[submenu].links.size > 0 %}
<li class="{% if l.active %}active{% endif %} dropdown dropdown-large">
  <a href="#" title="{{ l.title }}" class="dropdown-toggle" data-toggle="dropdown">
    {{ l.title }}
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu dropdown-menu-large row">
    <div class="container">
    {% for l in linklists[submenu].links %}
      {% include '_pm-navbar-sub-links' with 0 %}
    {% endfor %}
    </div>
  </ul>
</li>
{% else %}
<li class="{% if l.active %}active{% endif %}">
  <a href="{{ l.url }}" title="{{ l.title | strip_html }}">{{ l.title }}</a>
</li>
{% endif %}

_pm-navbar-sub-links.liquid

The default file had different code than I saw them, which I think it could be for the new built-in mega menu feature. So this is how the original file looks like:

{% assign submenu = l.title | handleize %}
{% assign min_products = settings.hide-collections-with-less-than-this-number-of-products | plus: 0 %}

{% include '__show-link' with submenu %}

{% if show_link %}
{% if linklists[submenu].links.size > 0 %}
<li class="submenu">
  <ul class="nav">
    <li role="presentation" class="dropdown-header">{{ l.title }}</li>
    {% for l in linklists[submenu].links %}
    {% include 'navbar-sub-links' %}
    {% endfor %}
  </ul>
</li>
{% else %}
<li>
  <a tabindex="-1" href="{{ l.url }}" title="{{ l.title }}">{{ l.title }}</a>
</li>
{% endif %}
{% endif %}

This is what I use instead:

{% if _pm-navbar-sub-links < 2 %}
  {% assign submenu = l.title | handleize %}
  {% assign show = true %}
  {% assign min_products = settings.hide-products-with-less-than-this-number-of-products | plus: 0 %}
  {% if l.type == 'collection_link' and l.object.all_products.size <= min_products %}{% assign show = false %}{% endif %}
  {% if linklists[submenu].links.size > 0 and _pm-navbar-sub-links < 1 and show %}
    <li class="submenu">
      <ul class="nav">
        <li class="dropdown-header"><a tabindex="-1" href="{{ l.url }}" title="{{ l.title }}">{{ l.title }}</a></li>
        {% for l in linklists[submenu].links %}
          {% assign show = true %}
          {% if l.type == 'collection_link' and l.object.all_products.size <= min_products %}{% assign show = false %}{% endif %}
          {% if show %}
          {% assign level_count = _pm-navbar-sub-links | plus: 1 %}
          {% include '_pm-navbar-sub-links' with level_count %}
          {% endif %}
        {% endfor %}
      </ul>
    </li>
  {% else %}
  <div class="col-sm-3 menu-spacing">
    <a class="hb-menu-link" tabindex="-1" href="{{ l.url }}" title="{{ l.title }}">
      <li class="item-{% cycle '1', '2', '3', '4' %}">{{ l.title }}</li>
    </a>
  </div>
  {% endif %}
{% endif %}
    Add custom bootstrap slider inside Bootstrapify themeNested class with cycle operator in Shopify's Liquid

comments powered by Disqus