aisa-modals v0.0.1

aisa-modals

PHP (Wordpress)

В functions.php необходимо добавить следующий код.

add_action( 'wp_enqueue_scripts', 'ajax_config', 99 );

function ajax_config(){
	wp_localize_script('name_of_script', 'ajaxConfig',
		array(
			'url' => admin_url('admin-ajax.php'),
			'nonce' => wp_create_nonce('germetik-nonce')
		)
	);
}

С его помощью можно добавлять к любому js-скрипту на сайте глобальный объект ajaxConfig (название объекта можно изменить), в котором хранится nonce-код и url для ajax-запросов. Глобальный объект нужно добавлять в тому js-скрипту, в котором вы работаете с модальными окнами. Названием этого скрипта из функции wp_enqueue_script нужно указать вместо name_of_script.

DOM-дерево

Кнопки

У кнопки вызова модального окна должен быть:

• data-атрибут modal c id модального окна
• data-атрибут action с идентификатором хука, к которому должна через ajax-запрос обращаться форма в данном модальном окне. Идентификатор хука определяется на бэкенде при его объявлении. Наименование хука всегда следует универсальному правилу: wp_ajax_${action}. Например, если на бэкенде создан хук wp_ajax_order, то на модальном окне нужно указать data-action="order", т.е. идентификатор в данном случае - строка "order".
• css-класс open-modal

Пример:

<button
  type="button"
  class="open-modal"
  data-modal="call-modal"
  data-action="order"
>
  Отрой модалку c id "call-modal"
</button>

Модальные окна

Главный узел модального окна должен иметь:

• id
• css-классы modal-wrapper и modal-wrapper_hidden
• Два элемента внутри
  • Один элемент для содержимого модального окна с css-классом modal
  • Один элемент для затемнённого фона с css-классом overlay

Пример (c несколькими окнами):

<div class="modals">
  <div id="call-modal" class="modal-wrapper modal-wrapper_hidden">
    <div class="modal">
      Содержимое модального окна 1
    </div>
    <div class="overlay"></div>
  </div>
  <div id="mail-modal" class="modal-wrapper modal-wrapper_hidden">
    <div class="modal">
      Содержимое модального окна 2
    </div>
    <div class="overlay"></div>
  </div>
</div>

JS

import Modals from "./modals";

const modals = new Modals({
  selectors: {
    open: ".open-modal",
    close: ".close-modal",
    overlays: ".overlay"
  },
  urls: {
    api: ajaxConfig.url
  },
  nonce: ajaxConfig.nonce
});
modals.init();