Announcement

Collapse
No announcement yet.

Quick View on Related Products doable?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Quick View on Related Products doable?

    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.

    Code:
    <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!

    #2
    In addition to that code, you will need to add the following to the jsPROD function in your scripts.js file.
    Code:
    cornerstoneUX.sharedFunctions.openQuickView();
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      Thank you Matt! With doing the below:

      Originally posted by Matt Zimmermann View Post
      In addition to that code, you will need to add the following to the jsPROD function in your scripts.js file.
      Code:
      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?


      Code:
      <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>
      Last edited by Mish; 12-21-17, 08:30 AM. Reason: fixed code wrap

      Comment


        #4
        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.
        Code:
        <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>
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


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

          Comment

          Working...
          X