Magento 1.9 – How to Pass $sku Value from Form to Template via AJAX

ajaxmagento-1.9

I have the form that generate value of the variable $sku. Depending on how the form is filled the variable can take several values: $sku = 'product1', $sku = 'product2', $sku = 'product3' etc.
How can I pass this value to my phtml template which contains the following code?:

<?php
$sku = ?????
$model = Mage::getModel('catalog/product')->getCollection()
    ->addAttributeToSelect(array('price','name','description', 'thumbnail'))
    ->addAttributeToFilter('sku', '$sku')
    ->getFirstItem();

$price = $model->getPrice();
$name = $model->getName();
$image = $model->getThumbnail();
$description = $model->getDescription();
?>

My javascript:

 $j("#wizard-start").show();
    if ($j("#choice1").click(function () {
            $j("#wizard-start").hide();
            $j("#step-2-basic").fadeIn(1e3);
            $j("#dyn-wizard").submit(function(event) {
                var sku = "product1";
            });
            return false
        }));
    if ($j("#choice2").click(function () {
            $j("#wizard-start").hide();
            $j("#step-2-standart").fadeIn(1e3);
            $j("#dyn-wizard").submit(function(event) {
                var sku = "product2";
            });
            return false
        }));
    if ($j("#choice3").click(function () {
            $j("#wizard-start").hide();
            $j("#step-2-advanced").fadeIn(1e3);
            $j("#dyn-wizard").submit(function(event) {
                var sku = "product3";
            });
            return false
        }));

Best Answer

1. Register new module:

app/etc/modules/SeStro_AjaxProductInfo.xml

<?xml version="1.0" encoding="UTF-8" ?>
<config>
    <modules>
        <SeStro_AjaxProductInfo>
            <active>true</active>
            <codePool>local</codePool>
        </SeStro_AjaxProductInfo>
    </modules>
</config>

2. Add new router:

app/code/local/SeStro/AjaxProductInfo/etc/config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<config>
    <frontend>
        <routers>
            <sestro_ajax_product_info>
                <use>standard</use>
                <args>
                    <module>SeStro_AjaxProductInfo</module>
                    <frontName>ajaxproductinfo</frontName>
                </args>
            </sestro_ajax_product_info>
        </routers>
    </frontend>
</config>

app/code/local/SeStro/AjaxProductInfo/controllers/IndexController.php

<?php

class SeStro_AjaxProductInfo_IndexController
    extends Mage_Core_Controller_Front_Action
{
    public function indexAction() {
        $sku = $this->getRequest()->getParam('sku');
        if (!$sku) { return false; }
        $product = Mage::getModel('catalog/product')->loadByAttribute('sku',$sku);
        if (!$product) { return false; }

        $response = [
            $product->getPrice(),
            $product->getName(),
            $product->getThumbnail(),
            $product->getDescription(),
        ];

        $this->getResponse()->setHeader('Content-type', 'application/json');
        $this->getResponse()->setBody(json_encode($response));
    }
}

3. And modify your templatefile:

<script>
    var url = '<?php echo Mage::getUrl('ajaxproductinfo'); ?>';
    function getProductInfo(sku) {
        var params = {sku: sku};
        jQuery.ajax({
            url: url,
            type: 'POST',
            data: params,
            dataType: 'json',
            success: function(response) {
                if (response) {
                    var [price, name, image, description] = response;

                    // now you could use jQuery to put
                    // price, name, image and description
                    // anywhere you want

                }
            }
        });
    }

    jQuery("#choice1").click(function () {
        jQuery("#wizard-start").hide();
        jQuery("#step-2-standart").fadeIn(1e3);
        getProductInfo('[sku]'); // change sku
        return false
    });

    jQuery("#choice2").click(function () {
        jQuery("#wizard-start").hide();
        jQuery("#step-2-standart").fadeIn(1e3);
        getProductInfo('[sku]'); // change sku
        return false
    });

    jQuery("#choice3").click(function () {
        jQuery("#wizard-start").hide();
        jQuery("#step-2-standart").fadeIn(1e3);
        getProductInfo('[sku]'); // change sku
        return false
    });
</script>

Related Solutions

Magento – Pass Variable from AjaxController to Block Class

Magento Support Team is correct, but it's not quite a complete answer - in your controller you need to first load the layout:

$this->loadLayout();

now you can get your block and set a value:

$this->getLayout()->getBlock('yourblockname')->setValue($somevar);

and finally render it out:

$this->renderLayout();

in your block you can then:

$this->getValue();

which will return $somevar.

The other alternative is to set a registry value in your controller:

Mage::register('name', $value);

and retrieve it in your block:

Mage::registry('name');

you can delete the registry value with:

Mage::unregister('name');

note that if you try to register a value that already exists an exception will be thrown so if in doubt unregister before you register (you can unregister a non existent registry value without causing issues).

With an AJAX request you are either going to want to set the response body in your controller to determine what is returned in the responseText:

$this->getResponse()->setBody('some repsonse');

or you are going to want to replace the root block in your layout with just your block in the layout so that the response doesn't contain common areas like header, footer and sidebar and instead just contains your blocks content (this way you don't need to set the response body in the controller):

<?xml version="1.0"?>
<layout version="0.1.0">
    <frontname_controller_action>
        <block type=module/block" name="root" template="module/template.phtml" />
    </frontname_controller_action>
</layout>

If you do it this way, you just need to ->getBlock('root') in the controller when pulling the block to set a value against it.

EDIT: As a side note, you shouldn't be closing your PHP classes with ?> - see here

Magento – For Ui Component admin form Field with ajax updating the select value

Please follow below steps.

Step-1: create select box element like below code in your ui_component form xml

    <field name="select_box_1">
                <argument name="data" xsi:type="array">
                    <item name="options" xsi:type="object">Namespace\Module\Model\Config\Source\SelectBoxOption</item>
                    <item name="config" xsi:type="array">
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="label" xsi:type="string" translate="true">Select Option</item>
                        <item name="component" xsi:type="string">Namespace_Module/js/form/element/select-option</item>
                        <item name="formElement" xsi:type="string">select</item>
                        <item name="source" xsi:type="string">modulename</item>
                        <item name="dataScope" xsi:type="string">select_box_1</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                </argument>
            </field>

<field name="select_box_2">
                <argument name="data" xsi:type="array">
                    <item name="options" xsi:type="object">Namespace\Module\Model\Config\Source\SelectBoxTwoOption</item>
                    <item name="config" xsi:type="array">
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="label" xsi:type="string" translate="true">Select Option</item>
                        <item name="formElement" xsi:type="string">select</item>
                        <item name="source" xsi:type="string">modulename</item>
                        <item name="dataScope" xsi:type="string">select_box_2</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                </argument>
            </field>

Step-2: create select-option.js in Namespace/Module/view/adminhtml/web/js/form/element and paste below code in file:

define([
    'jquery',
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal',
], function ($, _, uiRegistry, select, modal) {
    'use strict';
    return select.extend({

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value)
        {
            if (value != 'undefined')
            {
              //Do your Ajx stuff here
            }
            return this._super();
        },
    });
});

Best Answer

Related Solutions

Magento – Pass Variable from AjaxController to Block Class

Magento – For Ui Component admin form Field with ajax updating the select value

Related Topic