Display variant inventory quantity on product page - Narrative Theme

Highlighted
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
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