Display variant inventory quantity on product page - Narrative Theme

Solved
celiasilk
Shopify Partner
1 0 0

Hello,

 

I'm using the Narrative theme and I'm wanting to show the inventory quantity on the product page. I was able to figure out how to show how much of one variant is left, but if you switch variants the stock doesn't change unless you refresh the page. I've followed a few other forum instructions but I haven't found any that work with this theme.

 

Here is the code I'm using: 

We have <span class="variant_inventory_quantity">{{ current_variant.inventory_quantity }}</span> spots left.

Screen Shot 2019-05-14 at 3.51.41 PM.png

Is anyone familiar with what I would need to do in the Narrative theme? Maybe I'm overlooking something and there's an easier solution. Thank you in advance!

 

Best,

Celia

0 Likes
JuanCarlos-PIL
New Member
2 0 0

Were you able to sort this out? I fixed this on the Debut template but the work around does not seem to work on narrative.  Below is the bit of code that did the trick on Debut, added to line 2488 right before the  updatePrice end curl... 

// Update the product quantity    
    if (variant) {
     if (variant.inventory_management == "shopify" && variant.inventory_policy != "deny") {
     if( variant.inventory_quantity > 0){
      jQuery('#variant-inventory').text('Only ' + variant.inventory_quantity + ' available.');
      }
     }
    }    
   }, 

this is what i am currently using on narrative, which does not resolve the issue.

 _updateProductPrices: function(variant, $container) {
    var productPrice = variant.price;
    var comparePrice = variant.compare_at_price;
    var variant = variant.inventory_quantity

    $(selectors$12.regularPrice, $container).html(
      currency.formatMoney(productPrice, theme.moneyFormat)
    );

    $(selectors$12.compareAtPrice, $container).html(
      currency.formatMoney(comparePrice, theme.moneyFormat)
    );

    $(selectors$12.productPrice, $container).toggleClass(
      classes$11.productPriceSale,
      comparePrice > productPrice
    );

    $(selectors$12.unitPriceContainer, $container).addClass(
      classes$11.productPriceUnitUnavailable
    );
    if (variant.unit_price_measurement) {
      $(selectors$12.unitPrice, $container).html(
        currency.formatMoney(variant.unit_price, theme.moneyFormat)
      );
      $(selectors$12.unitPriceBaseUnit, $container).html(
        this.getBaseUnit(variant)
      );
      $(selectors$12.unitPriceContainer, $container).removeClass(
        classes$11.productPriceUnitUnavailable
      );
    }
    // Update the product quantity 
    if (variant) {      
     if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
     if( variantQuantity > 0){
      jQuery('#variant-inventory').text('Only ' + variant.inventory_quantity + ' available');
      }
     }
    } 
  }, 
  
0 Likes
Aaliyan-Gul
Tourist
5 1 1

This is an accepted solution.

add in product-template.liquid

 

 

<span class="variant_inventory_quantity" data-inventory>{{ current_variant.inventory_quantity }}</span>

 

 

<script>
    window._VARIANTS = {};
    {% for variant in product.variants %}
    window._VARIANTS[{{ variant.id }}] = {{ variant.inventory_quantity }}
      {% endfor %}
 </script>

 

 

add in theme.js

 

var selectors$12 = {
  inventoryContainer: '[data-inventory]',
};

 

 

_updateProductPrices: function(variant, $container) {
    var vinventory = _VARIANTS[variant.id];
    if (variant.inventory_management !== '') {
      $(selectors$12.inventoryContainer, $container).html(vinventory);
    } else {
      $(selectors$12.inventoryContainer, $container).html('250');
    }
  },

 

GIGIsamba
Tourist
3 0 1

Thanks a lot for your help. 

I would like to do the same here. 

I am not sure if I am doing that correctly. First times adding code. 

 

Do you add the lines of code at the end of both product.liquid and theme.js?

 

 

0 Likes
faimiswer
New Member
4 0 0

Hello, Were you able to sort this issue? I am trying the same as well. Could you please tell where exactly should I paste the code to display inventory quality on product page? Thanks. 

0 Likes
OverTheMoon
New Member
1 0 0

Hi there.  I am trying to accomplish the same thing but when add the code to the end of those files it doesn't work.  Is there a specific section of the file I need to add the code to?

0 Likes