Debut Theme Display Quantity On Product Page

Solved
Tourist
5 1 0

I've tried looking at a few different solutions for displaying quantity on the product page and seen some fixes for other themes but I'm having challenges with the debut theme. The html / liquid below I've put in place in the snippets/product-price.liquid file after line 46 (code spans from line 27 - 46)

 

 

  <div class="price__regular">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s class="price-item price-item--regular" data-regular-price>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}            
          </span>
        {% endif %}
      {% else %}
        <span class="price-item price-item--regular" data-regular-price>
          {{ 'products.product.sold_out' | t }}
        </span>
      {% endif %}

 

 

This is what I placed in on line 47:

 

{% comment %} Inventory tracking on product page {% endcomment %}
        <div id="variant-inventory" class="">
          {% if current_variant.inventory_quantity > 0 %}
          <i>We have {{ current_variant.inventory_quantity }} in stock.</i>
          {% else %}
          <i>This product will take an additional 1 - 2 weeks to ship.</i>
          {% endif %}
        </div>

 

Now this does work initially but there's some issues I'm having.

 

  1. On the collection page, this is showing up but it's only showing "We have in stock."
    1. This implies it's not reading the stock value.
    2. I would rather not show this on the collection page at all.
    3. I have not edited the collection page code in any way.
  2. On the product page, the initial load will show the inventory quantity, however if you select a different variant it resets and removes completely
    1. Refreshing the page gives weird results:
      1. Sometimes it shows up but shows the same stock regardless what variant is selected.
      2. Other times it just resets and removes the reference completely, and we're back to square one.

 

I'm not sure if anyone can advise what I'm missing or need to change? I haven't touched the theme.js as I'm not much of a javascript guy.

 

Aside from the code above, the next steps we'd like to look at is listing the item sizes in a table format and showing the respective quantities for each size. But I suspect that will require changing how the product size variant selection method (currently a dropdown) functions.

 

Appreciate any help anyone can offer.

 

 

 

 

 

0 Likes

Hello 
To show quantity on product page follow this steps:
40.jpg

46.jpg47.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Shopify Expert
2676 65 665

First, the theme code calls for the  product-price snippet  both on product page (in product-template section) and on collection pages, inside product-cart-grid snippet. That's why you have this new output  on collection pages as well.

The easiest would be to move your code from the product-price snippet to the product-template section directly.

 

Second, when you select variants on the  product page, javascript code overwrites the entire price__regular element, therefore your output disappears. 

 

And third -- you have to add some new javascript code if you want to update the inventory level display as your visitors select different variants on product page.

There is a number of posts which address this (I wrote several myself, for example in this thread).  

 

If you want to create a kind of order form on the product page, this is a bit more complex question, but you can start by looking at this tutorial 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Tourist
5 1 0

@oscprofessional wrote:

Hello 
To show quantity on product page follow this steps:
40.jpg

46.jpg47.jpg


I appreciate to guidance but this isn't accomplishing the goal. This enables the customer to select the quantity they want to purchase, but it does not display the quantity I have available to sell to the customer.

 

Thank you though.

0 Likes

Success.

Tourist
5 1 0

@tim wrote:

First, the theme code calls for the  product-price snippet  both on product page (in product-template section) and on collection pages, inside product-cart-grid snippet. That's why you have this new output  on collection pages as well.

The easiest would be to move your code from the product-price snippet to the product-template section directly.

...


Thanks, I appreciate the insight. I managed to figure this out but I like the reassurance that the way I went about it was correct. I ended up putting the content in the section/product-template.liquid file, line after line 147 (the end of the product price section below):

 

<div class="product__price">
            {% include 'product-price', variant: current_variant %}
          </div>
        
          {% include 'inventory-table' %}{% comment %} I added {% endcomment %}
          {% comment %} Inventory tracking on product page {% endcomment %}
          <div id="variant-inventory" style="font-size: 0.8em;">
            <i>If your size shows out of stock, feel free to place an order and we can see if it's available on back order. 
              Please account for an additional 1 - 2 weeks to ship products out of stock but available on back order.</i>
          </div>

I ended up inserting a code snippet as a new file, called it inventory-table. I pulled it from another tutorial. Here's what that code looks like:

 

 

 

<div id="inventory">
  <br/>
  <h3>Inventory Available</h3>
	{% assign options1 = product.variants | map: "option1" %}
  	 <table>          
		<tr>
			{% if product.options.size > 1 %}<th>&nbsp;</th>{% endif %}
			{% assign options1Filtered = '' %}
			{% for option1 in options1 %}
			{% assign option1Space = option1 | prepend: ', ' %}
			{% unless options1Filtered  contains option1Space %}
			<th><strong>{{ option1 }}</strong></th>	
			{% assign options1Filtered = options1Filtered | append: ', ' | append: option1 %}            
			{% endunless %}             
			{% endfor %}         
		</tr>

		{% if product.options.size > 1 %} 
		{% assign options2 = product.variants | map: "option2" %}

		{% assign options2Filtered = '' %}
		{% assign options1Split = options1Filtered | remove_first: ', '  | split: ', ' %}

		{% assign index = 1 %}
		{% for option2 in options2 %}
		<tr>
			{% assign optionSpace = option2 | prepend: ', ' %}

			{% unless options2Filtered contains optionSpace %}                         
			<td><strong>{{ option2 }}</strong></td>	             
			{% for option1 in options1Split %}
			{% assign variantFound = false %}
			<td>
				{% for variant in product.variants %}          	
				{% if variant.option1 == option1 and variant.option2 == option2 %}                
				{{ variant.inventory_quantity }}
				{% assign variantFound = true %}
				{% endif %} 
				{% if forloop.last and variantFound == false %}N/A{% endif %} 
				{% endfor %}
			</td>          
			{% endfor %}           
			{% assign options2Filtered = options2Filtered | append: ', ' | append: option2 %} 
			{% endunless %} 
		</tr>
		{% endfor %}       
		{% else %}
		<tr>
			{% for variant in product.variants %}
			<td>{{ variant.inventory_quantity }} </td>
			{% endfor %}	
		</tr>
		{% endif %}
	</table>      
</div>

For anyone coming across the code above and unsure what it does, it's basically creating an inventory table that iterates through the variants to display their inventory like so:

 

 

s9s_inv_example.png

 


@tim wrote:

...

Second, when you select variants on the  product page, javascript code overwrites the entire price__regular element, therefore your output disappears. 

...


kk, that's good to know. So I'd imagine I'd have to hook into that sort of scripting if I wanted the inventory table above to adjust as the customer selects product counts to add to the cart (so they don't accidentally pick more than what's available). Correct?

 


@tim wrote:

...

And third -- you have to add some new javascript code if you want to update the inventory level display as your visitors select different variants on product page.

There is a number of posts which address this (I wrote several myself, for example in this thread).  

 

If you want to create a kind of order form on the product page, this is a bit more complex question, but you can start by looking at this tutorial 


I'll take a look but it might be to a point where I might just get someone to do the work for me, if it makes sense. That's probably inline with another thread I saw where you make recommendations on doing tagging with grouping efforts like: Brand_My Brand, Colour_Yellow, Colour_Blue, etc. But this won't show up as a way to filter on the collection pages of the Debut theme by default, so I imagine some code modifications need to be made. You are welcome to PM me with your rate to accomplish such work if you understand what I'm asking and you are interested. Thanks!

0 Likes
Shopify Expert
2676 65 665

Having this table is nice way to avoid updating stock level with javascript when customer selects new variant.

 

I do not think you should update the inventory status as customer chooses quantity on the product page -- have not seen any theme doing this. 

Simple code would not account for other buyers affecting inventory, complex code would need to frequently re-request inventory data from the server, which is an overkill IMHO.

Few themes prevent visitor from adding more than available to their cart, it's only when you're moving to checkout the system will updates your cart to what's available and reserve it for you.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Tourist
5 1 0

@tim wrote:

...

Simple code would not account for other buyers affecting inventory, complex code would need to frequently re-request inventory data from the server, which is an overkill IMHO.

...

 


Fair point, I did not even think about that and how interactions with other customers at the same time would go. Guess I was just so focused on the UX for just 1 user. Thanks a lot for all your feedback.

 

I'm going to close / end my comments on this thread. For others who find this thread, I'll mark my previous thread as the solution for a simple table.

 

Hope it helps others!

0 Likes