I am using Porto E-commerce html theme & integrating web services URL and its response in json to this theme.I am currently working on product detail view page.In this page i have loaded product detail i.e name price description and main image using php,ajax.the product data i am integrated is in php file which has for loop and html tags in it which fetch the dynamic data for product. My biggest problem is that,three images that are to be displayed at the bottom of the page is not getting displayed because of dynamic css classses and dynamic div tags are not getting added to the div which is in php for loop of php file and this php response i append in the main php template using ajax .i am not getting any clue that why it is happening and what is the solution.i also checked my all css and js files are properly included in header and footer .my logic in for loop is correct and also i cross checked for any missing or closing tags.when i just keep normal html tags it adds css class and divs dynamically but if i keep in php it does not adds css class and divs dynamically.
PHP code for loading product data dynamically getProductDetailView.php
<?php
$productDetailViewDecode = json_decode($_POST['json'], true);
for( $i=0; $i<count($productDetailViewDecode["data"]); $i++ )
{
?>
<div class="row">
<div class="product-img-box col-sm-5">
<div class="product-img-box-wrapper">
<div class="product-img-wrapper">
<?php
$base_url="http://139.59.36.134";
$image_url_explode = explode("/var/www/html", $productDetailViewDecode["data"][$i]["thumbnail"]);
$image_url=implode($base_url, $image_url_explode);
?>
<img id="product-zoom" src="<?=$image_url ?>" data-zoom-image="<?=$image_url ?>" alt="Product main image" />
</div>
<a href="#" class="product-img-zoom" title="Zoom">
<span class="glyphicon glyphicon-search"></span>
</a>
</div>
<div class="owl-carousel manual" id="productGalleryThumbs">
<div class="product-img-wrapper">
<?php
$base_url1="http://139.59.36.134";
$image_gallery_explode = explode("/var/www/html", $productDetailViewDecode["data"][$i]["images"]);
$image_url1=implode($base_url1, $image_gallery_explode);
$split = explode(",",$image_url1);
for ($j=0; $j <count($split) ; $j++) {
?>
<a href="#" data-image="<?=$split[$j] ?>" data-zoom-image=" <?=$split[$j] ?>" class="product-gallery-item">
<img src="<?=$split[$j] ?>" alt="product">
</a>"
<?php } ?>
</div>
</div>
</div>
<div class="product-details-box col-sm-7">
<h1 class="product-name">
<?php echo $productDetailViewDecode["data"][$i]["name"];?>
</h1>
<div class="product-short-desc">
<p>
<?php echo $productDetailViewDecode["data"][$i]["description"]; ?>
</p>
</div>
<div class="product-detail-info">
<div class="product-price-box">
<span class="old-price">
<i class="fa fa-inr"></i>
<?php echo $productDetailViewDecode["data"][$i]["mrp"]; ?>
</span>
<span class="product-price">
<i class="fa fa-inr"></i>
<?php echo $productDetailViewDecode["data"][$i]["sellingPrice"]; ?>
</span>
</div>
<p class="availability">
<span class="font-weight-semibold">Availability:</span>
In Stock
</p>
<p class="email-to-friend">
<a href="#">Email to a Friend</a>
</p>
</div>
<div class="product-actions">
<div class="product-detail-qty">
<input type="text" value="1" class="vertical-spinner" id="product-vqty">
</div>
<a href="#" class="addtocart" title="Add to Cart">
<i class="fa fa-shopping-cart"></i>
<span>Add to Cart</span>
</a>
<div class="actions-right">
<a href="#" class="addtowishlist" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
<a href="#" class="comparelink" title="Add to Compare">
<i class="glyphicon glyphicon-signal"></i>
</a>
</div>
</div>
<div class="product-share-box">
<div class="addthis_inline_share_toolbox"></div>
</div>
</div>
</div>
<?php }
?>
this is this html template without php tags as above which loads css classes and dynamic div to the parent div.
<div class="row">
<div class="product-img-box col-sm-5">
<div class="product-img-box-wrapper">
<div class="product-img-wrapper">
<img id="product-zoom" src="../img/demos/shop/products/single/product1.jpg" data-zoom-image="../img/demos/shop/products/single/product1.jpg" alt="Product main image">
</div>
<a href="#" class="product-img-zoom" title="Zoom">
<span class="glyphicon glyphicon-search"></span>
</a>
</div>
<div class="owl-carousel manual" id="productGalleryThumbs">
<div class="product-img-wrapper">
<a href="#" data-image="../img/demos/shop/products/single/product1.jpg" data-zoom-image="../img/demos/shop/products/single/product1.jpg" class="product-gallery-item">
<img src="../img/demos/shop/products/single/thumbs/product1.jpg" alt="product">
</a>
</div>
<div class="product-img-wrapper">
<a href="#" data-image="../img/demos/shop/products/single/product2.jpg" data-zoom-image="../img/demos/shop/products/single/product2.jpg" class="product-gallery-item">
<img src="../img/demos/shop/products/single/thumbs/product2.jpg" alt="product">
</a>
</div>
<div class="product-img-wrapper">
<a href="#" data-image="../img/demos/shop/products/single/product3.jpg" data-zoom-image="../img/demos/shop/products/single/product3.jpg" class="product-gallery-item">
<img src="../img/demos/shop/products/single/thumbs/product3.jpg" alt="product">
</a>
</div>
<div class="product-img-wrapper">
<a href="#" data-image="../img/demos/shop/products/single/product4.jpg" data-zoom-image="../img/demos/shop/products/single/product4.jpg" class="product-gallery-item">
<img src="../img/demos/shop/products/single/thumbs/product4.jpg" alt="product">
</a>
</div>
<div class="product-img-wrapper">
<a href="#" data-image="../img/demos/shop/products/single/product5.jpg" data-zoom-image="../img/demos/shop/products/single/product5.jpg" class="product-gallery-item">
<img src="../img/demos/shop/products/single/thumbs/product5.jpg" alt="product">
</a>
</div>
</div>
</div>
<div class="product-details-box col-sm-7">
<div class="product-nav-container">
<div class="product-nav product-nav-prev">
<a href="#" title="Previous Product">
<i class="fa fa-chevron-left"></i>
</a>
<div class="product-nav-dropdown">
<img src="../img/demos/shop/products/product1.jpg" alt="Product">
<h4>Blue Denim Dress</h4>
</div>
</div>
<div class="product-nav product-nav-next">
<a href="#" title="Next Product">
<i class="fa fa-chevron-right"></i>
</a>
<div class="product-nav-dropdown">
<img src="../img/demos/shop/products/product2.jpg" alt="Product">
<h4>Black Woman Shirt</h4>
</div>
</div>
</div>
<h1 class="product-name">
Black Maxi Dress
</h1>
<div class="product-rating-container">
<div class="product-ratings">
<div class="ratings-box">
<div class="rating" style="width:60%"></div>
</div>
</div>
<div class="review-link">
<a href="#" class="review-link-in" rel="nofollow"> <span class="count">1</span> customer review</a> |
<a href="#" class="write-review-link" rel="nofollow">Add a review</a>
</div>
</div>
<div class="product-short-desc">
<p>Lorem ipsum </p>
<p>Ut enim </p>
</div>
<div class="product-detail-info">
<div class="product-price-box">
<span class="old-price">$99.00</span>
<span class="product-price">$89.00</span>
</div>
<p class="availability">
<span class="font-weight-semibold">Availability:</span>
In Stock
</p>
<p class="email-to-friend"><a href="#">Email to a Friend</a></p>
</div>
<div class="product-actions">
<div class="product-detail-qty">
<input type="text" value="1" class="vertical-spinner" id="product-vqty">
</div>
<a href="#" class="addtocart" title="Add to Cart">
<i class="fa fa-shopping-cart"></i>
<span>Add to Cart</span>
</a>
<div class="actions-right">
<a href="#" class="addtowishlist" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
<a href="#" class="comparelink" title="Add to Compare">
<i class="glyphicon glyphicon-signal"></i>
</a>
</div>
</div>
<div class="product-share-box">
<div class="addthis_inline_share_toolbox"></div>
</div>
</div>
</div>
demo-shop-5-product-details.php
<?php include("header.php");?>
<div role="main" class="main">
<section class="page-header mb-lg">
<div class="container">
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Fashion</a></li>
<li class="active">Black Maxi Dress</li>
</ul>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="product-view">
<div class="product-essential">
<!-- Here i am appending the php data with html tags dynamically -->
</div>
<div class="tabs product-tabs">
<ul class="nav nav-tabs">
<li class="active">
<a href="#product-desc" data-toggle="tab">Description</a>
</li>
<li>
<a href="#product-add" data-toggle="tab">Additional</a>
</li>
<li>
<a href="#product-tags" data-toggle="tab">Tags</a>
</li>
<li>
<a href="#product-reviews" data-toggle="tab">Reviews</a>
</li>
</ul>
<div class="tab-content">
<div id="product-desc" class="tab-pane active">
<div class="product-desc-area">
<p>Lorem ipsum .</p>
<p>Ut enim a laborum.</p>
<ul>
<li>Simple, Configurable (e.g. size, color, etc.), Bundled and Grouped Products</li>
<li>Downloadable Virtual Products</li>
<li>Inventory Management </li>
<li>Customer Personalized Products </li>
<li>Create Store</li>
<li>Advanced Pricing </li>
<li>Tax Rates </li>
</ul>
</div>
</div>
<div id="product-add" class="tab-pane">
<table class="product-table">
<tbody>
<tr>
<td class="table-label">Color</td>
<td>Black</td>
</tr>
<tr>
<td class="table-label">Size</td>
<td>16mx24mx18m</td>
</tr>
</tbody>
</table>
</div>
<div id="product-tags" class="tab-pane">
<div class="product-tags-area">
<form action="#">
<div class="form-group">
<label>Add Your Tags:</label>
<div class="clearfix">
<input type="text" class="form-control pull-left" required>
<input type="submit" class="btn btn-primary" value="Add Tags">
</div>
</div>
</form>
<p class="note">Use spaces to separate tags. Use single quotes (') for phrases.</p>
</div>
</div>
<div id="product-reviews" class="tab-pane">
<div class="collateral-box">
<ul class="list-unstyled">
<li>Be the first to review this product</li>
</ul>
</div>
<div class="add-product-review">
<h3 class="text-uppercase heading-text-color font-weight-semibold">REVIEW</h3>
<p>How do you rate this product? *</p>
<form action="#">
<div class="form-group">
<label>Nickname<span class="required">*</span></label>
<input type="text" class="form-control" required>
</div>
<div class="form-group">
<label>Summary of Your Review<span class="required">*</span></label>
<input type="text" class="form-control" required>
</div>
<div class="form-group mb-xlg">
<label>Review<span class="required">*</span></label>
<textarea cols="5" rows="6" class="form-control"></textarea>
</div>
<div class="text-right">
<input type="submit" class="btn btn-primary" value="Submit Review">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<h2 class="slider-title">
<span class="inline-title">Also Purchased</span>
<span class="line"></span>
</h2>
<div class="owl-carousel owl-theme" data-plugin-options="{'items':4, 'margin':20, 'nav':true, 'dots': false, 'loop': false}">
<div class="product">
<figure class="product-image-area">
<a href="#" title="Product Name" class="product-image">
<img src="../img/demos/shop/products/product1.jpg" alt="Product Name">
<img src="../img/demos/shop/products/product1-2.jpg" alt="Product Name" class="product-hover-image">
</a>
<a href="#" class="product-quickview">
<i class="fa fa-share-square-o"></i>
<span>Quick View</span>
</a>
<div class="product-label"><span class="discount">-10%</span></div>
<div class="product-label"><span class="new">New</span></div>
</figure>
<div class="product-details-area">
<h2 class="product-name"><a href="#" title="Product Name">Noa Sheer Blouse</a></h2>
<div class="product-ratings">
<div class="ratings-box">
<div class="rating" style="width:60%"></div>
</div>
</div>
<div class="product-price-box">
<span class="old-price">$99.00</span>
<span class="product-price">$89.00</span>
</div>
<div class="product-actions">
<a href="#" class="addtowishlist" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
<a href="#" class="addtocart" title="Add to Cart">
<i class="fa fa-shopping-cart"></i>
<span>Add to Cart</span>
</a>
<a href="#" class="comparelink" title="Add to Compare">
<i class="glyphicon glyphicon-signal"></i>
</a>
</div>
</div>
</div>
<div class="product">
<figure class="product-image-area">
<a href="#" title="Product Name" class="product-image">
<img src="../img/demos/shop/products/product2.jpg" alt="Product Name">
<img src="../img/demos/shop/products/product2-2.jpg" alt="Product Name" class="product-hover-image">
</a>
<a href="#" class="product-quickview">
<i class="fa fa-share-square-o"></i>
<span>Quick View</span>
</a>
<div class="product-label"><span class="discount">-25%</span></div>
</figure>
<div class="product-details-area">
<h2 class="product-name"><a href="#" title="Product Name">Women Fashion Blouse</a></h2>
<div class="product-ratings">
<div class="ratings-box">
<div class="rating" style="width:0%"></div>
</div>
</div>
<div class="product-price-box">
<span class="old-price">$120.00</span>
<span class="product-price">$90.00</span>
</div>
<div class="product-actions">
<a href="#" class="addtowishlist" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
<a href="#" class="addtocart" title="Add to Cart">
<i class="fa fa-shopping-cart"></i>
<span>Add to Cart</span>
</a>
<a href="#" class="comparelink" title="Add to Compare">
<i class="glyphicon glyphicon-signal"></i>
</a>
</div>
</div>
</div>
<div class="product">
<figure class="product-image-area">
<a href="#" title="Product Name" class="product-image">
<img src="../img/demos/shop/products/product3.jpg" alt="Product Name">
</a>
<a href="#" class="product-quickview">
<i class="fa fa-share-square-o"></i>
<span>Quick View</span>
</a>
</figure>
<div class="product-details-area">
<h2 class="product-name"><a href="#" title="Product Name">Fashion Dress</a></h2>
<div class="product-ratings">
<div class="ratings-box">
<div class="rating" style="width:60%"></div>
</div>
</div>
<div class="product-price-box">
<span class="product-price">$70.00</span>
</div>
<div class="product-actions">
<a href="#" class="addtowishlist" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
<a href="#" class="addtocart" title="Add to Cart">
<i class="fa fa-shopping-cart"></i>
<span>Add to Cart</span>
</a>
<a href="#" class="comparelink" title="Add to Compare">
<i class="glyphicon glyphicon-signal"></i>
</a>
</div>
</div>
</div>
<div class="product">
<figure class="product-image-area">
<a href="#" title="Product Name" class="product-image">
<img src="../img/demos/shop/products/product4.jpg" alt="Product Name">
</a>
<a href="#" class="product-quickview">
<i class="fa fa-share-square-o"></i>
<span>Quick View</span>
</a>
<div class="product-label"><span class="discount">-20%</span></div>
</figure>
<div class="product-details-area">
<h2 class="product-name"><a href="#" title="Product Name">Fashion Sweater</a></h2>
<div class="product-ratings">
<div class="ratings-box">
<div class="rating" style="width:80%"></div>
</div>
</div>
<div class="product-price-box">
<span class="old-price">$100.00</span>
<span class="product-price">$90.00</span>
</div>
<div class="product-actions">
<a href="#" class="addtowishlist" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
<a href="#" class="addtocart" title="Add to Cart">
<i class="fa fa-shopping-cart"></i>
<span>Add to Cart</span>
</a>
<a href="#" class="comparelink" title="Add to Compare">
<i class="glyphicon glyphicon-signal"></i>
</a>
</div>
</div>
</div>
<div class="product">
<figure class="product-image-area">
<a href="#" title="Product Name" class="product-image">
<img src="../img/demos/shop/products/product11.jpg" alt="Product Name">
</a>
<a href="#" class="product-quickview">
<i class="fa fa-share-square-o"></i>
<span>Quick View</span>
</a>
</figure>
<div class="product-details-area">
<h2 class="product-name"><a href="#" title="Product Name">Woman Shee Blouse</a></h2>
<div class="product-ratings">
<div class="ratings-box">
<div class="rating" style="width:0%"></div>
</div>
</div>
<div class="product-price-box">
<span class="product-price">$70.00</span>
</div>
<div class="product-actions">
<a href="#" class="addtowishlist" title="Add to Wishlist">
<i class="fa fa-heart"></i>
</a>
<a href="#" class="addtocart" title="Add to Cart">
<i class="fa fa-shopping-cart"></i>
<span>Add to Cart</span>
</a>
<a href="#" class="comparelink" title="Add to Compare">
<i class="glyphicon glyphicon-signal"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<aside class="col-md-3 sidebar product-sidebar">
<div class="feature-box feature-box-style-3">
<div class="feature-box-icon">
<i class="fa fa-truck"></i>
</div>
<div class="feature-box-info">
<h4>FREE SHIPPING</h4>
<p class="mb-none">Free shipping on all orders over $99.</p>
</div>
</div>
<div class="feature-box feature-box-style-3">
<div class="feature-box-icon">
<i class="fa fa-dollar"></i>
</div>
<div class="feature-box-info">
<h4>MONEY BACK GUARANTEE</h4>
<p class="mb-none">100% money back guarantee.</p>
</div>
</div>
<div class="feature-box feature-box-style-3">
<div class="feature-box-icon">
<i class="fa fa-support"></i>
</div>
<div class="feature-box-info">
<h4>ONLINE SUPPORT 24/7</h4>
<p class="mb-none">Lorem ipsum dolor sit amet.</p>
</div>
</div>
<hr class="mt-xlg">
<div class="owl-carousel owl-theme" data-plugin-options="{'items':1, 'margin': 5}">
<a href="#">
<img class="img-responsive" src="../img/demos/shop/banners/banner1.jpg" alt="Banner">
</a>
<a href="#">
<img class="img-responsive" src="../img/demos/shop/banners/banner2.jpg" alt="Banner">
</a>
</div>
<hr>
</aside>
</div>
</div>
</div>
<?php include("footer.php");?>
<script type="text/javascript">
$.ajax({
type: "POST",
url: 'http://139.59.36.134/JacchaBacchaDevelopers/v1/index.php/retrive_product_with_details',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
data: { productCode:1295759 },
success: function(data) {
if(data.error===false) {
var res=JSON.stringify(data);
//alert(res);
getProductDetailViewFunction(res);
}
else {
alert("no products");
}
},
error: function(e) { console.log(e); }
});
function getProductDetailViewFunction(res) {
$.ajax({
type: "POST",
url: "getProductDetailView.php",
cache: false,
data: { json: res },
success: function(data) {
$('.product-essential').append(data);
},
error: function(e) { console.log(e); }
});
}
</script>
