From f0dee379a8c4053566ccb5df1f889a57b6709319 Mon Sep 17 00:00:00 2001 From: Zack Siri Date: Tue, 21 Jun 2016 01:14:44 +0700 Subject: [PATCH 1/2] clean up checkout address page --- .../stylesheets/spree/frontend/base.sass | 26 +++++++ app/helpers/spree/base_helper_decorator.rb | 11 +++ .../spree/checkout_helper_decorator.rb | 25 +++++++ app/views/spree/address/_form.html.erb | 75 +++++++++++++++++++ app/views/spree/checkout/_address.html.erb | 45 +++++++++++ app/views/spree/checkout/_summary.html.erb | 72 ++++++++++++++++++ app/views/spree/checkout/edit.html.erb | 23 +++--- .../spree/checkout/registration.html.erb | 2 +- app/views/spree/shared/_footer.html.erb | 3 +- 9 files changed, 271 insertions(+), 11 deletions(-) create mode 100644 app/helpers/spree/checkout_helper_decorator.rb create mode 100644 app/views/spree/address/_form.html.erb create mode 100644 app/views/spree/checkout/_address.html.erb create mode 100644 app/views/spree/checkout/_summary.html.erb diff --git a/app/assets/stylesheets/spree/frontend/base.sass b/app/assets/stylesheets/spree/frontend/base.sass index 318e748..e641186 100644 --- a/app/assets/stylesheets/spree/frontend/base.sass +++ b/app/assets/stylesheets/spree/frontend/base.sass @@ -5,3 +5,29 @@ a footer.footer > div padding: 20px 0px 20px 0px + +// Flash +.alert-error + background-color: #f2dede + border-color: #eed3d7 + color: #b94a48 + text-align: left + +.alert-alert + background-color: #f2dede + border-color: #eed3d7 + color: #b94a48 + text-align: left + + +.alert-success + background-color: #dff0d8 + border-color: #d6e9c6 + color: #468847 + text-align: left + +.alert-notice + background-color: #dff0d8 + border-color: #d6e9c6 + color: #468847 + text-align: left diff --git a/app/helpers/spree/base_helper_decorator.rb b/app/helpers/spree/base_helper_decorator.rb index 4a4afb4..5cac2ec 100644 --- a/app/helpers/spree/base_helper_decorator.rb +++ b/app/helpers/spree/base_helper_decorator.rb @@ -7,6 +7,17 @@ def layout_partial end end + def flash_messages(opts = {}) + ignore_types = ["order_completed"].concat(Array(opts[:ignore_types]).map(&:to_s) || []) + + flash.each do |msg_type, text| + unless ignore_types.include?(msg_type) + concat(content_tag :div, text, class: "flash alert alert-#{msg_type}") + end + end + nil + end + def logo(image_path=Spree::Config[:logo], img_options: {}, link_options: {}) link_to image_tag(image_path, img_options), spree.root_path, link_options end diff --git a/app/helpers/spree/checkout_helper_decorator.rb b/app/helpers/spree/checkout_helper_decorator.rb new file mode 100644 index 0000000..410ffed --- /dev/null +++ b/app/helpers/spree/checkout_helper_decorator.rb @@ -0,0 +1,25 @@ +module Spree::CheckoutHelper + def checkout_progress + states = checkout_states + items = states.map do |state| + text = Spree.t("order_state.#{state}").titleize + + css_classes = [] + current_index = states.index(@order.state) + state_index = states.index(state) + + if state_index < current_index + css_classes << 'completed' + text = link_to text, checkout_state_path(state) + end + + css_classes << 'next' if state_index == current_index + 1 + css_classes << 'active' if state == @order.state + css_classes << 'first' if state_index == 0 + css_classes << 'last' if state_index == states.length - 1 + # It'd be nice to have separate classes but combining them with a dash helps out for IE6 which only sees the last class + content_tag('li', link_to(text, '#'), class: css_classes) + end + content_tag('ol', raw(items.join("\n")), class: 'progress-steps nav nav-pills nav-justified', id: "checkout-step-#{@order.state}") + end +end \ No newline at end of file diff --git a/app/views/spree/address/_form.html.erb b/app/views/spree/address/_form.html.erb new file mode 100644 index 0000000..a4e0e1a --- /dev/null +++ b/app/views/spree/address/_form.html.erb @@ -0,0 +1,75 @@ +<% address_id = address_type.chars.first %> +
> +
> + <%= form.label :firstname, Spree.t(:first_name) %>* + <%= form.text_field :firstname, :class => 'required form-control' %> +
+
> + <%= form.label :lastname, Spree.t(:last_name) %>* + <%= form.text_field :lastname, :class => 'required form-control' %> +
+ <% if Spree::Config[:company] %> +
> + <%= form.label :company, Spree.t(:company) %> + <%= form.text_field :company, class: 'form-control' %> +
+ <% end %> +
> + <%= form.label :address1, Spree.t(:street_address) %>* + <%= form.text_field :address1, :class => 'required form-control' %> +
+
> + <%= form.label :address2, Spree.t(:street_address_2) %> + <%= form.text_field :address2, class: 'form-control' %> +
+
> + <%= form.label :city, Spree.t(:city) %>* + <%= form.text_field :city, :class => 'required form-control' %> +
+
> + <%= form.label :country_id, Spree.t(:country) %>* + > + <%= form.collection_select :country_id, available_countries, :id, :name, {}, {:class => 'required form-control'} %> + +
+ + <% if Spree::Config[:address_requires_state] %> +
> + <% have_states = !address.country.states.empty? %> + <%= form.label :state, Spree.t(:state) %>>* + + <% state_elements = [ + form.collection_select(:state_id, address.country.states, + :id, :name, + {:include_blank => true}, + {:class => have_states ? 'required form-control' : 'hidden', + :disabled => !have_states}) + + form.text_field(:state_name, + :class => !have_states ? 'required form-control' : 'hidden', + :disabled => have_states) + ].join.gsub('"', "'").gsub("\n", "") + %> + <%= javascript_tag do -%> + $('#<%="#{address_id}state" %>').append("<%== state_elements %>"); + <% end %> +
+ + <% end %> + +
> + <%= form.label :zipcode, Spree.t(:zip) %><% if address.require_zipcode? %>*<% end %> + <%= form.text_field :zipcode, :class => "#{'required' if address.require_zipcode?} form-control" %> +
+
> + <%= form.label :phone, Spree.t(:phone) %><% if address.require_phone? %>*<% end %> + <%= form.phone_field :phone, :class => "#{'required' if address.require_phone?} form-control" %> +
+ <% if Spree::Config[:alternative_shipping_phone] %> +
> + <%= form.label :alternative_phone, Spree.t(:alternative_phone) %> + <%= form.phone_field :alternative_phone, class: 'form-control' %> +
+ <% end %> +
\ No newline at end of file diff --git a/app/views/spree/checkout/_address.html.erb b/app/views/spree/checkout/_address.html.erb new file mode 100644 index 0000000..92a52d9 --- /dev/null +++ b/app/views/spree/checkout/_address.html.erb @@ -0,0 +1,45 @@ +
+
+
+ <%= form.fields_for :bill_address do |bill_form| %> + <%= Spree.t(:billing_address) %> + <%= render :partial => 'spree/address/form', :locals => { :form => bill_form, :address_type => 'billing', :address => @order.bill_address } %> +
+ <%= label_tag :order_use_billing, :id => 'use_billing' do %> + <%= check_box_tag 'order[use_billing]', '1', @order.shipping_eq_billing_address? %> + <%= Spree.t(:use_as_shipping_address) %> + <% end %> +
+ <% end %> +
+
+ +
+
+ <%= form.fields_for :ship_address do |ship_form| %> + <%= Spree.t(:shipping_address) %> + <%= render :partial => 'spree/address/form', :locals => { :form => ship_form, :address_type => 'shipping', :address => @order.ship_address } %> + <% end %> +
+
+
+
+
+
+
+
+ <% if try_spree_current_user %> +
+ <%= label_tag :save_user_address do %> + <%= check_box_tag 'save_user_address', '1', try_spree_current_user.respond_to?(:persist_order_address) %> + <%= Spree.t(:save_my_address) %> + <% end %> +
+ <% end %> +
+
+ <%= submit_tag Spree.t(:save_and_continue), :class => 'continue btn btn-success btn-block' %> +
+
+
+
\ No newline at end of file diff --git a/app/views/spree/checkout/_summary.html.erb b/app/views/spree/checkout/_summary.html.erb new file mode 100644 index 0000000..f24c84c --- /dev/null +++ b/app/views/spree/checkout/_summary.html.erb @@ -0,0 +1,72 @@ +

<%= Spree.t(:order_summary) %>

+ + + + + + + + + <% if order.line_item_adjustments.nonzero.exists? %> + + <% order.line_item_adjustments.nonzero.promotion.eligible.group_by(&:label).each do |label, adjustments| %> + + + + + <% end %> + + <% end %> + + + <% order.all_adjustments.nonzero.tax.eligible.group_by(&:label).each do |label, adjustments| %> + + + + + <% end %> + + + <% if order.passed_checkout_step?("delivery") && order.shipments.any? %> + + + + + + <% if order.shipment_adjustments.nonzero.exists? %> + + <% order.shipment_adjustments.nonzero.promotion.eligible.group_by(&:label).each do |label, adjustments| %> + + + + + <% end %> + + <% end %> + <% end %> + + <% if order.adjustments.nonzero.eligible.exists? %> + + <% order.adjustments.nonzero.eligible.each do |adjustment| %> + <% next if (adjustment.source_type == 'Spree::TaxRate') and (adjustment.amount == 0) %> + + + + + <% end %> + + <% end %> + + <% if order.total_applicable_store_credit > 0.0 %> + + + + + <% end %> + + + + + + +
<%= Spree.t(:item_total) %>:<%= order.display_item_total.to_html %>
<%= label %><%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %>
<%= label %><%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %>
<%= Spree.t(:shipping_total) %>:<%= Spree::Money.new(order.shipments.to_a.sum(&:cost), currency: order.currency).to_html %>
<%= label %>:<%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %>
<%= adjustment.label %>:<%= adjustment.display_amount.to_html %>
<%= Spree.t("store_credit.store_credit") %>:<%= order.display_total_applicable_store_credit.to_html %>
<%= Spree.t(:order_total) %>:<%= order.display_order_total_after_store_credit.to_html %>
\ No newline at end of file diff --git a/app/views/spree/checkout/edit.html.erb b/app/views/spree/checkout/edit.html.erb index 5d041c7..a32f90c 100644 --- a/app/views/spree/checkout/edit.html.erb +++ b/app/views/spree/checkout/edit.html.erb @@ -2,24 +2,29 @@ <%= render :partial => 'spree/shared/error_messages', :locals => { :target => @order } %>
-

<%= Spree.t(:checkout) %>

-
<%= checkout_progress %>
+
+

<%= Spree.t(:checkout) %>

+
+ <%= checkout_progress %> +
+
- +
-
+
<%= form_for @order, :url => update_checkout_path(@order.state), :html => { :id => "checkout_form_#{@order.state}" } do |form| %> <% if @order.state == 'address' || !@order.email? %> -

- <%= form.label :email %>
- <%= form.text_field :email %> -

+
+ <%= form.label :email %> + <%= form.text_field :email, class: 'form-control' %> +
<% end %> +
<%= render @order.state, :form => form %> <% end %>
<% if @order.state != 'confirm' %> -
+
<%= render :partial => 'summary', :locals => { :order => @order } %>
<% end %> diff --git a/app/views/spree/checkout/registration.html.erb b/app/views/spree/checkout/registration.html.erb index 8d880c2..38f4b9f 100644 --- a/app/views/spree/checkout/registration.html.erb +++ b/app/views/spree/checkout/registration.html.erb @@ -20,7 +20,7 @@ <%= Spree.t(:guest_user_account) %>
<% if flash[:registration_error] %> -
<%= flash[:registration_error] %>
+
<%= flash[:registration_error] %>
<% end %> <%= form_for @order, :url => update_checkout_registration_path, :method => :put, :html => { :id => 'checkout_form_registration' } do |f| %>
diff --git a/app/views/spree/shared/_footer.html.erb b/app/views/spree/shared/_footer.html.erb index 7e2f897..b350ced 100644 --- a/app/views/spree/shared/_footer.html.erb +++ b/app/views/spree/shared/_footer.html.erb @@ -1,7 +1,8 @@