latest product with add-to-cart in magento - magento

I'm new for Magento. I need to display latest added product in home page. I'm using following code in 2columns-left.phtml
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div class="col-main">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
<?php
$productsCollection = Mage::getModel("catalog/product")->getCollection()
->addAttributeToSort("entity_id","DESC")
->setVisibility(Mage::getSingleton('catalog/product_visibility')->getVisibleInSiteIds())
->setPageSize(6)
->setCurPage(1);
foreach ($productsCollection as $product) {
$model = Mage::getModel('catalog/product')->load($product->getId());
echo $model->getName().'<br>';
echo $model->getPrice().'<br>';
echo $model->getImageUrl().'<br>';
echo "<br><br>";
}
?>
</div>
</div>
It's working fine. But I can't correct code for add-to-cart option.
I found fllowing code from addtocart.phtml with script,
<?php $_product = $this->getProduct(); ?>
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form">
<?php $buttonTitle = $this->__('Add to Cart'); ?>
<?php if($_product->isSaleable()): ?>
<div class="add-to-cart">
<?php if(!$_product->isGrouped()): ?>
<label for="qty"><?php echo $this->__('Qty:') ?></label>
<input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
<?php endif; ?>
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php echo $buttonTitle ?></span></span></button>
<?php echo $this->getChildHtml('', true, true) ?>
</div>
<?php endif; ?>
</form>
But, if I click add-to-cart, going to home page.
Help me.

Call a block on home page through static block with content value as
{{block type="catalog/product_list" name="product_listing" template="catalog/product/latest.phtml"}}
or you can directly call this block on cms home , paste this
{{block type="catalog/product_list" name="product_listing" template="catalog/product/latest.phtml" }}
in your cms home page content.
create a file in folder frontend/theme_folder/default/template/catalog/product as latest.phtml.
Paste the below code in it as :
Latest Products
<?php
$_productCollection = Mage::getResourceModel('reports/product_collection')
->addAttributeToSelect('*')
->setVisibility(array(2,3,4))
->setOrder('created_at', 'desc')
->setPage(1, 4);
?>
<?php $_iterator = 0; ?>
<ul class="products-grid">
<?php foreach($_productCollection as $_product) : ?>
<li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
<?php // Product Image ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<div class="product-shop">
<div class="f-fix">
<h2 class="product-name"><a href="<?php echo $_product->getProductUrl(); ?>"><?php echo $_product->getName(); ?></h2>
<?php echo $this->getPriceHtml($_product, true) ?>
<?php if($_product->isSaleable()): ?>
<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
</div>
</div>
</li>
<?php endforeach; ?>
</ul>
Thats it you will be able to see the latest 4 product on home page. you can increase the number of product by increasing the ->setPage(1, 4); to your required number of product on home page.

Related

get collection featured products

Im trying to retrieve all my products with attributed of featured of yes (1), but int working my code. Am i calling the wrong way? Whats wrong with my code.
I checked some similiar issues but most of them have basically the same approach.
<?php
$_products = $this->getProductCollection();
$_products->addAttributeToSelect('featured',1);
?>
<?php if ($_products && $_products->getSize()): ?>
<div class="widget widget-new-products">
<div class="widget-title">
<h2><?php echo $this->__('Produtos em Destaque') ?></h2>
</div>
<div class="widget-products">
<?php echo $this->getPagerHtml() ?>
<?php $_columnCount = $this->getColumnCount(); ?>
<?php $i=0; ?>
<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col-widget">
<?php foreach ($_products->getItems() as $_product): ?>
<li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<?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) ?>" />
</a>
<div class="product-info">
<h3 class="product-name"><?php echo $this->helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name') ?></h3>
<?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<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) ?>')"><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><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endif; ?>
Use the following to retrieve all all your products with yes attribute:
<?php
$_categoryId = $this->getCategoryId(); // Category ID
$_productCollection = Mage::getModel('catalog/category')->load($_categoryId)
->getProductCollection()
->addAttributeToSelect('*')
->addAttributeToFilter('status', 1)
->addAttributeToFilter('visibility', 4)
->setOrder('price', 'ASC');
?>
<div class="featured-product">
<?php foreach ($_productCollection as $_product): ?>
<div class="item">
<a class="product-image" href="<?php echo $_product->getProductUrl() ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(200); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
</a>
<a class="product-name" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a>
<?php echo $this->getPriceHtml($_product, true) ?>
</div>
<?php endforeach ?>
</div>

Custom attribute text in Magento Cart Crosselling

Currently I have this in crosselling.phtml:
<?php if($this->getItemCount()): ?>
<div class="crosssell">
<h2><?php echo $this->__('Service:') ?></h2>
<ul id="crosssell-products-list">
<?php foreach ($this->getItems() as $_item): ?>
<li class="item">
<a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75, 75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
<div class="product-details">
<h3 class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></h3>
<?php echo $this->getPriceHtml($_item, true) ?>
<p><?php
$custom = Mage::getModel('catalog/product')->load($_item->getProductId());
echo $custom->getAttributeText('servicetekst');
?></p>
<button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<ul class="add-to-links">
</ul>
</div>
</li>
<?php endforeach; ?>
</ul>
<script type="text/javascript">decorateList('crosssell-products-list', 'none-recursive')</script>
</div>
<?php endif; ?>
Everything loads fine, except de custom attribute "servicetekst". From here, I'm unsure how to proceed?
I found something that worked for me for displaying custom attributes in crossell template Magento 1.9.2.2. It's easy.
<?php echo $this->escapeHtml($_item->getCustom_attribute()) ?>
Make sure "Used in Product Listing" is set to "Yes" and reindex.

how can i display products on home page in magento Version 1.9.0.1 in magento?

I want to show all products of one category in home page.For that i added the code in cms->homepage
{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" category_id="3" template="catalog/product/list.phtml"}}
but it is showing the error
Fatal error: Call to a member function getSortedChildren() on a non-object in E:\xampp\htdocs\princemagento\testing\app\design\frontend\rwd\default\template\catalog\product\list.phtml on line 180
the code in list.phtml page
<?php
$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper('catalog/output');
?>
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
<?php echo $this->getToolbarHtml() ?>
<?php // List mode ?>
<?php if($this->getMode()!='grid'): ?>
<?php $_iterator = 0; ?>
<ol class="products-list" id="products-list">
<?php foreach ($_productCollection as $_product): ?>
<li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
<?php // Product Image ?>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
<?php /* Based on the native RWD styling, product images are displayed at a max of ~400px wide when viewed on a
one column page layout with four product columns from a 1280px viewport. For bandwidth reasons,
we are going to serve a 300px image, as it will look fine at 400px and most of the times, the image
will be displayed at a smaller size (eg, if two column are being used or viewport is smaller than 1280px).
This $_imgSize value could even be decreased further, based on the page layout
(one column, two column, three column) and number of product columns. */ ?>
<?php $_imgSize = 300; ?>
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
<?php // Product description ?>
<div class="product-shop">
<div class="f-fix">
<div class="product-primary">
<?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
<h2 class="product-name"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></h2>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product) ?>
<?php endif; ?>
<?php
$_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
foreach($_nameAfterChildren as $_nameAfterChildName):
$_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
$_nameAfterChild->setProduct($_product);
?>
<?php echo $_nameAfterChild->toHtml(); ?>
<?php endforeach; ?>
</div>
<div class="product-secondary">
<?php echo $this->getPriceHtml($_product, true) ?>
</div>
<div class="product-secondary">
<?php if($_product->isSaleable() && !$_product->canConfigure()): ?>
<p class="action"><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
<?php elseif($_product->isSaleable()): ?>
<p class="action"><a title="<?php echo $this->__('View Details') ?>" class="button" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->__('View Details') ?></a></p>
<?php else: ?>
<p class="action 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><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
<div class="desc std">
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
<?php echo $this->__('Learn More') ?>
</div>
</div>
</div>
</li>
<?php endforeach; ?>
</ol>
<script type="text/javascript">decorateList('products-list', 'none-recursive')</script>
<?php else: ?>
<?php // Grid Mode ?>
<?php $_collectionSize = $_productCollection->count() ?>
<?php $_columnCount = $this->getColumnCount(); ?>
<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php /*if ($i++%$_columnCount==0): ?>
<?php endif*/ ?>
<li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
<?php $_imgSize = 210; ?>
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>"
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
<div class="product-info">
<h2 class="product-name"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h2>
<?php
$_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
foreach($_nameAfterChildren as $_nameAfterChildName):
$_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
$_nameAfterChild->setProduct($_product);
?>
<?php echo $_nameAfterChild->toHtml(); ?>
<?php endforeach; ?>
<?php echo $this->getPriceHtml($_product, true) ?>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php endif; ?>
<div class="actions">
<?php if($_product->isSaleable() && !$_product->canConfigure()): ?>
<button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<?php elseif($_product->isSaleable()): ?>
<a title="<?php echo $this->__('View Details') ?>" class="button" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->__('View Details') ?></a>
<?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><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
</li>
<?php /*if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
<?php endif*/ ?>
<?php endforeach ?>
</ul>
<script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
<?php endif; ?>
<div class="toolbar-bottom">
<?php echo $this->getToolbarHtml() ?>
</div>
</div>
<?php endif; ?>
<?php
//set product collection on after blocks
$_afterChildren = $this->getChild('after')->getSortedChildren();
foreach($_afterChildren as $_afterChildName):
$_afterChild = $this->getChild('after')->getChild($_afterChildName);
$_afterChild->setProductCollection($_productCollection);
?>
<?php echo $_afterChild->toHtml(); ?>
<?php endforeach; ?>
I think there will be any other method to show products in magento v1.9.0.1.
If anyone knows this,please help me out.
Thanks!
{{block type="catalog/product_list" category_id="8" template="catalog/product/featured.phtml"}}
add above code in cms page and add featured.phtml file in catalog/product and put this code
<?php $_productCollection=$this->getLoadedProductCollection() ?>
<?php if(!$_productCollection->count()): ?>
<div class="note-msg">
<?php echo $this->__('There are no products matching the selection. Please provide a category ID.') ?>
</div>
<?php else: ?>
<?php // Grid Mode ?>
<ul id="featured" class="jcarousel-skin-tango">
<?php $_collectionSize = $_productCollection->count() ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if($i++%4==0): ?>
<?php endif ?>
<li><a class="preview" rel="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(300, 300); ?>" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(105, 105); ?>" width="105" height="105" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</a> </li>
<?php if ($i%4==0 && $i!=$_collectionSize): ?>
<?php endif ?>
<?php endforeach ?>
</ul>

Magento FancyBox confirmation dialogue

When I add an item to cart from the search results page in Magento it does not display the FancyBox confirmation box. The item DOES get added to the cart though. On the main category page it displays the confirmation box OK upon adding an item to cart.
The JS & CSS for FancyBox are included in both the category and search results pages, I have manually checked in the source.
If I replace
jQuery.fancybox.close();
with
alert(data.message);
then it displays a standard Javascript alert saying it's added to cart and shows the correct item details. The FancyBox is preferred though with the product image.
Here's the code for app\design\frontend\custom_package\default\template\catalog\product\list.phtml, the Javascript is at the end. Thanks for taking a look :D
<?php
$_productCollection=$this->getLoadedProductCollection();
$columnCount = themeOptions('column_count');
$this->setColumnCount($columnCount);
$_helper = $this->helper('catalog/output');
?>
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
<?php echo $this->getToolbarHtml() ?>
<?php // List mode ?>
<?php if($this->getMode()!='grid'): ?>
<?php $_iterator = 0; ?>
<?php $imgSize = 192; ?>
<ol class="products-list" id="products-list">
<?php foreach ($_productCollection as $_product): ?>
<li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
<?php include('view/labels.phtml') ?>
<?php $mainImg = $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgSize); ?>
<?php $backImg = $this->getLayout()->createBlock("ajax/listmedia")->setTemplate("catalog/product/list/media.phtml")->setData('size', $imgSize)->setData('product', $_product)->toHtml(); ?>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
<?php if($backImg != 'null'): ?><img src="<?php echo $backImg ?>" width="<?php echo $imgSize ?>" height="<?php echo $imgSize ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /><?php endif; ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgSize) ?>" <?php if($backImg != 'null'): ?>onmouseover="hideImage(this)" onmouseout="showImage(this)"<?php endif; ?> width="<?php echo $imgSize ?>" height="<?php echo $imgSize ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
<?php // Product description ?>
<div class="product-shop">
<div class="f-fix">
<?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
<h2 class="product-name"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></h2>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product) ?>
<?php endif; ?>
<div id="productimgover<?php echo $_product->getId()?>" style="display: none;"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(64); ?>" width="64" height="64" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></div>
<div id='productname<?php echo $_product->getId()?>' style='display:none'><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></div>
<div class="desc std">
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
<?php echo $this->__('Learn More') ?>
</div>
<?php if(themeOptions('addto')): ?>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
<?php endif; ?>
</div>
<div style="clear: both;"></div>
</div>
<div class="addtocont">
<?php echo $this->getPriceHtml($_product, true) ?>
<?php if($_product->isSaleable()): ?>
<?php if ( !($_product->getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped()) ) { ?>
<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocationAjax('<?php echo $this->getAddToCartUrl($_product) ?>','<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
<?php } else { ?>
<button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="showOptions('<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<a href='<?php echo $this->getUrl('ajax/index/options',array('product_id'=>$_product->getId()));?>' class='fancybox' id='fancybox<?php echo $_product->getId()?>' style="display: none;" ><?php echo $this->__('Add to Cart') ?></a>
<?php } ?>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
</div>
</li>
<?php endforeach; ?>
</ol>
<script type="text/javascript">decorateList('products-list', 'none-recursive')</script>
<?php else: ?>
<?php // Grid Mode ?>
<?php $_collectionSize = $_productCollection->count() ?>
<?php
$_columnCount = $this->getColumnCount();
if($_columnCount == 4){
$imgSize = 180;
}elseif($_columnCount == 3){
$imgSize = 245;
}
?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if ($i++%$_columnCount==0): ?>
<ul class="products-grid columns<?php echo $_columnCount ?>">
<?php endif ?>
<li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php endif; ?>
<?php include('view/labels.phtml') ?>
<?php $mainImg = $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgSize); ?>
<?php $backImg = $this->getLayout()->createBlock("ajax/listmedia")->setTemplate("catalog/product/list/media.phtml")->setData('size', $imgSize)->setData('product', $_product)->toHtml(); ?>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
<?php if($backImg != 'null'): ?><img src="<?php echo $backImg ?>" width="<?php echo $imgSize ?>" height="<?php echo $imgSize ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /><?php endif; ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgSize) ?>" <?php if($backImg != 'null'): ?>onmouseover="hideImage(this)" onmouseout="showImage(this)"<?php endif; ?> width="<?php echo $imgSize ?>" height="<?php echo $imgSize ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
<div id="productimgover<?php echo $_product->getId()?>" style="display: none;"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(64); ?>" width="64" height="64" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></div>
<div class="moreinfo">
<h2 class="product-name"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h2>
<div id='productname<?php echo $_product->getId()?>' style='display:none'><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></div>
<?php echo $this->getPriceHtml($_product, true) ?>
<?php if($_product->isSaleable()): ?>
<?php if ( !($_product->getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped()) ) { ?>
<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocationAjax('<?php echo $this->getAddToCartUrl($_product) ?>','<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
<?php } else { ?>
<button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="showOptions('<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<a href='<?php echo $this->getUrl('ajax/index/options',array('product_id'=>$_product->getId()));?>' class='fancybox' id='fancybox<?php echo $_product->getId()?>' style="display: none;" ><?php echo $this->__('Add to Cart') ?></a>
<?php } ?>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
<div class="clear"></div>
<?php if(themeOptions('addto')): ?>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
<?php endif; ?>
<div class="clear"></div>
</div>
</li>
<?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
</ul>
<?php endif ?>
<?php endforeach ?>
<script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
<?php endif; ?>
<script type="text/javascript">
jQuery.noConflict();
jQuery('.fancybox').fancybox({
hideOnContentClick : true,
width: 582,
autoDimensions: true,
type : 'iframe',
showTitle: false,
scrolling: 'no',
onComplete: function(){ //Resize the iframe to correct size
jQuery('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height
jQuery('#fancybox-content').height(jQuery(this).contents().find('body').height()+30);
jQuery.fancybox.resize();
});
}
});
function showOptions(id){
jQuery('#fancybox'+id).trigger('click');
}
function setAjaxData(data,iframe){
if(data.status == 'ERROR'){
alert(data.message);
}else{
if(jQuery('.block-cart')){
jQuery('.block-cart').replaceWith(data.sidebar);
}
if(jQuery('.header .block-cart-header')){
jQuery('.header .block-cart-header').replaceWith(data.topcart);
}
jQuery.fancybox.close();
}
}
function setLocationAjax(url,id){
url += 'isAjax/1';
url = url.replace("checkout/cart","ajax/index");
var msgHtml;
var productImg = jQuery('#productimgover' + id).html();
var windowOver = jQuery('#addedoverlay');
var windowBox = jQuery('#added');
var titleForBox = jQuery('#productname' + id).text();
windowOver.show();
windowBox.show().css({
backgroundImage: "url('<?php echo $this->getSkinUrl('images/loading.gif')?>')"
});
try {
jQuery.ajax( {
url : url,
dataType : 'json',
success : function(data) {
if(data.status == 'SUCCESS'){
msgHtml = '<div class="added-content"><div style="float:left;">' + productImg + '</div><em>' + titleForBox + '</em> <?php echo $this->__('was successfully added to your shopping cart.') ?><div style="clear:both;"></div><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a> <?php echo $this->__('View cart & checkout') ?></div>';
}else{
msgHtml = '<div class="added-content"><p class="error-msg" style="margin-bottom:15px;">' + data.message + '</p><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a> <?php echo $this->__('View cart & checkout') ?></div>';
}
setAjaxData(data,false);
windowBox.css({
backgroundImage: 'none'
}).html(msgHtml);
windowOver.one('click',function(){
hidewindow(windowBox,windowOver);
});
jQuery('#hidewindow').click(function(){
hidewindow(windowBox,windowOver);
});
}
});
} catch (e) {
}
}
function hidewindow(windowBox,windowOver){
windowOver.fadeOut(400);
windowBox.fadeOut(400).html('');
}
function hideImage(img){
jQuery(img).animate({
'opacity' : 0
},150);
}
function showImage(img){
jQuery(img).animate({
'opacity' : 1
},150);
}
</script>
<div class="toolbar-bottom">
<?php echo $this->getToolbarHtml() ?>
</div>
</div>
<?php endif; ?>
You seem to have a lot of code, that i'm not 100% sure what purpose they serve. Take a look # fancybox options/apis
Try this
success : function(data) {
if(data.status == 'SUCCESS'){
msgHtml = '<div class="added-content"><div style="float:left;">' + productImg + '</div><em>' + titleForBox + '</em> <?php echo $this->__('was successfully added to your shopping cart.') ?><div style="clear:both;"></div><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a> <?php echo $this->__('View cart & checkout') ?></div>';
}else{
msgHtml = '<div class="added-content"><p class="error-msg" style="margin-bottom:15px;">' + data.message + '</p><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a> <?php echo $this->__('View cart & checkout') ?></div>';
}
jQuery.fancybox({
content: msgHtml,
modal: true
});
}
See How to programatically trigger fancybox with an inline div?
Also in function setAjaxData(data,iframe) on success you seem to be closing the fancybox using jQuery.fancybox.close();
Change this
<a id="hidewindow" href="javascript:void(0);">?php echo $this->__('Continue shopping') ?>...
to (something like)
<a href="#" onclick="jQuery.fancybox.close();">...

Magento Ecommerce - How to call and display a product's details into a CMS page?

I would like to be able to insert and display a product the same way it is displayed in the product page, but into a CMS page (with attributes, prices, order button, etc...)
I've succeeded in creating a single page by inserting copied parts of the source code of a product page but this is quite a lenghty and time consuming process considering that I'm planning to have quite a few pages done.
Therefore I would like to be able to call the product details into a CMS page.
I thought I could use the view.phtml and insert it into the desired CMS page but I couldn't figure out how to define the product_id either...
Thank you all in advance for your comments
Hmm, CMS Macro like this:
{{block type="catalog/product" template="catalog/product/line-item.phtml" sku_id="CI 101"}}
Referencing template catalog/product/line-item.phtml:
<?php //Template_Name/catalog/product/line-item.phtml
//{{block type="catalog/product" template="catalog/product/line-item.phtml" sku_id="CI 100"}}
//Feed template SKU for product listing
?>
<?php $_product = Mage::getModel('catalog/product')->loadByAttribute('sku',$this->getData('sku_id')); ?>
<?php /* get special freight messages from custom variables */
$freightfree = Mage::getModel('core/variable')->loadByCode('free_freight_text')->getValue('plain');
$hazmat = Mage::getModel('core/variable')->loadByCode('hazmat_text')->getValue('plain');
$ormd = Mage::getModel('core/variable')->loadByCode('ormd_text')->getValue('plain');
?>
<!-- <div class="single-product"> -->
<div class="listing-type-list catalog-listing">
<div class="listing-item last">
<?php $specialshipping = $_product->getAttributeText('special_shipping_group') ?>
<?php // Product Image ?>
<div class="product-image">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getSmallImageLabel()) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
</a>
</div>
<?php // Product description ?id= echo $_product->getId();?>
<div class="product-shop">
<h2><?php echo $this->htmlEscape($_product->getName())?></h5>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product) ?>
<?php endif; ?>
<?php echo $this->getPriceHtml($_product, true) ?>
<?php if(!$_product->getNotforsale()): ?>
<?php if(!$_product->getReplace_add_button()): ?>
<?php if($_product->isGrouped()): ?>
<button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('View Selection') ?></span></button>
<?php elseif($_product->getHasOptions()): ?>
<button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('View Options') ?></span></button>
<?php else: ?>
<button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart') ?></span></button>
<?php endif; ?>
<?php else: ?>
<button class="form-button" onclick="setLocation('<?php echo $_product->getProductUrl() ?>')"><span><?php echo $_product->getAttributeText('replace_add_button') ?></span></button>
<?php endif; ?>
<?php endif; ?>
<div class="clear"></div>
<?php /* display special freight messages from custom variables */ ?>
<?php if($specialshipping == "Free Ground" || $specialshipping == "Free Gnd ORMD"): ?>
<?php echo '<span class="regular-price"><span class="freightfree">' . $freightfree . '</span></span>' ?>
<?php endif; ?>
<?php if($specialshipping == "ORM-D"): ?>
<?php echo '<span class="freightfree">' . $ormd . '</span>' ?>
<?php elseif($specialshipping == "Free Gnd ORMD"): ?>
<?php echo '<br><span class="freightfree">' . $ormd . '</span>' ?>
<?php elseif($specialshipping == "HazMat"): ?>
<?php echo '<span class="freightfree">' . $hazmat . '</span>' ?>
<?php endif; ?>
<div class="description">
<?php echo nl2br($_product->getShortDescription()) ?>
<small><?php echo $this->__('Learn More') ?></small>
</div>
<p class="add-to">
Brand Name: <?php echo $_product->getBrand() ?>
</p>
</div>
</div>
</div>
Be aware this is pulling in several custom attributes and variables you probably won't find on your system. The most important is the CMS Macro
{{block type="catalog/product" template="catalog/product/line-item.phtml" sku_id="CI 101"}}
and this line:
<?php $_product = Mage::getModel('catalog/product')->loadByAttribute('sku',$this->getData('sku_id')); ?>
Use Macro as many times on the CMS page as you want.

Resources