Template source: activities/search_results.html

{% extends "base.html" %} {% block loadAdditionalCSS %} {% load staticfiles %} {% load loc_tags %} {% load dictionary_tags %} {% endblock %} {% block titleTag %} {% if request.GET.tab and request.GET.tab == 'classes' %} <title> Search results for {{search_query_string}} lessons and camps for kids in {{loc_string}}</title> {% else %} <title> Search results for {{search_query_string}} activity providers in {{loc_string}}</title> {% endif %} {% endblock %} {% block addMetaTags %} {% if request.GET.tab and request.GET.tab == 'classes' %} <meta name="description" content="Best {{search_query_string}} classes and camps in {{loc_string}}. {% for session in sessions|slice:":10" %}{{session.class_name}}{% if forloop.counter < sessions|length and forloop.counter < 10 %}, {% endif %}{% endfor %}"> {% else %} <meta name="description" content="Best {{search_query_string}} providers in {{loc_string}}. {% for provider in provider_results|slice:":10" %}{{provider.title}}{% if forloop.counter < provider_results|length and forloop.counter < 10 %}, {% endif %}{% endfor %}"> {% endif %} {% endblock %} {% block content %} <br> {% include "locations/change_location_template.html" %} <div class="container-fluid"> {% if request.GET.tag and request.GET.tag != 'None' %} {% include "activities/elements/page-title.html" with title="Search Results for "|add:request.GET.tag|add:" in "|add:loc_string %} {% elif request.GET.filter_cat and request.GET.filter_cat != 'None' %} {% with cat_var=request.GET.filter_cat|get_category_name%} {% include "activities/elements/page-title.html" with title="Search Results for "|add:cat_var|add:" in "|add:loc_string %} {% endwith %} {% elif request.GET.filter_subcat and request.GET.filter_subcat != 'None' %} {% with subcat_var=request.GET.filter_subcat|get_subcategory_name%} {% include "activities/elements/page-title.html" with title="Search Results for "|add:subcat_var|add:" in "|add:loc_string %} {% endwith %} {% elif search_query_string == '' %} {% include "activities/elements/page-title.html" with title="Search results for 'Providers, Classes and Camps' in "|add:loc_string %} {% else %} {% include "activities/elements/page-title.html" with title="Search Results for "|add:search_query_string|add:" in "|add:loc_string %} {% endif %} <div role="tabpanel" id="view-tablist"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-3 side-nav-panel"> </div> <div class="col-xs-12 col-sm-8 col-md-8"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="{% if show_tab != 'classes' %}active{% endif %}"> <a href="/activities/search_results?q={{ search_query_string }}&amp;tag={{ tag }}&amp;st={{ search_type }}&amp;sort={{ sort }}&amp;filter_classcat={{ category.slug }}&amp;radius={{ radius }}&amp;tab=providers&amp;loc={{ location }}" aria-controls="home" role="tab" onclick="ga('send', {'hitType': 'event', 'eventCategory': 'ProviderPageReviewsLink', 'eventAction': 'clickAction', 'eventLabel': 'clickedReviewsLinkProviderPage' });" title="classproviders">Providers</a> </li> <li role="presentation" class="{% if show_tab == 'classes' %}active{% endif %}"> <a href="/activities/search_results?q={{ search_query_string }}&amp;tag={{ tag }}&amp;st={{ search_type }}&amp;sort={{ sort }}&amp;filter_classcat={{ category.slug }}&amp;radius={{ radius }}&amp;tab=classes&amp;loc={{ location }}" aria-controls="profile" role="tab" id="classes-tab-link" title="classesandcamps">Classes and Camps</a> </li> </ul> </div> </div> <div class="row search-results-content"> <div class="tab-content"> <!-- Provider Panel --> <div role="tabpanel" class="tab-pane fade {% if show_tab != 'classes' %}in active{% endif %}" id="reviews"> <div class="col-sm-3 side-nav-panel"> {# Disable panel for the time being #} {% if enable_providers_panel == True %} <div class="panel-group pushmenu-left mobile-filter" id="accordion"> <h4 style="color:#999;"><b> Show results for Providers in </b></h4> {% for category in categories %} <div class="panel panel-default {% if category_string != None and category_string != category.name_slug %}hidden{% endif %}"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ category.name_slug }}2" id="{{ category.name_slug }}2"> <span class="glyphicon glyphicon-chevron-down pull-right"> </span> <a href="/activities/search_results?q={{ search_query_string }}&amp;tag={{ tag }}&amp;st={{ search_type }}&amp;sort={{ sort }}&amp;filter_cat={{ category.name_slug }}&amp;radius={{ radius }}&amp;loc={{ location }}" id="{{ category.name_slug }}" onClick="ga('send', {'hitType': 'event', 'eventCategory': 'ClassProvidersLeftNavCatLink', 'eventAction': 'clickAction', 'eventLabel': 'clickedCatLink' });">{{ category.name }} </a> </a> </h4> </div> <div id="collapse{{ category.name_slug }}2" class="panel-collapse collapse"> <div class="panel-body"> <ul> <!-- for object in the set that is returned by the function --> <!-- The paramater after the colon is the 2nd parameter. keyvalue is the function name --> {% for obj in subcategories|keyvalue:category.name_slug %} <li> <a href="/activities/search_results?q={{ search_query_string }}&amp;tag={{ tag }}&amp;st={{ search_type }}&amp;sort={{ sort }}&amp;filter_subcat={{ obj.name_slug }}&amp;radius={{ radius }}&amp;loc={{ location }}" id="{{ obj.name_slug }}" onClick="ga('send', {'hitType': 'event', 'eventCategory': 'ClassProvidersLeftNavSubCatLink', 'eventAction': 'clickAction', 'eventLabel': 'clickedSubCatLink' });">{{ obj.name }}</a> </li> {% endfor %} </ul> </div> </div> </div> {% endfor %} <div> <h4> Change Radius [{{ radius }}]</h4> <input name="radius" id="radius_range" type="range" min="0" max="50" value="{{ radius }}" style="width: 70%"/> </div> </div> {% endif %} </div> <div class="col-sm-8"> <!-- start: provider results --> {% for provider in provider_results %} <div class="cat-section"> <div class="row"> <div class="col-lg-2 col-md-2 image-thumb"> <a href="/kidsactivities/{{ provider.slug }}"> <img src="{{ provider.img }}" class="img-rounded"> </a> </div> <div class="col-lg-7 col-md-7"> <h3 class="margin0"> <a href="/kidsactivities/{{ provider.slug }}" onclick="ga('send', {'hitType': 'event', 'eventCategory': 'ClassProvidersServiceNameLink', 'eventAction': 'clickAction', 'eventLabel': 'clickedClassProvidersServiceNameLink' });"> {{ provider.title }} </a> </h3> {% if provider.num_reviews > 0 %} <span class="{{ provider.star_rating_display }}"> <input type="radio" name="rating" value="1"><i></i> <input type="radio" name="rating" value="2"><i></i> <input type="radio" name="rating" value="3"><i></i> <input type="radio" name="rating" value="4"><i></i> <input type="radio" name="rating" value="5"><i></i> </span> {% endif %} {% if provider.num_classes_listed > 0 %} <div> {{ provider.num_classes_listed }} {% if provider.num_classes_listed == 1 %} class/camp {% else %} classes/camps {% endif %} listed </div> {% endif %} <div> {% if provider.tags|length > 0 %} {% for tag in provider.tags %} {% if forloop.counter < 6 %} <a href="/activities/search_results?q={{ search_query_string }}&amp;tag={{ tag }}&amp;st=tag&amp;loc={{ location }}&amp;sort=">{{ tag }}</a>{% if forloop.counter < provider.tags|length and forloop.counter < 5 %},&nbsp;{% endif %} {% endif %} {% endfor %} {% endif %} </div> </div> <!-- class providers - address should be in this order as city,(space) state (space) zipcode --> <div class="col-lg-3 col-md-3"> <p> <span>{{ provider.address.street }}</span> <br> {% if provider.address.address2 %} <span>{{ provider.address.address2 }}</span> <br/> {% endif %} <span>{{ provider.address.city }}, {{ provider.address.state }} {{ provider.address.zipcode }}</span> {% if provider.num_service_loc > 1 %} <br> <span> <a href="/kidsactivities/{{ provider.slug }}"> More Locations </a></span> {% endif %} <!-- added check for new register online label --> {% if provider.register_online_allowed %} <br> <span><a href="/{{provider.slug}}/classes-camps-schedule" style= "color: #16A085">Register Online</a></span> {% endif %} {% if provider.has_discounts_available %} <br> <span> <a href="/{{provider.slug}}/classes-camps-schedule" style= "color: #16A085"> Discounts Available </a></span> {% endif %} </p> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12"> <span>{{ provider.description|truncatechars:283 }}</span> <div class="clearfix"></div> </div> </div> </div> <!--car section--> {% empty %} <br> <div style="color:#FF8C00"> No provider results. Please check the 'Classes and Camps' tab or change your radius. </div> {% endfor %} </div> </div> <!-- Classes Panel --> {# Disable panel for the time being #} {% if enable_classes_panel == True %} <div role="tabpanel" class="tab-pane fade {% if show_tab == 'classes' %}in active{% endif %}" id="classes"> <div class="col-sm-3 col-md-3 side-nav-panel"> <div class="mobile-filter pushmenu-left"> <div id="accordion-club" class="panel-group"> <h4 style="color:#999;"><b> Show results for Classes &amp; Camps in </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 href="/activities/search_results?q={{ search_query_string }}&amp;tag={{ tag }}&amp;st={{ search_type }}&amp;sort={{ sort }}&amp;filter_classcat={{cat_name_slug}}&amp;radius={{ radius }}&amp;tab=classes&amp;loc={{ location }}"> {{category.name}} </a> <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> </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 ="/activities/search_results?q={{ search_query_string }}&amp;tag={{ tag }}&amp;st={{ search_type }}&amp;sort={{ sort }}&amp;filter_classcat={{value.slug}}&amp;radius={{ radius }}&amp;tab=classes&amp;loc={{ location }}" 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 %} </div> <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" name="opt1" id="opt1"> Teens (13-19) <br> <input type="checkbox" name="opt2" id="opt2"> Youth (8-12) <br> <input type="checkbox" name="opt3" id="opt3"> Early Youth (5-7) <br> <input type="checkbox" name="opt4" id="opt4"> Pre-school <br> <input type="checkbox" name="opt5" id="opt5"> Toddlers <br> </div> <div class="form-group checkboxes"> <b> Class Type </b> <br> <input type="checkbox" name="topt1" id="topt1"> Class <br> <input type="checkbox" name="topt2" id="topt2"> Camp <br> <input type="checkbox" name="topt3" id="topt3"> Full Day <br> <input type="checkbox" name="topt4" id="topt4"> Half Day <br> <input type="checkbox" name="topt5" id="topt5"> Private Lesson <br> <input type="checkbox" id = "topt6" name="topt6" /> Overnight Camp <br/> </div> </form> </div> </div> <!--col 3--> <div class="col-sm-8"> <div class="table-responsive row"> <div class="col-lg-12 col-md-12"> {% for session in sessions %} {% include "classes/class_listing/display_class.html" %} {% endfor%} {% if not sessions and not one_time_services %} <br> <div style="color:#FF8C00"> There are no classes in this region. </div> {% endif %} <!--classes--> <!-- ends the expired class logic --> </div> </div> <!--table responsive--> </div> <!--col 8--> </div> {% endif %} <!--classes tab panel--> </div><!--tab content--> </div> <!--row--> </div> <!--tab panel--> </div><!--container fluid--> <br> {% endblock %} {% block loadAdditionalJS %} <!-- Common JS --> {% include "activities/elements/script.html" %} <script> $(document).ready(function () { $menuLeft = $('.pushmenu-left'); $nav_list = $('.nav_list'); $nav_list.click(function () { $(this).toggleClass('active'); $('.pushmenu-push').toggleClass('pushmenu-push-toright'); $menuLeft.toggleClass('pushmenu-open'); }); var refresh = function () { var sortingData = $('#sort_select').serialize(); var url = "{% url 'search_results' %}?q={{ search_query_string }}&tag={{ tag }}&st={{ search_type }}&radius={{ radius }}&filter_cat={{ filter_cat }}&filter_subcat={{ filter_subcat }}&loc={{ location }}&" + sortingData; window.location = url; }; $("#sort_select").change(refresh); $("#radius_range").change(function() { var rangeData = $("#radius_range").serialize(); var url = "{% url 'search_results' %}?q={{ search_query_string }}&tag={{ tag }}&st={{ search_type }}&filter_cat={{ filter_cat }}&filter_subcat={{ filter_subcat }}&loc={{ location }}&" + rangeData; window.location = url; }) }); </script> <script> // 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_by_form').serialize(); var searchBox = $('#main_search_box input').serialize(); var location = $('#location_box option').val(); var categoryInfo = $('.selected').attr('id'); var url = "{% url 'search_results'%}?" + formData + "&" + sortingData + "&" + searchBox + '&tab=classes' + '&loc=' + location; if (categoryInfo) { window.location = url + "&category=" + categoryInfo; } else { window.location = url } }; $(".checkboxes").find('input').click(refresh); 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) var category = "{{ category_string }}"; var subcategory = "{{ subcategory_string }}"; //removing infer cat/subcat as discussed 2/23/16 // if(category == "None"){ // var category = "{{ inferred_category.0 }}"; // var subcategory = "{{ inferred_category.1 }}"; // } collapse_left_nav(category, subcategory); collapse_left_nav_classes_and_camps("{{ cat_slug }}", "{{ subcat_slug }}"); function collapse_left_nav(category, subcategory) { console.log(category); console.log(subcategory); selector = "#" + category; $(selector).parent().parent().next().collapse('toggle'); //removing highlighting logic as discussed 2/23/16 // $(selector).addClass('active-menu-item'); // selector = "#" + subcategory; // $("li " + selector).parent().addClass('active'); } function collapse_left_nav_classes_and_camps(category, subcategory) { selector = "#" + category; $(selector).parent().parent().next().collapse('toggle'); $(selector).addClass('active-menu-item'); selector = "#" + subcategory; $("li " + selector).parent().addClass('active'); } $('#nav_classes').addClass("selected-tab"); } var url_params = getUrlParameters(window.location.toString()) if ('sort' in url_params) { if ('tab' in url_params){ $('#sort_select_classes').val(url_params['sort'].replace(/\+/g, ' ')) } } var refresh_classes = function() { var formData = $("#checkboxesform").serialize(); var sortingData = $('#sort_select_classes').serialize(); var searchBox = $('#main_search_box input').serialize(); var location = $('#location_box option').val(); var categoryInfo = $('.selected').attr('id'); var url = "{% url 'search_results'%}?" + formData + "&" + sortingData + "&" + searchBox + '&tab=classes' + '&loc=' + location; window.location = url; }; $("#sort_select_classes").change(refresh_classes); </script> {% endblock %} </body> </html>