1

I managed to create an own magento theme. So far all is working nice. Now I've got a question about dynamic content on a custom *.phtml file. I'm creating a kind of configurator for cloth/materials. I'm successfully loading the products of a specific attributeset via php.

<?php
//Fetch attribute set id by attribute set name
    $attrSetName = 'massanfertigung';
    $attributeSetId = Mage::getModel('eav/entity_attribute_set')
            ->load($attrSetName, 'attribute_set_name')
            ->getAttributeSetId();

//Load product model collecttion filtered by attribute set id
    $products = Mage::getModel('catalog/product')
            ->getCollection()
            ->addAttributeToSelect('*')
            ->addFieldToFilter('attribute_set_id', $attributeSetId);
    ?>

Then I build a dropdown which shows all the product names:

<<div class="row" id="picdropdown">
                <h1>MATERIAL</h1>
                <select id="selektor" onchange="updateData();">                     
                    <?php foreach ($products as $product) { ?>
                        <option value="<?php echo $product->getImageUrl(); ?>"
                                ><?php echo $product->getShortDescription(); ?></option>
                            <?php } ?>
                </select>
            </div>

On selection of one of them the updateData() function is called - it updates the image of the currently selected material via javascript. But this only works because the images are already loaded.

I want to change the operation method to a proper one. What would be the right way to realize the following behavior:

  1. I load via PHP the products, as already mentioned. But not with all attributes, just the short description and the ID. I know how to do that.

  2. On a dropdown select I want a request to be sent to Magento to load the image for the given product ID.

Which technologies do I need for this? JS? JQuery? ReactJS? Ajax? What I need to understand is how can I send dynamic requests to Magento backend and display/update the data - in this case the picture. There would be other attributes to be shown, but I just want to understand the techniques.

  • What version of Magento are you using? – 7ochem Oct 14 '15 at 12:19
  • You are going to need Ajax for that. Magento uses Prototype library by default(not sure about Magento 2). You can look into the core files to get the feel of how ajax calls work. – Prateek Oct 14 '15 at 12:21
  • Magento 1.9.2 is running on our servers – Java_Waldi Oct 14 '15 at 12:40
3

You can use Ajax for this. Magento 1 comes with Prototype JS which you can use here to achieve this.

On the back end side you need to create a controller class with an Action method that can handle the Ajax request.

You can simply do that like this:

Javascript:

new Ajax.Request(<?php echo $this->getUrl('myfrontname/mycontroller/loadimageAjax'); ?>, {
    method: 'POST',
    parameters: { product_id: 1234 },
    requestHeaders: { Accept: 'application/json' },
    onSuccess:function(transport) {
        var response = transport.responseText.evalJSON(true);
        /* Now use response.image, see below */
    }.bind(this)
});

The script would call the URL http://mymagentoshop.com/myfrontname/mycontroller/loadimageAjax/ which would for instance reference to Vendor's CustomModule behind the front name "myfrontname", it's controller "mycontroller" and this controller's method "loadimageAjaxAction"

This controller could typically be at: app/code/local/Vendor/CustomModule/controllers/MycontollerController.php

Back end controller method:

public method loadimageAjaxAxtion()
{
    $productId = $this->getRequest()->getPost('product_id');

    $image = /* Now get the image... */;

    $this->getResponse()
        ->setHeader('Content-Type', 'application/json', true)
        ->setBody(
            Mage::helper('core')->jsonEncode(array(
                'image' => $image,
            ))
        );
}
  • Hey, thanks for that. But I'm new to php, where do I place the backend controller method? A custom php-file in some folder? Can you give me an example where to lay down which file? – Java_Waldi Oct 14 '15 at 12:39
  • You should create a custom module in the app/code/local/ namespace to support your theme. This is too broad to explain here, luckily there are hundreds of blogs covering the topic of creating a custom module + controller. Just Google for it. Inchoo, Alan Storm, etc. are great sources – 7ochem Oct 14 '15 at 12:50
  • I allready have a custom module. Can I just add the folder structure to avoid writing another new plugin? – Java_Waldi Oct 14 '15 at 12:53
  • Sure, I've updated the answer with a little bit of hinting on the topic of creating a custom controller. Again, this is as far as I want to go here on this specific question about handling Ajax requests as there are many great resources out there on the topic of custom modules... – 7ochem Oct 14 '15 at 12:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.