derm_oct/themes/nurgul/partials/scripts/productDetail.htm

{% put scripts %}

<script>
    getProductDetail('{{query}}');
    // console.log("qqq");
    function getProductDetail(query) {
        console.log(query);
        $(document).ready(function () {
            $.ajax({
                url: `http://216.250.11.229/derman/app/api/products/{{prodId}}/` + query + `{{activeLocale}}`,
                type: 'GET',
                dataType: 'json',
                beforeSend: function () {
                    $('#deatil_screen').hide();
                    $('#loader').show();
                },
                success: function (data, textStatus, xhr) {
                    $('#loader').hide();
                    $('#deatil_screen').show();


                    console.log(data.data);

                    var product = data.data;
                    setDetail(product);

                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Error in Operation');
                }
            });
        });
    }

    function setDetail(product) {
        var images = product.images;
        if (images.length > 0) {
            for (var image of images) {
                // console.log(product.hasOwnProperty('special_price'));
                $('#product_images').append(`<div class="single-small-img">
                                            <img src="`+ image.small_image_url + `" alt="Nurgul ` + product.name + `">
                                        </div>`);
            }

            for (var image of images) {
                // console.log(product.hasOwnProperty('special_price'));
                $('#product_large_images').append(`<div class="single-large-img">
                                                    <a href="`+ image.original_image_url + `" data-rel="lightcase:myCollection">
                                                        <img src="`+ image.original_image_url + `" alt="Nurgul ` + product.name + `">
                                                    </a>
                                                </div>`);
            }
        } else {
            $('#product_images').html(`<div class="single-small-img">
                                            <img src="{{'assets/no_img.jpg'|theme}}" alt="Nurgul ` + product.name + `">
                                        </div>`);

            $('#product_large_images').html(`<div class="single-large-img">
                        <a href="{{'assets/no_img.jpg'|theme}}" data-rel="lightcase:myCollection">
                            <img src="{{'assets/no_img.jpg'|theme}}" alt="Nurgul ` + product.name + `">
                        </a>
                    </div>`);
        }

        // $('#product_images').html(`<img src="`+product.images[0].original_image_url+`" alt="Nurgul `+ product.name +`">`);

        $('#product_name').html(product.name);
        $('#product_main').html(product.name);
        $('#product_price').html(product.formatted_price);
        $('#product_desc_short').html(product.short_description);
        $('#product_desc').html(product.description);
        $('#detail_add_cart').html(
            `<a ` + ("{{nurgulToken}}" == "" ? `href='/login'` : `href="javascrip:;" data-request="onAddCart" data-request-data="product_id: `+ product.id +`, quantity: `+ 1 +`"`) + `
                class="theme-btn-1 btn btn-effect-1 d-add-to-cart">
                <span id="product_add"></span>
            </a>`
        );
        $('#detail_wishlist').html(
            `<a ` + ("{{nurgulToken}}" == "" ? `href='/login'` : `href="javascript:;" data-request="onSaveWishlist" data-request-data="product_id: `+ product.id +`" `) + ` class="btn btn-effect-1 d-add-to-wishlist" title="Add to Cart">
                <i class="icon-heart"></i>
            </a>`
        );
        $('#product_add').html(`{{ 'add.cart'|_ }}`);

        if (product.hasOwnProperty('special_price')) {
            $('#product_discount').show();
            $('#product_discount').html(product.formatted_regular_price);
        } else {
            $('#product_discount').hide();
        }
    }
</script>
{% endput %}