Magento – Change the form of displaying related products

Changing related products display takes time to investigate and run smoothly.

1. Fix the form of related products in Magento temple

 <form id="relate-product-form">  
      <table>  
           <thead>  
                          <tr>  
                               <td>ITEM</td>  
                               <td>QTY</td>  
                               <td>PRICE</td>  
                          </tr>  
           </thead>  
           <tbody>  
           <?php $i=0;foreach($this->getItems() as $_item): $i++; ?>  
                <tr>  
                <td>  
                <img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(60,90) ?>" alt="" />  
                <a href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_item->getName()) ?>" class="product-image"><?php echo $this->htmlEscape($_item->getName()) ?></a>  
                </td>  
                <td>  
                           <input class="validate-digits qty" type='text' name="qty<?php echo $i ?>" value="0"/>  
                           <input style="display:none" type="text" name="id<?php echo $i ?>" value="<?php echo $_item->getId() ?>">  
                       </td>  
                  <td><?php echo $this->getPriceHtml($_item, true, '-related') ?></td>  
                     </tr>  
                     <?php endforeach ?>  
              </tbody>  
       </table>  
       <button class="submit button" type="submit" onclick='relative_product_sendform()'>  
         <span><?php echo $this->__('Add to Cart') ?></span>  
       </button>  
     </form>  

2. Add javascript to adjust form :

 <script type="text/javascript">  
      //validate form  
      var customForm = new VarienForm('relate-product-form');  

==> Block the event “submit form”

 jQuery('#relate-product-form').submit(function(e) {  
           return false;  
      });  

==> function works when click to add to cart

 function relative_product_sendform() {  
               var error = 0;  

==>check form validate, Able to enter quantity or not?.

 setTimeout( function () {  
      jQuery('#relate-product-form tbody .qty').each(function() {  
        if(jQuery(this).hasClass('validation-failed')) {  
         error = 1;  
       };  
      });  
                if(error == 0) {  
       jQuery('#relate-product-form tbody .qty').each(function() {  
         if(jQuery(this).val() != 0) {  
           error = 1;  
         }  
       });  
       if(error == 0) {  
         return false;  
       }  

==> If it is valid, send ajax the information of the form.

       jQuery.ajax({  
         type: "POST",  
         url: '<?php echo Mage::getUrl("checkout/relative/index") ?>',  
         data: {data: jQuery('#relate-product-form').serialize()},  
         success: function(msg) {  
           if(msg == 'done') {  

==> Successfully sending, use ajax to update block cart.

            jQuery.ajax({  
              type: "POST",  
              dataType : 'json',  
              data: { p1: 10, p2 : 100},  
              url: '<?php echo Mage::getUrl("checkout/relative/cart") ?>',  
              success: function(data) {  

==> Relacing the old cart with the new cart.

               jQuery('.mini-cart').replaceWith(data);  
                                      },  
                                      error: function() {  
                                           alert("failure2");  
                                      }  
             });  
          }  
        },  
        error: function() {  
         alert("failure");  
       }  
     });  
     }  
   },1000 );  
 </script>  

3.Create the controller to send ajax ( in this case means relativeController ) in app/code/[local]/[Module-FrontName]/[Your-module]/controllers/RelativeController.php

 <?php  
 class Mage_Checkout_RelativeController extends Mage_Core_Controller_Front_Action {  
      public function indexAction() {  
           parse_str($_POST['data'], $items);  
           for($i=0; $i < count($items)/2 ;$i++) {  
                $j = $i +1;  
                $qtyn = 'qty'.$j;  
                $idn = 'id'.$j;  
                if(!empty($items[$qtyn]) && $items[$qtyn] > 0) {  
                     $qty = $items[$qtyn];  
                     $id = $items[$idn];  
                     if ($id == '') {  
                          Mage::getSingleton('checkout/session')->addError($this->__("<strong>Product not added</strong><br />The SKU was not found.")); return;  
                     }  
                     else  
                     {  

==> Save the products into a cart.

 $cart = Mage::getModel('checkout/cart');  
                          try {  
                               $cart->addProduct(Mage::getModel('catalog/product')->load($id), $qty);  
                               $cart->save();  
                          } catch (Mage_Core_Exception $e) {  
                               Mage::getSingleton('checkout/session')->addError($e->getMessage()); return;  
                          }  
                     }  
                }  
           };  
           echo 'done';  
      }  
      public function cartAction() {  

==> Call block cart.

 $response = $this->getLayout()->createBlock('ajaxcart/cart_ajaxcart')->setTemplate('sns/ajaxcart/checkout/cart/mini-cart.phtml')->toHtml();  
           return $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));  
      }  
 }  

HieuDT

If you have any further questions, please contact us to get more explanation. We are certified Magento developers in Web Development and Magento extensions that are willing to help you every time.