Updating Depending On Inventory stock without JQuery

Tourist
7 1 0

I run a small handmade business from shopify.

 

I'd like to allow products to be bought when out of stock, but make it very obvious to customers about wait times. In stock items take about 5 days, made to order about a month.

 

So far I have some jQuery code which displays the stock levels, this is working. To be honest I don't know how I added it ages ago.

 

          if (variant) {
      if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
        if (variant.inventory_quantity > 5) {
           jQuery('#variant-inventory').text("In Stock");
        }
        else if( variant.inventory_quantity > 0){
          jQuery('#variant-inventory').text('In Stock - ' + variant.inventory_quantity + ' left');
          
        } 
        else {
          jQuery('#variant-inventory').text('Currently in production, please contact me about pre-ordering');
        }
      } else {
        jQuery('#variant-inventory').text("This product is available");
      }
    } else {
        jQuery('#variant-inventory').text("");
    }

And I wrote the following liquid code to show the delivery times based on if the product is in stock.

 

 <p><span style="color:green;">Estimated UK Delivery :    
   
   
   {%if variant.available %}
   {%if variant.inventory_quantity > 0 %}
          
				{% assign deliverydate = 'now' | date: "%s"| plus : 432000  %}                
				{% assign deliverydayofweek = deliverydate | date: "%w"  %}  
                {% assign deliverydayofmonth = deliverydate | date: "%d"  %} 
                 
					{% if deliverydayofweek == '0' %}               
    					{% assign deliverydate = deliverydate | date: "%s"| plus : 86400  %}
                
					{% endif %}  
                 
                {{deliverydate | date: "%a "}}
         
				{% case deliverydayofmonth %}
  					{% when "1" or "21" or "31" %} {{ deliverydayofmonth }}st
  					{% when "2" or "22" %}{{ deliverydayofmonth }}nd
  					{% when "3" or "23" %}{{ deliverydayofmonth }}rd
  					{% else %}{{ deliverydayofmonth }}th               
				{% endcase %}
                 
          
   				{{ deliverydate | date: "%b" }}    
            
                 </span></p>



{%endif%}

{%else %}

	{% assign deliverydate = 'now' | date: "%s"| plus : 2629746  %}                
				{% assign deliverydayofweek = deliverydate | date: "%w"  %}  
                {% assign deliverydayofmonth = deliverydate | date: "%d"  %} 
                 
					{% if deliverydayofweek == '0' %}               
    					{% assign deliverydate = deliverydate | date: "%s"| plus : 86400  %}
                
					{% endif %}  
                 
                {{deliverydate | date: "%a "}}
         
				{% case deliverydayofmonth %}
  					{% when "1" or "21" or "31" %} {{ deliverydayofmonth }}st
  					{% when "2" or "22" %}{{ deliverydayofmonth }}nd
  					{% when "3" or "23" %}{{ deliverydayofmonth }}rd
  					{% else %}{{ deliverydayofmonth }}th               
				{% endcase %}
                 
          
   				{{ deliverydate | date: "%b" }}    
            
                 </span></p>

{%endif%}

This works on page load, but not if you select through different variants when the page is loaded.

 

It seems I can't add liquid code to the jQuery part...

 

Is there a way to get everything working together? I'd rather just work in liquid because I want to do things like change the 'add to cart' text to 'pre-order now' and other things to make it obvious it's a longer wait time.

 

But from what I know liquid won't work while the user is selecting different options on a page that is loaded, so maybe Im screwed?

 

Thanks

 

0 Likes
Tourist
7 1 0

I'm going to try work through it here myself as no one seems very forthcoming so far.

 

Thought I'd crack it when I read this 

https://help.shopify.com/en/themes/customization/products/variants/use-products-with-multiple-option...

 

And found the var selectCallback = function(variant, selector) in my theme. I changed the code as follows 

 

   // Select a valid variant if available
        if (variant.available) {
          // Available, enable the submit button, change text, show quantity elements
          cache.$addToCart.removeClass('disabled').prop('disabled', false);
          cache.$addToCartText.html(translations.add_to_cart);
          cache.$quantityElements.show();
        } else {
          // Sold out, disable the submit button, change text, hide quantity elements
         // cache.$addToCart.addClass('disabled').prop('disabled', true);
         // cache.$addToCartText.html(translations.sold_out);
         //  cache.$quantityElements.hide();
          
          // added by tom, remove 3 lines below and uncomment 3 above to restore
          cache.$addToCart.removeClass('disabled').prop('disabled', false);
          cache.$addToCartText.html('Pre-Order');
          cache.$quantityElements.show();
        }

Which is changing the add to cart text nicely for out of stock variants, but I get the error "Parameter Missing or Invalid: Required parameter missing or invalid: items" If I click it. Even If I change the product to 'Continue selling when out of stock' So I'm stuck again now :/

 

 

0 Likes
Tourist
93 4 7

Hello 

 

 

 

 

 

0 Likes