Show text based on product variation and if has stock (conditional logic)

[Xaveus]

Hello,

I'm working on custom code to show text (delivery date estimation) based on variation and if this variation has stock. I already made a custom code which worked very well but since the latest version of Shopify, it does not work anymore.

I used this conditional logic but it's not working anymore :

{% for variant in product.variants %}
{% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
{% endif %}
{% endfor %}

Here's the code I want to use:

Click to expand...

<div class="not-in-quickbuy" id="w2v-i">
    <product-inventory class="no-js-hidden" id="w2v-0">
        {% if shop.locale == "fr" %}
        {{ '//unchained-pro.com/ressources/date-fr-FR.js' | script_tag }}
        <div class="product-info-block product-inventory product-inventory--pulse product-inventory--ok with-icon lightly-spaced-row" id="w2v-1">
            <div class="icon-container" id="w2v-2">
                <span class="product-inventory__icon-ok" id="w2v-7">{%- render 'icon', icon: 'check_mark_in_circle', size: 'small' -%}</span>
            </div>
            <span class="with-icon__beside product-inventory__status" id="estimated-delivery">En stock : chargement de l'estimation de livraison...</span>
        </div>
        <script>
            // Get delivery dates using DateJS library
            var fromDateFR = Date.today().addDays(2);
            if (fromDateFR.is().saturday() || fromDateFR.is().sunday()) {
                fromDateFR = fromDateFR.next().monday();
            }
            var toDateFR = fromDateFR.clone().addDays(1);
            if (toDateFR.is().saturday() || toDateFR.is().sunday()) {
                toDateFR = toDateFR.next().monday();
            }
            // Update the estimated delivery text
            document.getElementById("estimated-delivery").innerHTML = `En stock : livré chez vous entre le <b>${fromDateFR.toString('dddd d MMMM')}</b> et le <b>${toDateFR.toString('dddd d MMMM')}</b>`;
            </script>
            {% else %}
            {{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
            <div class="product-info-block product-inventory product-inventory--pulse product-inventory--ok with-icon lightly-spaced-row" id="w2v-1">
                <div class="icon-container" id="w2v-2">
                    <span class="product-inventory__icon-ok" id="w2v-7">{%- render 'icon', icon: 'check_mark_in_circle', size: 'small' -%}</span>
                </div>
                <span class="with-icon__beside product-inventory__status" id="estimated-delivery">Available: Calculating...</span>
            </div>
            <script>
                // Get delivery dates using DateJS library
                var fromDate = Date.today().addDays(2);
                if (fromDate.is().saturday() || fromDate.is().sunday()) {
                    fromDate = fromDate.next().monday();
                }
                var toDate = fromDate.clone().addDays(2);
                if (toDate.is().saturday() || toDate.is().sunday()) {
                    toDate = toDate.next().monday();
                }
                // Update the estimated delivery text
                document.getElementById("estimated-delivery").innerHTML = `Delivery between <b>${fromDate.toString('dddd d, MMMM')}</b> and <b>${toDate.toString('dddd d, MMMM')}</b>`;
            </script>
            {% endif %}
    </product-inventory>
</div>

Here's the code that worked with the old version:

Click to expand...

<div class="variant-visibility-area{% unless block.settings.show_in_quickbuy %} not-in-quickbuy{% endunless %}" {{ block.shopify_attributes }}>
    {% for variant in product.variants %}
        {% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
        {% if shop.locale == "fr" %}
    
        {{ '//unchained-pro.com/ressources/date-fr-FR.js' | script_tag }}
        <script type="text/template" data-variant-id="{{ variant.id }}">
            <div class="product-info-block product-inventory-notice  product-inventory-notice--pulse with-icon">
                <div class="icon-container">
                    <svg class="icon icon--small icon--type-check_mark_in_circle" stroke-width="1" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <circle stroke="currentColor" fill="none" cx="8" cy="8" r="6.6666665"></circle>
                    <path stroke="currentColor" fill="none" transform="translate(5.0003335,6.0003335)" d="m 6,0 -4,4 L 0,2.1818182"></path>
                    </svg>
                </div>
                <span class="with-icon__beside" id="estimated-delivery">En stock : chargement de l'estimation de livraison...</span>
            </div>
        <script>
            // Get delivery dates using DateJS library
            var fromDateFR = Date.today().addDays(2);
            if (fromDateFR.is().saturday() || fromDateFR.is().sunday()) {
                fromDateFR = fromDateFR.next().monday();
            }
            var toDateFR = fromDateFR.clone().addDays(1);
            if (toDateFR.is().saturday() || toDateFR.is().sunday()) {
                toDateFR = toDateFR.next().monday();
            }
            // Update the estimated delivery text
            document.getElementById("estimated-delivery").innerHTML = `En stock : livré chez vous entre le <b>${fromDateFR.toString('dddd d MMMM')}</b> et le <b>${toDateFR.toString('dddd d MMMM')}</b>`;
            </script>
        {% else %}
        {{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
        <script type="text/template" data-variant-id="{{ variant.id }}">
            <div class="product-info-block product-inventory-notice  product-inventory-notice--pulse with-icon">
            <div class="icon-container">
                <svg class="icon icon--small icon--type-check_mark_in_circle" stroke-width="1" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                <circle stroke="currentColor" fill="none" cx="8" cy="8" r="6.6666665"></circle>
                <path stroke="currentColor" fill="none" transform="translate(5.0003335,6.0003335)" d="m 6,0 -4,4 L 0,2.1818182"></path>
                </svg>
            </div>
            <span class="with-icon__beside" id="estimated-delivery">Available: Calculating...</span>
            </div>
            <script>
                // Get delivery dates using DateJS library
                var fromDate = Date.today().addDays(2);
                if (fromDate.is().saturday() || fromDate.is().sunday()) {
                    fromDate = fromDate.next().monday();
                }
                var toDate = fromDate.clone().addDays(2);
                if (toDate.is().saturday() || toDate.is().sunday()) {
                    toDate = toDate.next().monday();
                }
                // Update the estimated delivery text
                document.getElementById("estimated-delivery").innerHTML = `Delivery between <b>${fromDate.toString('dddd d, MMMM')}</b> and <b>${toDate.toString('dddd d, MMMM')}</b>`;
            </script>
        {% endif %}
        {% endif %}
        {% endfor %}
    </div>

Thank you in advance!

Best regards,

Jordan

[BSS-Commerce]

Hi @Xaveus ,

I don't see an error in the code you provided, can you provide more clarity on the error you are encountering?

I tried your code on my theme and it still works fine.