If Else Statements, Javascript Toggle, Liquid / Ruby Language

Question

thanks for checking out my question.

The problem I am having is with Shopify, Liquid, JQuery and Javascript.

I have a JQuery / Liquid slider that has four different categories. NBA, NHL, MLB and MLS. When the page loads..

jQuery(document).ready(function ($) {

$(".ncaa-carousel-filter").addClass("active");
$("#ncaa-carousel").toggle();

This makes it so that no matter what section of the site you are on, (NBA, NHL, etc..) you will still see the NCAA carousel until you click on the appropriate toggle.

    var carousel = "-carousel";
var carouselFilter = "-carousel-filter";
$("#carousel-filters").on("click", ".ncaa-carousel-filter", function() {
    $("[class*="+carouselFilter+"]").removeClass("active");  
    $(this).addClass("active");
    $("[id*="+carousel+"]").hide();
    $("#ncaa-carousel").toggle();
});

I have broken out the sliders and trying to use Liquid to display them.

{% if collection.current_type or collection.handle contains "mlb" %}
{% include 'mlb-slider' %}
{% elsif collection.current_type or collection.handle contains "nba" %}
{% include 'nba-slider' %}
{% elsif collection.current_type or collection.handle contains "mls" %}
{% include 'mls-slider' %}
{% elsif collection.current_type or collection.handle contains "nhl" %}
{% include 'nhl-slider' %}
{% else %}
{% include 'ncaa-slider' %}
{% endif %}

I believe the problem is that the sliders are set to display: none until toggled. So when I go to include them, they aren't showing as they are set to display: none.

If I remove that CSS I end up with 4 sliders on my page as they are all showing.

I think this is a question of how I have it set up, I need some help on the logic.

This fiddle shows most of the code I am working with. http://jsfiddle.net/asx90842/

Maybe I can remove the display: none CSS and use the Liquid if statement I've developed in place of the HTML code you see in the fiddle?

Any help would be great!!

Thanks so much!

Answer 1

First, instead of toggling ncaa at page load, why don't you just set it to active in your html templates? Simply put a .active class and in your stylesheets do .active{display:block} or whatever you like. If you can use data-* attributes in your buttons it will be even better since you will not have to use regex to get a corresponding id.

So your html will be like this

<button class="ncaa-carousel-filter active" data-target="ncaa-carousel">College</button>
<div style="margin-bottom:10px;" class="teams-carousel clearfix active" id="ncaa-carousel">

Second, all five carousel button/div all share the same logic so you can just write one listener for all of them:

 $("#carousel-filters").on("click", "button", function() {
   $("#carousel-filters button").removeClass("active");
   $(this).addClass("active");
   $(".teams-carousel").hide();
   // Use data attributes to get corresponding div id
   var id = $(this).data('target');
   $(id).toggle();
 });

Lastly, I am not very familiar with ruby/liquid but I bet there's a for loop structure that you can use to write just one block and iterate over it with different values.

Answer 2

One way to approach this would be to assign a liquid variable which could be re-used in the Javascript class/id selectors. I would include the following liquid near the top of the page.

{% if collection.current_type or collection.handle contains "mlb" %}
{% assign sport_league 'mlb' %}
{% elsif collection.current_type or collection.handle contains "nba" %}
{% assign sport_league 'nba' %}
{% elsif collection.current_type or collection.handle contains "mls" %}
{% assign sport_league 'mls' %}
{% elsif collection.current_type or collection.handle contains "nhl" %}
{% assign sport_league 'nhl' %}
{% else %}
{% assign sport_league 'ncaa' %}
{% endif %}

With that included, you'll have a new variable, sport_league representing the common string of characters used to represent any particular sport / carousel. For example, you'll now be able to write the following at the end of your Javascript to display just the carousel that's wanted.

$('#{{ sport_league }}-carousel').show();

This is simply javascript that executes once, using the variable sport_league to negate the display: none CSS and show the appropriate carousel.