github/selfstarter
1
1
Fork 0
mirror of https://github.com/apigy/selfstarter.git synced 2026-01-09 14:27:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

Made it so that when the "payment options" section is used on checkout, selecting a radio button makes the email field, and check-out button jump into view.

Browse Source
This commit is contained in:
Jesse Grant
2013-01-14 16:26:58 -05:00
parent 7b423d8dd2
commit 14ffbe12bb
4 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/assets/javascripts/preorder.js.coffee
View File

@@ -1,22 +1,37 @@
Selfstarter =
firstTime: true
validateEmail: ->
# The regex we use for validating email
# It probably should be a parser, but there isn't enough time for that (Maybe in the future though!)
if /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/.test($("#email").val())
$("#email").removeClass("highlight")
$("#amazon_button").removeClass("disabled")
else
$("#email").addClass("highlight") unless Selfstarter.firstTime
$("#amazon_button").addClass("disabled") unless $("#amazon_button").hasClass("disabled")
init: ->
$("#email").bind "textchange", ->
Selfstarter.validateEmail()
$("#email").bind "hastext", ->
Selfstarter.validateEmail()
# The first time they type in their email, we don't want it to throw a validation error
$("#email").change ->
Selfstarter.firstTime = false
firstTime: true
validateEmail: ->
# The regex we use for validating email
# It probably should be a parser, but there isn't enough time for that (Maybe in the future though!)
if /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/.test($("#email").val())
$("#email").removeClass("highlight")
$("#amazon_button").removeClass("disabled")
else
$("#email").addClass("highlight") unless Selfstarter.firstTime
$("#amazon_button").addClass("disabled") unless $("#amazon_button").hasClass("disabled")
init: ->
checkoutOffset = $('body').height() - 101 #needs to be done upon init
$("#email").bind "textchange", ->
Selfstarter.validateEmail()
$("#email").bind "hastext", ->
Selfstarter.validateEmail()
# The first time they type in their email, we don't want it to throw a validation error
$("#email").change ->
Selfstarter.firstTime = false
# if they are using the optional payment options section on the checkout page, need to conditional fix the email
# field and button to the bottom of the page so it's displayed after selecting a radio button
if $('.payment_options').length > 0
$(window).on "scroll", ->
wrapper = $('.checkout_controls_wrapper')
if $(window).scrollTop() + $(window).height() < checkoutOffset
wrapper.addClass('fix_to_bottom')
else if wrapper.hasClass("fix_to_bottom")
wrapper.removeClass('fix_to_bottom')
# the radio button selection should bring up the email field and button
$('.payment_radio').on "click", ->
$('.checkout_controls_wrapper').addClass "checkout_ready"
$ ->
Selfstarter.init()
$("#email").focus()
Selfstarter.init()
$("#email").focus()

17
app/assets/stylesheets/checkout.css.scss
View File

@@ -37,6 +37,23 @@
.main_content.payment_options
{
div.checkout_controls
{
height: 100px;
div.checkout_controls_wrapper.fix_to_bottom.checkout_ready
{
background-color: #FAFAFA;
width: 100%;
position: fixed;
bottom: 0px ;
top: auto;
.checkout_controls_inner
{
width: 560px;
border-top: 1px solid #D2D2D2;
}
}
}
#amazon_button
{
display: inline !important;

2
app/views/preorder/_payment_options.html.erb
View File

@@ -4,7 +4,7 @@
<ol>
<% Settings.payment_options.each_with_index do |p, index| %>
<li>
<%= radio_button_tag "payment_option", p[0], index == 0 %>
<%= radio_button_tag "payment_option", p[0], false, class: 'payment_radio' %>
<%= label_tag("payment_option_#{index}", p[1]) %>
<div class="shipping">
<span><%= p[2] %></span>

14
app/views/preorder/checkout.html.erb
View File

@@ -15,10 +15,16 @@
</p>
<%= form_tag "/preorder/prefill", :id => "checkout" do %>
<%= render 'payment_options' %>
<%= email_field_tag "email", nil, :placeholder => "hello@lockitron.com", :required => "required", :id => "email" %>
<%= hidden_field_tag "preorder", true %>
<%= hidden_field_tag "quantity", params[:quantity] %>
<%= submit_tag "Checkout", :class => "blue_button disabled", :id => "amazon_button" %>
<div class="checkout_controls">
<div class="checkout_controls_wrapper">
<div class="checkout_controls_inner">
<%= email_field_tag "email", nil, :placeholder => "hello@lockitron.com", :required => "required", :id => "email" %>
<%= hidden_field_tag "preorder", true %>
<%= hidden_field_tag "quantity", params[:quantity] %>
<%= submit_tag "Checkout", :class => "blue_button disabled", :id => "amazon_button" %>
</div>
</div>
</div>
<% end %>
</div>
<%= render 'preorder/checkout/sidebar' %>