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.

Improve this question

3 Answers 3

Reset to default
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>
Improve this answer
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
Improve this answer
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')?>"
Improve this answer
2
  • I think, that response is 404, if url is irregular
    – Pasha
    Commented Oct 16, 2018 at 5:08
  • But this event doesn’t work
    – Pasha
    Commented Oct 16, 2018 at 5:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.