help with mobile only page sidebar menu

New Member
1 0 0

Hello,

I'm currently using the theme Icon from Underground and I am trying to figure out how to show the side bar menu as a side navigation menu for my page templates.  similar to the collections page side bar menu for mobile screens.

 

currently the theme page template is:

 

<div data-section-id="{{ section.id }}" data-section-type="page-section">

{% if section.settings.page_size == 'full_width' %}
<div class="gridlock-fluid">
{% endif %}

<div id="content" class="row grid_wrapper">
{% include 'breadcrumb' %}

<div class="section-title span-12">
<h1>{{ page.title }}</h1>
</div>

{% capture sidebar %}
<div class="desktop-3 tablet-2 mobile-hide span-3" id="page_sidebar">
{% for block in section.blocks %}
{% if block.type == 'collection' %}
<div class="collection_side_block">
{%- assign collection = collections[block.settings.collection] -%}
{%- assign prod_limit = block.settings.limit -%}
<h4>{{ collection.title }}</h4>
{% for product in collection.products limit: prod_limit %}
<div class="product-index" id="prod-{{ product.id }}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
{% include 'product-listing' %}
</div>
{% endfor %}
</div>
{% elsif block.type == 'menu' %}
<h4>{{ block.settings.title }}</h4>
<div class="sidebar_menu rte-accordion">
{% for link in linklists[block.settings.side_nav].links %}
{% if link.links != blank %}
<div class="extend has_sub_menu item" aria-haspopup="true" aria-expanded="false">
<input class="trigger" id="item-{{ forloop.index }}" type="checkbox" name="items">
<label class="accordion-label" for="item-{{ forloop.index }}"><span class="item-heading"><a href="{{ link.url }}">{{ link.title }}</a></span></label>
<div class="item-content">
{% for sub_link in link.links %}
<span class="item-heading"><a href="{{ sub_link.url }}">{{ sub_link.title }}</a></span>
{% endfor %}
</div>
</div>
{% else %}
<span class="item-heading">{{ link.title | link_to: link.url }}</span>
{% endif %}
{% endfor %}
</div>

{% elsif block.type == 'image' %}
{%- assign image_size = '450x' -%}
<div class="image_container" {% if forloop.index == 1 %}style="margin-top:0;"{% endif %}>
<a href="{{ block.settings.link }}">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: image_size }}" alt="{{ block.settings.image.alt }}">
{% else %}
{{ 'collection-3' | placeholder_svg_tag }}
{% endif %}
</a>
</div>
{% elsif block.type == 'text_note' %}
<div class="textnote_container">
{% if block.settings.textbox_heading != blank %}<h4>{{ block.settings.textbox_heading }}</h4>{% endif %}
{% if block.settings.textbox_subheading != blank %}
<div class="subheading{% if block.settings.subheading_align == 'center' %} center{% endif %}">
{{ block.settings.textbox_subheading }}
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
{% endcapture %}


{% case section.settings.sidebar_positon %}

{% when 'left' %}
{% if section.settings.page_size == 'thin' %}
{%- assign width = 'desktop-6 tablet-4 span-6' -%}
{% endif %}
{% if section.settings.page_size == 'full_page' or section.settings.page_size == 'full_width' %}
{%- assign width = 'desktop-9 tablet-4 span-9' -%}
{% endif %}

{% when 'right' %}
{% if section.settings.page_size == 'thin' %}
{%- assign width = 'desktop-6 desktop-push-3 tablet-4 span-6 push-3' -%}
{% endif %}
{% if section.settings.page_size == 'full_page' or section.settings.page_size == 'full_width' %}
{%- assign width = 'desktop-9 tablet-4 span-9' -%}
{% endif %}

{% when 'none' %}
{% if section.settings.page_size == 'thin' %}
{%- assign width = 'desktop-8 desktop-push-2 tablet-4 tablet-push-1 span-8 push-2' -%}
{% endif %}
{% if section.settings.page_size == 'full_page' or section.settings.page_size == 'full_width' %}
{%- assign width = 'desktop-12 tablet-6 span-12' -%}
{% endif %}

{% endcase %}

{% if section.settings.sidebar_positon == 'left' %}
{{ sidebar }}
{% endif %}

<div id="page_content" class="{{ width }} mobile-3">
<div class="rte">
{{ page.content }}
</div>
</div>

{% if section.settings.sidebar_positon == 'right' %}
{{ sidebar }}
{% endif %}

</div>

{% if section.settings.page_size == 'full_width' %}
</div>
{% endif %}

</div>


{% schema %}
{
"name": "Page",
"max_blocks":8,
"settings": [
{
"type": "select",
"id": "page_size",
"label": "Page size",
"options": [
{
"value": "thin",
"label": "Thin"
},
{
"value": "full_page",
"label": "Full size"
},
{
"value": "full_width",
"label": "Full browser width"
}
]
},
{
"type": "select",
"id": "sidebar_positon",
"label": "Sidebar position",
"options": [
{
"value": "none",
"label": "No sidebar"
},
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
}
],
"blocks":[
{
"type":"menu",
"name":"Menu",
"settings":[
{
"type": "link_list",
"id": "side_nav",
"label": "Sidebar menu",
"info":"This menu has limited support for dropdown items"
},
{
"type": "text",
"id": "title",
"label": "Menu title",
"default": "Explore"
}
]
},
{
"type": "collection",
"name": "Collection",
"settings": [
{
"label": "Collection",
"id": "collection",
"type": "collection"
},
{
"type": "range",
"id": "limit",
"min": 1,
"max": 10,
"step": 1,
"label": "Number of products",
"default": 4
}
]
},
{
"type":"image",
"name":"Image",
"settings":[
{
"type":"image_picker",
"id":"image",
"label":"Image"
},
{
"type":"url",
"id":"link",
"label":"Link",
"info":"Optional"
}
]
},
{
"type":"text_note",
"name":"Text",
"settings":[
{
"type":"text",
"id":"textbox_heading",
"label":"Heading",
"default": "Heading"
},
{
"type":"richtext",
"id":"textbox_subheading",
"label":"Subheading",
"default": "<p>Subheading</p>"
},
{
"type": "select",
"id": "subheading_align",
"options": [
{ "value": "left", "label": "Left"},
{ "value": "center", "label": "Center"}
],
"label": "Subheading alignment"
}
]
}
]
}
{% endschema %}

 

and for the collection sidebar snippet :

 

<div id="sidebar" class="sidebar{% if section.settings.is_sticky %} is_sticky{% endif %}">
  <div class="sidebar__inner">
 
        {% if collection.image %}
          {% include 'basic-responsive-image' | type: collection.image %}
          <noscript>
            <img src="{{ collection.image | img_url: '300x' }}" alt="{{ collection.image.alt }}">
          </noscript>
        {% endif %}
 
          {% comment %}
          Include block settings for collection template to add sidebar menus
          {% endcomment %}
 
        {% for block in section.blocks %}
          {% include 'filters' %}
          {% if block.type == 'vendor_list' %}
            {% if collection.handle == "all" %}
              <div class="filter" {{ block.shopify_attributes }}>
                <button class="filter-menu">
                  <h4>{{ block.settings.shop_by_designer_title }}</h4>
                </button>
                <ul class="filter-list">
                  {% for product_vendor in shop.vendors %}
                  <li>{{ product_vendor | link_to_vendor  }}</li>
                  {% endfor %}
                </ul>
              </div>
            {% else %}
              <div class="filter" {{ block.shopify_attributes }}>
                <button class="filter-menu">
                  <h4>{{ block.settings.shop_by_designer_title }}</h4>
                </button>
                <ul class="filter-list">
                  {% for product_vendor in collection.all_vendors %}
                  <li class="{{ product_vendor | handelize }}">{{ product_vendor | link_to_vendor }}</li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
    
          {% elsif block.type == 'menu' %}
                <div class="filter" {{ block.shopify_attributes }}>
              <h4>{{ block.settings.title }}</h4>
              <div class="sidebar_menu rte-accordion">
                {% for link in linklists[block.settings.side_nav].links %}
                  {% if link.links != blank %}
                    <div class="extend has_sub_menu item" aria-haspopup="true" aria-expanded="false">
                      <input class="trigger" id="item-{{ forloop.index }}" type="checkbox" name="items">
                      <label class="accordion-label" for="item-{{ forloop.index }}"><span class="item-heading"><a href="{{ link.url }}">{{ link.title }}</a></span></label>
                      <div class="item-content">
                        {% for sub_link in link.links %}
                        <span class="item-heading"><a href="{{ sub_link.url }}">{{ sub_link.title }}</a></span>
                        {% endfor %}
                      </div>
                    </div>
                  {% else %}
                    <span class="item-heading">{{ link.title | link_to: link.url }}</span>
                  {% endif %}
                {% endfor %}
    </div>
                  </div>
                  <div class="clear"></div>
    
          {% elsif block.type == 'image' %}
            {%- assign image_size = '450x' -%}
            <div class="image_container" {% if forloop.index == 1 %}style="margin-top:0;"{% endif %}>
              <a href="{{ block.settings.link }}">
                {% if block.settings.image != blank %}
                  <img src="{{ block.settings.image | img_url: image_size }}" alt="{{ block.settings.image.alt }}">
                {% else %}
                  {{ 'collection-3' | placeholder_svg_tag }}
                {% endif %}
              </a>
            </div>
          {% elsif block.type == 'text_note' %}
            <div class="textnote_container">
              {% if block.settings.textbox_heading != blank %}<h4>{{ block.settings.textbox_heading }}</h4>{% endif %}
              {% if block.settings.textbox_subheading != blank %}
                <div class="subheading{% if block.settings.subheading_align == 'center' %} center{% endif %}">
                  {{ block.settings.textbox_subheading }}
                </div>
              {% endif %}
            </div>
          {% endif %}
        {% endfor %}
    </div>
</div>

 

and last the filters snippet:

 

{% if block.type == 'sort_by' %}
<div class="filter {% cycle '', 'right-filter' %}" {{ block.shopify_attributes }}>
<button class="filter-menu">
<h4>{{ block.settings.sort_by_title }}</h4>
</button>
<ul class="filter-list" id="sort-by" style="display: none;">
<li><a href="/collections/{{ collection.handle }}?sort_by=manual">{{ 'collections.sorting.featured' | t }}</a></li>
<li><a href="/collections/{{ collection.handle }}?sort_by=price-ascending">{{ 'collections.sorting.price_ascending' | t }}</a></li>
<li><a href="/collections/{{ collection.handle }}?sort_by=price-descending">{{ 'collections.sorting.price_descending' | t }}</a></li>
<li><a href="/collections/{{ collection.handle }}?sort_by=title-ascending">{{ 'collections.sorting.az' | t }}</a></li>
<li><a href="/collections/{{ collection.handle }}?sort_by=title-descending">{{ 'collections.sorting.za' | t }}</a></li>
<li><a href="/collections/{{ collection.handle }}?sort_by=created-ascending">{{ 'collections.sorting.date_ascending' | t }}</a></li>
<li><a href="/collections/{{ collection.handle }}?sort_by=created-descending">{{ 'collections.sorting.date_descending' | t }}</a></li>
<li><a href="/collections/{{ collection.handle }}?sort_by=best-selling">{{ 'collections.sorting.best_selling' | t }}</a></li>
</ul>
<script>
Shopify.queryParams = {};
if (location.search.length) {
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
jQuery('#sort-by')
.val('{{ collection.sort_by | default: collection.default_sort_by }}')
.bind('change', function() {
Shopify.queryParams.sort_by = jQuery(this).val();
location.search = jQuery.param(Shopify.queryParams);
});
$(document).on('shopify:section:load', function(event) {
jQuery('#sort-by')
.val('{{ collection.sort_by | default: collection.default_sort_by }}')
.bind('change', function() {
Shopify.queryParams.sort_by = jQuery(this).val();
location.search = jQuery.param(Shopify.queryParams);
});
});
</script>
</div>
{% endif %}

{% if block.type == 'filter' %}
<div class="filter {% cycle '', 'right-filter' %}" {{ block.shopify_attributes }}>
<button class="filter-menu">
<h4>{{ block.settings.filter_by_title }}</h4>
</button>
<ul class="filter-list{% if block.settings.filter_by_title contains "Color" or block.settings.filter_by_title contains "Colour" %} color-filter{% endif %}" style="display: none;">
{% assign tags = block.settings.filter_by | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}
{% for tag in tags %}
{% assign is_color = false %}
{% capture color_filter %}{{ block.settings.filter_by_title | downcase }}{% endcapture %}

{% if color_filter contains 'color' or color_filter contains 'colour' %}
{% assign swatch_image_url = tag | handle | append: '.png' | file_url %}
{% assign css_color = tag | split: ' ' | last | handle %}
{% assign is_color = true %}
{% endif %}

{% if current_tags contains tag %}
<li data-variant-image="{{ variant_image_url }}" class="current">{% if is_color %}<span style="background-color: {{ css_color }}; background-image: url('{{ swatch_image_url }}');" class="color_filter"></span>{% endif %}{{ tag | link_to_remove_tag: tag }}</li>
{% elsif collection.all_tags contains tag %}
<li data-variant-image="{{ variant_image_url }}">{% if is_color %}<span style="background-color: {{ css_color }}; background-image: url('{{ swatch_image_url }}');" class="color_filter"></span>{% endif %}{{ tag | link_to_add_tag: tag }}</li>
{% endif %}
{% endfor %}
</ul>
<script>
Shopify.queryParams = {};
if (location.search.length) {
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
delete Shopify.queryParams.page;
var newTags = [];
collFilters.each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
{% if collection.handle %}
var newURL = '/collections/{{ collection.handle }}';
if (newTags.length) {
newURL += '/' + newTags.join('+');
}
var search = jQuery.param(Shopify.queryParams);
if (search.length) {
newURL += '?' + search;
}
location.href = newURL;
{% else %}
if (newTags.length) {
Shopify.queryParams.constraint = newTags.join('+');
}
else {
delete Shopify.queryParams.constraint;
}
location.search = jQuery.param(Shopify.queryParams);
{% endif %}
});

$(document).on('shopify:section:load', function(event) {
Shopify.queryParams = {};
if (location.search.length) {
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
delete Shopify.queryParams.page;
var newTags = [];
collFilters.each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
{% if collection.handle %}
var newURL = '/collections/{{ collection.handle }}';
if (newTags.length) {
newURL += '/' + newTags.join('+');
}
var search = jQuery.param(Shopify.queryParams);
if (search.length) {
newURL += '?' + search;
}
location.href = newURL;
{% else %}
if (newTags.length) {
Shopify.queryParams.constraint = newTags.join('+');
}
else {
delete Shopify.queryParams.constraint;
}
location.search = jQuery.param(Shopify.queryParams);
{% endif %}
});
});
</script>
</div>
{% endif %}

 

 

 

Can someone please help me fix this issue 

 

my store link is: https://slimesbychelsie.com/

password: SBC-developer

 

0 Likes