Custom Magento Theme – Part 5

Part 5 – New Product Widget

cycle2.js slider

The default rwd theme new product widget shows the selected products in a grid style, I want to show multiple products in a row, which the user can slide through the products like a carousel. This requires some changes to the template file for the new products widget.

The new product widget template file should be located

You can copy the one from the parent theme ‘rwd’, for this I copied the new_grid.phtml from the rwd folder and renamed it to new_grid_cycle2.phtml


I then modified the code to suit the cycle2 structure along with adding elements so I can further style the new products on the homepage with a sticker overlay.

<?php if (($_products = $this->getProductCollection()) && $_products->getSize()): ?>
<div class="widget widget-slider-products">
    <div class="widget-title">
        <span id="product-scroll-controls">
            <a href="#" id="product-scroll-controls-prev"><i class="fa fa-arrow-left"></i></a>
            <a href="#" id="product-scroll-controls-next"><i class="fa fa-arrow-right"></i></a>
        <h2><?php echo $this->__('New Products') ?></h2>
    <div class="widget-products">
        <?php echo $this->getPagerHtml() ?>
        <?php $_columnCount = $this->getColumnCount(); ?>
        <?php $i=0; ?>
        <div class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col-widget product-slideshow"
            <?php foreach ($_products->getItems() as $_product): ?>
                        <?php $_imgSize = 210; ?>
                        <?php // The image size is locked at 210 for this for display purposes. CSS has it at 75% which should equate to 278px?>
                        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                            <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(210) ?>" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                            <span class="img-new-overlay">
                        <div class="product-info">
                            <h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo substr($this->helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name'), 0, 20) ?>...</a></h3>
                            <?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?>
                            <?php if(strlen($this->getReviewsSummaryHtml($_product, 'short')) > 5)
                                        echo $this->getReviewsSummaryHtml($_product, 'short');
                                        <div class="ratings">
                                            <div class="rating-box rating-box-default">
                                                <div class="rating" style="width:100%"></div>
                                            <span class="amount">0 Review(s)</span>
                            <div class="actions">
                                <?php if ($_product->isSaleable()): ?>
                                    <button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><i class="fa fa-cart-plus"></i> <span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                                <?php else: ?>
                                    <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                                <?php endif; ?>
                                <ul class="add-to-links">
                                    <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                        <li><a href="<?php echo $this->getAddToWishlistUrl($_product) ?>" class="link-wishlist" title="<?php echo $this->__('Add to Wishlist') ?>"><i class="fa fa-heart"></i> <span><?php echo $this->__('Wishlist') ?></span></a></li>
                                    <?php endif; ?>
                                    <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                        <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare" title="<?php echo $this->__('Add to Compare') ?>"><i class="fa fa-clone"></i> <span><?php echo $this->__('Compare') ?></span></a></li>
                                    <?php endif; ?>
                            </div><!-- .actions -->
                        </div><!-- .product-info -->                        

            <?php endforeach; ?>
<?php endif; ?>
rwd custom new products widget