Help with cart refresh/update in debut theme

Solved
Highlighted
Excursionist
11 0 4
Hey, I apologize I’ve been distracted for the last week and didn’t check back in. Still looking for a solution on this one!
0 Likes
Highlighted
New Member
5 0 0

Did you manage to find a solution for this? I'm looking to do something similar

0 Likes
Highlighted
Excursionist
11 0 4
Nope, never found a solution, part of why my store has still not gone live....
0 Likes
Highlighted
Shopify Partner
48 4 10

Hi Taylorprd and dhruveonmars!

Hopefully I can help you out with this.

 

Taylorprd, a few questions to clarify what you need... Is this how you would like it to work?

- If there is more inventory than the quantity in cart, do not display a message

- If there is less inventory than quantity in cart, and there is 0 inventory available, display "Out of stock - 2-4 week build time."

- If there is less inventory than quantity in cart, and there is 1 or more inventory, display "x in stock - 2-4 weeks build time on additional quantities."

 

Also, would you be able to share a link to your site so that I can make sure to give you the right code?

 

Thanks,

Josh

Joshua Sarros - Freelance Web Developer from Melbourne, Australia
joshuasarros@gmail.com
1 Like
Highlighted
Excursionist
11 0 4
That is correct Josh! Here is a preview link: https://be0j7r2120t78li7-11240833090.shopifypreview.com/
Thank you!
0 Likes
Highlighted
New Member
5 0 0

I'm not using the debut theme, but building a theme. To achieve the cart refresh and update dynamically within the page, I'm using CartJS and some custom scripts. I've managed to get it working so far, but needs more testing

0 Likes
Highlighted
Shopify Partner
48 4 10

Hi again Taylorpdx, thanks for the link! I've just planned out a few updates that you can make. Since I can't see your theme code specifically there's a chance these updates might not work, but give it a try and let me know how you go with it!

 

1. Change this line in cart-template.liquid (should be around line #121):

<input class="cart__qty-input" type="number" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*" data-quantity-item="{{ forloop.index }}">

 

to this:

<input class="cart__qty-input" type="number" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*" data-quantity-item="{{ forloop.index }}" data-qty="{{item.variant.inventory_quantity}}">

 

2. Similarly, change the following line (approx line #98) from:

<input class="cart__qty-input" type="number" name="updates[]" id="updates_large_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*" data-quantity-item="{{ forloop.index }}">

 

to this:

<input class="cart__qty-input" type="number" name="updates[]" id="updates_large_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*" data-quantity-item="{{ forloop.index }}" data-qty="{{item.variant.inventory_quantity}}">

 

Note: only difference for both changes is adding this in:

data-qty="{{item.variant.inventory_quantity}}"

The reason for making the above updates is to ensure we can check the inventory level of the product while the page is loaded, which previously you could not do.

 

3. At the very bottom of that file (cart-template.liquid), please add the following:

<script type="text/javascript">
  document.querySelectorAll('.cart__qty-input').forEach(function(el) {
    el.addEventListener('change', function (e) {
      var inventory = e.srcElement.dataset.qty;
      var reqQty = e.srcElement.value;
      var label = e.srcElement.closest('tr.cart__row').querySelector('p.inventory-status');

      if (inventory < reqQty && inventory > 0) {
        label.innerText = `${inventory} in stock - 2-4 weeks build time on additional quantities.`;
      } else if (inventory < 1) {
        label.innerText = "Out of stock - 2-4 week build time."
      } else {
        label.innerText = "";
      }
    });
  });
</script>

This Javascript code will wait for the quantity input to change and when it does it will update the message appropriately.

 

4. One last change that 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.

 

Please let me know how you go!

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

Hey, Thanks for the help! I couldn't find that exact code in my cart-template.liquid but I did find these similar lines:

 <input id="updates_{{ item.key }}" class="cart__qty-input" type="number"
                    value="{{ item.quantity }}" min="0" pattern="[0-9]*"
                    data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-mobile >

and:

<input id="updates_large_{{ item.key }}" class="cart__qty-input" type="number"
                    name="updates[]" value="{{ item.quantity }}" min="0" pattern="[0-9]*"
                    data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop {{ 'cart.general.update' | t }} >

I tried adding the code you suggested to the end of these lines as well as updating my code and adding the script and it seems to work for a split second the very first time you adjust the cart - and then the message goes back to what it previously was. after that no adjusting of quantities changes anything until I manually refresh. Any Ideas? Is there a better way I can share my theme code with you?

0 Likes
Highlighted
Shopify Partner
48 4 10

No worries at all!

I might have written a bit of the logic wrong in the script that you added to the end of the file. I have rewritten it using the same logic that you have given me previously. Hopefully it will work better now!

 

Try replacing the script at the bottom of the file with the following:

 

<script type="text/javascript">
document.querySelectorAll('.cart__qty-input').forEach(function(el) { el.addEventListener('change', function (e) { var inventory = e.srcElement.dataset.qty; var reqQty = e.srcElement.value; var label = e.srcElement.closest('tr.cart__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>

 

I'd be happy to have a look at your theme code directly if you like, I would just need you to give me access to your store. I have just sent you a request to access your store if you want me to.

 

Let me know how you go! 

Josh

 

Joshua Sarros - Freelance Web Developer from Melbourne, Australia
joshuasarros@gmail.com
1 Like
Highlighted
Excursionist
11 0 4

Still no luck. I gave you access, thanks for taking a look!

I added your code to my main theme (debut custom theme) and saved a backup to 'debut custom theme - working draft' before making any changes.

0 Likes