@webtehnology https://github.com/tadatuta/bem-bricks/tree/master/common.blocks/info-modal

@tadatuta Спасибо! Этот блок нужно разместить в любом месте блока page, и он сам как я понимаю создаст пустой блок modal. Вызов осуществляется если примиксовать info-modal к блоку или элементу?

Его вообще не нужно размещать (это произойдет автоматически за счет шаблонов), достаточно добавить в депсы и просто вызывать через InfoModal.show('hello!');

К примеру из конструкции ниже, удалить блок с модальным окном тк info-modal сам его создаст , далее deps к какому блоку нужно добавить?

InfoModal.show('hello!'); вызываю в js файле блока? С другими блоками для которых нужно вызвать модальное окно нужно повторить как я понимаю операцию

 {
    block:'query-top',
   js:true,
   content : [
                    {
                       block:'link',
                       mix: {block:'query-top', elem:'link'},
                       mods : { pseudo : true,},
                       ontent:'Корзина'
                    },
                    {  модально окно}
                  ]
}

из конструкции ниже, удалить блок с модальным окном тк info-modal сам его создаст?

да

далее deps к какому блоку нужно добавить?

к тому, в котором планируется вызывать InfoModal.show('hello!');. Судя по коду примера — в query-top.deps.js.

InfoModal.show('hello!'); вызываю в js файле блока?

да. и не забыть получить InfoModal через зависимость ym.

С другими блоками для которых нужно вызвать модальное окно нужно повторить

все так.

да. и не забыть получить InfoModal через зависимость ym.

если можно подробнее описать это.

modules.define('query-top', ['i-bem-dom', 'info-modal'], function(provide, bemDom, InfoModal) {

provide(bemDom.declBlock(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                InfoModal.show('hello!');
            }
        }
    }
}));

});

Все получилось, только добавил еще это,

this._events(Link).on('click', function() {
                    InfoModal.show('test');
});

И вопрос вот в чем, где в bemjson теперь описывать содержимое модального окна для блокаquery-top ? нужно создать скрытый блок или элемент внутри блока query-top, содержимое которого потом загружать в модальное окно.

Например, это можно делать прямо на клиенте, вот так:

modules.define('query-top', ['i-bem-dom', 'BEMHTML', 'info-modal', 'link'],
    function(provide, bemDom, BEMHTML, InfoModal, Link) {

provide(bemDom.declBlock(this.name, {}, {
    lazyInit: true,
    onInit: function() {
        this._events(Link).on('click', function() {
            var html = BEMHTML.apply({ block: 'my-modal-content' });
            InfoModal.show(html);
        });
    }
}));

});

Чтобы нужные шаблоны попали на клиент, см. https://ru.bem.info/platform/deps/#Подключение-зависимостей-по-технологии

@tadatuta получается нужно дополнить файл query-top.deps.js такой строкой, но при сохранении сразу выдается ошибка

({
    block: 'query-top',
    tech: 'js',
    shouldDeps: [
        { block: 'my-modal-content', tech: 'bemhtml' }
    ]
})

Ошибка

[TypeError: (intermediate value)(intermediate value) is not a function]
[Error: no writecb in Transform class]
[Error: no writecb in Transform class]
[Error: no writecb in Transform class]

Так же создал файл папку my-modal-content на уровне desktop.blocks с файлом my-modal-content.bemhtml.js я правильно понял, что тут можно описать содержимое которое нужно загрузить в модальное окно или же нужно описывать блок my-modal-content в bemjson?

по поводу ошибки с текущим описанием помочь не могу — код выглядит правильно. это весь выхлоп или какой-то стектрейс все-таки выводится?

а содержимое модала можно как в bemjson, так и в bemhtml положить — это дело вкуса.

Если класть в bemjson нужно и с классами работать? Те по умолчанию блок с содержимым модального окна должен быть скрыт и потом показан модификатором или вообще не загружен на страницу, а формируется наподоби аякс запроса. Или это уже не в ту степь?

 {
    block:'query-top',
   js:true,
   content : [
                    {
                       block:'link',
                       mix: {block:'query-top', elem:'link'},
                       mods : { pseudo : true,},
                       сontent:'Корзина'
                    },
                    { block:'my-modal-content'
                     сontent:'deedededed'
                    ,}

                  ]
}

                    { block:'my-modal-content' ← здесь нет запятой
                     сontent:'deedededed'
                    ,}

@zxqfox кусок тут прям написал, но дело не в запятой

@webtehnology и не в этой запятой!? - ,}. Блок этим заканчивается

Если класть в bemjson нужно и с классами работать? Те по умолчанию блок с содержимым модального окна должен быть скрыт и потом показан модификатором или вообще не загружен на страницу, а формируется наподоби аякс запроса. Или это уже не в ту степь?

это зависит от того, как устроен проект: используется ли BEMTREE, как устроен сервер и т.п.

@tadatuta пока готовлю только верстку на стандартной сборке, может я неправильно задачу описываю или это другое уже, пока мы используем только верстку и собираем уже на Битриксе проект. На выходе я должен передать программеру верстку в которой уже описана все логика взаимодействия блоков. Я ещё раз приношу прощения за кучу вопросов.

Попробую на другом примере описать. На страничке есть список товаров(у каждого товара есть изображение и цена , вообщем стандартная карточка), так вот при нажатии на изображение открывается модальное окно в которое грузится увеличенное изображение и дополнительные данные, обычно эту задачу решал так:

• делал одно модальное окно

• на блок с изображением навешивал событие и аяксом загружал в модальное окно нужные данные

• для демонстрации верстки, можно было просто создать отдельный файлик и его загружать аяксом, а на этапе сборки сайта уже автоматизироваь в компоненты и тд(речь про Битрикс)

У меня и возникает непонимание, как описать блок в bemjson, чтобы загрузить его только по требованию, а не нагружать страницу загрузкой кучи блоков. Или я неправильно в корне понимаю процесс.

Вариантов решения много. Скорее всего удобно было бы положить данные в JSON-е, сделать микро-сервер, который бы на запрос по id возвращал данные нужного товара, а дальше, если шаблонизация на сервере не предполагается ввиду битрикса, конвертировать эти данные в BEMJSON и накладывать шаблоны уже на клиенте.

Пример (код не проверял):

modules.define('query-top', ['i-bem-dom', 'BEMHTML', 'info-modal', 'link'],
    function(provide, bemDom, BEMHTML, InfoModal, Link) {

provide(bemDom.declBlock(this.name, {}, {
    lazyInit: true,
    onInit: function() {
        this._events(Link).on('click', function() {
            // считаем, что id товара лежит в js-параметрах экземпляра блока
            this.__self.show(this.params.id);
        });
    },
    // ходим за данными
    getData: function(id) {
        return $.getJSON('api/' + id);
    },
    // превращаем сырые данные в BEMJSON
    getBemjson: function(data) {
        return {
            block: 'my-modal-content',
            content: [
                { elem: 'icon', url: data.url },
                { elem: 'description', content: data.description }
            ]
        };
    },
    // шаблонизируем и показываем окно
    show: function(id) {
        var _this = this;
        this.getData(id).then(function(data) {
            var bemjson = _this.getBemjson(data),
                html = BEMHTML.apply(bemjson);

             InfoModal.show(html);
        });
    }
}));

});

Вроде просмотрел все логично data.url и data.description это можно тянуть из data описанном в блоке по которому кликнули в основном bemjson и как быть если структура куда сложнее чем 2 елемента а к примеру целя форма или 2-ка блоков? В статической верстке это можно реализовать, чтобы потом уже при сборке проекта в битриксе заменить данными которые формируются динамически

 getBemjson: function(data) {
        return {
            block: 'my-modal-content',
            content: [
                { elem: 'icon', url: data.url },
                { elem: 'description', content: data.description }
            ]
        };
    },

Падает весь js, если прописываю BEMHTML убираю все остальные скрипты начинают работать

modules.define('query-top', ['i-bem-dom','BEMHTML',  'info-modal', 'link'], function(provide, bemDom,BEMHTML, InfoModal, Link) {

provide(bemDom.declBlock(this.name, {
    onSetMod: {
        'js': {
            'inited': function() {

               this._events(Link).on('click', function() {
            // var html = BEMHTML.apply({ block: 'my-modal-content' });
            // InfoModal.show(html);

        });

            }
        }
    },

}));

});