Shopify Question posted in
The Shopify help center can be found here.

How to display the asset url path of an image within jQuery code in Shopify

I’m trying to retrieve an image from my assets folder dynamically. The process of my code is that when the element is clicked, its parent element will change background according to the name passed by the child elements ID. Please see my code below:

$(".flex-item").click(function () {
  // add class to div while removing it from others with same class
  $(".flex-item").removeClass("expand").addClass("vertical"); //declare the class of the element, remove expand class from all
  $(this).addClass("expand").removeClass("vertical"); //add class to clicked element
  var changebackground = $(this).attr('id'); //get id of clicked element
  $("#vaq-key-features-img").css({
    "background-image": "url({{ '"+changebackground+".jpg' | asset_url }})", 
  }); 
});

I have renamed my theme.js to theme.js.liquid. The url is being returned but the jquery variable is being read as a string and not displaying its value. See below:

<div class="container" id="vaq-key-features-img" style="background-image: url(https://cdn.shopify.com/s/files/1/1392/6087/t/3/assets/%22+changebackground+%22.jpg?8438893007511141278);"></div>

Is there something I’m missing?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a topic in the Shopify forum talking about passing a variable within the liquid filter and found out that it is not possible since liquid filters are server side language. I did a work around with my code by using jQuery attr(); I have added a data attribute within may parent container which will hold the id-name being passed by the child divs.

    $(".flex-item").click(function () {
    // add class to div while removing it from others with same class
    $(".flex-item").removeClass("expand").addClass("vertical"); //declare the class of the element, remove expand class from all
    $(this).addClass("expand").removeClass("vertical"); //add class to clicked element
        var databg = $(this).attr('id'); //get id of clicked element
    $("#vaq-key-features-img").attr('data-bg', databg ); //pass id as data to container
});

    Select the div with specific data and change background by using css attribute selector:

    div[data-bg="key-feature-01"]{
    background-image:url('images/key-feature-01.jpg') !important;
}
div[data-bg="key-feature-02"]{
    background-image:url('images/key-feature-02.jpg') !important;
}
div[data-bg="key-feature-03"]{
    background-image:url('key-feature-03.jpg') !important;
}
div[data-bg="key-feature-04"]{
    background-image:url('key-feature-04.jpg') !important;
}
div[data-bg="key-feature-05"]{
    background-image:url('key-feature-05.jpg') !important;
}
div[data-bg="key-feature-06"]{
    background-image:url('key-feature-06.jpg') !important;
}

    Since css file and images are stored in the same Shopify asset folder, specifying the path using liquid filter is not necessary anymore.


  2. 0

    Try something like this

    $("#vaq-key-features-img").css({
  "background-image": `url("${changebackground}.jpg" | ${asset_url})`, 
});

    I’ve used ES6 template literal.

    If you are using old browser where ES6 won’t support then try

    var bgurl = "url('" + changebackground + ".jpg')";
$("#vaq-key-features-img").css({
  "background-image": bgurl, 
});

    Hope this will help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search