Debut theme - how display stock qty availability in product page?

New Member
7 0 0

Debut theme - how display stock qty availability in product page?

0 Likes
Shopify Partner
1838 173 558

Customize theme and go to Product pages > Product section

 

XFxARdP

I turn coffee in to code - since 1998
2 Likes
Shopify Partner
2567 39 584

Karl, what version of the theme is this?

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Shopify Partner
1838 173 558

9.0.0 Not sure if that's the latest or not.

I turn coffee in to code - since 1998
0 Likes
New Member
7 0 0

Hmmm I don't have those selection :)))) look my screenshot.fck.jpg

0 Likes
Shopify Partner
1838 173 558

Well that's interesting.

 

I only have an old version of Debut incl. inventory quantity display setting that's severely messed up as I use it for answering questions on forums i.e. so much **** in it that I wouldn't ZIP it and send it over. Come to think about it... maybe I added this code myself some time ago as part of some answer for someone... hmm? Oops, that'd confuse the hell out of you guys :D I did do that.

 

Section schema

    {
      "type": "checkbox",
      "id": "show_inventory_quantity",
      "label": {
        "de": "Inventarmenge anzeigen",
        "en": "Show inventory level",
        "es": "Mostrar cantidad de inventario",
        "fr": "Afficher la quantité d'inventaire",
        "it": "Mostra la quantità di inventario",
        "ja": "在庫数を表示",
        "pt-BR": "Exibir quantidade de inventário"
      },
      "default": false
    }

 

Section code for above

{% if section.settings.show_inventory_quantity %}
  <div class="product__inventory">
    <span>{{ current_variant.inventory_quantity }}</span> {{ 'products.product.inventory_quantity_available' | t }}
  </div>
{% endif %}

 

You'd need to add the CSS class if you want to style it. You'd also need to add the translation string products.product.inventory_quantity for your language.

 

You would also add this script bit just before the {% schema %}

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}-Extended">
    {
      "variants": [
      {% for variant in product.variants -%}
        {
          "id": {{ variant.id }},
          "inventory_quantity": {{ variant.inventory_quantity }}
        }{%- unless forloop.last -%},{%- endunless -%}
      {%- endfor %}
      ]
    }
  </script>
{% endunless %}

That's for later to extend the JSON product object which doesn't contain inventory levels.

 

Now for the tricky part... Javascript. That involves quite a few edits in quite a few places. If you are comfortable editing JS let me know and I can post a lengthy how-to in a follow up answer - I do have the code working and ready so no fuss there.

 

If you aren't comfy making multiple edits and additions to theme.js.liquid then I'd consider not having this feature or hiring @tim if he's up for it :-D

 

Either way, let me know - will check later but first beer!

 

p.s. sorry for the confusion I caused by thinking the feature was part of regular Debut theme.

I turn coffee in to code - since 1998
0 Likes
New Member
7 0 0

Could you write me email, I need some more help, if you are guru shopify :)

Email me please: sleeve@inbox.lv

0 Likes
Shopify Partner
1838 173 558

@Jury Just PM me here.

 

I'll write up a how-to for the JS part as soon as I am done figuring out a Shopify mystery from another question :-D

I turn coffee in to code - since 1998
0 Likes
New Member
2 0 0

I see everywhere people suggesting to go to "product pages" under the theme section but i see this no where and have searched for about an hour now! please can someone help me locate this as it will really help me solve my other questions. Thank you in advance

Flow
Balance your peace, energy & growth
0 Likes
Highlighted
Shopify Partner
1 0 0

Try our App. Perhaps it will help you.  https://apps.shopify.com/discount-manager

0 Likes