Announcement

Collapse
No announcement yet.

Need more than one Product Listing on the same page.

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

  • Need more than one Product Listing on the same page.

    I need more than one Product Listing on the same page.

    Example:

    Prod in Ctgy1 - View All
    < [Prod1] [Prod2] [Prod3] >

    Prod in Ctgy2 - View All
    < [Prod1] [Prod2] [Prod3] >

    Prod in Ctgy3 - View All
    < [Prod1] [Prod2] [Prod3] >

    Tried to copy custom Featured Products code below on storefront to another page and it did not work -Frustrating! What am I doing wrong?

    Code:
    <!-- READYTHEME PRODUCTLISTING 1 begin -->
    
    
    <!-- READYTHEME PRODUCTLISTING 1 begin -->
    <div class="row product-carousel">
        <div class="column whole hide medium-show medium-two-fifths large-one-fourth">
            <div class="well carrot-right featured-products-descrip" id="js-featured-products-height">
                <h3 class="nm">Featured Products</h3>
                <div class="sky">&bull;&bull;&bull;&bull;&bull;</div>
                <p><mvt:item name="readytheme" param="contentsection( 'home_featured_products' )" /></p>
                <mvt:comment>update the category path here</mvt:comment>
                <a href="//&mvt:global:domain:name;/cuba-Coins.html" class="button button-hollow align-center uppercase featured-products-view-all">View All</a>
            </div>
        </div>
        <div class="column whole align-center show medium-hide mobile-featured-products">
            <h3 class="nm">Featured Products</h3>
            <div class="sky">&bull;&bull;&bull;&bull;&bull;</div>
        </div>
        <div class="column whole large-three-fourths medium-three-fifths whats-popular-carousel">
            <div id="js-whats-popular-carousel">
                <mvt:foreach iterator="product" array="readytheme:products">
    
                <mvt:if expr="l.settings:product:inv_available LE 0">
                    <mvt:comment>do not display sold out products in carousel</mvt:comment>
                <mvt:else>
    
    
                        <div class="category-product featured-product align-center medium-align-left js-featured-products-height-min">
                            <div class="category-product-image-wrapper flag">
                                <mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">
                                    <mvt:assign name="l.settings:product:src" value="l.settings:product:imagetypes:main" />
                                <mvt:else>
                                    <mvt:assign name="l.settings:product:src" value="g.theme_path $ '/images/img_no_thumb.jpg'" />
                                </mvt:if>
                                <a href="&mvte:product:link;" class="category-product-image-wrapper">
                                    <img src="&mvt:product:src;" alt="&mvte:product:name;">
                                </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>
                            <span class="breaker"></span>
                            <div class="featured-product-bottom">
                                <p class="category-product-name"><a href="&mvte:product:link;">&mvt:product:name;</a></p>
    
    
    
    
                                <p class="pricing">
    
    
                                        <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 bold">&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>
                                    <mvt:if expr="l.settings:product:price GE 50">
                                            <span class="truck-icon"><img src="graphics/00000001/free-shipping-truck.png" alt="Free Shipping" title="This item qualifies for Free US Shipping & Handling"></span>
                                    </mvt:if>
                                </p>
                                <mvt:if expr="l.settings:product:inv_available EQ 1">
                                    <p><strong class="limited-stock">Only 1 left in stock!</strong></p>
                                </mvt:if>
    
                            </div>
                        </div>
                    </mvt:if>
                </mvt:foreach>
            </div>
        </div>
    </div>
    <!-- READYTHEME PRODUCTLISTING 1 end -->
    
    
    
    <!-- READYTHEME PRODUCTLISTING 1 end -->
    Thank you, Bill Davis

  • why not just use a category page?
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


    • Originally posted by Bruce - PhosphorMedia View Post
      why not just use a category page?
      Great question, my answer is probably not as good. I am trying to use the existing custom Product Listings in Levels StoreFront page to display one row of products for each category on sale on the StoreFront page.

      The current StoreFront custom Product Listing code does not displays out of stock products, and displays discounted price, free shipping, etc...
      Thank you, Bill Davis

      Comment


      • well then, that makes sense.
        Bruce Golub
        Phosphor Media - "Your Success is our Business"

        Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
        phosphormedia.com

        Comment


        • I guess no one has an answer? I could not find any documentation on this anywhere.

          I was hoping it would have been as easy as copying and pasting multiple times existing code previous posted, but nothing is ever that easy.
          Thank you, Bill Davis

          Comment


          • When working with the Slick Sliders, you have to make sure that each one has a unique ID. Your example has id="js-whats-popular-carousel". Each subsequent one will need to have a different ID. Then, you will also need to create the corresponding javascript to first each carousel. In your scripts.js file you should be able to go to

            Code:
             jsSFNT: function () {
            // ---- Product Carousel ---- //
            cornerstoneUX.sharedFunctions.productsCarousels('#js-whats-popular-carousel');
            and add each subsequent "function"

            For example:

            cornerstoneUX.sharedFunctions.productsCarousels('# js-whats-popular-carousel-1');
            cornerstoneUX.sharedFunctions.productsCarousels('# js-whats-popular-carousel-2');

            Just make sure your ID's match and that you insert them before the // ---- Open Quick View ---- // comment
            Leslie Kirk
            Miva Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment

            Working...
            X

            This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

            This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

            Accept