Shopify Alternate Templates (code and styles)

Shopify Partner
28 0 3

In Shopify I am creating alternate templates for some of my pages, specifically a FAQs page and an Events page, mainly because I want special javascript routines for these pages. I don't see a lot of detail documentation on how to do this. I put the javascript on the alternate template for the page, if I want styles associate with these pages can I add them to the alternate template also. If so, where can I add it?

Below is the code for the events page alternate template.  Is this an okay way to do this?

I am using the Classic theme.

<header class="section-header">
  <h1 class="section-header__title">{{ page.title }}</h1>
</header>

{% comment %}
  Regular page content goes here.
{% endcomment %}
<div class="rte">
  {{ page.content }}
</div>

<script>

  var xtoday = getToday_ymd();
  var eventCounter = 0;
  $( "#events > li" ).each(function( index ) {
    var eventDate = $(this).data("date");
    if (eventDate<xtoday) {
      $(this).addClass("hideevent");            
    } else {
      eventCounter+=1;
    }
  });
  console.log(eventCounter);
  if (eventCounter==0) {
    console.log("No events");
    $("#noEvents").removeClass("hideevent");  
  }


  function getToday_ymd() {
    var dte = new Date();
    var y = dte.getFullYear();
    var m = dte.getMonth();
    var mx= m + 1;
    if (mx<10) {mx='0'+mx};
    var d = dte.getDate();
    if (d<10) {d='0'+d};
       return y + "" + mx + "" + d;
    }

</script>

Here is the format in the events page:

 <!--
Put the date in the format data-date="yyyymmdd" to each <li>.  This will be checked against the current date.  any event in the past will be hidden.  If no events are in the future, the paragraph with the id="noEvents" will show.  Probably best to put a contact number there.
here is a sample of an event line:
      <li data-date="20150617">June 17: Basketball Game 8-10PM at Mater Dei gym</li>
-->
<ul id="events">
<li data-date="20150617">June 17: Basketball Game 8-10PM at Mater Dei gym</li>
<li data-date="20150624">June 24: Basketball Game 8-10PM at Mater Dei gym</li>
<li data-date="20150626">June 26: Volleyball Game 8-10PM at Immaculate Conception gym</li>
</ul>
<p id="noEvents" class="hideevent">There are no events to show. Please contact Freda Swartz at 555-555-5555</p>

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
298 0 155

Hey Cal,

You can add the scripts right to the page for Javascript, so your inclination there was right.
If you want Styles for the page, you'd want to add the stylesheet as an Asset to the Theme and then you can use it on the Liquid page for the template.

If you have issues with this, just shoot us a line at support@shopify.com. :)

Hope that helps!

0 Likes