In Your Home.phtml // home.phtml is a custom page that is called by backed cms home page
1- copy and paste the following code in your home.phtml
<div id="content" class="banner-dn"><h2 id="products">Products</h2></div>
<div class="category-listing" >
<?php
$parentCategoryId = '7';
$categories = Mage::getModel('catalog/category')
->getCollection()
->addFieldToFilter('parent_id', array('eq'=>$parentCategoryId))
->addFieldToFilter('is_active', array('eq'=>'1'))
->addAttributeToSelect('*');
?>
<ul class="products-nav-list">
<?php
foreach($categories as $_category){
?>
<?php $products_count = Mage::getModel('catalog/category')->load($_category->getId())->getProductCount(); ?>
<li class="category-link" id="category-link" cat_id="<?php echo $_category->getId(); ?>"><a class="shop-cat-link" href="javascript:void(0)"><?php echo $_category->getName(); ?><span class="category-count"><sup><?php echo ($products_count); ?></sup></span></a></li>
<?php
}
?>
</ul>
</div>
<!--Default Product Listing On Load-->
<div class="product-listig-page" id="product">
<?php
$categoryid = 3;
$category = new Mage_Catalog_Model_Category();
$category->load($categoryid);
$collection = $category->getProductCollection();
$collection->addAttributeToSelect('*');
?>
<ul class="products">
<?php
foreach ($collection as $_product) { ?>
<li class="item">
<a class="product-images" href="<?php echo $_product->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>" width="430" height="480" alt="" /></a>
<a href="<?php echo $_product->getProductUrl(); ?>">
<span class="custom-name"><?php echo $_product->getName(); ?></span>
<?php if ($_product->getBrand()): ?>
<span class="custom-brand"><?php echo $_product->getResource()->getAttribute('brand')->getFrontend()->getValue($_product); ?></span>
<?php endif; ?>
<span class="custom-price"><?php echo Mage::helper('core')->currency(number_format($_product->getPrice(),2)); ?></span>
</a>
</li>
<?php } ?>
</ul>
</div>
<!--Default Product Listing On Load End-->
<script type="text/javascript">
jQuery(window).load(function(){
jQuery('.category-link').click(function(){
//alert('ok');
var catid= jQuery(this).attr('cat_id');
//alert(catid);
jQuery.ajax({
url: "<?php echo $this->getBaseUrl();?>ajax/product_listing.php",
type: 'GET',
data: "categoryid="+catid,
success: function(abc){
//alert(abc);
jQuery('#product').html(abc);
}
})
})
})
</script>
2- Create a folder named ajax in your root directory and inside the folder create a php file name product_listing.php and paste the following code.
<?php
require_once('../app/Mage.php');
Mage::app();
extract($_REQUEST);
//echo $categoryid;
$category = new Mage_Catalog_Model_Category();
$category->load($categoryid);
$collection = $category->getProductCollection();
$collection->addAttributeToSelect('*');?>
<ul class="products">
<?php
foreach ($collection as $_product) {
$model = Mage::getModel('catalog/product');
$product_id = $_product->getId();
$_product = $model->load($product_id);
?>
<li class="item">
<a class="product-images" href="<?php echo $_product->getProductUrl() ?>"><img src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image'); ?>" width="430" height="480" alt="" />
</a>
<a href="<?php echo $_product->getProductUrl(); ?>">
<span class="custom-name"><?php echo $_product->getName(); ?></span>
<?php if ($_product->getBrand()): ?>
<span class="custom-brand"><?php echo $_product->getResource()->getAttribute('brand')->getFrontend()->getValue($_product); ?></span>
<?php endif; ?>
<span class="custom-price"><?php echo Mage::helper('core')->currency(number_format($_product->getPrice(),2)); ?></span>
</a>
</li>
<?php } ?>
</ul>
Or In Magento Way
By Using Controller.
In Your Home.phtml // home.phtml is a custom page that is called by backed cms home page
1- copy and paste the following code in your home.phtml
<div id="content" class="banner-dn"><h2 id="products">Products</h2></div>
<div class="category-listing" >
<?php
$parentCategoryId = '7';
$categories = Mage::getModel('catalog/category')
->getCollection()
->addFieldToFilter('parent_id', array('eq'=>$parentCategoryId))
->addFieldToFilter('is_active', array('eq'=>'1'))
->addAttributeToSelect('*');
?>
<ul class="products-nav-list">
<?php
foreach($categories as $_category){
?>
<?php $products_count = Mage::getModel('catalog/category')->load($_category->getId())->getProductCount(); ?>
<li class="category-link" id="category-link" cat_id="<?php echo $_category->getId(); ?>"><a class="shop-cat-link" href="javascript:void(0)"><?php echo $_category->getName(); ?><span class="category-count"><sup><?php echo ($products_count); ?></sup></span></a></li>
<?php
}
?>
</ul>
</div>
<!--Default Product Listing On Load-->
<div class="product-listig-page" id="product">
<?php
$categoryid = 3;
$category = new Mage_Catalog_Model_Category();
$category->load($categoryid);
$collection = $category->getProductCollection();
$collection->addAttributeToSelect('*');
?>
<ul class="products">
<?php
foreach ($collection as $_product) { ?>
<li class="item">
<a class="product-images" href="<?php echo $_product->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>" width="430" height="480" alt="" /></a>
<a href="<?php echo $_product->getProductUrl(); ?>">
<span class="custom-name"><?php echo $_product->getName(); ?></span>
<?php if ($_product->getBrand()): ?>
<span class="custom-brand"><?php echo $_product->getResource()->getAttribute('brand')->getFrontend()->getValue($_product); ?></span>
<?php endif; ?>
<span class="custom-price"><?php echo Mage::helper('core')->currency(number_format($_product->getPrice(),2)); ?></span>
</a>
</li>
<?php } ?>
</ul>
</div>
<!--Default Product Listing On Load End-->
<div class="cat-overlay-cls"></div>
<script type="text/javascript">
jQuery(window).load(function(){
jQuery('.category-link').click(function(){
//jQuery(".page").fadeOut(3000);
//jQuery(".page").fadeIn(3000);
//alert('ok');
var getHtml=jQuery(this).html();
//alert(getHtml);
jQuery('.cat-overlay-cls').html(getHtml);
jQuery('.cat-overlay-cls').fadeIn(1000);
var catid= jQuery(this).attr('cat_id');
//alert(catid);
jQuery.ajax({
//url: "<?php echo $this->getBaseUrl();?>ajax/product_listing.php",
url: "<?php echo $this->getBaseUrl();?>responsivebannerslider/index/cattab",
type: 'GET',
data: "categoryid="+catid,
success: function(result){
//alert(result);
jQuery('#product').html(result);
jQuery('.cat-overlay-cls').fadeOut(3000);
// hover
jQuery(".product-images").hover(
function() { jQuery(this).children('.product-view-layer').show(); },
function() { jQuery(this).children('.product-view-layer').hide(); }
);
}
})
jQuery('.scroll-product').trigger('click');
});
/*********For product view**********/
// hover
jQuery(".product-images").hover(
function() { jQuery(this).children('.product-view-layer').show(); },
function() { jQuery(this).children('.product-view-layer').hide(); }
);
/**********End product view*********/
});
</script>
<pre>
As define in the jQuery Url that its calling IndexController.php file located in app/code/community/Mks/Responsivebannerslider/controllers/IndexController.php
inside the file we will create a new function that will fire on click.the function code as follow
public function cattabAction() {
//echo "YES";
$categoryid=$this->getRequest()->getParam('categoryid');
$category = new Mage_Catalog_Model_Category();
$category->load($categoryid);
$collection = $category->getProductCollection();
$collection->addAttributeToSelect('*');
$_collectionSize=count($collection);
//echo "Count :".$_collectionSize;
$_columnCount = 4;
?>
<ul class="products">
<?php
$i=0;
foreach ($collection as $_product) { ?>
<?php if ($i++%$_columnCount==0): ?>
<div class="row">
<?php endif ?>
<div class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<div class="rowitem">
<div class="innerrow">
<div class="item-img-cls">
<a class="product-images" href="<?php echo $_product->getProductUrl() ?>">
<span class="product-view-layer" style="display: none;">View</span>
</a>
<span class="img-span" id="<?php echo $_product->getId(); ?>">
<img src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image'); ?>" width="430" height="480" alt="" />
</span>
</div>
<div class="pro-name-price-outer">
<div class="pro-name-price">
<a class="custom-name" href="<?php echo $_product->getProductUrl(); ?>">
<?php echo $_product->getName(); ?>
</a>
<?php if ($_product->getBrand()): ?>
<div class="custom-brand"><?php echo $_product->getResource()->getAttribute('brand')->getFrontend()->getValue($_product); ?></div>
<?php endif; ?>
</div>
<div class="custom-price">
<?php echo Mage::helper('core')->currency(number_format($_product->getPrice(),2)); ?>
</div>
</div>
</div>
</div>
</div>
<?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
</div>
<?php endif ?>
<?php } ?>
<!-- Start product view -->
<div class="inner-product-details">
sdfdsf sdfsdf
</div>
<!-- End view -->
</ul>
<?php
}
?>
0 Comments