From 554cde41b8e0167fc56338c71f330cb9329f4f1a Mon Sep 17 00:00:00 2001
From: Kerim <keamansaryyev@gmail.com>
Date: Tue, 20 Jun 2023 16:08:37 +0500
Subject: [PATCH] prod grid

---
 themes/nurgul/pages/category.htm              |  25 +-
 themes/nurgul/partials/helper/pagination.htm  |   7 +
 .../nurgul/partials/product/tab-pane-item.htm |  64 +++++
 themes/nurgul/partials/product/tab-pane.htm   | 219 +-----------------
 themes/nurgul/partials/scripts/getByCat.htm   |  58 ++++-
 themes/nurgul/partials/scripts/prodCard.htm   | 140 +++++++++--
 6 files changed, 254 insertions(+), 259 deletions(-)
 create mode 100755 themes/nurgul/partials/helper/pagination.htm
 create mode 100755 themes/nurgul/partials/product/tab-pane-item.htm

diff --git a/themes/nurgul/pages/category.htm b/themes/nurgul/pages/category.htm
index d9fd669..af5dbf0 100755
--- a/themes/nurgul/pages/category.htm
+++ b/themes/nurgul/pages/category.htm
@@ -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>
diff --git a/themes/nurgul/partials/helper/pagination.htm b/themes/nurgul/partials/helper/pagination.htm
new file mode 100755
index 0000000..eb43059
--- /dev/null
+++ b/themes/nurgul/partials/helper/pagination.htm
@@ -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>
diff --git a/themes/nurgul/partials/product/tab-pane-item.htm b/themes/nurgul/partials/product/tab-pane-item.htm
new file mode 100755
index 0000000..2a61ffe
--- /dev/null
+++ b/themes/nurgul/partials/product/tab-pane-item.htm
@@ -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>
diff --git a/themes/nurgul/partials/product/tab-pane.htm b/themes/nurgul/partials/product/tab-pane.htm
index 6eafd19..476b2ca 100755
--- a/themes/nurgul/partials/product/tab-pane.htm
+++ b/themes/nurgul/partials/product/tab-pane.htm
@@ -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>
\ No newline at end of file
+    <div class="ltn__product-tab-content-inner ltn__product-list-view">
+        <div class="row" id="products_list_cat">
+            <!-- ltn__product-item -->
+
+            <!--  -->
+        </div>
+    </div>
+</div>
diff --git a/themes/nurgul/partials/scripts/getByCat.htm b/themes/nurgul/partials/scripts/getByCat.htm
index 0c1aae1..02fc2cf 100755
--- a/themes/nurgul/partials/scripts/getByCat.htm
+++ b/themes/nurgul/partials/scripts/getByCat.htm
@@ -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 () {
diff --git a/themes/nurgul/partials/scripts/prodCard.htm b/themes/nurgul/partials/scripts/prodCard.htm
index 081832c..696bb46 100755
--- a/themes/nurgul/partials/scripts/prodCard.htm
+++ b/themes/nurgul/partials/scripts/prodCard.htm
@@ -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>