Как создать встроенный виджет javascript для приложения rails?

Question

В моем приложении Ruby on Rails компании по прокату велосипедов могут управлять всеми своими велосипедами (бронирование, оплата и т. Д. c.).

Контекст Я хотел бы предложить компаниям по прокату велосипедов (shops) возможность перенаправить гостей в онлайн-процесс бронирования на моей платформе, чтобы они могли позволить клиентам сделать заказ на bike из shop. (например, процесс онлайн-бронирования только для их магазина)

Текущее состояние После прочтения некоторой документации в Интернете (iFrame и embedded JS) я решил внедрить * Форма 1069 * лучше всего подходит для этой цели.

Первым шагом будет создание встроенной формы JS с

• arrival
• departure
• bike_category [необязательно]

И после отправки этой формы резервирование продолжается с индексной страницы, отображающей все доступные bike_categories.

Вопрос

Я делаю это впервые, и я не уверен, каким должен быть поток в моем приложении Rails для генерации виджета и где должны быть расположены все соответствующие файлы.

Пока я смотрю на это,

• Сначала я должен создать файл javascript в app/javascript/component/bike_search_form.js,
  • , здесь мне как-то нужно gr asp кто отправляет запрос и, если им разрешено
  • , файл javascript должен дождаться загрузки внешней страницы и затем загрузить css формы и самой формы
• Форма создается с помощью контроллера виджетов, который направляет файл в views/widget/bike_search_form.html.erb

Является ли этот поток и есть ли файлы + их расположение правильное или я что-то упустил / много?

Код

скрипт для реализации магазином

<div id="bike_search_form"></div>

<script src="#where should the script be?"></script>

<script>

    var bike_search_form = new bike_search_form('');
    bike_search_form.post_url = 'https://.myrailsapp.com';
    bike_search_form.create();

</script>

app / javascript / component / bike_search_form. js

(function() {
var jQuery;
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    jQuery = window.jQuery;
    main();
}

function scriptLoadHandler() {
    jQuery = window.jQuery.noConflict(true);
    main();
}
function main() {
    jQuery(document).ready(function($) {
        var css_link = $("", {
            rel: "stylesheet",
            type: "text/css",
            href: "<%= URI.join(root_url, path_to_stylesheet("widget.css")).to_s %>"
        });
        css_link.appendTo('head');

       #Something to generate the form?
    });
}
})();