Help with cart refresh/update in debut theme

Solved
Highlighted
Excursionist
11 0 4

also FYI I've been using the pour over stands as a test product because I have them set to keep selling when inventory is 0 (as I can easily make more to order)

1 Like
Highlighted
Shopify Partner
57 5 13

Thanks for that, I'll check it out and get back to you soon!

Joshua Sarros - Freelance Web Developer from Melbourne, Australia
joshuasarros@gmail.com
0 Likes

Success.

Shopify Partner
57 5 13

Hi Taylorpdx,

 

I've got an update for you and I think it's working now!

Thanks for giving me the access to your store too, it made it a lot easier because it turned out really complicated to get this to work.

 

The updates I have made are not ideal from a development point of view, but if you're happy with how it works then there's no problem keeping it on your site. 

 

I'm going to recap everything that I did so that it's clear for anyone that comes across this in the future. I have already made all of these updates on your theme, so there's no need for you to!

 

1. The first change we will need to make is to the code you have added from your very first post.


Taking this select part of your code:

{% if item.variant.inventory_quantity >= item.quantity %} 
  {%- comment -%}In stock{%- endcomment -%}
{% elsif item.variant.inventory_quantity <= item.quantity and item.variant.inventory_quantity <= 0 %}
  <p> Out of stock - 2-4 week build time. <p>
{% elsif item.variant.inventory_quantity <= item.quantity and item.variant.inventory_quantity >= 0 %} 
  <p> {{ item.variant.inventory_quantity }} in stock - 2-4 week build time on additional quantities.<p>
{% endif %}

Please change it to the following:

{% if item.variant.inventory_quantity >= item.quantity %} 
  {%- comment -%}In stock{%- endcomment -%}
  <p class="inventory-status"></p>
{% elsif item.variant.inventory_quantity <= item.quantity and item.variant.inventory_quantity <= 0 %}
  <p class="inventory-status"> Out of stock - 2-4 week build time. <p>
{% elsif item.variant.inventory_quantity <= item.quantity and item.variant.inventory_quantity >= 0 %} 
  <p class="inventory-status"> {{ item.variant.inventory_quantity }} in stock - 2-4 week build time on additional quantities.<p>
{% endif %}

By making this change, we make sure the the area for the message to display in will always be present on the page.

 

2. Add this code to the bottom of your cart-template.liquid file

<script type="text/javascript">
  tmw_cartItems = {};
  {%- for item in cart.items -%}
  tmw_cartItems['{{item.key}}'] = {{item.variant.inventory_quantity}};
  {% endfor %}
  
  function tmw_updateCartText() {
    for (var key in tmw_cartItems) {
      var inventory = tmw_cartItems[key];
      var row = document.querySelector(`tr[data-cart-item-key="${key}"]`);
      var reqQty = row.querySelector('.cart__qty-input').value;
      var label = row.querySelector('p.inventory-status');
      if (inventory >= reqQty) {
        label.innerText = ""; 
      } else if (inventory <= reqQty && inventory <= 0) {
        label.innerText = "Out of stock - 2-4 week build time." 
      } else if (inventory <= reqQty && inventory >= 0) {
        label.innerText = `${inventory} in stock - 2-4 weeks build time on additional quantities.`; 
      }
    }
  }  
</script>

This code saves the inventory quantity of each item in your cart so that it can be referenced when updating the message. Also it is used to compare the inventory quantity and the customer's purchase quantity to display the correct message for each cart item.

 

3. The last update that was required is in your theme.js file, adding this at line #3020, which is at the end of the _updateItemQuantity function:

try { tmw_updateCartText(); } catch(e){}

This is to trigger the text to be changed as soon as the quantity in the cart is updated.

 

That's it!

Please let me know how you find it and if there's any issues. 

 

Feel free to contact me any time on here or you can email me directly.

Josh

 

 

Joshua Sarros - Freelance Web Developer from Melbourne, Australia
joshuasarros@gmail.com
1 Like
Highlighted
Excursionist
11 0 4
It seems to be working great! Thanks so much for the help!
1 Like
Highlighted
Shopify Partner
57 5 13

My pleasure!

Let me know if you need a hand with anything else, feel free to email me directly too if you ever need.

 

Josh

Joshua Sarros - Freelance Web Developer from Melbourne, Australia
joshuasarros@gmail.com
0 Likes