New template frontAjaxJson

Author: jalogut

templates/frontAjaxJson/.no-copied-config/after-generate-info.txt

@@ -0,0 +1,24 @@
+1. Add the following code into your .phtml file where the ajax request will be triggered
+
+    <!-- loading request indicator -->
+    <span id="ajax-${actionname}-loading" class="please-wait load indicator" style="display: none;"></span>
+
+    <!-- Insert Js using script tag -->
+    <script type="text/x-magento-init">
+        {
+            "<element_selector>": {
+                "${Actionname}Ajax": {
+                    "ajaxUrl": "<?php echo $block->getUrl('${vendorname}_${modulename}/ajax/${actionname}'); ?>",
+                    "waitLoadingContainer": "#ajax-${actionname}-loading"
+                }
+            }
+        }
+    </script>
+
+    <!-- Insert Js using data-mage-init element attribute -->
+    data-mage-init='{
+        "${Actionname}Ajax": {
+            "ajaxUrl": "<?php echo $block->getUrl('${vendorname}_${modulename}/ajax/${actionname}'); ?>",
+            "waitLoadingContainer": "#ajax-${actionname}-loading"
+        }
+    }'

templates/frontAjaxJson/.no-copied-config/description.txt

@@ -0,0 +1 @@
+This Template creates an Ajax action with Json return.

templates/frontAjaxJson/Controller/Ajax/${Actionname}.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * ${Actionname}
+ *
+ * @copyright Copyright © ${commentsYear} ${CommentsCompanyName}. All rights reserved.
+ * @author    ${commentsUserEmail}
+ */
+ 
+namespace ${Vendorname}\${Modulename}\Controller\Ajax;
+
+use Magento\Framework\App\Action\Action;
+use Magento\Framework\App\Action\Context;
+
+class ${Actionname} extends Action
+{
+    /**
+     * @param Context $context
+     */
+    public function __construct(Context $context)
+    {
+        parent::__construct($context);
+    }
+
+    /**
+     * Ajax request
+     *
+     * @return void
+     */
+    public function execute()
+    {
+        if ($this->getRequest()->isAjax()) {
+            try {
+                // Do something here
+                $result = 'Return what you need here';
+                $this->getResponse()->representJson(json_encode(['success' => $result, 'error' => '']));
+            } catch (\Exception $e) {
+                $this->getResponse()->representJson(json_encode(['success' => '', 'error' => $e->getMessage()]));
+            }
+        }
+    }
+}

templates/frontAjaxJson/etc/frontend/routes.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+/**
+ * routes
+ *
+ * @copyright Copyright © ${commentsYear} ${CommentsCompanyName}. All rights reserved.
+ * @author    ${commentsUserEmail}
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
+    <router id="standard">
+        <route id="${vendorname}_${modulename}" frontName="${vendorname}_${modulename}">
+            <module name="${Vendorname}_${Modulename}"/>
+        </route>
+    </router>
+</config>

templates/frontAjaxJson/view/frontend/requirejs-config.js

@@ -0,0 +1,13 @@
+/**
+ * require-config.js
+ *
+ * @copyright Copyright © ${commentsYear} ${CommentsCompanyName}. All rights reserved.
+ * @author    ${commentsUserEmail}
+ */
+var config = {
+    map: {
+        '*': {
+            ${Actionname}Ajax: '${Vendorname}_${Modulename}/js/ajax/${actionname}'
+        }
+    }
+};

templates/frontAjaxJson/view/frontend/web/js/ajax/${actionname}.js

@@ -0,0 +1,87 @@
+/**
+ * ${actionname}
+ *
+ * @copyright Copyright © ${commentsYear} ${CommentsCompanyName}. All rights reserved.
+ * @author    ${commentsUserEmail}
+ */
+
+/*jshint jquery:true*/
+define([
+    "jquery",
+    "jquery/ui",
+    'mage/translate'
+], function ($) {
+    "use strict";
+
+    $.widget('${vendorname}_${modulename}.${actionname}ajax', {
+        options: {
+            ajaxUrl: null,
+            waitLoadingContainer: null
+        },
+
+        /**
+         * Bind a click handler on the widget's element.
+         * @private
+         */
+        _create: function() {
+            this.element.on('click', $.proxy(this.clickAction, this));
+        },
+
+        /**
+         * Init object
+         * @private
+         */
+        _init: function () {
+            // Do something if needed
+        },
+
+        clickAction: function(event) {
+            if ($(this.options.waitLoadingContainer).is(":visible")) {
+                return false;
+            }
+            // Do something with element clicked $(event.target)
+
+            $.ajax({
+                context: this,
+                url: this.options.ajaxUrl,
+                data: this.getDataForAjaxRequest(),
+                cache: true,
+                dataType: 'json',
+                beforeSend: $.proxy(this.beforeSend, this),
+                complete: $.proxy(this.complete, this),
+                success: $.proxy(this.success, this),
+                error: $.proxy(this.displayError, this, $.mage.__('Sorry, something went wrong.')),
+            });
+
+        },
+
+        getDataForAjaxRequest: function() {
+            var data = {};
+            // data[dataCode] = dataValue;
+            return data;
+        },
+
+        beforeSend: function () {
+            $(this.options.waitLoadingContainer).show();
+        },
+
+        complete: function () {
+            $(this.options.waitLoadingContainer).hide();
+        },
+
+        success: function (response) {
+            if (response.success) {
+                alert('Success: ' + response.success);
+            }
+            if (response.error) {
+                alert('Error: ' + response.error);
+            }
+        },
+
+        displayError: function (message) {
+            alert(message);
+        }
+    });
+
+    return $.${vendorname}_${modulename}.${actionname}ajax;
+});