selectCallback variant selector, if variant.title contains?

Solved
Djurmamman
Explorer
54 4 5

I need to show divs on product page based on selected variant.

I dont want to use variant.id == 'variant name' because its a lot of products with sometimes 3x3 options.

I'm not that good on JS so i cant make it work with contains operator.

 

var selectCallback = function(variant, selector) {
 if (variant) {
  if (variant.title contains 'banana') {
  $('.banana').css('display', 'block');
  } else {
  $('.banana').css('display', 'none');
 }
}

 

 

 

 

0 Likes
gina-gregory
Shopify Expert
669 39 145

This is an accepted solution.

Try this:

var selectCallback = function(variant, selector) {
 if (variant) {
  var variantTitle = variant.title;
  if (variantTitle.indexOf('banana') !== -1) {
  $('.banana').css('display', 'block');
  } else {
  $('.banana').css('display', 'none');
 }
}
Mircea_Piturca
Shopify Partner
1462 39 285

As Gina mentioned, in JS you can use indexOf or includes, e.g.: variantTitle.includes('banana').

You may want to sanitize first the title string. Take care of whitespace or lower/uppercase variations.

Finally—Add variant descriptions to your products
0 Likes