How to use different price.phtml file for different views? - magento

I want to use custom new_price.phtml file for New Products block and price.phtml for all product view.I ahve seen some examples but as i am very new so i don't know how to implement thrm.
Can anyone tell me the proper steps for this.
Below is the Code for new.phtml.
<?php
// some helpers
$_helper = $this->helper('catalog/output');
$storeId = Mage::app()->getStore()->getId();
$catalog = $this->getLayout()->createBlock('catalog/product_list')->setStoreId($storeId);
$productCount = $this->getData('num_products');
?>
<?php
$visibility = array(
Mage_Catalog_Model_Product_Visibility::VISIBILITY_BOTH,
Mage_Catalog_Model_Product_Visibility::VISIBILITY_IN_CATALOG
);
$collection = Mage::getResourceModel('reports/product_collection')
->addAttributeToSelect('*')
->setStoreId($storeId)
->addStoreFilter($storeId)
->distinct(true)
//->addAttributeToFilter('visibility', $visibility)
// ->addFieldToFilter('qty', array('gteq' => 1))
// ->addAttributeToFilter('is_in_stock',0)
//->addOrderedQty()
->setOrder('entity_id', 'desc')
->setPageSize($productCount);
Mage::getSingleton('catalog/product_status')->addVisibleFilterToCollection($collection);
Mage::getSingleton('catalog/product_visibility')->addVisibleInCatalogFilterToCollection($collection);
Mage::getSingleton('cataloginventory/stock')->addInStockFilterToCollection($collection);
/* To display product by category id */
if($categoryId=$this->getData('category_id')){
$category = Mage::getModel('catalog/category')->load($categoryId);
$collection->addCategoryFilter($category);
}
?>
<?php // if no products are currently sell, display some text
if (!$collection->count()) :
?>
<p class="note-msg"><?php echo $this->__('There are no products sell at the moment.') ?></p>
<?php else : ?>
<div class="products_slider">
<div class="product-title pro-name">
<span class=""><?php echo $this->__('New Products') ?></span>
</div> <!--product-title-->
<a id="products_slider_prev1" class="jcarousel-prev-horizontal" href="javascript:void(0)"></a>
<a id="products_slider_next1" class="jcarousel-next-horizontal" href="javascript:void(0)"></a>
<!-- BEGIN SLIDER CONTAINER -->
<div class="slider-container">
<div class=" jcarousel-skin-tango">
<div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
<div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;">
<ul class="products-grid-home jcarousel-list jcarousel-list-horizontal" id="products_slider1" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 2970px;">
<?php
$_collectionSize = $collection->count();
$_columnCount = 4;
$i = 0;
$v8=1;
foreach ($collection as $_product) :
$_product = Mage::getModel('catalog/product')->setStoreId($storeId)->load($_product->getId());
?>
<?php if ($i++%$_columnCount==0): ?>
<?php endif ?>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>" style="float: left; list-style: none outside none;">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
<?php //echo $this->helper('vistasettings')->getLabel($_product); ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(228,319); ?>" class="small-image" width="228" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<?php /*?> <?php $product = Mage::getModel('catalog/product')->load($_product->getId());
foreach ($product->getMediaGalleryImages() as $image) {
?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $image->getFile())->resize(228, 319); ?>" class="thumbnail" width="228" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"/>
<?php } ?><?php */?>
</a>
<script type="text/javascript">
/* jQuery(document).ready(function() {
jQuery("#various8<?php echo $v8; ?>").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'onClosed' : function() { }
});
});*/
</script>
<!-- -->
<!-- POP UP --><div style="display: none;"><div id="inline8<?php echo $v8; ?>" class="info-box">
<div class="product-view">
<div class="product-essential">
<div class="product-img-box">
<div class="product-image">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class ="cloud-zoom" id="zoom1" rel="adjustX:10, adjustY:-2, zoomWidth:400, zoomHeight:400">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(260,260); ?>" width="260" height="260" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
</div> <!--product-image-->
<div class="more-images">
<div class="more-views">
<div class="more-views thumbnailscroller carousel">
<div style="overflow: hidden; position: relative;" class="thumbnail-viewport">
<ul style="width: 1200%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);" id="thumbscroller<?php echo $v8; ?>" class="thumbscroller slides">
<?php $product = Mage::getModel('catalog/product')->load($_product->getId());
foreach ($product->getMediaGalleryImages() as $image) : ?>
<li style="width: 100px; float: left; display: block;">
<a href="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $image->getFile()); ?>" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $image->getFile())->resize(260,260); ?>' ">
<img class="zoom-tiny-image" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $image->getFile())->resize(80, 80); ?>" width="80" height="80" alt=""/>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<ul class="thumbnail-direction-nav"><li><?php echo $this->__('Previous');?></li>
<li><?php echo $this->__('Next');?></li></ul>
</div><!--thumbnailscroller carousel-->
</div><!--more-views-->
<script type="text/javascript">
$mtkb(window).load(function(){
$mtkb('.thumbnailscroller').flexslider({
namespace: "thumbnail-",
animation: "slide",
animationLoop: true,
itemWidth: 250,
itemMargin: 0,
slideshow: true,
minItems: 1,
maxItems: 1,
directionNav: true,
controlNav: false,
move: 1,
touch: true,
});
});
</script>
</div><!--more-images-->
</div> <!--product-img-box-->
<div class="product-shop">
<div class="product-name">
<h1><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>">
<?php echo $this->htmlEscape($_product->getName()); ?>
</a>
</h1>
</div> <!--product-name-->
<div class="short-description"><?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?></div>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php echo $this->getPriceHtml($_product, true) ?>
<div class="add-to-box">
<form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form_<?php echo $_product->getId()?>"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<?php if(!$_product->isGrouped()): ?>
<div class="add-to-cart">
<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" />
<button class="button-arrow button-up" type="button"><?php echo $this->__('Increase');?></button>
<button class="button-arrow button-down" type="button"><?php echo $this->__('Decrease');?></button>
</div> <!--add-to-cart-->
<?php endif; ?>
<div class="add-to-cart">
<?php if($_product->isSaleable()): ?>
<button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="this.form.submit()"><span><?php echo $this->__('Add to Cart') ?></span></button>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
</div><!-- add-to-cart-->
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to wishlist');?></li>
<?php endif; ?>
<?php /*?> <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li><span class="separator">|</span><?php echo $this->__('Add to compare');?></li>
<?php endif; ?><?php */?>
</ul>
<span class="email-friend"><a class="button link-friend" href="<?php echo $this->helper('catalog/product')->getEmailToFriendUrl($_product) ?>" title="<?php echo $this->__('Email to a Friend') ?>"><?php echo $this->__('Email to a Friend') ?></a></span>
</form>
</div> <!--add-to-box-->
</div> <!--product-shop-->
</div> <!--product-essential-->
</div> <!--product-view-->
</div></div> <!-- End POP UP-->
<!-- BEGIN PROD IMAGE DETAIL -->
<div class="prod_image_detail">
<div class="inner">
<a class="product-name" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php //echo $this->htmlEscape($_product->getName()) ?>
<?php $prod_name = $this->htmlEscape($_product->getName()) ;
/*if(strlen($prod_name) > 20) {echo substr($prod_name,0,20)."...";}else {echo $prod_name;}*/echo $prod_name;?></a>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php echo $this->getPriceHtml($_product, true) ?>
</div>
<div class="actions">
<?php if($_product->isSaleable()): ?>
<button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart') ?></span></button>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
<span class="add-to-links"> <?php if ($this->helper('wishlist')->isAllow()) : ?>
<?php echo $this->__('Add to wishlist');?>
<?php endif; ?>
<?php /*?> <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<?php echo $this->__('Add to compare');?>
<?php endif; ?><?php */?> </span><!--add-to-links-->
</div> <!--actions-->
</div> <!--prod_image_detail-->
</li>
<?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
<?php endif ?>
<?php $v8++; ?>
<?php endforeach ?>
</ul>
</div> <!--jcarousel-clip jcarousel-clip-horizontal-->
</div> <!--jcarousel-container jcarousel-container-horizontal-->
</div> <!-- jcarousel-skin-tango-->
</div> <!--slider-container-->
</div> <!--products_slider-->
<script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var jwidth=$('.products-grid-home').width();
function mycarousel_initCallback(carousel) {
$('#products_slider_next1').bind('click', function(event) {
carousel.next();
if(jwidth==2800){
return false;
}
});
$('#products_slider_prev1').bind('click', function(event) {
carousel.prev();
return false;
});
};
/*$('#products_slider1').jcarousel({
scroll:1,
visible:4,
setupCallback: scrollCheck,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
itemFallbackDimension:240,
buttonPrevHTML: null,
animation: {
duration: 500,
easing: 'linear',
complete: function() {
}
}
});*/
$('#products_slider1').jcarousel({
scroll: 1,
initCallback:mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});
function scrollCheck(carousel) {
if (carousel.options.size <= carousel.options.visible) {
// If there is enough room to display all available items, then disable scrolling
carousel.stopAuto();
}
}
});
</script>
<?php endif ?>
I am very new on Magento.
Can anyone tell me the steps to go this?

You can specify it in the backend on the design tab of the product. if you want to do it programmatically, please precise your question with the way you import products...

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>

Magento: Show recently added products homepage

I want show the last 8 products that I've added on the homepage. How can I do that?
Using this code snippet for Block File form the previous answer will give a more well structured collection, because:
Filter product by status Enabled
Filter product by visibility (simple products of configurable (which are by default 'Not Visible Individually') will not show in this collection)
$_productCollection = Mage::getModel("catalog/product")
->getCollection()
->addAttributeToSelect('*')
->addAttributeToFilter('visibility', 4)
->addAttributeToFilter(
'status',
array('eq' => Mage_Catalog_Model_Product_Status::STATUS_ENABLED)
);
<b> To show recently added products,</b>
1. Create Block file and template file (phtml)
2. To show in homepage go to admin panel. Click on CMS->Pages->Homepage(Homepage will be set based on your theme). Inside that Click on Design tab and add the below code:
<reference name="content">
<block type="rileytheme/recentproducts" name="recentproducts_recentproducts" template="recentproducts/recentproducts.phtml"></block>
<block type="cms/block" name="myelement"><action method="setBlockId"<block_id>homepage_block</block_id></action></block>
</reference>
Block File:
//class Namespace_Module_Block_Filename
class MGS_Rileytheme_Block_Recentproducts extends Mage_Core_Block_Template {
public function getRecentProducts() { <br/>
$products = Mage::getModel("catalog/product")
->getCollection()
->addAttributeToSelect('*')
->setOrder('entity_id', 'DESC')
->setPageSize(5); //set page size as your wish
return $products;
}
View File (phtml):
<?php $products = $this->getRecentProducts(); ?>
<?php shuffle($products); ?>
<div class="container">
<div class="box recently" style="padding-left:15px; padding-right:15px;">
<h1 class="text-center fw400 text-red"><?php echo $this->__('Recent Products') ?></h3>
<div class="listing-type-grid catalog-listing">
<?php $_collectionSize = count($products) ?>
<?php $i=0; foreach ($products as $_res): ?>
<?php $_product = Mage::getModel('catalog/product')->load($_res->getId()); ?>
<?php if ($i++%3==0): ?><tr><?php endif ?>
<div class="col-xs-12 col-sm-6 col-md-3 prod-list">
<div class="grid_list">
<div class="product">
<div class="image-container">
<?php if($_product->getProductLabel()): ?>
<a href="<?php echo $_product->getProductUrl() ?>">
<span class="onsale <?php echo strtolower($_product->getAttributeText('product_label')) ?>"><?php echo $_product->getAttributeText('product_label') ?></span>
</a>
<?php endif ?>
<img alt="" class="img-responsive" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(800,800); ?>">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->__('View detail')?>" class="icon-left icon-top ">
<i class="fa fa-eye"></i>
</a>
<a href="<?php echo $_product->getProductUrl()?>" title="<?php echo $this->__('Add to Cart')?>" class="icon-right icon-top">
<i class="fa fa-shopping-cart"></i>
</a>
<?php if($this->helper('wishlist')->isAllow()): ?>
<!--<a class="icon-left ves-boxcolor icon-bottom" href="<?php echo $this->helper('wishlist')->getAddUrl($_product)?>" title="<?php echo $this->__('Add to wishlist')?>">
<i class="fa fa-heart"></i>
</a>-->
<?php endif;?>
<?php if($this->getAddToCompareUrl($_product)): ?>
<!--<a class="icon-right boxcolor icon-bottom" href="<?php echo $this->getAddToCompareUrl($_product)?>" title="<?php echo $this->__('Add to compare')?>">
<i class="fa fa-retweet"></i>
</a>-->
<?php endif;?>
</div>
<!--<div class="media-productlist">
<a href="<?php // echo $_product->getProductUrl() ?>" title="<?php // echo $this->htmlEscape($_product->getName()) ?>">
<img class="product-image" src="<?php // echo $this->helper('catalog/image')->init($_product, 'small_image');?>" alt="<?php // echo $this->htmlEscape($_product->getName()) ?>" />
</a>
</div>-->
<div class="product-list-data">
<a class="product-name" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>)"><?php echo $this->htmlEscape($_product->getName()) ?></a>
<div class="product-list-data-inner">
<div class="cart-item-price">
<?php $_product->getPrice();?>
<span class="price"><?php echo $_formattedActualPrice = Mage::helper('core')->currency($_product->getPrice(),true,false);?></span>
</div>
<div class="cart-item-stars">
<div class="rating-shop-item">
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product) ?>
<?php else:?>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<?php endif; ?>
</div>
<div class="space10"></div>
</div>
<div class="book-now-btn">
<button onclick="setLocation('<?php echo $_product->getProductUrl() ?>')" title="<?php echo $this->__('Book Now') ?>" type="button" class="btn btn-primary btn-sm"><?php echo $this->__('Book Now') ?></button>
</div>
</div>
</div>
</div>
</div>
</div>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php if ($i%3==0 && $i!=$_collectionSize): ?></tr><?php endif ?>
<?php endforeach ?>
<?php for($i;$i%3!=0;$i++): ?>
<td class="empty-product"> </td>
<?php endfor ?>
<?php if ($i%3==0): ?> <?php endif ?>
</div>
</div>
</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 to get all product image in Magento?

I want to get all products but display only one product, what do I do? Here are my code in list.phtml:
<?php foreach ($_productCollection as $_product): ?>
<div class="product-panel">
<div class="pro-content">
<div class="product-1">
<?php//Product Image ?>
<div class="pro-img">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
</div>
<p class="text-2">
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
</p>
<p class="p-price">
<?php echo $this->getPriceHtml($_product, true) ?>
</p>
</div>
</div>
</div>
<?php endforeach ?>

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();">...

Resources