Quick View on Related Products doable?

[Mish]

Within the levels theme the quick view displays on category pages & search results - I would like to have it on the related products as well. Is there a simple way of doing this? Just adding the below code that is used in other areas within the related products is not working. It displays the button but the button link does not work.

<button type="button" class="button category-product-cta-button category-product-cta-quickview js-quick-view" data-product-link="&mvte:urls:PROD:auto_sep;Product_Code=&mvte:product:code;&amp;show=quickview">
                        <span class="levels-icon-eye"></span>
                        <span class="category-product-cta-quickview-text"> Quickview</span>
                    </button>
                    <form action="&mvte:urls:BASK:auto;" method="POST" class="category-product-form">
                        <input type="hidden" name="Action" value="ADPR">
                        <input type="hidden" name="Product_Code" value="&mvte:product:code;">
                        <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;">
                        <input type="hidden" name="Quantity" value="1">
                        <button class="button category-product-cta-button category-product-cta-button-adpr">
                            <span data-icon="&#xe07a;"></span><span class="category-product-cta-adpr-text"> Add to Cart</span>
                        </button>
                    </form>

I thought I may need to create a new Content (quickview) item but was not sure.

Thank you as always...hope everyone has happy holidays!

[Matt Zimmermann]

In addition to that code, you will need to add the following to the jsPROD function in your scripts.js file.

cornerstoneUX.sharedFunctions.openQuickView();

[Mish]

Thank you Matt! With doing the below:

In addition to that code, you will need to add the following to the jsPROD function in your scripts.js file.

cornerstoneUX.sharedFunctions.openQuickView();

it has the link within the below code working now BUT it is displaying more than what coding is within the Content (product_quick_view) area - ie it just isn't the product info, it has a header, related products, and footer on the quick view. (the quick view on the c at pages, and search results pulling the Content (product_quick_view) area works fine. Is there something missing?

<button type="button" class="button category-product-cta-button category-product-cta-quickview js-quick-view" data-product-link="&mvte:urls:PROD:auto_sep;Product_Code=&mvte: product:code;&amp;show=quickview">
<span class="levels-icon-eye"></span>
<span class="category-product-cta-quickview-text"> Quickview</span> </button>

[Matt Zimmermann]

My guess is that you have the code within the existing A tag for the related product. Try using this code and see if it works.

<div class="breaker show medium-hide"></div>
<div class="breaker show medium-hide"></div>
<div class="row related-products">
    <div class="column whole">
        <h4 class="nm">You May Also Like</h4>
        <div class="sky">&bull;&bull;&bull;&bull;&bull;</div>
    </div>
    <div class="breaker show medium-hide"></div>
    <div class="column whole related-products-carousel">
        <div id="js-related-products-carousel" class="column whole np">
            <mvt:foreach iterator="product" array="related_products:products">
                <div class="category-product">
                    <div class="flag">
                        <a href="&mvte:product:link;" class="category-product-image-wrapper" data-mm-linktype="product-list-link">
                            <mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">
                                <img src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" title="&mvte:product:name;" />
                            <mvt:else>
                                <img src="&mvte:global:theme_path;/images/img_no_thumb.jpg" alt="&mvte:product:name;" title="&mvte:product:name;" />
                            </mvt:if>
                        </a>
                        <div class="category-product-cta-wrapper">
                            <button type="button" class="button category-product-cta-button category-product-cta-quickview js-quick-view" data-product-link="&mvte:urls:PROD:auto_sep;Product_Code=&mvte:product:code;&amp;show=quickview">
                                <span class="levels-icon-eye"></span>
                                <span class="category-product-cta-quickview-text"> Quickview</span>
                            </button>
                            <form action="&mvte:urls:BASK:auto;" method="POST" class="category-product-form">
                                <input type="hidden" name="Action" value="ADPR">
                                <input type="hidden" name="Product_Code" value="&mvte:product:code;">
                                <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;">
                                <input type="hidden" name="Quantity" value="1">
                                <button class="button category-product-cta-button category-product-cta-button-adpr">
                                    <span data-icon="&#xe07a;"></span><span class="category-product-cta-adpr-text"> Add to Cart</span>
                                </button>
                            </form>
                        </div>
                    </div>
                    <p class="category-product-name"><a href="&mvte:product:link;">&mvt:product:name;</a></p>
                    <p>
                        <mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
                            <span class="category-product-retail-price">&mvt:product:formatted_base_price;</span> <span class="category-product-sale-price">&mvt:product:formatted_price;</span>
                        <mvt:else>
                            <span class="category-product-price">&mvt:product:formatted_price;</span>
                        </mvt:if>
                        <mvt:if expr="l.settings:product:customfield_values:customfields:product_flag">
                            <span class="category-product-flag">&mvt:product:customfield_values:customfields:product_flag;</span>
                        </mvt:if>
                    </p>
                </div>
            </mvt:foreach>
        </div>
    </div>
</div>

[Mish]

Thank you Matt, I corrected my coding and all is great. Thank you again for the assistance! Happy Holidays!