Magento new product widget image resize - magento

I'm running magento with a custom template. I have been trying for the past week to enlarge the image size of the new product widget (whether grid or list) to be 232px width and 280px length. I have successfully located the new_grid.phtml and new_list.phtml files at
app/design/frontend/base/default/template/catalog/product/widget/new/content.
I have also changed the images sizes from I think 85px width and 85px length to my desired 232px width by 280px length. Instead of enlarging the frame of the image and the image itself, the image seems to be enlarged but the frame remains the same at 85px 85px. So then you are only able to see a small portion of the image within the 85px by 85px image frame.
The widget I'm talking about is the new product widget that you can insert from the CMS pages. I'm running magento community edition 1.7
Here's the code snippet for the new_grid.phtml. Any help is appreciated. Thanks
<div class="widget-products">
<?php $_columnCount = $this->getColumnCount(); ?>
<?php $i=0; foreach ($_products->getItems() as $_product): ?>
<?php if ($i++%$_columnCount==0): ?>
<ul class="products-grid">
<?php endif ?>
<li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(232,280) ?>" width="232" height="280" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
<h3 class="product-name"><?php echo $this->helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name') ?></h3>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?>
<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><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>
</li>
<?php if ($i%$_columnCount==0 || $i==count($_products)): ?>
</ul>
<?php endif ?>
<?php endforeach; ?>

This is almost certainly a css issue.
You seem to be correctly resizing the image here:
<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(232,280) ?>
To ensure that your new templates are getting processed the layout, you can enable template hints in system/configuration/developer tab.
Assuming you've got that right, its quite likely getting reset to 85px in the css.
from widgets.css
.widget-new-products .products-grid .product-image,
.widget-new-products .products-list .product-image { width:85px; height:85px; }
I highly recommend poking around in your favorite browser's inspection tool to figure out what rule exactly is overriding your server side change.
cheers

For anyone who comes across this like I did...
Mine was corrected by changing the grid list in new.phtml:
<ul class="products-grid">
to:
<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

You Can Use CSS For Image To set Height And Width TO your Desired Values, no need to update templates like
<Your Image class/id>{
width:50%;
max-width:100%;
}
2) Or You Can Use js as
jQuery("document").ready(function() {
jQuery(".product-image img").attr({ width: "100%", height: "auto" });
});

Related

Magento remove zoom from product image

Im not really familiar with Magento and i need to remove zoom effect from product image.
This is the code from /catalog/product/view/media.phtml inside template directory.
I tried to play around with if-else statement, but it seems im missing something because i am getting errors.
Is anybody more familiar with this to take a look?
Thanks a bunch!
<div class="product-image">
<?php if ($scrollStatus): ?>
<div id="jp-container" class="jp-container" style="height:500px;">
<a href="javascript:void(0);"><?php
$_img = '<img src="'.$helpImg->getImg($_product, 'image', $imgSize, null).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
echo $_img;
?></a>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
<?php endforeach; ?>
</div>
<script type="text/javascript">
jQuery(window).load(function(){
function jspaneStart(){
setTimeout(function(){
maxHeight = 0;
jQuery('#jp-container a').each(function(){
if(jQuery(this).height() > maxHeight){
maxHeight = jQuery(this).height();
}
});
maxHeight = maxHeight+(maxHeight/100)*<?php echo $scrollimagesHeight; ?>;
jQuery('#jp-container').css('height', maxHeight);
jQuery('#jp-container').jScrollPane();
}, 500);
}
jspaneStart();
jQuery(window).resize(function(){
jspaneStart();
});
});
</script>
<?php else: ?>
<a id='zoom' class="cloud-zoom" data-zoom="showTitle: false, adjustX: -5, adjustY:-5, tint: '#fff', tintOpacity:0.6, position:'inside'" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>"><?php
$_img = '<img id="image" src="'.$helpImg->getImg($_product, 'image', $imgSize, null).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?></a>
<?php /* Label New */ echo MAGE::helper('ThemeOptionsMinimalism')->getProductLabels($_product); ?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views-container">
<div class="more-views<?php if ($productpage_moreviews == 'moreviews_slider' && count($this->getGalleryImages()) > 3){echo ' slider-on';} ?>">
<h2><?php echo $this->__('More Views') ?></h2>
<?php if ($productpage_moreviews == 'moreviews_slider' && count($this->getGalleryImages()) > 3): ?>
<div id="more-views-slider" class="es-carousel-wrapper">
<ul class="carousel-ul">
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a class='cloud-zoom-gallery' data-zoom="useZoom: 'zoom', smallImage: '<?php echo $helpImg->getImg($_product, 'thumbnail', $imgSize, null, $_image->getFile()); ?>' " href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img <?php echo $helpImg->getImgSources($_product, 'thumbnail', 200, null, $_image->getFile()); ?> alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class = 'next'><i class="fa fa-angle-right"></i></div>
<div class = 'prev unselectable'><i class="fa fa-angle-left"></i></div>
<?php else: ?>
<ul class="no-slider">
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a class='cloud-zoom-gallery' data-zoom="useZoom: 'zoom', smallImage: '<?php echo $helpImg->getImg($_product, 'thumbnail', $imgSize, null, $_image->getFile()); ?>' " href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img <?php echo $helpImg->getImgSources($_product, 'thumbnail', 200, null, $_image->getFile()); ?> alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php endif; ?>
<?php if ($this->displayProductStockStatus()): ?>
<?php if ($_product->isAvailable()): ?>
<p class="availability in-stock"><i class="fa fa-check"></i><?php echo $this->__('In stock') ?></p>
<?php else: ?>
<p class="availability out-of-stock"><i class="fa fa-times"></i><?php echo $this->__('Out of stock') ?></p>
<?php endif; ?>
<?php endif; ?>
</div>
You can disable zoom from magento js.
just locate this file js\varien\product.js and comment this line
Event.observe(this.imageEl, 'dblclick', this.toggleFull.bind(this));
this line is responsible for image zoom by default.
Go to Admin, then to System -> Configuration.Then go to Manage -> Advanced -> Disable Modules Output -> EcommerceTeam_CloudZoom -> Disable. Click Save Config.
then Go to
System -> Configuration ->Catalog
On the next page under Cloud Image Zoom you will find a list of options to configure the module.
Enable Cloud Zoom – when no is selected, the option disables the Cloud Zoom in your product images.
Click ‘Save Config’ at the top right when you are done.
You could always try disabling the module completely via the module's xml file in app/etc/modules
Your xml file that relates to the zoom module will look something like this:
<?xml version="1.0" encoding="utf-8"?>
<config>
<modules>
<module_name>
<active>true</active>
<codePool>community</codePool>
</module_name>
</modules>
</config>
Simply set active to false
This answer worked for me:
Add JS in media.phtml in your theme.
// ProductMediaManager is outside document.read scope
if (typeof ProductMediaManager !== 'undefined') {
// Override image zoom in /skin/frontend/rwd/default/js/app.js
// and prevent the zooming of images on hover
ProductMediaManager.createZoom = function(image) { return; }
}
I have found the answer form here
Thanks "Patrick Ward" for the great and simple Solution...

Magento home page popular products

Hi All I want to show 4 popular products on the home page of my magento 1.7.1 install. (The I can select by putting them into a category).
I've set this up by creating a hidden category called popularhome and added 4 products into it.
I've included this in a static block into my home page template by using:
{{block type="catalog/product_list" column_count="4" category_id="17" template="catalog/product/listhome.phtml"}}
My listhome.phtml template looks like this:
<div class="row popularproducts">
<?php
$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper('catalog/output');
?>
<?php if(!$_productCollection->count()): ?>
<div class="alert fade in">
<a class="close" data-dismiss="alert">×</a>
<?php echo $this->__('There are no products matching the selection.') ?>
</div>
<?php else: ?>
<?php // List mode ?>
<?php if($this->getMode()!='grid'): ?>
<?php $_iterator = 0; ?>
<?php else: ?>
<?php // Grid Mode ?>
<?php $_collectionSize = $_productCollection->count() ?>
<?php $_columnCount = $this->getColumnCount(); ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if ($i++%$_columnCount==0): ?>
<?php endif ?>
<div class="c3">
<?php if(($i-1)%$_columnCount==0): ?><?php elseif($i%$_columnCount==0): ?><?php endif; ?>
<div class="thumbnail">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(225); ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<div class="caption">
<h2 class="product-name"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h2>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php endif; ?>
<?php echo $this->getPriceHtml($_product, true) ?>
</div>
</div>
</div>
<?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
<?php endif ?>
<?php endforeach ?>
<?php endif; ?>
<?php endif; ?>
</div>
However this is only showing 2 of the 4 products yet I cannot figure out why? Does anyone see anything I am missing?
Thanks!
First you need to check ,the products that you want to be appear in category page,
Is they really belong to that categories.
After that make sure Backend > Manage Categories > Edit categories > Display settings >
is Anchor = yes Then re-index your catalog.
To verify you need to cross check catalog_category_product and catalog_category_product_index.
If the category id and product id is mapped properly in these tables you should be good to go.
hope this will sure help you!

Magento: getAttributeText('manufacturer') doesn't work

I would very much appreciate your help. I am new to Magento and exploring it's possibilities. I have this piece of code, which loads products from category and their attributes:
<?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 // Grid Mode ?>
<?php $_collectionSize = $_productCollection->count() ?>
<?php $_columnCount = $this->getColumnCount(); ?>
<?php $_iterator = 0; ?>
<ul class="products-grid">
<?php $i=0; foreach ($_productCollection as $_product): ?>
<li class="item">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(252); ?>" width="252" height="252" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<h3 class="product-name"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h3>
<h4 class="product-name"><?php echo $_product->getAttributeText('manufacturer') ?></h4>
<?php echo $this->getPriceHtml($_product, true) ?>
</li>
<?php endforeach ?>
</ul>
<script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
</div>
<?php endif; ?>
My question is: why "echo $_product->getAttributeText('manufacturer')" is not working here? I have tried countless variants with different code, but the manufacturer parameter just doesn't show up. Do you know why?
I have tried what Adam Moss has suggested and it worked:
'Show in Product Listing' needed to be set to yes in the attribute editor in admin. Then echo $_product->getAttributeText('manufacturer') worked without any problems.
so I got this working using #Shawn_Northrop suggestion;
<?php
echo $_product->getData('my_custom_attribute');
?>
Happy Coding...

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.

displaying categories in the left column in magento

I have recently started working in magento, and my boss has given me the task of displaying categories in the left column. I have the static html file which I pasted inside the .phtml file and called it from the xml block and it displays just the static stuff in the left column.
I want them to be dynamic so that the categories can be added or removed from the backend.
The html that I have is in table format and I want to insert the php code into that same html so that the design is not disturbed and it becomes dynamic.
This might be what you're looking for:
<?php if (!Mage::registry('current_category')) return ?>
<?php $_categories = $this->getCurrentChildCategories() ?>
<?php $_count = is_array($_categories)?count($_categories):$_categories->count(); ?>
<?php if($_count): ?>
<div class="block block-layered-nav">
<div class="block-title">
<strong><span><?php echo $this->__('Browse By') ?></span></strong>
</div>
<div class="block-content">
<dl id="narrow-by-list2">
<dt><?php echo $this->__('Category') ?></dt>
<dd>
<ol>
<?php foreach ($_categories as $_category): ?>
<?php if($_category->getIsActive()): ?>
<li>
<a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="current"<?php endif; ?>><?php echo $this->htmlEscape($_category->getName()) ?></a> (<?php echo $_category->getProductCount() ?>)
</li>
<?php endif; ?>
<?php endforeach ?>
</ol>
</dd>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list2')</script>
</div>
</div>
<?php endif; ?>
I used it here: http://marblesthebrainstore.com

Resources