php 产品旋转木马 - 隐藏的移动视图

Posted 2021-05-05

This will need to be hidden in mobile xs view, the break at next row of items 
is not compatible with mobile

https://bootsnipp.com/snippets/featured/carousel-product-cart-slider


1) Create a new phtml file:
/app/design/frontend/em0140/default/template/featuredcustom.phtml

2) Create a New Category ie: Featured

3) paste into cms page
{{block type="core/template" template="newproducts/newproducts.phtml"}}

4) paste the following into featuredcustom.phtml


<?php
// Works with just bootstrap
$products = Mage::getModel('catalog/category')->load(3); // 3: NEW ARRIVALS category ID
// get all products
$productslist = $products->getProductCollection()->addAttributeToSelect('*');

?>


    <div class="row">
        <div class="col-md-9">
            <h3>
                Carousel Product Cart Slider</h3>
        </div>
        <div class="col-md-3">
            <!-- Controls -->
            <div class="controls pull-right">
                <a class="left fa fa-chevron-left btn btn-primary" href="#carousel-example-generic"
                    data-slide="prev"></a><a class="right fa fa-chevron-right btn btn-primary" href="#carousel-example-generic"
                        data-slide="next"></a>
            </div>
        </div>
    </div>
    
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="900000">
    
        <div class="carousel-inner">
            <div class="item active">
                <div class="row">
          
 
        <?php
        $active = '';
        $counter = 0;               
        foreach($productslist as $product) :   ?>
           
        <?php if ( $counter % 3 == 0 && $counter != 0 ) :  ?>
	   			</div> <!-- row -->
	   		</div>  <!--  item active  -->
            <div class="item">
                <div class="row">					  
	   <?php endif; ?>		   
			              
                    <div class="col-lg-4 col-md-4 col-sm-6">
                        <div class="col-item">
                            <div class="photo">
                                <a href="<?php echo $product->getProductUrl() ; ?>" ><img src="<?php echo  Mage::helper('catalog/image')->init($product, 'thumbnail') ; ?>" class="img-responsive" alt="a" /></a>
                            </div>
                            <div class="info">
                                <div class="separator clear-left">
                                    <p class="btn-add">
                                        <a href="<?php echo $product->getProductUrl() ; ?>" class="hidden-sm pink text-center"><?php echo  $product->getName() ; ?></a></p>
                                </div>
                                <div class="clearfix" style="clear:both;"></div>
                            </div>
                        </div>
                    </div>
        
            <?php $counter++;  endforeach ; echo '</div></div>'; ?>           

        </div> <!-- carousel-inner -->
</div>   <!-- #carousel-example  -->