Dynamic content - how to realize?

Question

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.

Answer 1

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,
            ))
        );
}