How to create a jQuery widget in Magento 2
No doubt when things revolve around a jQuery widget in Magento 2, it becomes more tricky and takes hours to see final results on screen. To help when this is the case, we at KiwiCommerce are going to teach you how to create a jQuery widget in Magento 2 following a set of simple steps mentioned below:
- Set up a module and select any PHTML file for calling custom jQuery widget.
- Create a custom jQuery widget.
- data-mage-init attribute for calling the newly created custom widget.
- Clear cache and check the form.
1. Set up a module and select any PHTML file for calling custom jQuery widget.
To start you need to create a module and override any phtml file to call your custom widget. In this example, we have the contact phtml file:
app\design\frontend\VendorName\ModuleName\Magento_Contact\templates\form.phtml
2. Create a custom jQuery widget.
The next step is to create a custom js file for creating a custom jquery widget:
app\code\VendorName\Modulename\view\frontend\web\js\kiwicount.js
And below is the basic code structure:
define([
'jquery',
'underscore',
'jquery/ui',
'Magento_Ui/js/modal/confirm',
'mage/translate'
], function ($, _) {
'use strict';
$.widget('mage.kiwicount',{
// Your custom code and custom methods will be here
});
return $.mage.kiwicount;
});In the define section, state the jquery name that you want or you can simply put jQuery in the define section.
We will be using only jQuery and jQueryUi and as a result we will remove the extra define code from Js. Your code will now look like the below:
define([
'jquery',
'jquery/ui'
], function ($, _) {
'use strict';
$.widget('mage.kiwicount',{
// Your custom code and custom methods will be here
});
return $.mage.kiwicount;
});3. data-mage-init attribute for calling your custom Widget.
Now let’s get back to our file:
app\design\frontend\VendorName\ModuleName\Magento_Contact\templates\form.phtml
In this file we need to check the number of characters for the text area field and to do so we need to call our custom jQuery widget as shown in below code:
<textarea name="comment" id="comment" title="<?= $block->escapeHtmlAttr(__('Comment')) ?>" class="input-text"
data-mage-init='{"KiwiCommerce_LoginAsCustomer/js/kiwicount": {"maxlen":"150","messagebox":"charNum"}
}'></textarea>
<span id="charNum"></span>Where : KiwiCommerce_LoginAsCustomer/js/kiwicount is the path of JS file
Maxlen variable to pass in jquery widget as config array we can get all these arguments there using config.maxlen
Coming back to our custom widget js file, apply the code for validation and receive the argument:
define([
'jquery'
], function ($, _) {
'use strict';
$.widget('mage.kiwicount',{
_create: function(config,element) {
this._case = $(this.element);
$(this._case).keyup(function () {
var max = config.maxlen;
var len = $(this.element).length;
if (len >= max) {
$('#'+config.messagebox).text(' you have reached the limit');
} else {
var char = max - len;
$('#'+config.messagebox).text(char + ' characters left');
}
});
}
});
return $.mage.kiwicount;
});In the above code snippet, we have added a _create function which is a constructor. However, we only need to check the length of the element so we have directly received the constructor.
We also have two objects, named as config and element:
Config :
The argument which is sent with the variable to this custom jquery widget:
We can access all passing argument using config.messagebox where messagebox is the variable name.
Element :
All property of the current element from where it is called, in our case we have the element <textarea>.
We can use any property of the element using: this.element
4. Clear the cache and flush and check you phtml page(Contact page)
Clear the cache :
php bin\magento cache:clear or php bin\magento c:c
Clear the flush:
php bin\magento cache:flush or php bin\magento c:f
After that you will be able to find the changes of character limit Jquery widget working on contact us page textarea.
You now know how to create a jQuery widget specifically in Magento 2. If you get stuck while creating this widget we at KiwiCommerce will be happy to help you out. Feel free to reach out to us. ?
