I wanted to change sign up to be a bit better. The first issue I wanted to tackle was the facebook in-app browser kept taking users out of the normal flow and making them re-confirm all their info and deal with a cumbersome captcha. The second issue was that I wasn’t collecting airport codes.
I focused on issue number two first because it had a straighter path to success. The Skyscanner API has an endpoint that gives me the airport codes I need in their specific format (JFK = JFK-sky), but not in list form. Since they have so many airport codes, they have it in search format. I send a search term, and they return me relevant airports.
This made it a bit of a pain, but with some trial and error I found a path that worked for me. I found a search select library called Select2 which allows me to have an html selector that allows you to type into it.
The only issue I ran into with this was it had to come with its own css since it wasn’t using native html elements, but was super imposing spans, textboxes, etc to make this thing work. That css did not play super nice with my current css setup. I had to play around with the css until it looked good and matched the rest of the page for all responsive sizes. After I got it looking good, I used AJAX to hit the Skyscanner API on keyup to search for airports that match the search term. Once I got that working, I noticed that the value the user sees, is not the value I get in Mailchimp. That is because, the name of the airport is of no use to me. I need the airport code. Not only the airport code, but the Skyscanner airport code. So JFK becomes JFK-sky, NYC becomes NYCA-sky.
This is a problem since a solid percentage of my subscribers came from Facebook. When mobile users landed on my site from Facebook, it was inside Facebook’s mobile browser. This browser sucks and doesn’t play nicely with Mailchimp. Upon submit, it takes the user to a Mailchimp hosted page and makes them re-put in all their info. This wasn’t ideal but it worked. Now it won’t work because the user is not going to know to type in NYCA-sky for NYC or JFK-sky for JFK. I can’t rely on a user to type anything legit and I don’t have a concrete list since Skyscanner doesn’t support it and none of the online airport lists I found have the Skyscanner codes or even city based airport codes like SFOA or NYCA.
This meant I needed to re-do signup to run through the Mailchimp API. I created some backend scripts to hit Mailchimp and subscribe the user and include in the airport code. This took a bit of messing about because the site was a sole html/js, but Mailchimp didn’t like the AJAX CORS stuff when hitting their api, so I had to build a tiny server-side app that talks with the Mailchimp API. Once completed, I controlled the sign up, so no more Mailchimp Hosted Web forms.
I didn’t want to just deploy it straight to https://weekendr.io because I couldn’t test it on the Facebook browser before deployment. This pushed me into creating test.weekendr.io. I created a new branch in my repo and added a site to my DigitalOcean Droplet. I use Laravel Forge, so this was super simple. I pushed up my changes and had to do a bit of trial and error before it got exactly where I wanted it to be. I then made the push to production and had my brother test it out on his computer and phone as well.
Everything looks good and I’m happy I will now be collecting airport codes along side the email addresses. Also, bonus points for fixing Facebook’s cumbersome sign-up issue. Next steps are to reach out to existing contacts to have them update their airport code. I will probably just send a survey or Typeform to gather the info and manually enter it. I don’t want to use Mailchimp because I need to update the airport to match the codes from Skyscanner.
Also published on Medium.