Need more than one Product Listing on the same page.

[William Davis]

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?

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

[Bruce - PhosphorMedia]

why not just use a category page?

[William Davis]

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...

[Bruce - PhosphorMedia]

well then, that makes sense.

[William Davis]

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.

[lesliekirk]

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

 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