Как создать внешний виджет для проекта на Laravel + VueJS на подобие лайв чатов, виджетов поиска авиабилетов и других подобных сервисов?

Question

[MSAFT]

Подскажите, что почитать и в какую сторону копать для следующей задачи:

Есть проект, проще говоря калькулятор просчета цен на кое какие продукты. Компании региструются на сайте, вводят свои прайс листы на комплектующие и калькулятор считает итоговую цену. Стоит задача сделать возможным компаниям вставлять код моего калькулятора на их сайт и делать просчеты уже на их площадках с данными их клиентов, но с фильтрацией только под конкретную компанию и изменением стилей. Подскажите что почитать на эту тему и в какую сторону копать для реализации данной задачи?

Answer 1

[Евгений Ромашкан]

Сверстайте формочку, опишите логику на js, которая будет общаться с вашим бэкендом, чтобы ее можно было настроить через конфиг

На чем написан сторонний проект, тем более его бэкенд, роли не играет.

Выйдет примерно как у Гугл капчи или GTM, вставили на сайт коротенький тег скрипт который подгрузит весь ваш код, и он отобразит на сайте виджет

Ничего специфического, чтобы писать специально литературу на эту тему тут, вроде, нет.

Comments

[MSAFT]

Спрашиваю, потому что опыта нет, я месяцев 5-6 как более ли менее профессионального программирую, и отсюда вопросы. Читаю про Rest API, но это немного не то.

Понятно, что бэкэнд стороннего сайта не имеет значения, по сути надо будет мой html код вставить и всё. Спрашиваю как реализовать, т.к. понятие не имею, конкретно с чего начать.

Сам калькулятор как раз и написан на VueJS и общается с Laravel через axios.

По такой же логике его собрать и для компаний и клиенты на своей стороне просто должны будут подключать мой js файл?

[Евгений Ромашкан]

MSAFT, подгружается js код, он вставляет сверстанный вами виджет на страницу, параметры, например, id клиента задаются для скрипта с клиента, вот и все.
REST тут вообще не причем, и читать про такие вещи как REST на Хабре или смотреть на Ютубе категорически не рекомендую.
У вас будет обычное rpc, общение с сервером через, например, json поверх http

[MSAFT]

Евгений Ромашкан, спасибо большое, теперь немного ясней.

[Евгений Ромашкан]

MSAFT, И да, скрипт все также будет общаться с вашим сервером на Laravel, просто с другого домена. Не забудьте CORS настроить)

[Евгений Ромашкан]

MSAFT, Вот, например, скрипт который Google Tag Manager (сервис аналитики) поставляет, прогнанный через beautify, видно что настройки передаются GET параметрами, просто конкатенируются к Url для загрузки скрипта

<script>
(function(w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({
        'gtm.start': new Date().getTime(),
        event: 'gtm.js'
    });
    var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s),
        dl = l != 'dataLayer' ? '&l=' + l : '';
    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
    f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', '<?php echo $id; ?>');
</script>

$id это переменная из php

[MSAFT]

Евгений Ромашкан, спасибо большое! Буду пробывать )