106 lines
3.8 KiB
HTML
106 lines
3.8 KiB
HTML
{% put scripts %}
|
|
|
|
<script>
|
|
getTopProducts('{{query}}');
|
|
// console.log("qqq");
|
|
var topProd = document.getElementById("products_top");
|
|
|
|
function getTopProducts(query) {
|
|
var html_data = ``;
|
|
console.log(query);
|
|
$(document).ready(function () {
|
|
$.ajax({
|
|
url: 'http://216.250.11.229/derman/app/api/products?' + query,
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
beforeSend: function () {
|
|
$('#products_top').hide();
|
|
$('#loader_top').show();
|
|
},
|
|
success: function (data, textStatus, xhr) {
|
|
$('#loader_top').hide(500);
|
|
$('#products_top').show(500);
|
|
|
|
var products = data.data;
|
|
for (var product of products) {
|
|
// $('.slick-track').append(sliderProductCard(product));
|
|
html_data += sliderProductCard(product);
|
|
}
|
|
|
|
// topProd.innerHTML = html_data;
|
|
$('.slick-track').html(html_data);
|
|
},
|
|
error: function (xhr, textStatus, errorThrown) {
|
|
console.log('Error in Operation');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function sliderProductCard(product) {
|
|
|
|
var product_str = JSON.stringify(product);
|
|
|
|
var card = `<div class="col-12">
|
|
<div class="ltn__product-item text-center">
|
|
<div class="product-img">
|
|
<a href="/">
|
|
<img src="`+ product.images[0].original_image_url + `" alt="Nurgul ` + product.name + `" style="width: 400px;height: 280px;object-fit: fill;">
|
|
</a>
|
|
`
|
|
+
|
|
|
|
(product.hasOwnProperty('special_price') ?
|
|
`<div class="product-badge">
|
|
<ul>
|
|
<li class="badge-2">{{'product.badge.discount'|_}}</li>
|
|
</ul>
|
|
</div>`
|
|
:
|
|
``
|
|
)
|
|
|
|
+
|
|
`<div class="product-hover-action product-hover-action-2">
|
|
<ul>
|
|
<li>`+
|
|
"<a href='#' onClick='setModal(" + product_str + ")' title='Quick View' data-bs-toggle='modal' data-bs-target='#quick_view_modal'>"
|
|
+ `<i class="icon-magnifier"></i>
|
|
</a>
|
|
</li>
|
|
<li class="add-to-cart">
|
|
<a href="#" title="Add to Cart" data-bs-toggle="modal"
|
|
data-bs-target="#add_to_cart_modal">
|
|
<span class="cart-text d-none d-xl-block">{{add}}</span>
|
|
<span class="d-block d-xl-none"><i class="icon-handbag"></i></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Quick View" data-bs-toggle="modal"
|
|
data-bs-target="#quick_view_modal">
|
|
<i class="icon-shuffle"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="product-info">
|
|
<h2 class="product-title"><a href="product-details.html">`+ product.name + `</a></h2>
|
|
<div class="product-price">
|
|
<span>`+ product.formatted_price + `</span>`
|
|
+
|
|
(product.hasOwnProperty('special_price') ? `<del>` + product.formatted_regular_price + `</del>` : ``) +
|
|
`</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
|
|
return card;
|
|
}
|
|
|
|
</script>
|
|
|
|
{% endput %}
|
|
|
|
{% partial 'scripts/setModal' %}
|