Scenario I am looking to provide bike rental companies (shops) with the ability to redirect customers to an online reservation system on my platform. This will allow them to offer bike reservations specific to their shop only.
Current Progress To start, I have developed an embedded JavaScript form (form_availability) that enables visitors to a shop's website to choose arrival and departure dates, and view available bike categories. Essentially, the intent is to display an initial form for selecting arrival and departure options tailored to each shop.
Methodology
- I have set up an api/v1/shops (routes, controllers, and views)
- An embed.js file has been created using webpacker:vue
- To test, I have included <%= javascript_pack_tag "embed" %> in my app at this URL: http://localhost:3000/en/shops/58/website_integration
- The corresponding shop's website can be found at http://localhost:3000
Inquiry
This is my first attempt at this project, and I am encountering error messages that I am unsure how to resolve.
Error Log
embed.js:23 GET http://localhost:3000/api/v1/shops/http%3A%2F%2Flocalhost%3A3000%2Fen%2Fshops%2F3%2Fwebsite_integration/form_availability 500 (Internal Server Error)
./app/javascript/packs/embed.js @ embed.js:23
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
Code Reference
Routes
namespace :api, defaults: { format: :json } do
namespace :v1 do
resources :shops, only: [:show] do
get :form_availability , on: :member
end
end
API Response Content:
{ json content }