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
app/design/frontend/{your-package-name}/{your-theme-name}/template/catalog/product/widget/new/content/new_grid.phtml

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

app/design/frontend/rwd-custom/default/template/catalog/product/widget/new/content/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>
        </span>    
        <h2><?php echo $this->__('New Products') ?></h2>
    </div>
    <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"
            data-cycle-fx="carousel"
            data-cycle-timeout="0"
            data-cycle-carousel-visible="4"
            data-cycle-next="#product-scroll-controls-next"
            data-cycle-prev="#product-scroll-controls-prev"
            data-cycle-carousel-fluid="true"
        >
            <?php foreach ($_products->getItems() as $_product): ?>
                    <div>
                        <?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">
                                New
                            </span>
                        </a>            
                        
                        <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');
                                    }
                                    else
                                    {
                                        ?>
                                        <div class="ratings">
                                            <div class="rating-box rating-box-default">
                                                <div class="rating" style="width:100%"></div>
                                            </div>
                                            <span class="amount">0 Review(s)</span>
                                        </div>
                                        <?php    
                                    }?>
                            <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" >

		

			
 This post was last modified on  9th November 2022 12:29 pm