How can you display only In-Stock Matrix Varients?

akilnessakilness Member Posts: 3
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:


23 comments

  • JoeyJoey Administrator, Moderator, Lightspeed Staff Posts: 221 moderator
    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!

    eCom Support Team
    Lightspeed HQ
  • akilnessakilness Member Posts: 3
    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?
  • dsteinbeckdsteinbeck Member Posts: 13
    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.
  • mattywebbmattywebb Member Posts: 2
    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!

  • mattywebbmattywebb Member Posts: 2
    Fuck - the author of that plug in is now charging $21.95 a month! An $18 price hike since June!
  • ljorikljorik Member Posts: 4
    did anybody found a solution to this yet, i currently tried multiple things with no succes yet
  • justinbernardusjustinbernardus Member, Beta tester Posts: 4
    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 
  • ljorikljorik Member Posts: 4

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

  • homegrownskatehomegrownskate Member Posts: 2

    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.


  • homegrownskatehomegrownskate Member Posts: 2
  • AbbasAbbas Member Posts: 48

    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

  • JoeyJoey Administrator, Moderator, Lightspeed Staff Posts: 221 moderator
    edited May 2019

    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.

    eCom Support Team
    Lightspeed HQ
  • AbbasAbbas Member Posts: 48

    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

  • AbbasAbbas Member Posts: 48

    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

  • JoeyJoey Administrator, Moderator, Lightspeed Staff Posts: 221 moderator

    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

    eCom Support Team
    Lightspeed HQ
  • jaharstonejaharstone Member Posts: 1

    @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?

  • JoeyJoey Administrator, Moderator, Lightspeed Staff Posts: 221 moderator

    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.

    eCom Support Team
    Lightspeed HQ
  • MarkMark Member Posts: 82 ✭

    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

  • vyperr3vyperr3 Member Posts: 5

    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.

  • MilesbdMilesbd Moderator, Lightspeed Staff Posts: 21 moderator

    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>
    
    


  • tonypappastonypappas Member Posts: 1

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

    We really need it !

    Have a great day.

Sign In or Register to comment.