Forum

Thread tagged as: Question, Shop

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">&#10006;</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!

Jade Marling

Jade Marling 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

the slug isn't being calledf for perch the pick up the product and to pull it through on the modal.

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

Drew McLellan

Drew McLellan 2638 points
Perch Support

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:

<?php

     perch_content_create('Products', array(
          'template'  => 'product_detail.html',
          'multiple'  => true,
          'edit-mode' => 'listdetail',
     ));


     if (perch_get('s')) {

          // Detail mode
          perch_content_custom('Products', array(
               'template' => 'product_detail.html',
               'filter'   => 'slug',
               'match'    => 'eq',
               'value'    => perch_get('s'),
               'count'    => 1,
          )); 

     } else {

          // List mode
          perch_content_custom('Products', array(
               'template' => 'product_listing.html',
          )); 
     }

?>

Based on the FAQs tut (it's got basic anchor tags already set up) try the following:

<?php

     perch_content_create('Products', array(
          'template'  => 'product_detail.html',
          'multiple'  => true,
          'edit-mode' => 'listdetail',
     ));

          // Detail mode
          perch_content_custom('Products', array(
               'skip-template' => false,
        'return-html' => true,
          )); 

          // List mode
          perch_content_custom('Products', array(
               'page' => 'shop.php',
               'template' => 'product_listing.html',
          )); 
     }

?>

On your product.html template, wrap your content in the modal window, using perch_item_index as your product id :

<div class="modal" id="quickview<perch:content id="perch_item_index" type="hidden" />" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

In your list.html template, you should have your quick-view link or button:

<a href="#quickview<perch:content id="perch_item_index" type="hidden" />" />

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:

<a href="#quickview<perch:content id="perch_item_index" type="hidden" />" />

Try:

<a href="#" data-toggle="modal" data-target="#quickview<perch:content id="perch_item_index" type="hidden" />" />