Product Quick View

In this tutorial we will add a “quick view” button to the product cell within a Klevu Recommendations banner, so customers can see even more information about a product without needing to visit he Product Detail Page.

Klevu Recommendations Quick View Popup

We will be building on the previous tutorial where we made changes to the Recommendation template to modify the HTML, so we recommend you try that first if you haven’t done so already.

HTML Changes

We will need to modify two areas of the default Klevu HTML, so within your template open up the “HTML” section of the editor.

The changes will be added to the following places, so find these areas in your existing template and then copy and paste the content from the sections below:

<% helper.each(recommendationItemList, function(key, item){ %>
<div class="kuRECS-itemWrap kuRECSItem" data-id="<%= item.id %>">
    <div class="kuRECS-item">
        <!-- ADD: <div class="modal"> ... </div> -->

        <div class="kuRECSItemBottom">
            <!-- ADD: <div class="kuRECSQuickViewBtnContainer"> ... </div> -->
        </div>
    </div>    
</div>
<% }) %>

Find <div class="kuRECSItem"> and add the following modal div inside it, as the first element immediately after the opening tag of this div:

Next, find the section <div class="kuRECSItemBottom"> and add the following code inside at the end of the div, just after the existing “Add to Cart” button:

CSS Changes

Next we will add some styling for the Quick View modal. Add this to the bottom of your existing CSS within your Klevu Recommendation banner inside the “CSS” section:

JavaScript Changes

Finally we need to make some JavaScript code changes. Add this to the bottom of any existing JS within your Klevu Recommendation banner inside the “JavaScript” section:

Use the Preview button to check your changes worked as expected, and hit Save when you’re ready to publish your new banner template!