-2

Trying to set up adding slides to flexslider 2 in shopify.

Opened a thread, where a few syntax mistakes were pointed out. Fixed them but didn't get any replies since then, and I really need to get it going. So, here is 2nd try.

Basically, the idea is if variable equals another variable that is picked up from shopify settings, then script appends li with a slide. If not- nothing happens.

I'm as noob as they come in JQ. Can some one point out my mistake, please?

Thanks!

$(document).ready(function(){
var show = "block" ;
var showsetting1 = "{{ settings.mainslide_display1 }}" ;

if (showsetting1 === show)
{
$(".flexslider ul").append('<li class="slider-image1 slideswidth"><img src="{{ 'slider-image-1.jpg' | asset_url }}">');
}
else {}
});
user3594249
  • 19
  • 1
  • 4
  • 1
    Why the empty `else`? – Benjamin Gruenbaum May 14 '14 at 19:02
  • 2
    well apparently your condition is never true, as you set them just before. – Mark Rijsmus May 14 '14 at 19:02
  • 3
    Also, how would showsetting1 be equal to show? They're two constant strings and you're explicitly setting them to different things. – Benjamin Gruenbaum May 14 '14 at 19:02
  • The if statement doesn't make sense. You're setting the show and showsetting1 variables to 2 different values, so they're never going to match. – APAD1 May 14 '14 at 19:03
  • He's assuming (maybe correctly) that Shopify will run it through the Liquid engine and expand the `{{...}}` chunks into their defined values. – Paul Roub May 14 '14 at 19:04
  • possible duplicate of [Jquery: appending li if variable equals other variable](http://stackoverflow.com/questions/23662051/jquery-appending-li-if-variable-equals-other-variable) – Paul Roub May 14 '14 at 19:04
  • @Paul Roub, exactly on liquid assumption. – user3594249 May 14 '14 at 19:05
  • 1
    Like Paul Roub said, the showsettings1 is probably being set to a templated value. The issue I see in the append statement is a space between "append" and the first bracket. – bitwiser May 14 '14 at 19:06
  • @bitwiser. removed the space, but still no show – user3594249 May 14 '14 at 19:09
  • It's because Javascript doesn't parse liquid snytax, you're setting the variable as the raw liquid code. – APAD1 May 14 '14 at 19:10
  • 1
    Are you getting any js errors, or just nothing happening? Are you sure your html is correct? (ie. you have a container element with the class name "flexslider" and a ul element inside that) This seems like something easily debugged using something like chrome's dev tools. – bitwiser May 14 '14 at 19:10

2 Answers2

2

According to this thread on the Shopify forums, you can only use liquid syntax in Javascript if you make their file extensions .js.liquid (and .css.liquid, likewise, for CSS). If you change the extension of your javascript file, it should properly parse the liquid syntax rather than evaluating it as a string as written.

Sam Hanley
  • 4,707
  • 7
  • 35
  • 63
1

You are missing the closing tag on your img element and li element You can also safely remove the else condition

$(document).ready(function(){
    var show = "block",
        showsetting1 = "{{ settings.mainslide_display1 }}" ;

    if (showsetting1 === show)
    {
        $(".flexslider ul").append ('<li class="slider-image1 slideswidth"><img src="{{ 'slider-image-1.jpg' | asset_url }}" /></li>'); // You are missing closing tag on img and li
    } // the else condition is not necessary as it does nothing
});
Pepto
  • 1,434
  • 10
  • 13