Skip to content

Instantly share code, notes, and snippets.

@gterrill
Created April 26, 2017 05:23
Show Gist options
  • Save gterrill/a728ca2bf17a0b5f782813b0c02119b9 to your computer and use it in GitHub Desktop.
Save gterrill/a728ca2bf17a0b5f782813b0c02119b9 to your computer and use it in GitHub Desktop.
Display events using list view
{%- paginate collection.products by settings.pagination_limit -%}
{%- assign product_ids = "" -%}
{%- for product in collection.products -%}
{%- capture product_ids -%}{{ product_ids }}{%- unless forloop.first -%},{%- endunless -%}{{ product.id }}{%- endcapture -%}
{%- endfor -%}
<div id="content">
<div class="container">
{% include 'breadcrumb' %}
<div class="catalog_c">
{% if collection.image or collection.description.size > 0 %}
<div class="row">
<div class="col-sm-12">
<div class="box collection-box animated rollIn" data-animation="rollIn" >
{% if collection.image %}
<img src="{{ collection | img_url: 'master' }}" alt="{{ collection.title }}" />
{% endif %}
{% if collection.description.size > 0 %}
<div class="rte">
{{ collection.description }}
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
<div class="title clearfix">
<h1>{{ collection.title }}</h1>
</div>
<div class="row">
<div class="col-sm-12">
<div class="">
<div class="row view-grid animated fadeInUp" data-animation="fadeInUp" >
{% if collection.products %}
<div id='bta-calendar' class='infor_c animated rollIn animation-done'></div>
{% else %}
<p class="no-products">{{ 'collections.general.no_matches' | t }}</p>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endpaginate %}
{%- capture bta_url -%}//{{ shop.permanent_domain | split: '.' | first }}.bookthatapp.com{%- endcapture -%}
<link href="{{ bta_url }}/fullcalendar2/fullcalendar.min.css" rel='stylesheet' />
<script src="{{ bta_url }}/fullcalendar2/lib/moment.min.js" type="text/javascript"></script>
<script src="{{ bta_url }}/fullcalendar2/fullcalendar.min.js" type="text/javascript"></script>
<script>
EventList = function() {
_this = this;
_calendar = null;
_today = new Date(),
this.load = function() {
_calendar = $('#bta-calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultView: 'listMonth',
contentHeight: 'auto',
noEventsMessage: 'No classes scheduled',
eventLimit: true, // allow "more" link when too many events
events: function(start, end, tz, callback) {
_this.refresh(start, end, callback);
},
eventRender: function(event, element) {
if (event.bookingCount >= event.capacity) {
element.addClass('booked-out');
}
if (event.end < _this.today) {
element.addClass('past-event');
}
if (event.image) {
_this.renderImage(event, element);
}
var titleCell = element.find('.fc-list-item-title'),
timeCell = element.find('.fc-list-item-time');
timeCell.append($('<br><small>' + (event.capacity - event.bookingCount) + ' places left</small>'));
titleCell.append($('<p>With Chef XXX</p>'));
titleCell.append($('<a class="learn_more" href="' + event.url + '">Learn more »</a>'));
}
});
};
this.map = function(schedule) {
return $.map(schedule, function(item, n) {
var result = $.extend(item, {
start:new Date(item.start[0], item.start[1] - 1, item.start[2], item.start[3], item.start[4], item.start[5]),
end:new Date(item.end[0], item.end[1] - 1, item.end[2], item.end[3], item.end[4], item.end[5])
});
// prevent clicking through to past events or products already booked out
if (result.start < _this.today || result.bookedOut) {
delete result.url;
}
return result;
});
};
this.renderImage = function(event, element) {
var parts = event.image.split('?'),
image = parts[0],
index = image.lastIndexOf('.'),
ext = image.substr(index),
path = image.substr(0, index),
div = $('<div>', {'class': 'fc-thumb'}),
img = $('<img>', {'src': path + "_small" + ext + "?_=" + parts[1]});
element.find('.fc-list-item-marker').empty().append(div.append(img));
};
this.refresh = function(start, end, callback) {
var params = {
start: start.format(),
end: end.format(),
}
$.getJSON("{{ bta_url }}/availability/schedule.json?callback=?", params, function (data) {
callback(_this.map(data.schedule));
})
};
};
document.addEventListener("DOMContentLoaded", function(event) {
eventList = new EventList();
eventList.load();
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment