Como fazer uma simples chamada ajax no Magento 2.1.0

10

Eu adicionei um botão simples em um dos meus arquivos phtml.

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

Adicionei um arquivo js personalizado ("emq.js") de um 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');
        });
    });
//]]>
});

Quando clico no botão acima, "clicado" é impresso no console, ou seja, o jQuery está funcionando corretamente.

Aqui está um arquivo do controlador de um 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>

Minha pergunta é como retornar um dado deste método do controlador e acessá-lo via jQuery, ou seja, como fazer uma simples chamada ajax após clicar nesse botão.

vedu
fonte
Vedu Pode me explicar enxada que eu deveria adicionar caixa cuctom em detalhes do produto página.Depois verificado Quero acrescentar US $ 0,50 no preço prodct que get update no carro para
Ashwini

Respostas:

17

Abaixo está o exemplo de como fazer isso. Modifique-o de acordo com sua exigência.

Eu usei o modelo js para isso.

O exemplo a seguir criará um menu suspenso no seu arquivo phtml usando a funcionalidade ajax.

No seu 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;
    });

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

NO seu arquivo 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 deve funcionar no seu arquivo de bloco, que retorna o URL

Espero que ajude.

Ekta Puri
fonte
Obrigado pela sua resposta. Você pode me dizer o que devo mencionar no parâmetro url do método $ .ajax. O frontName do meu controlador é uma novidade.
Vedu
modulefrontname / index / news thsi funcionará se o caminho do seu controlador for [namespace] / [modulename] /Controller/Index/News.php Prefiro passar a URL do arquivo de modelo que cria a URL do Block usando $ this-> getUrl
Ekta Puri
sim no magento 1, eu também passei url apenas do arquivo de modelo. mas no magento 2 o código jquery no arquivo de modelo não funciona.
Vedu
Eu atualizei a minha resposta tem código no arquivo phtml para carregar você JS, mas seus js deve estar em sua pasta módulo
Ekta Puri
você pode acessar url em js usando config.AjaxUrl
Ekta Puri