Product Restock Notfication

When a product is out of stock, the Zid system allows customers to provide their contact information to be notified when the product is back in stock.

The following snippet demonstrates how to implement the product restock notification form when the product is unavailable.

Code Sample:

product.twig

<div class="section-out-of-stock-notify-me {% if product.selected_product.out_of_stock %}d-block{% else %}d-none{% endif %}">
    <div class="border-product" style="margin-top: 15px"></div>
    <div>
        <h4 class="product-title">{{ locals.lbl_error_product_out_of_stock }}</h4>
        <form>
            <input type="hidden" class="send-notify-product-id" value="{{ product.selected_product.id }}">
            <div class="form-group form-notify-me">
                <h4>{{ locals.notify_me_title }}</h4>

                <input class="form-control send-notify-name" value="{{ customer.name }}" type="text" placeholder="{{ locals.notify_me_hint_name }}" />
                <input class="form-control send-notify-email" type="email" value="{{ customer.email }}" placeholder="{{ locals.notify_me_hint }}" />
                <div class="d-flex form-notify-me-phone-row">
                    <input class="form-control send-notify-country-key"
                           type="number"
                           {% if customer.mobile  %}
                           value="{{ customer.mobile | slice(0, 3) }}"
                           {% else %}
                           value="966"
                           {% endif %}
                           placeholder="966" maxlength="4" />
                    <input class="form-control send-notify-phone" type="number"  value="{{ customer.mobile | slice(3, 9) }}" placeholder="{{ locals.notify_me_hint_mobile }}" maxlength="10" />
                </div>
                <div class="form-notify-me-submit-button-row">
                    <button type="button" class="btn btn-primary btn-send-notify" onclick="sendProductNotifyMe()">
                        <img class="send-notify-progress d-none" src="{{ asset_url }}spinner.gif" width="15" height="15"/>
                        {{ locals.send }}
                    </button>
                </div>

            </div>
        </form>
    </div>
</div>

<script>
    function sendProductNotifyMe() {
        if(!$('.send-notify-progress').hasClass('d-none'))
            return;

        $('.send-notify-progress').removeClass('d-none');
        zid.store.product.setAvailabilityNotificationEmail(
            $('.send-notify-product-id').val(),
            $('.send-notify-email').val(),
            $('.send-notify-name').val(),
            $('.send-notify-country-key').val() + $('.send-notify-phone').val(),
        ).then(function (response) {
            if(response.status  === 'success'){
                toastr.success('{{ locals.sent_successfully }}', null)
            }else{
                if(response && response.data && response.data.message) {
                    toastr.error(JSON.stringify(response.data.message), '{{ locals.sorry }}')
                }else {
                    toastr.error('{{ locals.notify_me_failed }}', '{{ locals.sorry }}')
                }
            }
            $('.send-notify-progress').addClass('d-none');
        })
    }
</script>

The following information needs to be submitted to zid.store.product.setAvailabilityNotificationEmail:

• Product ID (required)
• Customer Name (required)
• Customer Email (required)
• Customer Mobile (optional)

Upon successful submission, the system will monitor the product's availability and send a notification to the customer when the product is back in stock.

Valuable Resources:

• Theme Starter Sample on GitHub
• Getting Started with Zid Themes