How can you display only In-Stock Matrix Varients?

akilness

Hi,

Just wondering if anyone knew how to only display the In-Stock matrix variants on the product pages? There are a lot of sizes offered for a particular type of boot and only one in stock. I don't want the customer to have to click through all of the sizes to see which single boot may be in stock. Any insight would be great!

Here is the place to add a conditional statement I believe:

Joey

Hi Akilness,
By default the theme editor is not aware of the Variants inventory/availability, only the Default Variant.

There is an app available that can show if variants are available, Stock Filter. There might be other apps in the app store that can help you with inventory.

Hope this helps!

akilness

Thanks for the suggestion! I don't think it will be worth $5 a month for the app. There's no way to call on the stock levels of product.variants?

dsteinbeck

This is certainly something we have been asking for/needing too. The ability to anly show matrix items that are in stock should be a capability that is native to ecom - i.e without the need to continually nickle-and-dime customers with all of these add-ons.

mattywebb

Agree - i'm setting a shop up and designing a custom theme for the first time and just joined the forum to see if i can get a work around for just this issue.

I was massively surprised when i realised it wasn't standard functionality, Its a very very standard feature of most e-commerce platforms...

Without it - it creates a pretty dismal user experience, having to click through the variants is infuriating for me - to a customer, its a lost sale & missed opportunity - plain and simple.

C'mon guys, lets get it built!

mattywebb

Fuck - the author of that plug in is now charging $21.95 a month! An $18 price hike since June!

dsteinbeck

I think it will be important to understand what Lightspeed's long term strategic direction for their product is going to be.

From where I sit, it seems that you are investing more of your software development efforts/bandwidth into connecting a tangled web of nickel and diming add-on's in order to shore up gaps in what should be baked into your core platform. 

A couple of examples of lacking core functionality that I care about:

- This issue. Not being able to filter out stock and sizes/variants that you don't have....but there's an app for that

- Not having the ability to have a common gift card between retail and ecom... but there's an app for that

- Not providing the ability to control when to charge the customers credit card for an order. We prefer to charge when the order ships, which allows us to make adjustments when there are inventory issues. Don't think there's an app for that....yet

- Customer databases are not harmonized.  We have certain clients/club members that are entitled to a discount.  That info does not flow to ecom.

Add-ons are fine when connecting to other, well established platforms, like Quickbooks to expand overall functionality -- but not for things that should be basic, core, functionality.

Having spent a previous career in the aviation software development business, I understand the challenges you are dealing with in bringing two separate systems (SEO Shop and Lightspeed) together to present an Omnichannel offering to your customers.  But filling in the core functionality gaps with these add-ons is a short term solution that is taking the Omni out of Omnichannel. As your platform evolves -- and these add-on pieces evolve in their own way - the time you spend keeping a fragile web of separate software applications communicating with each other will continue to grow and consume development bandwidth that should be focused on developing your system, not patching it. This is a long-term recipe for disaster.  

ljorik

did anybody found a solution to this yet, i currently tried multiple things with no succes yet

justinbernardus

its possible by looping through the variants. and if a variant stock level is 1 or higher you display this option. But you need to customize the product.rain theme file 

ljorik

or let's say i want to grey them out should that be easier to do or am i totally wrong here

Joey

As mentioned by @justinbernardus you can loop through the variants and check the stock.

For example:

<ul class="buttons-or-list">
  {% for variant in product.variants %}
     <li class="{% if not variant.stock.available %}unavailable{% elseif variant.id == product.vid %}selected{% elseif variant.id != product.vid%}not-selected{% endif %}">
       <a href="{{ ( product.url ~ '?id=' ~ variant.id) | url }}" title="{% if variant.stock.available %}{{ 'In stock' | t }}{% else %}{{ 'Out of stock' | t }}{% endif %}">
          {{ variant.title | split(':')|last }}
       </a>
      </li>
   {% endfor %}
</ul>

homegrownskate

You guys need to work on some customer facing improvements to matrix based products. I'm selling primarily shoes and clothing and every other major ecom platform is years ahead in terms of ease of use / visibility for customers. Clicking through individual sizes of a product just to see what's available is time consuming and confusing to customers. If we're not able to hide specific out of stock sizes, there should at least be the option to display an "out of stock" message in the size drop down.

Attached another example that's super customer friendly; hovering over the product displays in stock sizes.

This along with not being able to search / filter products by size are by far the two most frequently received pieces of feedback we get.

homegrownskate

Abbas

Hi @Joey

i tried placing the following code in place of {{ product | html_product_configure | raw }} :

as you will see the pages with a oos matrix still shows?

https://www.waterstreetgallery.co.uk/en/selborne-pottery-mug.html

<ul class="buttons-or-list">

  {% for variant inproduct.variants %}

    <li class="{% if not variant.stock.available %}unavailable{% elseif variant.id == product.vid %}selected{% elseif variant.id != product.vid%}not-selected{% endif %}">

     <a href="{{ ( product.url ~ '?id=' ~ variant.id) | url }}" title="{% if variant.stock.available %}{{ 'In stock' | t }}{% else %}{{ 'Out of stock' | t }}{% endif %}">

      {{ variant.title | split(':')|last }}

     </a>

    </li>

   {% endfor %}

</ul>

Thanks

Abbas

Joey

Hi @Abbas I don't understand what you mean with,

"the pages with a oos matrix still shows"

EDIT: Oh, I guess that would be Out Of Stock. The code you have added does not hide the variants, it just makes them blurry.

You could hide them with CSS, display: none on the class for out of stock variants.

Abbas

Hi @Joey

I think I got confused because of the title of this discussion.

Sorted it!

.product-variant_block-variants.product-variant_notAvailable {

display: none

}

Thanks

Abbas

Hi again @Joey

I just wondered, can you think of a clever way to not include the Matrix groups? so for example on this page - https://www.waterstreetgallery.co.uk/en/aubergine.html?id=145011056

Instead of the product reading - "Interior: Lined","Size and number of Pages: 180 X 230 mm (Ultra), 240p.","Closure and cover type: Clasp"

it would just be

Lined, 180 X 230 mm (Ultra), 240p, Clasp

Thanks in advance

Joey

This might be possible but you will need to work clever with the replace filter:

https://ecom-support.lightspeedhq.com/hc/en-us/articles/115000277614-3-c-Rain-filters

jaharstone

@Joey Does hiding the non-stock items using CSS work in eCom Omni-Channel / Voila Theme as well? Can't seem to get it to stick. I imagine the class name for non-stocked variants might be different?

Joey

The method mentioned above replaces the original variant picker (regardless of Omni) and allows you to create your own.

If you want to modify the Voila theme you will need to find out if it shows a class when it is out of stock and then target that class.

Feel free to post the code you are working on or link to the specific page so we can have a look.

Mark

We've had some custom work done by @Shopmonkey - They've done an amazing job. All matrices do show the out of stock items, but now they can't be clicked and are grey. Very good for our lingerie section with sizes and toys with different colours.

One downside: Their solution didn't work for items that have 2 variants. Like Colour AND Size for one productpage.

It cost a small amount of money to have this implemented by them, but it works like a charm

vyperr3

Years and years later on this platform and no built in solution. Don't worry they have yet another subscription plan to leach money off of you. Really gross.

Milesbd

Hi Everyone, and thanks for all the comments on this topic!

While there is no user indication/ clue in our basic variant display available yet in our platform, it is something that could be implemented, as has been mentioned, with customization.

In order to help with this, the following sample code could be utilized to disable out-of-stock variants on the product page.

Currently, the code has been designed for the "Conform Plus" theme, for single and double-attribute matrices, however it could be modified to work with other themes.

Implementation:

1. Navigate to Settings -> Web Extras -> Custom JS
2. Copy/paste the following code into the box, enabling the setting and saving changes.

The end result should look like this for Double Attribute Matrices:

And like this for single Attribute matrices:

The Code:

<script>
// A quick check to see if it is a product being viewed (checking the microdata) - to avoid running the rest of the code if viewing a page other than the product page
if ($('[itemtype*="//schema.org/Product"]').length > 0) {


//Check the url to see if a variant is being viewed or not
var curl = location.href;


//choose the appropriate ajax url
if (curl.indexOf('?') > -1) {
  var url = curl + '&format=json';
} else {
  var url = '?format=json';
}


//Start the ajax call
$.ajax({
    url: url,
  })
  // Add the disabled attribute to the variants that aren't available
  .done(function(obj) {


    //create a variable with the product variants
    var data = obj.product.variants;


    //fun a function on each variant
    $.each(data, function(index, value) {


      //check if any of the variants aren't available for purchase
      if (!value.stock.available) {


        //CODE FOR DOUBLE ATTRIBUTE VARIANTS
        //check if the variants are double attribute
        if (value.title.indexOf(',') > -1) {
          console.log('Double Attribute matrix!');
          var attribute1 = value.title.replace(/"/g,'').split(',')[0].split(": ")[1];


          //only disable the variants for which the first attribute is being viewed
          if ($('select[name*="matrix"]:first()').val() == attribute1) {
            var option = value.title.replace(/"/g,'').split(',')[1].split(":")[1];
            $('select[name*="matrix"] > option[value=' + option + ']').attr('disabled', 'true');
          }


        //CODE FOR SINGLE ATTRIBUTE VARIANTS
        } else {
          console.log('Single Attribute matrix!');
          var option = value.title.split(': ')[1];
          $('select[name*="matrix"] > option[value=' + option + ']').attr('disabled', 'true');
        }
      }
    })
  });
} else {
  console.log('not a product page!');
}
</script>

tonypappas

Thanks a lot milesbd, Could you send me a customization for Theme Invision ?

We really need it !

Have a great day.

Nikki

Hi @Joey and @Milesbd

I have added that code however it is not working - is it possible with Omnichannel (On Site)? We are desperately looking for a solution to hide/grey out out of stock sizes, as this is by far the number one complaint we get.

We are using the theme Croissant at the moment.

More than happy to pay for an app to do this, however all the apps on the market at the moment do not support Omni.

Thanks so much in advance!!!

dsteinbeck

Nikki,

I just had the company, AdVision, fix this for us and cannot say enough how impressed I was with AdVision's responsiveness and professional approach to this. We use Lightspeed retail but since this is ecom specific development, it should work with OnSite too. At least it's worth asking them.

It's too bad that Lightspeed can't handle this directly, but but at least the issue is resolved. Their pricing was more than fair.

They also set up up with Omnichannel Gift cards last week too - so happy to have two of Lightspeed's shortcomings fixed.

https://advision-ecommerce.com/

Mvanderlaan

I cannot believe that Lightspeed can’t do basic e-commerce function of filtering by size. I am a retailer and this blows me away. This is a game changer for user experience. It appears this has been a problem for quite some time but still no solution that doesn’t cost me extra money. I can’t believe I have referred other retailers to lightspeed. What’s the ETA of having this problem resolved and what t can I do now?

Koppie

I've changed the code of Milesbd, because of the change of the value of the ID in the OPTION in some circumstances. Also there is a difference in Jquery, but I am not sure thats the real problem why it didn't work..

I've only checked the single attribute, not the double attribute variants, but it should work. I am not a Javascript developer, let alone a JQuery expert, but it works:

The code:

<code>

<script>

// A quick check to see if it is a product being viewed (checking the microdata) - to avoid running the rest of the code if viewing a page other than the product page

if ($('[itemtype*="//schema.org/Product"]').length > 0) {

//Check the url to see if a variant is being viewed or not

var curl = location.href;

//choose the appropriate ajax url

if (curl.indexOf('?') > -1) {

 var url = curl + '&format=json';

} else {

 var url = '?format=json';

}

//Start the ajax call

$.ajax({

  url: url,

 })

 // Add the disabled attribute to the variants that aren't available

 .done(function(obj) {

  //create a variable with the product variants

  var data = obj.product.variants;

  //fun a function on each variant

  $.each(data, function(index, value) {

   //check if any of the variants aren't available for purchase

   if (!value.stock.available) {

    //CODE FOR DOUBLE ATTRIBUTE VARIANTS

    //check if the variants are double attribute

    if (value.title.indexOf(',') > -1) {

     console.log('Double Attribute matrix!');

     var attribute1 = value.title.replace(/"/g,'').split(',')[0].split(": ")[1];

     //only disable the variants for which the first attribute is being viewed

     if ($('select[name*="matrix"]:first()').val() == attribute1) {

      var option = value.title.replace(/"/g,'').split(',')[1].split(":")[1];

       

      $('select[name*="matrix"] option:contains(' + option + ')').each(function(){

   if ($(this).text() == option) {

     $(this).attr('disabled', 'true');

     }

   });

       

     }

    //CODE FOR SINGLE ATTRIBUTE VARIANTS

    } else {

     

    var option = value.title.split(': ')[1];

    var selectname = value.title.split(': ')[0];

     

    $('select[name*="matrix"] option:contains(' + option + ')').each(function(){

   if ($(this).text() == option) {

     $(this).attr('disabled', 'true');

   }

});

    

    }

   }

  })

 });

} else {

 console.log('not a product page!');

}

</script>

</code>

evergreen

I too was surprised to find variants that haven't even been activated within retail are not filtered out on the eCom side.

I adjusted by changing the matrix options for some products to include all the available variants in a single attribute matrix, rather than as a two- or three- attribute matrix.

I find it ridiculous that after 3 years of this issue bugging customers LS still hasn't corrected this basic usability issue for shoppers.

Andrewtgrc

We use this code however it doesn't work with double attributes.

<code>

<script>

// A quick check to see if it is a product being viewed (checking the microdata) - to avoid running the rest of the code if viewing a page other than the product page

if ($('[itemtype*="//schema.org/Product"]').length > 0) {

//Check the url to see if a variant is being viewed or not

var curl = location.href;

//choose the appropriate ajax url

if (curl.indexOf('?') > -1) {

 var url = curl + '&format=json';

} else {

 var url = '?format=json';

}

//Start the ajax call

$.ajax({

  url: url,

 })

 // Add the disabled attribute to the variants that aren't available

 .done(function(obj) {

  //create a variable with the product variants

  var data = obj.product.variants;

  //fun a function on each variant

  $.each(data, function(index, value) {

   //check if any of the variants aren't available for purchase

   if (!value.stock.available) {

    //CODE FOR DOUBLE ATTRIBUTE VARIANTS

    //check if the variants are double attribute

    if (value.title.indexOf(',') > -1) {

     console.log('Double Attribute matrix!');

     var attribute1 = value.title.replace(/"/g,'').split(',')[0].split(": ")[1];

     //only disable the variants for which the first attribute is being viewed

     if ($('select[name*="matrix"]:first()').val() == attribute1) {

      var option = value.title.replace(/"/g,'').split(',')[1].split(":")[1];

       

      $('select[name*="matrix"] option:contains(' + option + ')').each(function(){

  if ($(this).text() == option) {

    $(this).attr('disabled', 'true');

    }

  });

       

     }

    //CODE FOR SINGLE ATTRIBUTE VARIANTS

    } else {

     

    var option = value.title.split(': ')[1];

    var selectname = value.title.split(': ')[0];

     

    $('select[name*="matrix"] option:contains(' + option + ')').each(function(){

  if ($(this).text() == option) {

    $(this).attr('disabled', 'true');

  }

});

    

    }

   }

  })

 });

} else {

 console.log('not a product page!');

}

</script>

</code>

Andrewtgrc

Okay so I finally figured out why the double attribute matrix items were not working!! And it finally works!

<script>

// A quick check to see if it is a product being viewed (checking the microdata) - to avoid running the rest of the code if viewing a page other than the product page

if ($('[itemtype*="//schema.org/Product"]').length > 0) {

 //Check the url to see if a variant is being viewed or not

 var curl = location.href;

 //choose the appropriate ajax url

 if (curl.indexOf('?') > -1) {

  var url = curl + '&format=json';

 } else {

  var url = '?format=json';

 }

 //Start the ajax call

 $.ajax({

   url: url,

  })

  // Add the disabled attribute to the variants that aren't available

  .done(function(obj) {

   //create a variable with the product variants

   var data = obj.product.variants;

   //fun a function on each variant

   $.each(data, function(index, value) {

    //check if any of the variants aren't available for purchase

    if (!value.stock.available) {

     //CODE FOR DOUBLE ATTRIBUTE VARIANTS

     //check if the variants are double attribute

     if (value.title.indexOf(',') > -1) {

      var attribute1 = value.title.replace(/"/g, '').split(',')[0].split(": ")[1];

      //only disable the variants for which the first attribute is being viewed

      if ($('select[name*="matrix"]:first()').val().replace(/%2F/g, '/').replace(/\+/g, ' ') == attribute1) {

       var option = value.title.replace(/"/g, '').split(',')[1].split(":")[1].trim();

       $('select[name*="matrix"] option:contains(' + option + ')').each(function() {

        if ($(this).text() == option) {

         $(this).attr('disabled', 'true');

        }

       });

      }

      //CODE FOR SINGLE ATTRIBUTE VARIANTS

     } else {

      var option = value.title.split(': ')[1];

      var selectname = value.title.split(': ')[0];

      $('select[name*="matrix"] option:contains(' + option + ')').each(function() {

       if ($(this).text() == option) {

        $(this).attr('disabled', 'true');

       }

      });

     }

    }

   })

  });

} else {

 console.log('not a product page!');

}

</script>