0

I created module that include this view:

<form class="add-to-cart-form" action="<?php echo $this->getUrl('testTask/index/AddToCart')?>">
    <input title="sku" class="sku-area" name="sku" type="text">
    <input type="button" class="add-to-cart-button" value="Add to cart">
</form>

My layout:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
    <head>
        <css src="css/custom.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="task" template="Amt_TestTask::firstTask.phtml" />
        </referenceContainer>
    </body>
</page>

I was creating js file, that include ajax query:

(app/code/Amt/TestTask/view/frontend/web/js/custom.js)

define([
    "jquery"
], function ($) {
    "use strict";

    return function () {
        var form = $('.add-to-cart-form');
        var url = form.attr('action');

        $(document).on('click', '.add-to-cart-button', function () {
            var param = form.serialize();
            alert(param);
            $.ajax({
                showLoader: true,
                url: url,
                data: param,
                type: "POST"
            }).done(function (data) {

            });
        })
    };

});

And I added requirejs-config.js:

var config = {
    map: {
        '*': {
            custom: "Amt_TestTask/js/custom"
        }
    }
};

Develop mode is enable. This file was adding in static directory.

pub/static/frontend/Magento/blank/en_US/Amt_TestTask/js

I know, that i can create link to this js file in layout. Like that: <script src="Webkul_Grid::js/grid.js"/> but I think, that it must work without it.

0

app/code/Amt/TestTask/view/frontend/web/js/custom.js

define([
    "jquery"
], function ($) {
    "use strict";

    return function ajaxy() {
        var form = $('.add-to-cart-form');
        var url = form.attr('action');

        $(document).on('click', '.add-to-cart-button', function () {
            var param = form.serialize();
            alert(param);
            $.ajax({
                showLoader: true,
                url: url,
                data: param,
                type: "POST"
            }).done(function (data) {

            });
        })
    };

});

Now you need to call your function in your phtml like this:

<script type="text/javascript">
    require(['jquery', 'custom'], function($, ajaxy) {
        ajaxy();
    });
</script>
0

You can follow either this link or this link.

Note: Don't forget to run below commands --

rm -rf var/cache/* generated/*

php bin/magento setup:static-content:deploy
0

1) in the template, do not use $this, you need to use $block.

2) You did not show your controller and routes.xml, I think the problem is in the capital letters, the path must be frontName/Controller/Action.

I think you are mistaken with Index.

action="<?= $block->getUrl('frontName/Controller/Action')?>"
2
  • I think, that response is 404, if url is irregular
    – Pasha
    Oct 16 '18 at 5:08
  • But this event doesn’t work
    – Pasha
    Oct 16 '18 at 5:09

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.