CODEWITHSUNDEEP
magento
user1213596
user1213596

Reputation: 31

How to add Images of products being purchased to Order Review part in Magento?

How do I add images of the products being purchased to Order Review section in the Magento checkout?

I want the product image to be seen in the Order Review?

Upvotes: 3

Views: 5425

Answers (5)

Sanju S Maliyelil
Sanju S Maliyelil

Reputation: 11

Edit checkout/onepage/review/item.phtml

Add the following code 

$_product = Mage::getModel('catalog/product')->load($_item->getProductId());

<img src="<?php echo Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(75, 75); ?>" alt="<?php echo $this->htmlEscape($_product['name']); ?>" border="0"/>

Upvotes: 1

Sprouse_Moose
Sprouse_Moose

Reputation: 11

I modified the table in info.phtml to keep the tables consistent with the cart

<table class="data-table" id="checkout-review-table">
    <?php if ($this->helper('tax')->displayCartBothPrices()): $colspan = $rowspan = 2; else: $colspan = $rowspan = 1; endif; ?>
    <col width="1" /> <!-- <---Add width="1" to first column (Image) -->
    <col />           <!-- <---no width for 'Product Name' to show all options nicely -->
    <col width="1" />
    <col width="1" />
    <col width="1" /> <!-- <---Add this new col in table description -->

Upvotes: 0

cfx
cfx

Reputation: 3444

Actually the empty column for info.phtml should use $colspan otherwise its width becomes too great:

<th rowspan="<?php echo $colspan ?>">&nbsp;</th>

Upvotes: 1

Silvio
Silvio

Reputation: 21

In addition you have to edit the totals template:

frontend/{your_theme}/decault/template/checkout/onepage/review/totals.phtml

to adjust the botto column colspan:

<?php if ($this->getTotals()): ?>
<tfoot>
    <?php $_colspan = $this->helper('tax')->displayCartBothPrices() ? 6 : 4; ?>

Upvotes: 2

Mike Potter
Mike Potter

Reputation: 328

The design templates for the Order Review table are found in frontend/{your_theme}/decault/template/checkout/onepage/review/ folder. The files you would need to update are info.phtml (to add the column) and item.phtml (to add the actual image).

frontend/{your_theme}/decault/template/checkout/onepage/review/info.phtml

  <table class="data-table" id="checkout-review-table">
    <?php if ($this->helper('tax')->displayCartBothPrices()): $colspan = $rowspan = 2; else: $colspan = $rowspan = 1; endif; ?>
    <col />
    <col width="1" />
    <col width="1" />
    <col width="1" />
    <col width="1" /> <!-- <---Add this new col in table description -->
    ...

Then find the table head and add your image column:

      <thead>
        <tr>
            <th rowspan="<?php echo $rowspan ?>">&nbsp;</th> <!-- Here's the empty col for the image -->
            <th rowspan="<?php echo $rowspan ?>"><?php echo $this->__('Product Name') ?></th>
            <th colspan="<?php echo $colspan ?>" class="a-center"><?php echo $this->__('Price') ?></th>
    ...

frontend/{your_theme}/decault/template/checkout/onepage/review/item.phtml

Right at the beginning of the item.phtml file, add your image:

 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php $_item = $this->getItem()?>
<tr>
    <!-- Product Image Here -->
    <td><img src="<?php echo $this->getProductThumbnail()->resize(75); ?>" width="75" height="75" alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" /></td>
    <td><h3 class="product-name"><?php echo $this->htmlEscape($this->getProductName()) ?></h3>
...

REMEMBER - Don't change the core files, but update template files in your own theme.

Upvotes: 8

Related Questions