Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create slider of products which are recently added ?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 425
    Comment on it

    In magento if we are required to create a simple slider of products which are recently Added for say between from previous month to the current month.
    Lets see how we can create it :

    1. Create a module with namespace and module.
    2. Then Create a file config.xml in etc folder in our module.
    3. After that create a block file Addedslider.php in Block folder in our module.
    3. finally create a Helper with the file Data.php.
     
    Now, in our config.xml file at the path Namespace/Module/etc/config.xml write the below code in it :
     

    <?xml version="1.0"?>
    <config>
      <modules>
        <Namespace_Module>
          <version>0.1.0</version>
        </Namespace_Module>
      </modules>
      <frontend>
        <layout>
          <updates>
            <module>
              <file>addedslider.xml</file>
            </module>
          </updates>
        </layout>
      </frontend>
      <global>
        <helpers>
          <module>
            <class>Namespace_Module_Helper</class>
          </module>
        </helpers>
        <blocks>
          <module>
            <class>Namespace_Module_Block</class>
          </module>
        </blocks>
      </global>
    </config>

    In the above code we have defined our module with the version 0.1.0 and 
    then in frontend we are calling our new layout file addedslider.xml which is in the layout folder of our theme.
     
    Now, Block is created to load the products which are recently added for say between from last month to the current month . Create a Block with the name Addedslider.php and add the below code in it.

    <?php
    class Namespace_Module_Block_Addedslider extends Mage_Core_Block_Template {
      public function ftotalProduct() {
       
        $first = date('Y-m-01', strtotime('-1 months'));
        $first = $first.''.'00:00:00';
        $last = date('Y-m-d');
        $last = $last.''.'00:00:00';
        $collection = Mage::getModel('catalog/product');
        $products = $collection->getCollection()
            ->addAttributeToSelect('*')
            ->addAttributeToFilter('created_at', array('gteq' =>$first))
            ->addAttributeToFilter('created_at', array('lteq' => $last))
            ->load();
        return $products;
      }
    }
    ?>

    In the above code we are loading the products which are recently added for this we first took the dates between previous month to the current month date.
    then we wrote the query to fetch products which have field values 'created_at' between these two dates and returned the products array.
     
    Now at the path design/frontend/yourtheme/layout create your layout file addedslider.xml with the below code.

    <?xml version="1.0"?>
    <layout version="0.1.0">
      <cms_index_index>
        <reference name="content">
          <block type="addedslider/addedslider" name="addedslider" as="addedslider" template="addedslider/addedslider.phtml" />
        </reference>
      </cms_index_index>
    </layout>

     
    in the above we are calling our own block in the home page for that we have defined the block between <cms_index_index> tag.
    Now the thing is we have to design the slider in our block at /design/frontend/yourtheme/template/addedslider/addedslider.phtml

    for the slider write the below code :

    <?php
      $products = $this->ftotalProduct();
      $prodIds = $products->getAllIds();
      $ftotalproduct = count($prodIds);
    ?>
      <div class="featured">
        <div class="fhead">
          <strong>
            <span>
              <?php echo $this->__('Recently Edited Products'); ?>
            </span>
          </strong>
        </div>
        <?php if ($ftotalproduct): ?>
          <div class="slideshow-container" style="width:30%;">
            <ul class="slideshow">
              <?php foreach ($products as $_product) : ?>
                  <li class="productdiv">
                    <a href="<?php echo $this->getUrl($_product->getUrlPath()) ?>" >
                      <span>
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(170) ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
                      </span>
                    </a>
                    <span class="productname">
                      <a href="<?php echo $this->getUrl($_product->getUrlPath()) ?>" ><?php echo $_product->getName(); ?>
                      </a>         
                    </span>
                    <span class="price-con"><?php echo Mage_Catalog_Block_Product::getPriceHtml($_product, true) ?></span>
                    <span class="fadd">
                      <p>
                        <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation(' <?php echo $this->helper('checkout/cart')->getAddUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                      </p>
                    </span>
                  </li>
            <?php endforeach; ?>
            </ul>
          </div>
        </div>
      <?php else: ?>
        <div class="show-msg">
          <?php echo $this->__("There are no feature products."); ?>
        </div>
      <?php endif; ?>

    In the above code we are using class="slideshow-container" in the div before ul tag and class class="slideshow" in the ul tag, these two classes "slideshow-container" and  "slideshow"   are to use magento default slider.
    In that way we can define our own slider by changing the block file query to fetch the products according to our requirement.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: