Using a Pop-Up Widget jQuery in Magento2

Oct 3, 2018278Vladimir Khrebtov
Using a Pop-Up Widget jQuery in Magento2

In this article, we will take a look at an example of using jQuery pop-up widget in Magento 2. For clarity, we will use this widget to create a modal window in which we place a search form, which is located in the header by default. First, let’s look at the existing widget options. The following options are available by default:

  • autoOpen
  • buttons
  • clickableOverlay
  • focus
  • innerScroll
  • modalClass
  • modalLeftMargin
  • responsive
  • title
  • type

However, this list is not a final list and you can freely add the options you need, thereby expanding the original functionality of this widget.

Let’s take a closer look at each of the options.

autoOpen

The default value of this property is “false”. The property determines whether the modal window will be shown immediately after the widget initialization.

buttons

This property’s value is an array with an object in which you can pass the text of a button, the CSS class and the handler function, which will be triggered when the button is clicked.

clickableOverlay

This property determines whether the modal window can be closed when clicking on an overlay. The default value is true.

focus

This property determines the element that will be in focus immediately after the window is opened. A string with a name of a CSS class is accepted as a value. In our example, after opening a pop-up window, the focus should be on the search input field.

innerScroll

This property determines the scroll position in case the modal window exceeds the size of the screen and we need the scroll to be in a particular position when the pop-up window is opened.

modalClass

With this property, we define any CSS property that we need for styling

modalLeftMargin

This property sets the indentation between modal windows.

responsive

Defines the adaptive behavior of the modal window. By default, the value is set to false.

title

Defines the title of the modal window.

type

This property takes two values as a string — popup or modal. Depending on the selected value, a template is defined that will be used to render the pop-up window. These templates are located by default in the following folders:

  • <Magento_Ui_module_dir>/view/base/web/templates/modal/modal-popup.html popup template.
  • <Magento_Ui_module_dir>/view/base/web/templates/modal/modal-slide.html slide template.

If necessary, they can be overridden in the theme folder.

Since we will create a pop-up window for the header search form, we will need to override and slightly modify the form.mini.phtml template. This template is located in the vendor/magento/module-search. Let’s override it by placing it in the following folder:

Vendor_Name/Vendor_Theme/Magento_Search/templates/form.mini.phtml.

Add a markup in front of the search block that will display the search button, after clicking on which our modal window will pop up.

Technically, this does not have to be a button element. This can be any DOM element to which we will attach an event handler later on.

The next step is to connect the RequireJS module, in which we define the settings of our pop-up window. To connect the module, we use a declarative notation via the <script type=”text/x-magento-init” /> tag.

Add the following code at the end of our template:

In this JSON object, we pass the #search-popup-toggle element and the search-popup.js script, which we will create at the next step. Please note that in the code above we specify the name of the js file without its extension.

In the Vendor_Name/Vendor_Theme/Magento_Search/we/js folder we create a new search-popup.js file.

Put the following code in the file:

Let’s analyze what happens in this script. We define a new requreJS module and pass jQuery and the jQuery popup widget itself that will allow us to use methods to create a pop-up window. Next, we define a list of options that will indicate the behavior of the pop-up window. We have discussed these options earlier.

Pay attention to the opened property, the value of which is an anonymous function. This value determines the event upon which this function is triggered. There are only three events: opened, closed, always. These events correspond to opening, closing and the opened state of a modal window. In this case, when opening a modal window, we put the focus on the input with the #search identifier.

Next, we create a modal window by passing the options object to the modal function and the block itself, which we want to place in the modal window. In our case it is a DOM element with the #search-block identifier.

On the final stage, we attach the event handler to the element, upon clicking on which the created modal window is called.

Note that the modal window has two methods — openModal and closeModal, which respectively open and close a pop-up window. We use closeModal in the function that handles the click event on the close button, which we define in the options object. openModal is used in the handler function on the element with the #search-popup-toggle identifier. We get the given elements as an element parameter.

It is also worth mentioning that you will have to redefine CSS styles that define the appearance of our search form. We skip this stage since it is a matter of taste.

Ultimately, the template code should look like this:

That is what jQuery pop-up widget looks like in Magento 2, thank you for reading! Leave your comments and questions in the section below and I will be happy to answer them.



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *