Magento – How to refresh Cart using PHTML file with AJAX Magento

ajaxjavascriptmagento-1.7

In following File, there is a file "reload.php"

But i want to use "myajaxcart.phtml" in Magento, How ??

Is it possible to use .phtml there, as magento doesn't allow direct access to .phtml files ??

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 200);
</script>

I want like this :

$('#loaddiv').fadeOut('slow').load('myajaxcart.phtml').fadeIn("slow");

Thanks in Advance.

Best Answer

Using a standalone PHP file is not right way. You should be following the MVC structure of Magento.

AOE made a module that loosely does what you need it to do (ie. render out a block to be used for AJAX calls). It opens a little bit of a minefield in terms of security as potentially any block can be loaded, but you can add some appropriate filters to prevent issues.

There is a repo here, https://github.com/fbrnc/Aoe_Static

The basic principle relies on a simple block of code within the main controller,

$this->loadLayout();
$layout = $this->getLayout();

$requestedBlockNames = $this->getRequest()->getParam('getBlocks');
if (is_array($requestedBlockNames)) {
  foreach ($requestedBlockNames as $id => $requestedBlockName) {
    $tmpBlock = $layout->getBlock($requestedBlockName);
    if ($tmpBlock) {
      $response['blocks'][$id] = $tmpBlock->toHtml();
    } else {
      $response['blocks'][$id] = 'BLOCK NOT FOUND';
    }
  }
}
$this->getResponse()->setBody(Zend_Json::encode($response));

Related Solutions

Magento – Magento + JQuery + Ajax – How to reload just parts of the custom Module instead of the whole Block

So I came up with a solution that works just awesome. I added another controller action and a model to do the Magento Interactions during my ajax calls. So let me show you how it's done, I hope somebody can profit from this sooner or later :)

My new Action:

public function updateAction ()
   {

      //Instantiate Product Model
      $productModel = Mage::getModel('doorconfig/product');

      //Get Updated Values from the Model
      $currentProduct = $productModel->getProduct($_POST);
      $currentProductId = $currentProduct->getId();
      $currentProductUrl = $currentProduct->getProductUrl();
      $currentPrice = $productModel->getPrice($currentProductId);
      $currentType = $this->getRequest()->getPost('doorconfig_type');
      $currentSize = $this->getRequest()->getPost('doorconfig_size');
      $currentProductBaseImgUrl = $productModel->getDoorBaseImgUrl($currentType,$currentSize);

      //Populate Resultarray
      $result = array("currentProductId"=>$currentProductId,"currentPrice"=>$currentPrice,"currentProductUrl"=>$currentProductUrl,"currentProductBaseImgUrl"=>$currentProductBaseImgUrl);

      //Encode Result in JSON
      $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result));

      return $result;
   }

My model just got most of the business logic from my block, so nothing special to point out about that.

And finally the updated Ajax section which now triggers my new controller action, receives the result as a JSON encode and changes the values in the DOM:

<script type="text/javascript">

   var $price = "";
   var $baseImgUrl = "";
   var $productUrl = "";
   var $productId = "";
   var $f = $j("#attributeform");
    var $formData;
    var $currentStoreUrl = "<?php echo $currentStoreUrl ?>";

   function ajaxUpdate()
   {

      $j.ajax({
         url: "/doorconfig/index/update",
         type: "POST",
         data: $formData,
         dataType: "json",
         success: function(data) 
                {
                  $productId = data.currentProductId;
                  $price = data.currentPrice;
                  $baseImgUrl = data.currentProductBaseImgUrl;
                  $productUrl = data.currentProductUrl;
                     $j("#result").text($price);

                     $j("#addtocart").attr('href',  $currentStoreUrl + "checkout/cart/add?product=" + $productId + "&qty=1");
                     $j("#productimg").attr('src', $baseImgUrl);

                     console.log(data);

                   },
            error: function(error)
                  {
                     console.log("Error:");
                     console.log(error);
                     alert("ERROR");
                  }
        });
    };

   $j(document).ready(function() 
   {

      $j("#result").text('<?php echo $defaultProductPrice; ?>');
      $j("#addtocart").attr('href', '<?php  echo $currentStoreUrl . "checkout/cart/add?product=" . $defaultProductId . "&qty=1" ?>');
      $j("#moreinfo").attr('href', '<?php echo $defaultProductUrl; ?>');
      $j("#productimg").attr('src', '<?php echo $defaultProductImgUrl; ?>');
      $j("#attributeform")[0].reset();

      $j("form[name=attributeform]").change(function () 
      {

         $formData = $f.serialize();
         ajaxUpdate();
      })
   });   

</script>

If you need any further explanation or wanna improve something please comment :)

Magento – Magento: Allowing insecure content on https pages

On an SSL page any resource requested from a non SSl page is a security threat and Browsers are supposed to warn user.

I suggest you ask your other website provider to give you an alternate SSL URL this will solve the issue.

Other way is you call your site page using SSl which inturn communicates with the other site using Curl or some other protocol.Other site will respond to your Curl request.Which then is returned to your website visitor page from your php script.

Best Answer

Related Solutions

Magento – Magento + JQuery + Ajax – How to reload just parts of the custom Module instead of the whole Block

Magento – Magento: Allowing insecure content on https pages

Related Topic