Magento stores are powerful, but sometimes difficult to configure when you want something to happen dynamically. Once you learn more about Magento’s templates, XML, and Magento’s CMS syntax, displaying dynamic product information gets easier.
What would dynamic product information do?
You can display a product image, the latest product price (even sale prices!), or create a Featured Product Box that includes the product thumbnail, a short description, the price, and an Add to Cart link.
The great thing? You can use the same template file to display this information for any product in your store catalog—all you have to do is change the product ID.
Dynamic Product Images in Magento
So how can you display a product image? Create a .phtml file (you can name it “dynamic-product-image”) in your theme’s template/catalog/product directory, and use this code:
<?php
$productId = $this->getProduct_id();
$_product = Mage::getModel('catalog/product')->load($productId);
?>
<a href="<?php echo $_product->getProductUrl() ?>"><img src="<?php echo Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(150, 150); ?>" alt="<?php echo $this->htmlEscape($_product['name']); ?>" border="0" width="150" /></a>
This creates a 150×150 thumbnail of your image, and links it to your product’s URL. Want a different size? Just change the resize(150,150) and the HTML width to your desired dimensions.
Featured Product Box
A featured product box has a lot more code. I’ll name this one “featured-product-box.phtml”, and yes, it will be in the template/catalog/product directory.
<?php
$productId = $this->getProduct_id();
$_product = Mage::getModel('catalog/product')->load($productId);
?>
<div class="featured-product-box">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" target="_top"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(115, 115); ?>" width="115" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>
<h2><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" target="_top"><?php echo $this->htmlEscape($_product->getName()) ?></a></h2>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php endif; ?>
<div>
<?php echo nl2br($_product->getShortDescription()); ?>
</div>
<div class='price-block'>
<?php echo $this->getPriceHtml($_product, true) ?>
</div>
<div>
<?php if($_product->isSaleable()): ?>
<a href="/checkout/cart/add?product=<?php echo $_product->getId() ?>" target="_parent"><img border="0" alt="Add to Cart" src="<?php echo $this->getSkinUrl('images/btn_addtocart_small.gif')?>"></a>
<?php // Insert your own image or HTML for a button-styled link above ?>
<?php else: ?>
<p><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
</div>
</div>
This code outputs a product image, the product name, the product’s rating, the short description, the current sale price, and the Add to Cart link. You would have to style the container div for this code; my CSS is simple because I just need it to be centered in a sidebar:
.featured-product-box { width: 140px; margin: auto; }
Of course, customize it to your own needs.
So how do you use these templates?
If you’re using this within the body content of a CMS page, you have to use Magento’s special call for templates. Here’s an example of using the product image template:
{{block type="catalog/product" product_id="335" template="catalog/product/dynamic-product-image.phtml"}}
Of course, you would change the product_id to use the ID that Magento assigns to the product you want to use. If you want to use a different template, just change the name of the .phtml file.
If you want to use one of these in an XML Layout Update, you would have to put the above code as a Static Block, then use XML to insert the static block in your desired location:
<block type="cms/block" name="STATIC_BLOCK_NAME" before="footer_links"> <action method="setBlockId"><block_id>STATIC_BLOCK_NAME</block_id></action> </block>
Did this blog post help you? Chip in a few dollars to show your support!
