This commit is contained in:
Shohrat 2023-06-20 11:09:16 +00:00
commit 066e7cc433
6 changed files with 254 additions and 259 deletions

View File

@ -10,7 +10,7 @@ function onStart(){
==
{% partial 'loader/loader' id='loader_cat' %}
<div id="deatil_screen">
<div id="detail_screen">
<!-- BREADCRUMB AREA START -->
<div class="ltn__breadcrumb-area ltn__breadcrumb-area-4 ltn__breadcrumb-color-white---">
<div class="container">
@ -43,7 +43,7 @@ function onStart(){
</div>
</li>
<li>
<div class="short-by text-center">
<!-- <div class="short-by text-center">
<select class="nice-select">
<option>Default sorting</option>
<option>Sort by popularity</option>
@ -51,12 +51,12 @@ function onStart(){
<option>Sort by price: low to high</option>
<option>Sort by price: high to low</option>
</select>
</div>
</div> -->
<div class="ltn__grid-list-tab-menu ">
<div class="nav">
<a class="active show" data-bs-toggle="tab"
href="shop-grid.html#liton_product_grid"><i class="icon-grid"></i></a>
<a data-bs-toggle="tab" href="shop-grid.html#liton_product_list"><i
href="#liton_product_grid"><i class="icon-grid"></i></a>
<a data-bs-toggle="tab" href="#liton_product_list"><i
class="icon-menu"></i></a>
</div>
</div>
@ -76,18 +76,9 @@ function onStart(){
</div>
</div>
</div>
<div class="ltn__pagination-area text-center">
<div class="ltn__pagination ltn__pagination-2">
<ul>
<li><a href="shop-grid.html#"><i class="icon-arrow-left"></i></a></li>
<li><a href="shop-grid.html#">1</a></li>
<li class="active"><a href="shop-grid.html#">2</a></li>
<li><a href="shop-grid.html#">3</a></li>
<li><a href="shop-grid.html#">...</a></li>
<li><a href="shop-grid.html#"><i class="icon-arrow-right"></i></a></li>
</ul>
</div>
</div>
{% partial 'helper/pagination' %}
</div>
</div>
</div>

View File

@ -0,0 +1,7 @@
<div class="ltn__pagination-area text-center" id="pagination">
<div class="ltn__pagination ltn__pagination-2">
<ul id="pagination_numbers">
</ul>
</div>
</div>

View File

@ -0,0 +1,64 @@
<div class="col-lg-12">
<div class="ltn__product-item">
<div class="product-img">
<a href="/product/detail/{{product.id}}">
<img src="img/product/2.png" alt="#">
</a>
<div class="product-badge">
<ul>
<li class="badge-1">Hot</li>
</ul>
</div>
</div>
<div class="product-info">
<h2 class="product-title"><a href="product-details.html">Red Rose
Bouquet</a></h2>
<div class="product-price">
<span>$16</span>
</div>
<div class="product-ratting">
<ul>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
</ul>
</div>
<div class="product-brief">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Recusandae asperiores sit odit nesciunt, aliquid, deleniti
non et ut dolorem!</p>
</div>
<div class="product-hover-action product-hover-action-2">
<ul>
<li>
<a href="shop-grid.html#" 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="shop-grid.html#" 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 to
Cart</span>
<span class="d-block d-xl-none"><i class="icon-handbag"></i></span>
</a>
</li>
<li>
<a href="shop-grid.html#" title="Quick View" data-bs-toggle="modal"
data-bs-target="#quick_view_modal">
<i class="icon-shuffle"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>

View File

@ -1,212 +1,9 @@
<div class="tab-pane fade" id="liton_product_list">
<div class="ltn__product-tab-content-inner ltn__product-list-view">
<div class="row">
<!-- ltn__product-item -->
<div class="col-lg-12">
<div class="ltn__product-item">
<div class="product-img">
<a href="product-details.html"><img src="img/product/2.png"
alt="#"></a>
<div class="product-badge">
<ul>
<li class="badge-1">Hot</li>
</ul>
</div>
</div>
<div class="product-info">
<h2 class="product-title"><a href="product-details.html">Red Rose
Bouquet</a></h2>
<div class="product-price">
<span>$16</span>
</div>
<div class="product-ratting">
<ul>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
</ul>
</div>
<div class="product-brief">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Recusandae asperiores sit odit nesciunt, aliquid, deleniti
non et ut dolorem!</p>
</div>
<div class="product-hover-action product-hover-action-2">
<ul>
<li>
<a href="shop-grid.html#" 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="shop-grid.html#" 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 to
Cart</span>
<span class="d-block d-xl-none"><i
class="icon-handbag"></i></span>
</a>
</li>
<li>
<a href="shop-grid.html#" title="Quick View"
data-bs-toggle="modal"
data-bs-target="#quick_view_modal">
<i class="icon-shuffle"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ltn__product-item -->
<div class="col-lg-12">
<div class="ltn__product-item">
<div class="product-img">
<a href="product-details.html"><img src="img/product/1.png"
alt="#"></a>
<div class="product-badge">
<ul>
<li class="badge-2">12%</li>
</ul>
</div>
</div>
<div class="product-info">
<h2 class="product-title"><a href="product-details.html">Red Rose
Bouquet</a></h2>
<div class="product-price">
<span>$16</span>
<del>$19</del>
</div>
<div class="product-ratting">
<ul>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
</ul>
</div>
<div class="product-brief">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Recusandae asperiores sit odit nesciunt, aliquid, deleniti
non et ut dolorem!</p>
</div>
<div class="product-hover-action product-hover-action-2">
<ul>
<li>
<a href="shop-grid.html#" 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="shop-grid.html#" 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 to
Cart</span>
<span class="d-block d-xl-none"><i
class="icon-handbag"></i></span>
</a>
</li>
<li>
<a href="shop-grid.html#" title="Quick View"
data-bs-toggle="modal"
data-bs-target="#quick_view_modal">
<i class="icon-shuffle"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ltn__product-item -->
<div class="col-lg-12">
<div class="ltn__product-item">
<div class="product-img">
<a href="product-details.html"><img src="img/product/4.png"
alt="#"></a>
<div class="product-badge">
<ul>
<li class="badge-1">Hot</li>
</ul>
</div>
</div>
<div class="product-info">
<h2 class="product-title"><a href="product-details.html">Red Rose
Bouquet</a></h2>
<div class="product-price">
<span>$16</span>
</div>
<div class="product-ratting">
<ul>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
<li><a href="shop-grid.html#"><i class="icon-star"></i></a>
</li>
</ul>
</div>
<div class="product-brief">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Recusandae asperiores sit odit nesciunt, aliquid, deleniti
non et ut dolorem!</p>
</div>
<div class="product-hover-action product-hover-action-2">
<ul>
<li>
<a href="shop-grid.html#" 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="shop-grid.html#" 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 to
Cart</span>
<span class="d-block d-xl-none"><i
class="icon-handbag"></i></span>
</a>
</li>
<li>
<a href="shop-grid.html#" title="Quick View"
data-bs-toggle="modal"
data-bs-target="#quick_view_modal">
<i class="icon-shuffle"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- -->
</div>
</div>
</div>
<div class="ltn__product-tab-content-inner ltn__product-list-view">
<div class="row" id="products_list_cat">
<!-- ltn__product-item -->
<!-- -->
</div>
</div>
</div>

View File

@ -2,30 +2,74 @@
<script>
getCat('{{query}}', '{{catId}}');
getCatProducts('{{query}}', '{{limit}}', '{{catId}}');
getCatProducts('{{query}}', '{{limit}}', '{{catId}}', '1');
$('#pagination').hide();
// console.log("qqq");
function getCatProducts(query, limit, catId) {
function getCatProducts(query, limit, catId, page) {
$(document).ready(function () {
$.ajax({
url: `https://nurgul.com.tm/app/api/products?`+query+`&category=`+catId+`&limit=`+limit,
url: `https://nurgul.com.tm/app/api/products?` + query + `&category=` + catId + `&limit=` + limit + `&page=` + page,
type: 'GET',
dataType: 'json',
beforeSend: function () {
$('#products_{{id}}').html("");
$('#products_list_{{id}}').html("");
$('#pagination_numbers').html("");
$('#detail_screen').hide();
$('#products_{{id}}').hide();
$('#loader_{{id}}').show();
},
success: function (data, textStatus, xhr) {
$('#loader_{{id}}').hide(500);
$('#products_{{id}}').show(500);
$('#show_title').html(`<span>{{'all'|_}}`+ data.meta.total +`</span>`);
$('#detail_screen').show();
$('#loader_{{id}}').hide();
$('#products_{{id}}').show();
$('#show_title').html(`<span>{{'all'|_}}` + data.meta.total + `, {{'per.page'|_}} ` + data.meta.to + `</span>`);
if (data.meta.total > 8) {
$('#pagination').show();
}
// console.log(data.data);
var products = data.data;
for (var product of products) {
// console.log(product.name);
$('#products_{{id}}').append(productCard(product));
$('#products_list_{{id}}').append(productList(product));
}
var pagination = data.meta;
$('#pagination_numbers').append(
(pagination.current_page != 1 ?
`<li><a href="javascript:;" onClick="getCatProducts(` + `'{{query}}'` + `,` + `'{{limit}}'` + `,` + `'{{catId}}'` + `,` + pagination.links[1].label + `)"><i class="icon-arrow-left"></i></a></li>`
:
`<li><a href="javascript:;"><i class="icon-arrow-left"></i></a></li>`
)
);
// for (var paginate of pagination.links) {
for (var i = 0; i < pagination.links.length; i++) {
if (i != 0 && i != pagination.links.length-1) {
$('#pagination_numbers').append(
`<li` + (pagination.links[i].active ? ` class="active" ` : ``) + `><a href="javascript:;" onClick="getCatProducts(` + `'{{query}}'` + `,` + `'{{limit}}'` + `,` + `'{{catId}}'` + `,` + pagination.links[i].label + `)">` + pagination.links[i].label + `</a></li>`
);
}
}
$('#pagination_numbers').append(
(pagination.current_page != pagination.last_page ?
`<li><a href="javascript:;" onClick="getCatProducts(` + `'{{query}}'` + `,` + `'{{limit}}'` + `,` + `'{{catId}}'` + `,` + (pagination.current_page + 1) + `)"><i class="icon-arrow-right"></i></a></li>`
:
`<li><a href="javascript:;"><i class="icon-arrow-right"></i></a></li>`
)
);
// $('#pagination_numbers').append(
// `<li` + (pagination.current_page == (pagination.from - pagination.per_page) ? ` class="active" ` : ``) + `><a href="javascript:;" onClick="getCatProducts(` + `'{{query}}'` + `,` + `'{{limit}}'` + `,` + `'{{catId}}'` + `, '2')">` + (pagination.from - pagination.per_page) + `</a></li>`
// // <li><a href="javascript:;" id="pagination_prev"><i class="icon-arrow-right"></i></a></li>
// );
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
@ -37,7 +81,7 @@
function getCat(query, catId) {
$(document).ready(function () {
$.ajax({
url: `https://nurgul.com.tm/app/api/categories/`+ catId +`?`+query,
url: `https://nurgul.com.tm/app/api/categories/` + catId + `?` + query,
type: 'GET',
dataType: 'json',
beforeSend: function () {

View File

@ -1,7 +1,7 @@
{% put scripts %}
<script>
function productCard(product){
function productCard(product) {
var product_str = JSON.stringify(product);
@ -9,36 +9,36 @@
<div class="ltn__product-item text-center">
<div class="product-img">` +
(product.images.length > 0 ?
`<a href="/product/detail/`+ product.id +`">
<img src="`+product.images[0].original_image_url+`" alt="Nurgul `+product.name+`" style="width: 400px;height: 280px;object-fit: fill;">
(product.images.length > 0 ?
`<a href="/product/detail/` + product.id + `">
<img src="`+ product.images[0].original_image_url + `" alt="Nurgul ` + product.name + `" style="width: 400px;height: 280px;object-fit: fill;">
</a>
`
:
`<a href="/product/detail/`+ product.id +`">
<img src="{{'assets/no_img.jpg'|theme}}" alt="Nurgul `+product.name+`" style="width: 400px;height: 280px;object-fit: fill;">
:
`<a href="/product/detail/` + product.id + `">
<img src="{{'assets/no_img.jpg'|theme}}" alt="Nurgul `+ product.name + `" style="width: 400px;height: 280px;object-fit: fill;">
</a>
`
)
)
+
+
(product.hasOwnProperty('special_price') ?
`<div class="product-badge">
(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">
+
`<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 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">
@ -58,17 +58,109 @@
</div>
</div>
<div class="product-info">
<h2 class="product-title"><a href="product-details.html">`+ product.name +`</a></h2>
<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>
<span>`+ product.formatted_price + `</span>`
+ (product.hasOwnProperty('special_price') ? `<del>` + product.formatted_regular_price + `</del>` : ``) +
`</div>
</div>
</div>
</div>`;
return card;
return card;
}
function productList(product) {
var product_str = JSON.stringify(product);
var list = `
<div class="col-lg-12">
<div class="ltn__product-item">
<div class="product-img">
`
+
(product.images.length > 0 ?
`
<a href="/product/detail/` + product.id + `">
<img style="height: 300px;width: 320px;object-fit: cover;" src="`+ product.images[0].original_image_url + `" alt="Nurgul ` + product.name + `" >
</a>
`
:
`
<a style="height: 300px;width: 320px;object-fit: cover;" href="/product/detail/` + product.id + `">
<img src="{{'assets/no_img.jpg'|theme}}" alt="Nurgul ` + product.name + `" >
</a>
`
)
+
(product.hasOwnProperty('special_price') ?
`<div class="product-badge">
<ul>
<li class="badge-1">{{'product.badge.discount'|_}}</li>
</ul>
</div>
`
:
``
)
+
`</div>
<div class="product-info">
<h2 class="product-title"><a href=""/product/detail/` + product.id + `">` + 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 class="product-brief">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Recusandae asperiores sit odit nesciunt, aliquid, deleniti
non et ut dolorem!</p>
</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="shop-grid.html#" 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="shop-grid.html#" title="Quick View" data-bs-toggle="modal"
data-bs-target="#quick_view_modal">
<i class="icon-shuffle"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
`;
return list;
}
</script>