1

In my Ruby on Rails app, bike rental companies can manage all their bikes (reservations, payments etc.).

Context I would like to offer a bike rental companies (shops) the option to redirect guests to an online reservation process on my platform, so they can let customers make a reservation for a bike of the shop. (e.g. online reservation process is just for their shop)

Current state After reading some documentation online (iFrame and embedded JS) I decided an embedded JS form would fit this purpose best.

The first step would be to create an embedded JS form with

  • arrival
  • departure
  • bike_category [optional]

And after submitting this form, the reservation continues with an index page displaying all available bike_categories.

Question

It's the first time I'm doing this and I'm not sure how the flow in my Rails app should be to generate the widget and where all the respective files should be located.

As I look at it now,

  • I should first create a javascript file in app/javascript/component/bike_search_form.js,
    • here I somehow need to grasp who sends the request and if they are allowed
    • furthermore, the javascript file should wait till the external page is loaded and then load the css of the form and the form itself
  • The form is generated via a widget controller which directs to a file in views/widget/bike_search_form.html.erb

Is this flow and are there files + their locations correct or am I missing something/a lot?

Code

script to implement by shop

<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?
    });
}
})();
techquestion
  • 489
  • 5
  • 20
  • I would consider detaching the development of the widgets completely from your rails app. I would setup a separate git repo and just use webpack and a javascript toolchain to develop it. It lets you develop and test the component in isolation instead of having it live inside a big monorepo. – max Feb 04 '20 at 13:03
  • 1
    Exactly what that toolchain entitites is really a matter of optinion but it could be webpack for assets management, a test framework like Mocha or QUnit and a index.html file that serves as both the demo and the github page. I would consider if you really need jquery as the will let you shed a lot of kbs. This the kind of question though that you want to ask on somewhere like [/r/rubyonrails](https://www.reddit.com/r/rails/) though as its not really a good fit for the Q&A format of stackoverflow. – max Feb 04 '20 at 13:08

0 Answers0