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

ul > li replace color with image (depends on #color condition – Shopify

I am trying to replace ul > li background color with image it is condition-based depending on #color. I have tried with css but no luck.

Help is appreciated

<ul class="tt-options-swatch options-middle filtres-js">
  <li>
    <a class="options-color" style="background:#000000" href="/collections/black">Black</a>
  </li>
  <li>
    <a class="options-color" style="background:#FFFFFF" href="/collections/white">White</a>
  </li>
  <li>
    <a class="options-color" style="background:#ccccff" href="/collections/violet">Violet </a>
  </li>
</ul>

So what I am trying to do is IF style="background:#ccccff" then replace with image.

Thanks in advance.

Regards

Tags:

3

Answers


  1. 0

    I’ve made a clumsy example of how to do it here:

    https://codepen.io/javiercampos/pen/abwwrWX

    The code:

      $('ul>li').each(function() {
    if($(this).children().css("background-color") == 'rgb(255, 255, 255)') {
      $(this).css('background-image', 'url(//media.istockphoto.com/vectors/abstract-blurred-colorful-background-vector-id1185382671?k=20&m=1185382671&s=612x612&w=0&h=QvHSiV0uDYhl69m1rpIt0aYbk4vmpl9kjVcfkMkgyfw=)'); 
      $(this).children().css('background-color', "");
    }
    if($(this).children().css("background-color") == 'rgb(0, 0, 0)') {
      $(this).css('background-image', 'url(//miuc.org/wp-content/uploads/2018/02/How-can-colours-help-you-in-your-everyday-life.jpg)'); 
      $(this).children().css('background-color', "");
    }
  });

    Note that I’m checking for the background-color CSS property that returns a string in the form rgb(x, y, z), not necessarily how it’s applied in the HTML.

    I’m also removing the background color in the a (in all direct descendants of the li basically) because that’s probably what you want.

    Note that this solution is pretty clumsy and will only work if the HTML is exactly how you paint it in the question, but it might be a start (also, the chosen images do not represent "white" or "black" at all, they are the first two results from google images searching for "color image")

    See if it helps you

    Login or Signup to reply.
  2. 0

    note: You set bgcolor on anchor tag. You can use window.getComputedStyle(list).backgroundColor for each element Like this

    // select all a tag
var lists = document.querySelectorAll('ul > li > a');

// looping foreach
lists.forEach(list => {
  const bgcol = window.getComputedStyle(list).backgroundColor;
  console.log(bgcol);
  bgcol == 'rgb(204, 204, 255)' ? console.log('Change to Img') : console.log('Skip');
})
    <ul class="tt-options-swatch options-middle filtres-js">
<li>
<a class="options-color" style="background:#000000"  href="/collections/black">Black</a>
</li>
<li>
<a class="options-color" style="background:#FFFFFF"  href="/collections/white">White</a>
</li>
<li>
<a class="options-color" style="background:#ccccff"  href="/collections/violet">Violet </a>
</li>
</ul>

    but window.getComputedStyle(list).backgroundColor return rgb, note a hexa color like `#fff

    Login or Signup to reply.
  3. 0

    Couldn’t you just put the style inside the data attribute?
    <a class="options-color" style="background:#FFFFFF" data-style="white" href="#">White</a>.

    This way you could get the value of the data and use as href.

    const hrefColor = element.dataset.style
    then
    element.href = '/collections/'+hrefColor

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

Back To Top
Search