results.html

{% load i18n static sass_tags sekizai_tags shop_tags %}

{% addtoblock "css" %}<link href="{% sass_src 'shop/css/list-items.scss' %}" rel="stylesheet" type="text/css" />{% endaddtoblock %}

{% if pagination != "paginator" %}
	{% addtoblock "js" %}<script src="{% static 'node_modules/angular-inview/angular-inview.js' %}" type="text/javascript"></script>{% endaddtoblock %}
	{% add_data "ng-requires" "angular-inview" %}
{% endif %}

{% addtoblock "js" %}<script src="{% static 'shop/js/search-results.js' %}" type="text/javascript"></script>{% endaddtoblock %}
{% add_data "ng-requires" "django.shop.searchResults" %}
{% addtoblock "ng-config" %}['searchResultsProvider', function(provider) { provider.setSearchResults({{ data|rest_json }}); }]{% endaddtoblock %}

<shop-search-results>
{% block search-results-head %}
	<div class="row lead text-muted py-1" ng-if="search_data.count>0">
		<div class="col-7" ng-cloak>{% trans "{{ search_data.count }} matching products found" %}</div>
		<div class="col-3 text-right">{% trans "Base Price" %}</div>
	</div>
	<div class="row lead text-muted" ng-if="search_data.count==0">
		<div class="col" ng-cloak>{% trans "Searching for <em>{{ searchQuery }}</em> has revealed nothing." %}</div>
	</div>
{% endblock search-results-head %}

{% block search-results-body %}
	<div class="shop-list-item row border-top py-3" ng-repeat="result in search_data.results">
		<div class="col-7" ng-bind-html="result.media"></div>
		<div class="col-3 text-right text-nowrap" ng-bind="result.price"></div>
		<div class="col-2">
			<a class="btn btn-primary btn-sm" ng-href="{% verbatim %}{{ result.product_url }}{% endverbatim %}">{% trans "Details" %} <i class="d-none d-md-inline">&hellip;</i></a>
		</div>
	</div>
{% endblock search-results-body %}

{% block search-results-foot %}
	<div class="row">
		<div class="col">
	{% if pagination == "paginator" %}
		{% if paginator.display_page_controls %}
			<nav class="mb-3" aria-label="{% trans 'Page navigation' %}">
				<ul class="pagination justify-content-center" in-view="$inview && loadMore()">{{ paginator.to_html }}</ul>
			</nav>
		{% endif %}
	{% else %}
			<div class="text-center mb-3">
				<span class="btn btn-outline-dark" ng-if="isLoading" ng-cloak>
					{% trans "Loading more results" %}&emsp;<i class="fa fa-spinner fa-spin"></i>
				</span>
				<span ng-if="!isLoading">
		{% if pagination == "auto" %}
					<i in-view="$inview && loadMore()">&nbsp;</i>
		{% else %}
					<button type="button" class="btn btn-outline-secondary" ng-hide="search_data.results.length==search_data.count" ng-click="loadMore()" ng-cloak>
						{% trans "Load more products" %}
					</button>
		{% endif %}
				</span>
			</div>
	{% endif %}
		</div>
	</div>
{% endblock search-results-foot %}
</shop-search-results>