...
Code Block | ||||
---|---|---|---|---|
| ||||
!!! %html %head %script{type: "text/javascript", src: "http://localhost:3000/customerWidget.js"} %link{rel: 'stylesheet', type: "text/css", href: "http://localhost:3000/customerWidget.css"} %body %div %h1 Welcome %p #customer-widget-id{style: 'width: 1000px; margin: 0 auto; font-size: 13px; border: 5px dashed lightgrey;'} :javascript document.addEventListener('DOMContentLoaded', () => { HCCPCustomerWidget.render({ baseURL: '/hccp/', locale: 'ru', customerId: '50162901', containerId: 'customer-widget-id', }); }); |
Пример замены виджета с пользовательскими шаблонами на виджет абонента
В случае с хопером, нам не нужно беспокоиться по поводу прокси-контроллера: здесь все уже реализовано.
Для этого нужно заменить подгрузку виджета пользовательских шаблонов на подгрузку виджета абонента
Code Block | ||||
---|---|---|---|---|
| ||||
[sergeichukd@mbp ~/dev/hoper (master *)]$ git diff app/views/layouts/admin.haml
diff --git a/app/views/layouts/admin.haml b/app/views/layouts/admin.haml
index 85f9a5b74..77e19df44 100644
--- a/app/views/layouts/admin.haml
+++ b/app/views/layouts/admin.haml
@@ -15,8 +15,8 @@
:javascript
window.HBWidgetOptions = #{hbw_options.to_json.html_safe}
- if Hoper::Config.widgets.hccp_reports.try(:public_url)
- = javascript_include_tag URI.join(Hoper::Config.widgets.hccp_reports.public_url, 'reportsWidget.js')
- = stylesheet_link_tag URI.join(Hoper::Config.widgets.hccp_reports.public_url, 'reportsWidget.css')
+ = javascript_include_tag URI.join(Hoper::Config.widgets.hccp_reports.public_url, 'customerWidget.js')
+ = stylesheet_link_tag URI.join(Hoper::Config.widgets.hccp_reports.public_url, 'customerWidget.css')
:javascript
var alertGroups = #{Hoper::Config.interface.alert_groups?};
var UI = {};
[sergeichukd@mbp ~/dev/hoper (master *)]$
|
После этого подменяем рендер виджета пользовательских шаблонов на рендер виджета абонента
Code Block | ||||
---|---|---|---|---|
| ||||
[sergeichukd@mbp ~/dev/hoper (master *)]$ git diff app/views/reports/custom/index.haml
diff --git a/app/views/reports/custom/index.haml b/app/views/reports/custom/index.haml
index 2d418136d..3b20fa83e 100644
--- a/app/views/reports/custom/index.haml
+++ b/app/views/reports/custom/index.haml
@@ -1,12 +1,13 @@
%h1.header=t('menu.reports.custom')
-.custom-reports-styles(id="custom-reports-index")
+#customer-widget-id{style: 'width: 1000px; margin: 0 auto; font-size: 13px; border: 5px dashed lightgrey;'}
:javascript
(function() {
- HCCPReportsWidget.render({
- baseURL: '/hccp/',
- locale: "#{locale.to_s}",
- containerId: 'custom-reports-index'
+ HCCPCustomerWidget.render({
+ baseURL: '/hccp/',
+ locale: 'ru',
+ customerId: '50162901',
+ containerId: 'customer-widget-id',
});
}).call(this);
[sergeichukd@mbp ~/dev/hoper (master *)]$
|
В конфиге хопера задаем параметры виджета hccp_reports:
Code Block | ||||
---|---|---|---|---|
| ||||
hccp_reports:
public_url: 'http://localhost:4000'
url: 'http://localhost:4000'
login: 'gordon'
password: 'q123'
|
Конфигурируем unicorn на 8 воркеров (для корректной работы виджета нужно более 4 воркеров, так как виджет делает несколько параллельных запросов к апи хопера)
Code Block | ||||
---|---|---|---|---|
| ||||
unicorn:
pid: tmp/unicorn.pid
socket: 3000
workers: 8
max_memory_size_mb: 300
request_timeout_seconds: 600
serve_static_assets: true
|
После этого подниаем hccp на 4000 порту
Поднимаем хопер в продакшн моде командой
Code Block | ||||
---|---|---|---|---|
| ||||
bundle exec unicorn -E production -c config/unicorn.rb
|