detail api
This commit is contained in:
Kerim
parent
d5f112fdaa
commit
c8da3466a6
|
|
@ -0,0 +1,159 @@
|
|||
url = "/product/detail/:id"
|
||||
layout = "main"
|
||||
title = "Product/detail"
|
||||
==
|
||||
<?php
|
||||
function onStart(){
|
||||
$this['prodId'] = $this->param('id');
|
||||
}
|
||||
?>
|
||||
==
|
||||
{% partial 'loader/loader' id='loader' %}
|
||||
<div id="deatil_screen">
|
||||
<!-- BREADCRUMB AREA START -->
|
||||
<div class="ltn__breadcrumb-area ltn__breadcrumb-area-4 ltn__breadcrumb-color-white---">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ltn__breadcrumb-inner text-center">
|
||||
<h1 class="ltn__page-title">{{'prod.detail.header'|_}}</h1>
|
||||
<div class="ltn__breadcrumb-list">
|
||||
<ul>
|
||||
<li><a href="/">{{'home.title'|_}}</a></li>
|
||||
<li id="product_name"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- BREADCRUMB AREA END -->
|
||||
|
||||
<!-- SHOP DETAILS AREA START -->
|
||||
<div class="ltn__shop-details-area pb-70">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12">
|
||||
<div class="ltn__shop-details-inner">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="ltn__shop-details-img-gallery ltn__shop-details-img-gallery-2">
|
||||
<div class="ltn__shop-details-small-img slick-arrow-2" id="product_images">
|
||||
</div>
|
||||
|
||||
<div class="ltn__shop-details-large-img" id="product_large_images">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="modal-product-info shop-details-info pl-0">
|
||||
<h3 id="product_main"></h3>
|
||||
<div class="product-price-ratting mb-20">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="product-price">
|
||||
<span id="product_price">0</span>
|
||||
<del id="product_discount">0</del>
|
||||
</div>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<div class="product-ratting">
|
||||
<ul>
|
||||
<li><a href="product-details.html#"><i
|
||||
class="icon-star"></i></a></li>
|
||||
<li><a href="product-details.html#"><i
|
||||
class="icon-star"></i></a></li>
|
||||
<li><a href="product-details.html#"><i
|
||||
class="icon-star"></i></a></li>
|
||||
<li><a href="product-details.html#"><i
|
||||
class="icon-star"></i></a></li>
|
||||
<li><a href="product-details.html#"><i
|
||||
class="icon-star"></i></a></li>
|
||||
<li class="review-total"> <a href="product-details.html#"> ( 95
|
||||
Reviews )</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-product-brief">
|
||||
<p id="product_desc_short">Nurgul</p>
|
||||
</div>
|
||||
|
||||
<div class="ltn__product-details-menu-2 product-cart-wishlist-btn mb-30">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="cart-plus-minus">
|
||||
<input type="text" value="02" name="qtybutton"
|
||||
class="cart-plus-minus-box">
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
class="theme-btn-1 btn btn-effect-1 d-add-to-cart"
|
||||
title="Add to Cart" data-bs-toggle="modal"
|
||||
data-bs-target="#add_to_cart_modal">
|
||||
<span id="product_add"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
class="btn btn-effect-1 d-add-to-wishlist" title="Add to Cart"
|
||||
data-bs-toggle="modal" data-bs-target="#add_to_cart_modal">
|
||||
<i class="icon-heart"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="ltn__social-media mb-30">
|
||||
<ul>
|
||||
<li class="d-meta-title">Share:</li>
|
||||
<li><a href="product-details.html#" title="Facebook"><i
|
||||
class="icon-social-facebook"></i></a></li>
|
||||
<li><a href="product-details.html#" title="Twitter"><i
|
||||
class="icon-social-twitter"></i></a></li>
|
||||
<li><a href="product-details.html#" title="Pinterest"><i
|
||||
class="icon-social-pinterest"></i></a></li>
|
||||
<li><a href="product-details.html#" title="Instagram"><i
|
||||
class="icon-social-instagram"></i></a></li>
|
||||
|
||||
</ul>
|
||||
</div> -->
|
||||
<!-- <div class="modal-product-meta ltn__product-details-menu-1 mb-30">
|
||||
<ul>
|
||||
<li><strong>SKU:</strong> <span>12345</span></li>
|
||||
<li>
|
||||
<strong>Categories:</strong>
|
||||
<span>
|
||||
<a href="product-details.html#">Flower</a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Tags:</strong>
|
||||
<span>
|
||||
<a href="product-details.html#">Love</a>
|
||||
<a href="product-details.html#">Flower</a>
|
||||
<a href="product-details.html#">Heart</a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SHOP DETAILS AREA END -->
|
||||
{% partial 'product/detail_footer' %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% partial 'scripts/productDetail' add='add.cart'|_ query= '?locale=tm' prodId=prodId %}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<div class="row justify-content-center" id={{id}}>
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-12" style="text-align: center;">
|
||||
<img src="{{'assets/loader.gif'|theme}}" style="width: 25%;">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<!-- SHOP DETAILS TAB AREA START -->
|
||||
<div class="ltn__shop-details-tab-area pb-60">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ltn__shop-details-tab-inner">
|
||||
<div class="ltn__shop-details-tab-menu">
|
||||
<div class="nav">
|
||||
<a class="active show" data-bs-toggle="tab" href="product-details.html#liton_tab_details_1_1">{{'detail.desc.tab'|_}}</a>
|
||||
<!-- <a data-bs-toggle="tab" href="product-details.html#liton_tab_details_1_2" class="">{{'detail.review.tab'|_}}</a> -->
|
||||
|
||||
<a data-bs-toggle="tab" href="product-details.html#liton_tab_details_1_4" class="">{{'detail.shipping.tab'|_}}</a>
|
||||
<!-- <a data-bs-toggle="tab" href="#liton_tab_details_1_5" class="">Size Chart</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade active show" id="liton_tab_details_1_1">
|
||||
<div class="ltn__shop-details-tab-content-inner text-center">
|
||||
<p id="product_desc"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="liton_tab_details_1_4">
|
||||
<div class="ltn__shop-details-tab-content-inner">
|
||||
<h4 class="title-2">Shipping policy for our store</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam voluptates rerum neque ea libero numquam officiis ipsum, consectetur ducimus dicta in earum repellat sunt ab odit laboriosam cupiditate ipsam, doloremque.</p>
|
||||
<ul>
|
||||
<li>1-2 business days (Typically by end of day)</li>
|
||||
<li><a href="product-details.html#">30 days money back guaranty</a></li>
|
||||
<li>24/7 live support</li>
|
||||
<li>odio dignissim qui blandit praesent</li>
|
||||
<li>luptatum zzril delenit augue duis dolore</li>
|
||||
<li>te feugait nulla facilisi.</li>
|
||||
</ul>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, quia vel eligendi ipsam. Ea, quasi quam ducimus recusandae unde ipsa nam rem a minus tenetur quae sint voluptatem voluptate inventore.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="liton_tab_details_1_5">
|
||||
<div class="ltn__shop-details-tab-content-inner">
|
||||
|
||||
<div class="table-1 mb-20">
|
||||
<table class="">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>SIZE</th>
|
||||
<th>XS</th>
|
||||
<th>S</th>
|
||||
<th>S/M</th>
|
||||
<th>M</th>
|
||||
<th>M/L</th>
|
||||
<th>L</th>
|
||||
<th>XL</th>
|
||||
</tr>
|
||||
<tr data-bs-region="uk">
|
||||
<th>UK</th>
|
||||
<td>4</td>
|
||||
<td>6 - 8</td>
|
||||
<td>6 - 10</td>
|
||||
<td>10 - 12</td>
|
||||
<td>12 - 16</td>
|
||||
<td>14 - 16</td>
|
||||
<td>18</td>
|
||||
</tr>
|
||||
<tr data-bs-region="eur">
|
||||
<th>
|
||||
<span class="mobile-show">EUR</span><span class="mobile-none">EUROPE</span>
|
||||
</th>
|
||||
<td>32</td>
|
||||
<td>34 - 36</td>
|
||||
<td>34 - 38</td>
|
||||
<td>38 - 40</td>
|
||||
<td>40 - 44</td>
|
||||
<td>42 - 44</td>
|
||||
<td>46</td>
|
||||
</tr>
|
||||
<tr data-bs-region="usa">
|
||||
<th>
|
||||
<span>USA/</span><span class="mobile-none">CANADA</span><span class="mobile-show"> CA</span>
|
||||
</th>
|
||||
<td>0</td>
|
||||
<td>2 - 4</td>
|
||||
<td>2 - 6</td>
|
||||
<td>6 - 8</td>
|
||||
<td>8 - 12</td>
|
||||
<td>10 - 12</td>
|
||||
<td>14</td>
|
||||
</tr>
|
||||
<tr data-bs-region="aus">
|
||||
<th>AUS / NZ</th>
|
||||
<td>4</td>
|
||||
<td>6 - 8</td>
|
||||
<td>6 - 10</td>
|
||||
<td>10 - 12</td>
|
||||
<td>12 - 16</td>
|
||||
<td>14 - 16</td>
|
||||
<td>18</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SHOP DETAILS TAB AREA END -->
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
var card = `<div class="col-lg-3 col-md-4 col-sm-6 col-6">
|
||||
<div class="ltn__product-item text-center">
|
||||
<div class="product-img">
|
||||
<a href="/">
|
||||
<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>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
{% put scripts %}
|
||||
|
||||
<script>
|
||||
getProductDetail('{{query}}');
|
||||
// console.log("qqq");
|
||||
function getProductDetail(query) {
|
||||
console.log(query);
|
||||
$(document).ready(function () {
|
||||
$.ajax({
|
||||
url: `https://nurgul.com.tm/app/api/products/{{prodId}}/` + query,
|
||||
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;
|
||||
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>`);
|
||||
}
|
||||
|
||||
// $('#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);
|
||||
$('#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 %}
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
$('#modal_img').html(`<img src="`+product.images[0].original_image_url+`" alt="Nurgul `+ product.name +`">`);
|
||||
$('#modal_name').html(product.name);
|
||||
$('#modal_price').html(product.formatted_price);
|
||||
$('#modal_price').html(product.formatted_price);
|
||||
$('#modal_desc').html(product.description);
|
||||
$('#modal_add').html('{{add}}');
|
||||
if(product.hasOwnProperty('special_price')){
|
||||
|
|
@ -17,4 +16,4 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{% endput %}
|
||||
{% endput %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue