Forum
Product Quick View
Hi, I'm trying to add a 'quick view' to my perch shop site. When the customer clicks on the quick view button a modal pops up. I'm trying to get the product.html template into that box. Below is my list.html code
<!-- Product Item -->
<div class="product-item large category1">
<div class="product-item-inside">
<div class="product-item-info">
<!-- Product Photo -->
<div class="product-item-photo">
<!-- Product Label -->
<!-- /Product Label -->
<!-- product main photo -->
<!-- product inside carousel -->
<div class="carousel-inside slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="product.php?s=<perch:shop id="slug" type="slug" />"><img class="product-image-photo" src="images/products/product-20.jpg" alt="<perch:shop id="title" type="text" />"></a>
</div>
</div>
</div>
<!-- /product inside carousel -->
<a href="quick-view.php?s=<perch:shop id="slug" type="slug" />" title="Quick View" class="quick-view-link quick-view-btn"> <i class="icon icon-eye"></i><span>Quick View</span></a>
<!-- /product main photo -->
<!-- Product Actions -->
<a href="#" title="Add to Wishlist" class="no_wishlist"> <i class="icon icon-heart"></i><span>Add to Wishlist</span> </a>
</div>
<!-- /Product Photo -->
<!-- Product Details -->
<div class="product-item-details">
<div class="product-item-name"> <a title="<perch:shop id="title" type="text" />" href="product.php?s=<perch:shop id="slug" type="slug" />" class="product-item-link"><perch:shop id="title" type="text" /></a> </div>
<div class="price-box"> <span class="price-container"> <span class="price-wrapper"><span class="special-price"><perch:shop id="price" type="shop_currency_value" label="Price" divider-before="Pricing" size="s" min="0" step="any" />
<perch:shop id="sale_price" type="shop_currency_value" label="Sale price" size="s" min="0" step="any" />
<perch:shop id="trade_price" type="shop_currency_value" label="Trade price" size="s" min="0" step="any" runway="true" /></span> </span><br>
<perch:shop id="brand" type="shop_brand" label="Brand" allowempty="true" suppress="true" />
</span>
</div>
<a href="product.php?s=<perch:shop id="slug" type="slug" />" class="btn btn-md">
VIEW PRODUCT
</a>
</div>
<!-- /Product Details -->
</div>
</div>
</div>
<!-- /Product Item -->
<perch:after>
<!-- Modal Quick View -->
<div class="modal quick-view zoom" id="quickView">
<div class="modal-dialog">
<div class="modalLoader-wrapper">
<div class="modalLoader bg-striped"></div>
</div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">✖</button>
</div>
<div class="modal-content">
<iframe></iframe>
</div>
</div>
</div>
<!-- /Modal Quick View -->
</perch:after>
and the relevant js
// quickView
function quickView(quickviewlink, modal) {
var quickviewlink = quickviewlink,
$modal = $(modal),
$loader = $('.modalLoader-wrapper', $modal),
$iframe = $('iframe', $modal),
windowWidth = $window.width();
$document.on('click.quickView', quickviewlink, function (e) {
if (windowWidth > 1199 && !$body.hasClass('touch')) {
var $this = $(e.target),
src = $this.attr("href") ? $this.attr("href") : $this.closest('a').attr("href");
$this.closest('.product-item').addClass('hover');
$iframe.on('load', function () {
if ($modal.data('bs.modal')) {
setTimeout(function () {
$loader.css({
'display': 'none'
});
}, 500);
$iframe.animate({
'opacity': '1'
}, 300);
}
});
$modal.on('shown.bs.modal', function (e) {
$('.modal-content', $modal).attr({
'src': src
});
$('iframe', $modal).attr({
'src': src
});
}).on('hidden.bs.modal', function (e) {
var $this = $(this);
$this.removeData('bs.modal');
// clear iframe
$iframe.empty().attr({
'src': 'about:blank'
}).css({
'opacity': '0'
});
$loader.css({
'display': 'block'
});
$('.product-item').removeClass('hover');
})
$modal.modal('show');
e.preventDefault();
}
})
}
The issue I'm having the slug isn't being calledf for perch the pick up the product and to pull it through on the modal. Any help would be appreciated! Thanks!
I don't follow.
What output are you looking for, and what are you getting?
I'm looking for the product details to appear in the modal but right now i'm getting a blank box
I can't help with your front end coding issues. How is the content management not working?
Hi Jade,
I'm not sure how much this will help, but I have been trying to do something similar. I finally got further along, although I'm still working out a few kinks...
I combined the FAQ and list-detail tuts to at least get the modal to show up on my index.php (your shop.php, or whatever you have called your page).
If you've used the list-detail tut, I assume your shop.php looks something like this:
Based on the FAQs tut (it's got basic anchor tags already set up) try the following:
On your product.html template, wrap your content in the modal window, using perch_item_index as your product id :
In your list.html template, you should have your quick-view link or button:
A few notes since our end goals are somewhat different: - Your version of quick-view is my full-view. So you may need to tinker to make sure both your quick-view and full-view are linking to the proper locations. - On my index.php (your shop.php), I removed the conditional statement, because all of my content will live on the same page. My current challenge is making sure only one modal shows up at a time, but I think it's a quick fix that I'm overlooking. - In my index.php, I specified skip-template and return-html, because it wasn't reading my modal code. You may or may not need to add those. - Ideally, I would like for my ids to be item slugs and not just a number (item index), but I haven't fiddled with that too much yet.
A correction to what I posted before:
Instead of:
Try: