Tuesday 21 August 2012

Magento - Previous/Next link in product page


Below code Use for show previous/next link in product page:

open view.phtml file (app/design/frontend/base(or your theme interface)/default(your theme interface)/template/catalog/product/view.phtml)

past below code above <div class="product-view">

<!-- Product Navigation -->
<div id="product-navigation">
  <?php // Previous and Next product links in product page
      if ($this->helper('catalog/data')->getCategory()) {
         $cat = $this->helper('catalog/data')->getCategory();
      } else {
         $_ccats = $this->helper('catalog/data')->getProduct()->getCategoryIds();
         $cat = Mage::getModel('catalog/category')->load($_ccats[0]);
      }; //missing ";" causes 503 error for validation service
                
     $_product = $this->getProduct();
                 
     if(!$_product->getCategoryIds())
     return; // Don't show Previous and Next if product is not in any category
                 
                 
     $order = Mage::getStoreConfig('catalog/frontend/default_sort_by');
     $direction = 'asc'; // asc or desc
                 
     $category_products = $cat->getProductCollection()->addAttributeToSort($order, $direction);
     $category_products->addAttributeToFilter('status',1); // 1 or 2
     $category_products->addAttributeToFilter('visibility',4); // 1.2.3.4
                 
     $cat_prod_ids = $category_products->getAllIds(); // get all products from the category
     $_product_id = $_product->getId();
                 
     $_pos = array_search($_product_id, $cat_prod_ids); // get position of current product
     $_next_pos = $_pos+1;
     $_prev_pos = $_pos-1;
                 
     // get the next product url
    if( isset($cat_prod_ids[$_next_pos]) ) {
       $_next_prod = Mage::getModel('catalog/product')->load( $cat_prod_ids[$_next_pos] );
    } else {
       $_next_prod = Mage::getModel('catalog/product')->load( reset($cat_prod_ids) );
    }
      
    // get the previous product url
    if( isset($cat_prod_ids[$_prev_pos]) ) {
        $_prev_prod = Mage::getModel('catalog/product')->load( $cat_prod_ids[$_prev_pos] );
    } else {
        $_prev_prod = Mage::getModel('catalog/product')->load( end($cat_prod_ids) );
    }

    $more_url = $cat->getUrl();
    $nxtname=substr($_next_prod->getName(),0,25);
    $prvname=substr($_prev_prod->getName(),0,25);
    
  ?>
  <style>
   .prelinknav{float: left;width: 33%;font-size: 11px;text-align: left;}
   .nxtlinknav{float: left;width: 33%;font-size: 11px;text-align: right;}
   .catlinknav{float: left;width: 33%;font-size: 11px;text-align: center;}
   .product-view{float: left;}
                 
 </style>
 <div>
   <?php if($_prev_prod != NULL): ?>
    <div class="prelinknav"><a href="<?php print $_prev_prod->getUrlPath(); if($search_parameter):?>?search=1<?php endif;?>" ><span 

style="font-weight: bolder;"><?php echo $this->__('<<< PREVIOUS') ?></span>(<?php echo $prvname; ?>)</a></div>
   <?php endif; ?>
     <div class="catlinknav"><a href="<?= $more_url; ?>"><span style="font-weight: bolder;">Back</span>(<?php echo $cat->getName() ?>)

</a></div>
   <?php if($_next_prod != NULL): ?>
     <div class="nxtlinknav"><a href="<?php print $_next_prod->getUrlPath(); if($search_parameter):?>?search=1<?php endif;?>"><span 

style="font-weight: bolder;"><?php echo $this->__('NEXT') ?></span>(<?php echo $nxtname; ?>)<span style="font-weight: bolder;"><?php echo 

$this->__('>>>') ?></span></a></div>
   <?php endif; ?>
 </div>
</div>
<!-- end pagination nav -->

now check in frontend product view page

5 comments:

  1. Work's like a charm, thank you!

    ReplyDelete
  2. its' works ..... superb.... by the way how to add filter the products only show in stock products ?

    ReplyDelete
  3. I'm also interested in adding thumbnails for the prev-next products. I'm currently using an extension for that - http://amasty.com/previous-next-navigation.html

    ReplyDelete
    Replies
    1. it is possible for thumbnail also. contact me on chauhan.gordhan@gmail.com

      Delete
  4. How to make this responsive?

    ReplyDelete