Template source: classes/display_classes.html

{% extends "base.html" %} {% load loc_tags %} {% load load_html_tags %} {% load dictionary_tags %} {% block addMetaTags %} {% if subcat_slug %} {% if cat_slug == "dance" or cat_slug == "music-and-instruments" %} <meta name="description" content="{{seo_category_text}} lessons for kids in {{loc}}. {% include 'activities/elements/subcategory_meta.html' with subcategory=subcat_slug %}"> {% elif cat_slug == "academicslanguages" %} <meta name="description" content="{{seo_category_text}} tutors for kids in {{loc}}. {% include 'activities/elements/subcategory_meta.html' with subcategory=subcat_slug %}"> {% else %} <meta name="description" content="{{seo_category_text}} classes and camps for kids in {{loc}}. {% include 'activities/elements/subcategory_meta.html' with subcategory=subcat_slug %}"> {% endif %} {% elif cat_slug %} {% with data=subcategories|keyvalue:cat_slug %} {% if cat_slug == "dance" or cat_slug == "music-and-instruments" %} <meta name="description" content="{{seo_category_text}} lessons in {{loc}} {% if data %}, {% for key, value in data.items %}{{value.name}}{% if forloop.counter != subcategories|keyvalue:cat_slug|length %}, {% endif %}{% endfor %}{% endif %}."> {% elif cat_slug == "academicslanguages" %} <meta name="description" content="{{seo_category_text}} tutors in {{loc}} {% if data %}, {% for key, value in data.items %}{{value.name}}{% if forloop.counter != subcategories|keyvalue:cat_slug|length %}, {% endif %}{% endfor %}{% endif %}."> {% else %} <meta name="description" content="{{seo_category_text}} classes and camps in {{loc}} {% if data %}, {% for key, value in data.items %}{{value.name}}{% if forloop.counter != subcategories|keyvalue:cat_slug|length %}, {% endif %}{% endfor %}{% endif %}."> {% endif %} {% endwith%} {% else %} <meta name="description" content="Classes and Camps for kids in {{loc}} for {% for category in categories %}{{category.name}}{% if forloop.counter != categories|length %},{% endif %} {% endfor %}"> {% endif %} {% endblock %} {% block titleTag %} {% if cat_slug == "dance" or cat_slug == "music-and-instruments" %} <title> {{seo_category_text}} lessons for kids in {{loc}} </title> {% elif cat_slug == "academicslanguages" %} <title> {{seo_category_text}} tutors for kids in {{loc}} </title> {% else %} <title> {% if seo_category_text %}{{seo_category_text}} classes{% else %}Classes{% endif %} and camps for kids in {{loc}} </title> {% endif %} {% endblock %} {% block loadAdditionalCSS %} {% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static 'css/classesandcamps.css' %} "> {% endblock %} {% block content %} <br> {% include "locations/change_location_template.html" %} <div class="container-fluid"> {% if cat_slug == "dance" or cat_slug == "music-and-instruments" %} {% include "activities/elements/classes-page-title.html" with title=""|add:seo_category_text|add:" lessons for kids in "|add:loc %} {% elif cat_slug == "academicslanguages" %} {% include "activities/elements/classes-page-title.html" with title=""|add:seo_category_text|add:" tutors for kids in "|add:loc %} {% else %} {% include "activities/elements/classes-page-title.html" with title=""|add:seo_category_text|add:" Classes and Camps for kids in "|add:loc %} {% endif %} <div class="col-sm-3 col-md-3 side-nav-panel"> <div class="panel-group pushmenu-left mobile-filter" id="accordion"> <h4 style = "color:#999;"> <b> Show results for </b> </h4> {% for category in categories %} {% with cat_name_slug=category.name_slug %} <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{cat_name_slug}}" id="{{cat_name_slug}}"> <span class="glyphicon glyphicon-chevron-down pull-right"> </span> <a href="/classes-camps/{{cat_name_slug}}/{{city_name_slug}}">{{category.name}}</a> </a> </h4> </div> <div id="collapse{{cat_name_slug}}" class="panel-collapse collapse"> <div class="panel-body"> <ul class="menu"> {% with data=subcategories|keyvalue:cat_name_slug %} {% for key, value in data.items %} <li><a href= "/classes-camps/{{value.slug}}/{{city_name_slug}}" id="{{value.slug}}" onClick="ga('send', {'hitType': 'event', 'eventCategory': 'ClassesAndCampsLeftNavSubCatLink', 'eventAction': 'clickAction', 'eventLabel': 'clickedSubCatLink' });">{{value.name}}</a></li> {% endfor %} {% endwith%} </ul> </div> </div> </div> {% endwith %} {% endfor %} <form id ="checkboxesform"> <div class="form-group checkboxes"> <h4 style = "color:#999;"> <b> Refine by </b> </h4> <b> Age Group </b> <br/> <input type="checkbox" id = "opt1" name="opt1"/> Teens (13-19) <br/> <input type="checkbox" id = "opt2" name="opt2"/> Youth (8-12) <br/> <input type="checkbox" id = "opt3" name="opt3"/> Early Youth (5-7) <br/> <input type="checkbox" id = "opt4" name="opt4"/> Pre-school <br/> <input type="checkbox" id = "opt5" name="opt5"/> Toddlers <br/> </div> <div class="form-group checkboxes"> <b> Class Type </b> <br/> <input type="checkbox" id = "topt1" name="topt1" /> Class <br/> <input type="checkbox" id = "topt2" name="topt2" /> Camp <br/> <input type="checkbox" id = "topt3" name="topt3" /> Full Day <br/> <input type="checkbox" id = "topt4" name="topt4" /> Half Day <br/> <input type="checkbox" id = "topt5" name="topt5" /> Private Lesson <br/> <input type="checkbox" id = "topt6" name="topt6" /> Overnight Camp <br/> </div> </form> </div><!--accordion--> </div> <div class="col-lg-9 col-md-9 col-sm-9"> {% for session in sessions %} {% include "classes/class_listing/display_class.html" %} {% endfor%} {% if not sessions %} {% if '?' in request.get_full_path %} <span style="color:#FF8C00"> There are no classes/camps matching your filter criteria.<br> Please change your filters or try browsing <a href="/kidsactivities/all-providers/{{city_name_slug}}">Activity Providers</a> in the area. </span> {% else %} <span style="color:#FF8C00"> There are currently no classes listed in this region.<br> Check out <a href="/kidsactivities/all-providers/{{city_name_slug}}">Activity Providers</a> in the area. </span> {% endif %} {% endif %} </div> </div> </br> {% endblock %} {% block loadAdditionalJS %} <!-- Common JS --> {% include "activities/elements/script.html" %} <script> $menuLeft = $('.pushmenu-left'); $nav_list = $('.nav_list'); $nav_list.click(function () { $(this).toggleClass('active'); $('.pushmenu-push').toggleClass('pushmenu-push-toright'); $menuLeft.toggleClass('pushmenu-open'); }); // when a subcategory is selected we refresh the page $('.menu a').on('click', function() { $('.selected').removeClass('selected'); $(this).addClass('selected'); $('#main_search_box input').val(''); $('#checkboxesform')[0].reset(); refresh(); }); // when the main search button is pressed, we clear all the checkboxes $('#search_form').on('submit', function(e) { $('#checkboxesform')[0].reset(); }); // function to refresh the page, encoding current state of the page, // such as the checkboxes on the button, the field to sort on, // and the value of the search box on the top of the page var refresh = function() { var formData = $("#checkboxesform").serialize(); var sortingData = $('#sort_select').serialize(); var searchBox = $('#main_search_box input').serialize(); {% if category %} {% if cat_name == "Dance" or cat_name == "Music and Instruments" %} var url = "{% url 'dance_or_music_classes_url' category city_name_slug %}?" + formData + "&" + sortingData + "&" + searchBox; {% else %} var url = "{% url 'classes_camps_category' category city_name_slug %}?" + formData + "&" + sortingData + "&" + searchBox; {% endif %} {% else %} var url = "{% url 'classes_camps_all' city_name_slug %}?" + formData + "&" + sortingData + "&" + searchBox; {% endif %} window.location = url; }; $("#sort_select").change(refresh); var url_params = getUrlParameters(window.location.toString()) if ('sort' in url_params) { $('#sort_select').val(url_params['sort'].replace(/\+/g, ' ')) } // refresh the page whenever the checkboxes are clicked on or the value of the sort by // dropdown is changed $(".checkboxes").find('input').click(refresh); $("#sort_by_form").find('select').change(refresh); var category = "{{ cat_slug }}"; var subcategory = "{{ subcat_slug }}"; function collapse_left_nav(category, subcategory) { console.log(category); console.log(subcategory); selector = "#" + category; $(selector).parent().parent().next().collapse('toggle'); $(selector).addClass('active-menu-item'); selector = "#" + subcategory; $("li " + selector).parent().addClass('active'); } document.ready = function() { // update the page by reading parameters from the url var url_params = getUrlParameters(window.location.toString()); var keys = Object.keys(url_params); for (var i = 0; i < keys.length; i++) { key = keys[i]; value = url_params[key]; if (key.lastIndexOf("opt", 0) === 0) { $("#" + key).prop('checked', true); } else if (key == "category") { $("#" + value).addClass('selected'); } else if (key.lastIndexOf("topt", 0) == 0) { $("#" + key).prop('checked', true); } } if (url_params['q']) { q_fixed = url_params['q'].replace(/\+/g, ' '); $('#main_search_box').find('input').val(q_fixed); } $('#sort_by_form').find('option[value=' + url_params['select'] + ']').attr('selected', 'selected'); // collapse the left category lists based on the inferred category // (the category is inferred from the search query and the search query results) $(document).ready(function() { collapse_left_nav(category, subcategory); }); $('#nav_classes').addClass("selected-tab"); } </script> <script> try{ var pageType = "Classes and Camps"; ga('set', 'dimension1', 'pageType'); ga('send', 'pageview'); }catch(error){ console.log(error.message) } </script> {% endblock %}