Cómo hacer una simple llamada ajax en Magento 2.1.0

10

He agregado un botón simple en uno de mis archivos phtml.

<input type='button' name='emq_zip_btn' class='emq_zip_btn' value='Go'>

He agregado un archivo js personalizado ("emq.js") desde un módulo personalizado (Ved_Mymodule):

require([
    "jquery",
    "jquery/ui"
], function($v){
//<![CDATA[
    $v = jQuery.noConflict();
    $v(document).ready(function() 
    {
        console.log('jquery loaded from emq.js');
        $v(".emq_zip_btn").on('click',function(e)
        {
            console.log('clicked');
        });
    });
//]]>
});

Cuando hago clic en el botón anterior, se imprime "clic" en la consola, es decir, jQuery funciona correctamente.

Aquí hay un archivo de controlador de un módulo personalizado Ved_Mymodule:

Ved \ Mymodule \ Controller \ Index \ Index.php:

<?php

namespace Ved\Mymodule\Controller\Index;

use Ved\Mymodule\Model\NewsFactory;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;

class Index extends Action
{
    /**
     * @var \Tutorial\SimpleNews\Model\NewsFactory
     */
    protected $_modelNewsFactory;

    /**
     * @param Context $context
     * @param NewsFactory $modelNewsFactory
     */
    public function __construct(
        Context $context,
        NewsFactory $modelNewsFactory
    ) {
        parent::__construct($context);
        $this->_modelNewsFactory = $modelNewsFactory;
    }

    public function execute()
    {

    }
}

Ved / Mymodule / etc / frontend / routes.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/
App/etc/routes.xsd">
    <router id="standard">
        <route id="news" frontName="news">
            <module name="Ved_Mymodule" />
        </route>
    </router>

Mi pregunta es cómo devolver datos de este método de controlador y luego acceder a ellos a través de jQuery, es decir, cómo hacer una simple llamada ajax después de hacer clic en ese botón.

vedu
fuente
vedu puede explicar por favor azada ¿Debo agregar casilla cuctom en los detalles del producto page.when comprobado que quiero añade $ 0,50 en el precio prodct que consiguen actualización en el carrito a
Ashwini

Respuestas:

17

A continuación se muestra el ejemplo de cómo hacerlo. Modifíquelo según sus necesidades.

Usé la plantilla js para esto.

El siguiente ejemplo creará un menú desplegable en su archivo phtml usando la funcionalidad ajax.

En tu JS

define([
        'jquery',
        'underscore',
        'mage/template',
        'jquery/list-filter'
        ], function (
            $,
            _,
            template
        ) {
            function main(config, element) {
                var $element = $(element);
var YOUR_URL_HERE = config.AjaxUrl;
                $(document).on('click','yourID_Or_Class',function() {
                        var param = 'ajax=1';
                            $.ajax({
                                showLoader: true,
                                url: YOUR_URL_HERE,
                                data: param,
                                type: "POST",
                                dataType: 'json'
                            }).done(function (data) {
                                $('#test').removeClass('hideme');
                                var html = template('#test', {posts:data}); 
                                $('#test').html(html);
                            });
                    });
            };
        return main;
    });

En el controlador

public function __construct(
        Context $context,
        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory
    ) {

        $this->resultJsonFactory = $resultJsonFactory;
        parent::__construct($context);
    }


    public function execute()
    {
        $result = $this->resultJsonFactory->create();
        if ($this->getRequest()->isAjax()) 
        {
            $test=Array
            (
                'Firstname' => 'What is your firstname',
                'Email' => 'What is your emailId',
                'Lastname' => 'What is your lastname',
                'Country' => 'Your Country'
            );
            return $result->setData($test);
        }
    }

EN tu archivo phtml

<style>  
.hideme{display:none;}
</style>
<script type="text/x-magento-init">
        {
            "*": {
                "[Namespace]_[Modulename]/js/YOURFILE": {
                    "AjaxUrl": "<?php echo $block->getAjaxUrl(); ?>",
                }
            }
        }
</script>
<div id='test' class="hideme">
    <select>
      <% _.each(posts, function(text,value) { %>
         <option value="<%= value %>"><%= text %></option>
      <% }) %> 
     </select>
</div>

getAjaxUrl debería funcionar en su archivo de bloque, que le devuelve la url

Espero que ayude.

Ekta Puri
fuente
Gracias por su respuesta. ¿Puede decirme qué debo mencionar en el parámetro url del método $ .ajax? El frontName de mi controlador es noticia.
vedu
modulefrontname / index / news esto funcionará si la ruta de su controlador es [namespace] / [modulename] /Controller/Index/News.php. Prefiero pasar la url del archivo de plantilla que crea la url desde Block usando $ this-> getUrl
Ekta Puri
sí, en magento 1, también pasé url solo del archivo de plantilla. pero en magento 2 el código jquery en el archivo de plantilla no funciona.
vedu
Actualicé mi respuesta, tiene código en el archivo phtml para cargar js, pero su js debe estar en la carpeta de su módulo
Ekta Puri
puedes acceder a url en js usando config.AjaxUrl
Ekta Puri