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

Question

MSAFT @MSAFT

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

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

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

Вопрос задан более трёх лет назад
608 просмотров

Комментировать

Подписаться 2 Простой Комментировать

Решения вопроса 1

6 комментариев

MSAFT @MSAFT Автор вопроса

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

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

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

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

Написано более трёх лет назад
Евгений Ромашкан @EvgeniiR

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

Написано более трёх лет назад
MSAFT @MSAFT Автор вопроса

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

Написано более трёх лет назад
Евгений Ромашкан @EvgeniiR

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

Написано более трёх лет назад
Евгений Ромашкан @EvgeniiR
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 @MSAFT Автор вопроса

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

Vue.js

Простой
Как получить событие клика в updated()?
- 1 подписчик
- 2 часа назад
- 12 просмотров
0

ответов
Laravel

+2 ещё

Средний
Не удается подключиться к ClickHouse container?
- 1 подписчик
- 6 часов назад
- 37 просмотров
1

ответ
Vue.js

+1 ещё

Средний
Как использовать хуки NUXT в модулях?
- 1 подписчик
- 10 часов назад
- 31 просмотр
1

ответ
Vue.js

Простой
Как решить проблему с логикой валидации после перезагрузки страницы в Vue.js?
- 1 подписчик
- 11 часов назад
- 33 просмотра
0

ответов
Laravel

Простой
Как в модели Belongsto обратиться по нескольким полям?
- 1 подписчик
- 14 часов назад
- 52 просмотра
1

ответ
Laravel

Простой
Как локально работать stevebauman/location для определения геопозиции в Laravel?
- 1 подписчик
- вчера
- 23 просмотра
0

ответов
Vue.js

Средний
Как сделать светлую тему по дефолту во Vueform?
- 1 подписчик
- вчера
- 38 просмотров
1

ответ
Vue.js

Средний
Как разрешить пути к SVG во Vue-проекте?
- 1 подписчик
- вчера
- 51 просмотр
2

ответа
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- вчера
- 99 просмотров
0

ответов
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- вчера
- 57 просмотров
2

ответа
Показать ещё Загружается…

Бэкенд-разработчик на Laravel (Middle Level)

StreamHunt.tv

от 150 000 до 250 000 ₽

PHP Developer / Laravel

АэроТур • Санкт-Петербург

от 170 000 до 190 000 ₽

PHP / Laravel разработчик

DIGITAL SECTOR • Краснодар

от 100 000 до 150 000 ₽

Доработать клиентское приложение для GTA 5 на C#

20 апр. 2024, в 00:51

1000 руб./за проект

Верстка и логика формы выбора билетов в зале для покупки

20 апр. 2024, в 00:43

10000 руб./за проект

Разработать формирование УПД на Java

20 апр. 2024, в 00:28

20000 руб./за проект

Answer 1 · 2019-05-13 17:06:22

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

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

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

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

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт