new Template ajaxRestApi

Author: jalogut

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

@@ -0,0 +1,22 @@
+1. Add the following code into your .phtml file where the ajax request will be triggered
+
+    <!-- loading request indicator -->
+    <span id="${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}": {
+                    "waitLoadingContainer": "#${actionname}-loading"
+                }
+            }
+        }
+    </script>
+
+    <!-- Insert Js using data-mage-init element attribute -->
+    data-mage-init='{
+        "${actionname}": {
+            "waitLoadingContainer": "#${actionname}-loading"
+        }
+    }'

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

@@ -0,0 +1 @@
+This Template creates an Ajax action using custom rest API.

templates/ajaxRestApi/Api/${ApiClassName}Interface.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ * ${ApiClassName}Interface
+ *
+ * @copyright Copyright © ${commentsYear} ${CommentsCompanyName}. All rights reserved.
+ * @author    ${commentsUserEmail}
+ */
+namespace ${Vendorname}\${Modulename}\Api;
+
+
+interface ${ApiClassName}Interface
+{
+    /**
+     * Description here...
+     *
+     * @return string
+     */
+    public function ${actionname}();
+
+}

templates/ajaxRestApi/Model/${ApiClassName}.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * ${ApiClassName}
+ *
+ * @copyright Copyright © ${commentsYear} ${CommentsCompanyName}. All rights reserved.
+ * @author    ${commentsUserEmail}
+ */
+namespace ${Vendorname}\${Modulename}\Model;
+
+use ${Vendorname}\${Modulename}\Api\${ApiClassName}Interface;
+
+class ${ApiClassName} implements ${ApiClassName}Interface
+{
+    public function ${actionname}()
+    {
+        // Do something
+        $result = ['success' => 'Here comes the result'];
+
+        return json_encode($result);
+    }
+}

templates/ajaxRestApi/etc/di.xml

@@ -0,0 +1,3 @@
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+    <preference for="${Vendorname}\${Modulename}\Api\${ApiClassName}Interface" type="${Vendorname}\${Modulename}\Model\${ApiClassName}"/>
+</config>

templates/ajaxRestApi/etc/webapi.xml

@@ -0,0 +1,8 @@
+<routes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Webapi:etc/webapi.xsd">
+    <route url="/V1/${modulename}/${actionname}" method="PUT">
+        <service class="${Vendorname}\${Modulename}\Api\${ApiClassName}Interface" method="${actionname}"/>
+        <resources>
+            <resource ref="anonymous"/>
+        </resources>
+    </route>
+</routes>

templates/ajaxRestApi/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}: '${Vendorname}_${Modulename}/js/${actionname}'
+        }
+    }
+};

templates/ajaxRestApi/view/frontend/web/js/${actionname}.js

@@ -0,0 +1,85 @@
+/**
+ * ${actionname}
+ *
+ * @copyright Copyright © ${commentsYear} ${CommentsCompanyName}. All rights reserved.
+ * @author    ${commentsUserEmail}
+ */
+
+/*jshint jquery:true*/
+define([
+    "jquery",
+    'mage/url',
+    "jquery/ui",
+    'mage/translate'
+], function ($, url) {
+    "use strict";
+
+    $.widget('${vendorname}_${modulename}.${actionname}', {
+        options: {
+            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({
+                url:  url.build('/rest/V1/${modulename}/${actionname}'),
+                data: this.dataForApiRequest(),
+                cache: false,
+                contentType: 'application/json',
+                type: 'PUT',
+                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.')),
+            });
+
+        },
+
+        dataForApiRequest: function() {
+            var data = {};
+            // data[dataCode] = dataValue;
+            return JSON.stringify(data);
+        },
+
+        beforeSend: function () {
+            $(this.options.waitLoadingContainer).show();
+        },
+
+        complete: function () {
+            $(this.options.waitLoadingContainer).hide();
+        },
+
+        success: function (response) {
+            var result = JSON.parse(response);
+            if (result.success) {
+                alert('Success: ' + result.success);
+            }
+        },
+
+        displayError: function (message) {
+            alert(message);
+        }
+    });
+
+    return $.${vendorname}_${modulename}.${actionname};
+});