spree_frontend 2.4.10 → 3.0.0.rc1

data/app/views/spree/orders/show.html.erb

@@ -1,20 +1,25 @@
+<% content_for :google_analytics do %>
+  <% if order_just_completed?(@order) %>
+    <%= render partial: 'spree/shared/google_purchase.js', locals: { order: @order } %>
+  <% end %>
+<% end %>
 <fieldset id="order_summary" data-hook>
-  <legend><%= Spree.t(:order_number, :number => @order.number) %></legend>
+  <legend><%= Spree.t(:order_number, number: @order.number) %></legend>
   <h1><%= accurate_title %></h1>
   <% if order_just_completed?(@order) %>
     <strong><%= Spree.t(:thank_you_for_your_order) %></strong>
   <% end %>
 
   <div id="order" data-hook>
-    <%= render :partial => 'spree/shared/order_details', :locals => { :order => @order } %>
+    <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>
 
     <br class="clear" />
 
     <p data-hook="links">
-      <%= link_to Spree.t(:back_to_store), spree.root_path, :class => "button" %>
+      <%= link_to Spree.t(:back_to_store), spree.root_path, class: "button" %>
       <% unless order_just_completed?(@order) %>
         <% if try_spree_current_user && respond_to?(:spree_account_path) %>
-          <%= link_to Spree.t(:my_account), spree_account_path, :class => "button" %>
+          <%= link_to Spree.t(:my_account), spree_account_path, class: "button" %>
         <% end %>
       <% end %>
     </p>

data/app/views/spree/products/_cart_form.html.erb

@@ -1,10 +1,10 @@
 <%= form_for :order, :url => populate_orders_path do |f| %>
-  <div id="inside-product-cart-form" data-hook="inside_product_cart_form" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+  <div class="row" id="inside-product-cart-form" data-hook="inside_product_cart_form" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
 
     <% if @product.variants_and_option_values(current_currency).any? %>
-      <div id="product-variants" class="columns five alpha">
-        <h6 class="product-section-title"><%= Spree.t(:variants) %></h6>
-        <ul>
+      <div id="product-variants" class="col-md-6">
+        <h3 class="product-section-title"><%= Spree.t(:variants) %></h3>
+        <ul class="list-group">
           <% @product.variants_and_option_values(current_currency).each_with_index do |variant, index| %>
             <li>
               <%= radio_button_tag "variant_id", variant.id, index == 0, 'data-price' => variant.price_in(current_currency).money  %>
@@ -15,7 +15,6 @@
                 <% if variant_price variant %>
                   <span class="price diff"><%= variant_price variant %></span>
                 <% end %>
-
                 <% unless variant.can_supply? %>
                   <span class="out-of-stock"><%= Spree.t(:out_of_stock) %></span>
                 <% end %>
@@ -29,12 +28,12 @@
     <% end %>
 
     <% if @product.price_in(current_currency) and !@product.price.nil? %>
-      <div data-hook="product_price" class="columns five <% if !@product.has_variants? %> alpha <% else %> omega <% end %>">
+      <div data-hook="product_price" class="col-md-5">
 
         <div id="product-price">
           <h6 class="product-section-title"><%= Spree.t(:price) %></h6>
           <div>
-            <span class="price selling" itemprop="price">
+            <span class="lead price selling" itemprop="price">
               <%= display_price(@product) %>
             </span>
             <span itemprop="priceCurrency" content="<%= @product.currency %>"></span>
@@ -49,10 +48,15 @@
         </div>
 
         <div class="add-to-cart">
-          <%= number_field_tag :quantity, 1, :class => 'title', :min => 1 %>
-          <%= button_tag :class => 'large primary', :id => 'add-to-cart-button', :type => :submit do %>
-            <%= Spree.t(:add_to_cart) %>
-          <% end %>
+          <br/>
+          <div class="input-group">
+            <%= number_field_tag :quantity, 1, :class => 'title form-control', :min => 1 %>
+            <span class="input-group-btn">
+              <%= button_tag :class => 'btn btn-success', :id => 'add-to-cart-button', :type => :submit do %>
+                <%= Spree.t(:add_to_cart) %>
+              <% end %>
+            </span>
+          </div>
         </div>
       </div>
     <% else %>

data/app/views/spree/products/_promotions.html.erb

@@ -3,7 +3,7 @@
   <div id="promotions">
     <h3><%= Spree.t(:promotions) %></h3>
     <% promotions.each do |promotion| %>
-    <div>
+    <div class="well well-sm">
       <h4><%= promotion.name %></h4>
       <p><%= promotion.description %></p>
       <% if promotion.products.any? %>

data/app/views/spree/products/_properties.html.erb

@@ -1,6 +1,6 @@
 <% unless @product_properties.empty? %>  
-  <h6 class="product-section-title"><%= Spree.t('properties')%></h6>
-  <table id="product-properties" class="table-display" data-hook>
+  <h3 class="product-section-title"><%= Spree.t('properties')%></h3>
+  <table id="product-properties" class="table table-striped" data-hook>
     <tbody>
       <% @product_properties.each do |product_property| %>
         <% css_class = cycle('even', 'odd', :name => "properties") %>

data/app/views/spree/products/_taxons.html.erb

@@ -1,11 +1,11 @@
 <% if !@product.taxons.blank? %>
-  <div id="taxon-crumbs" data-hook class="alpha columns five omega">
-    <h6 class="product-section-title"><%= Spree.t(:look_for_similar_items) %></h6>
+  <div id="taxon-crumbs" data-hook class=" five ">
+    <h3 class="product-section-title"><%= Spree.t(:look_for_similar_items) %></h3>
 
     <div data-hook="product_taxons">
-      <ul id="similar_items_by_taxon" data-hook>
+      <ul class="list-group" id="similar_items_by_taxon" data-hook>
       <% @product.taxons.each do |taxon| %>
-        <li><%= link_to taxon.name, seo_url(taxon) %></li>
+        <li class="list-group-item"><%= link_to taxon.name, seo_url(taxon) %></li>
       <% end %>
       </ul>
     </div>

data/app/views/spree/products/_thumbnails.html.erb

@@ -1,9 +1,9 @@
 <%# no need for thumbnails unless there is more than one image %>
 <% if (@product.images + @product.variant_images).uniq.size > 1 %>
-  <ul id="product-thumbnails" class="thumbnails inline" data-hook>
+  <ul id="product-thumbnails" class="thumbnails list-inline" data-hook>
     <% @product.images.each do |i| %>
       <li class='tmb-all tmb-<%= i.viewable.id %>'>
-        <%= link_to(image_tag(i.attachment.url(:mini)), i.attachment.url(:product)) %>
+        <%= link_to(image_tag(i.attachment.url(:mini), class: "thumbnail"), i.attachment.url(:product)) %>
       </li>
     <% end %>
 
@@ -11,7 +11,7 @@
       <% @product.variant_images.each do |i| %>
         <% next if @product.images.include?(i) %>
         <li class='vtmb tmb-<%= i.viewable.id %>'>
-          <%= link_to(image_tag(i.attachment.url(:mini)), i.attachment.url(:product)) %>
+          <%= link_to(image_tag(i.attachment.url(:mini), class: "thumbnail"), i.attachment.url(:product)) %>
         </li>
       <% end %>
     <% end %>

data/app/views/spree/products/index.html.erb

@@ -1,11 +1,13 @@
-<% content_for :sidebar do %>
-  <div data-hook="homepage_sidebar_navigation">
-    <% if "spree/products" == params[:controller] && @taxon %>
-      <%= render :partial => 'spree/shared/filters' %>
-    <% else %>
-      <%= render :partial => 'spree/shared/taxonomies' %>
-    <% end %>
-  </div>
+<% if "spree/products" == params[:controller] && @taxon || !@taxonomies.empty? %>
+  <% content_for :sidebar do %>
+    <div data-hook="homepage_sidebar_navigation">
+      <% if "spree/products" == params[:controller] && @taxon %>
+        <%= render :partial => 'spree/shared/filters' %>
+      <% else %>
+        <%= render :partial => 'spree/shared/taxonomies' %>
+      <% end %>
+    </div>
+  <% end %>
 <% end %>
 
 
@@ -22,6 +24,8 @@
 <% else %>
 
   <div data-hook="homepage_products">
-    <%= render :partial => 'spree/shared/products', :locals => { :products => @products, :taxon => @taxon } %>
+    <% cache(cache_key_for_products) do %>
+      <%= render :partial => 'spree/shared/products', :locals => { :products => @products, :taxon => @taxon } %>
+    <% end %>
   </div>
 <% end %>

data/app/views/spree/products/show.html.erb

@@ -1,13 +1,15 @@
-<% cache [I18n.locale, current_currency, @product, @product.possible_promotions] do %>
+<% @body_id = 'product-details' %>
+<% cache [I18n.locale, current_currency, @product] do %>
   <div data-hook="product_show" itemscope itemtype="http://schema.org/Product">
-    <% @body_id = 'product-details' %>
 
-    <div class="columns six alpha" data-hook="product_left_part">
-      <div class="row" data-hook="product_left_part_wrap">
+    <div class="col-md-4" data-hook="product_left_part">
+      <div data-hook="product_left_part_wrap">
 
         <div id="product-images" data-hook="product_images">
-          <div id="main-image" data-hook>
-            <%= render :partial => 'image' %>
+          <div id="main-image" class="panel panel-default" data-hook>
+            <div class="panel-body text-center">
+              <%= render :partial => 'image' %>
+            </div>
           </div>
           <div id="thumbnails" data-hook>
             <%= render :partial => 'thumbnails' %>
@@ -25,14 +27,14 @@
       </div>
     </div>
 
-    <div class="columns ten omega" data-hook="product_right_part">
-      <div class="row" data-hook="product_right_part_wrap">
+    <div class="col-md-8" data-hook="product_right_part">
+      <div data-hook="product_right_part_wrap">
 
         <div id="product-description" data-hook="product_description">
 
           <h1 class="product-title" itemprop="name"><%= @product.name %></h1>
 
-          <div itemprop="description" data-hook="description">
+          <div class="well" itemprop="description" data-hook="description">
             <%= product_description(@product) rescue Spree.t(:product_has_no_description) %>
           </div>
 

data/app/views/spree/shared/_error_messages.html.erb

@@ -0,0 +1,12 @@
+<% if target && target.errors.any? %>
+  <div id="errorExplanation" class="alert alert-danger" data-hook>
+    <h3><%= Spree.t(:errors_prohibited_this_record_from_being_saved, :count => target.errors.count) %>:</h3>
+    <p><%= Spree.t(:there_were_problems_with_the_following_fields) %>:</p>
+     <ul>
+     <% target.errors.full_messages.each do |msg| %>
+       <li><%= msg %></li>
+     <% end %>
+     </ul>
+     <br/>
+  </div>
+<% end %>

data/app/views/spree/shared/_filters.html.erb

@@ -6,11 +6,11 @@
       <% labels = filter[:labels] || filter[:conds].map {|m,c| [m,m]} %>
       <% next if labels.empty? %>
       <div class="navigation" data-hook="navigation">
-        <h6 class="filter-title"> <%= filter[:name] %> </h6>
-        <ul class="filter_choices">
+        <h4 class="filter-title"> <%= filter[:name] %> </h4>
+        <ul class="list-group">
           <% labels.each do |nm,val| %>
             <% label = "#{filter[:name]}_#{nm}".gsub(/\s+/,'_') %>
-            <li class="nowrap">
+            <li class="list-group-item">
               <input type="checkbox"
                      id="<%= label %>"
                      name="search[<%= filter[:scope].to_s %>][]"
@@ -22,6 +22,6 @@
         </ul>
       </div>
     <% end %>
-    <%= submit_tag Spree.t(:search), :name => nil %>
+    <%= submit_tag Spree.t(:search), :name => nil, :class => 'btn btn-primary' %>
   <% end %>
 <% end %>

data/app/views/spree/shared/_footer.html.erb

@@ -1,6 +1,10 @@
-<footer id="footer" class="sixteen columns" data-hook>
-  <div id="footer-left" class="columns alpha eight" data-hook>
-    <p><%= Spree.t :powered_by  %> <%= link_to 'Spree', 'http://spreecommerce.com/' %></p>
-  </div>
-  <div id="footer-right" class="columns omega eight" data-hook></div>
-</footer>
+<div id="spree-footer">
+	<div class="container">
+		<footer id="footer" class="row" data-hook>
+		  <div id="footer-left" class="col-md-6" data-hook>
+		    <p><%= Spree.t :powered_by  %>&nbsp;<%= link_to 'Spree', 'http://spreecommerce.com/' %></p>
+		  </div>
+		  <div id="footer-right" class="col-md-6" data-hook></div>
+		</footer>
+	</div>
+</div>

data/app/views/spree/shared/_google_add_items.js.erb

@@ -0,0 +1,11 @@
+<% order.line_items.each do |line_item| %>
+ga('ec:addProduct', {               // Provide product details in a productFieldObject.
+  'id': '<%= j (line_item.variant.sku || line_item.variant_id) %>',  // Product ID (string).
+  'name': '<%= j line_item.variant.product.name %>', // Product name (string).
+  'category': '',            // Product category (string).
+  'brand': '',                // Product brand (string).
+  'variant': '',               // Product variant (string).
+  'price': '<%= line_item.price %>',
+  'quantity': <%= line_item.quantity %>
+});
+<% end %>

data/app/views/spree/shared/_google_analytics.js.erb

@@ -0,0 +1,13 @@
+<% if tracker = Spree::Tracker.current %>
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', '<%= tracker.analytics_id %>', 'auto');
+    ga('require', 'displayfeatures');
+    <%= yield :google_analytics %>
+    ga('send', 'pageview');
+  </script>
+<% end %>

data/app/views/spree/shared/_google_checkout.js.erb

@@ -0,0 +1,10 @@
+<%# more info: https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce %>
+ga('require', 'ec');
+ga('set', '&cu', '<%= current_currency %>');
+
+<%= render partial: 'spree/shared/google_add_items.js', locals: { order: order } %>
+
+// Add the step number and additional info about the checkout to the action.
+ga('ec:setAction','checkout', {
+'step': <%= step_number %>
+});

data/app/views/spree/shared/_google_purchase.js.erb

@@ -0,0 +1,13 @@
+<%# more info: https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce %>
+ga('require', 'ec');
+ga('set', '&cu', '<%= current_currency %>');
+
+<%= render partial: 'spree/shared/google_add_items.js', locals: { order: order } %>
+
+ga('ec:setAction', 'purchase', { // Transaction details are provided in an actionFieldObject.
+  'id': '<%= j order.number %>', // Transaction ID. Required.
+  'affiliation': '<%= current_store.name %>', // Affiliation (string).
+  'revenue': '<%= order.total %>',   // Revenue (currency).
+  'tax': '<%= @order.tax_total %>',   // Tax.
+  'shipping': '<%= @order.ship_total %>' // Shipping.
+});

data/app/views/spree/shared/_head.html.erb

@@ -5,7 +5,7 @@
 <%== meta_data_tags %>
 <%= canonical_tag(current_store.url) %>
 <%= favicon_link_tag 'favicon.ico' %>
-<%= stylesheet_link_tag 'spree/frontend/all', :media => 'screen' %>
+<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen' %>
 <%= csrf_meta_tags %>
 <%= javascript_include_tag 'spree/frontend/all' %>
 <!--[if lt IE 9]>

data/app/views/spree/shared/_header.html.erb

@@ -1,5 +1,17 @@
-<header id="header" class="row" data-hook>
-  <figure id="logo" class="columns six" data-hook><%= logo %></figure>
-  <%= render :partial => 'spree/shared/nav_bar' %>
-  <%= render :partial => 'spree/shared/main_nav_bar' if store_menu? %>
-</header>
+<div id="spree-header">
+
+  <header id="header" data-hook>
+    <div class="container">
+      <div class="row">
+        <figure id="logo" class="col-md-4" data-hook>
+          <%= logo %>
+        </figure>
+        <%= render :partial => 'spree/shared/nav_bar' %>
+      </div>
+    </div>
+  </header>
+  <div class="container">
+    <%= render :partial => 'spree/shared/main_nav_bar' if store_menu? %>
+  </div>
+
+</div>

data/app/views/spree/shared/_login.html.erb

@@ -0,0 +1,19 @@
+<%= form_for Spree::User.new, :as => :spree_user, :url => spree.create_new_session_path do |f| %>
+  <fieldset id="password-credentials">
+    <div class="form-group">
+      <%= f.email_field :email, :class => 'form-control', :tabindex => 1, :placeholder => Spree.t(:email) %>
+    </div>
+    <div class="form-group">
+      <%= f.password_field :password, :class => 'form-control', :tabindex => 2, :placeholder => Spree.t(:password) %>
+    </div>
+    <div class="checkbox">
+      <label>
+        <%= f.check_box :remember_me %>
+        <%= f.label :remember_me, Spree.t(:remember_me) %>
+      </label>
+    </div>
+    <div class="form-group">
+      <%= f.submit Spree.t(:login), :class => 'btn btn-lg btn-success btn-block', :tabindex => 3 %>
+    </div>
+  </fieldset>
+<% end %>

data/app/views/spree/shared/_login_bar.html.erb

@@ -0,0 +1,6 @@
+<% if spree_current_user %>
+  <li><%= link_to Spree.t(:my_account), spree.account_path %></li>
+  <li><%= link_to Spree.t(:logout), spree.logout_path %></li>
+<% else %>
+  <li id="link-to-login"><%= link_to Spree.t(:login), spree.login_path %></li>
+<% end %>

data/app/views/spree/shared/_main_nav_bar.html.erb

@@ -1,12 +1,16 @@
-<nav class="columns sixteen">
-  <ul id="main-nav-bar" class="inline" data-hook>
-    <li id="home-link" data-hook><%= link_to Spree.t(:home), spree.root_path %></li>
-    <li id="link-to-cart" data-hook>
-      <noscript>
-        <%= link_to Spree.t(:cart), '/cart' %>
-      </noscript>
-      &nbsp;
-    </li>
-    <script>Spree.fetch_cart()</script>
-  </ul>
+<nav class="col-md-12">
+  <div id="main-nav-bar" class="navbar">
+    <ul class="nav navbar-nav" data-hook>
+      <li id="home-link" data-hook><%= link_to Spree.t(:home), spree.root_path %></li>
+    </ul>
+    <ul class="nav navbar-nav navbar-right" data-hook>
+      <li id="link-to-cart" data-hook>
+        <noscript>
+          <%= link_to Spree.t(:cart), '/cart' %>
+        </noscript>
+        &nbsp;
+      </li>
+      <script>Spree.fetch_cart()</script>
+    </ul>
+  </div>
 </nav>

data/app/views/spree/shared/_nav_bar.html.erb

@@ -1,7 +1,8 @@
-<nav id="top-nav-bar" class="columns ten">
-  <ul id="nav-bar" class="inline" data-hook>
+<nav class="navbar col-md-8" id="top-nav-bar">
+  <ul id="nav-bar" class="nav navbar-nav navbar-right" data-hook>
     <li id="search-bar" data-hook>
       <%= render :partial => 'spree/shared/search' %>
     </li>
   </ul>
+  
 </nav>

data/app/views/spree/shared/_order_details.html.erb

@@ -2,34 +2,34 @@
 
   <% if order.has_step?("address") %>
 
-    <div class="columns alpha four" data-hook="order-bill-address">
-      <h6><%= Spree.t(:billing_address) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:address) unless order.completed? %></h6>
-      <%= render :partial => 'spree/shared/address', :locals => { :address => order.bill_address } %>
+    <div class="col-md-3" data-hook="order-bill-address">
+      <h4><%= Spree.t(:billing_address) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:address) unless order.completed? %></h4>
+      <%= render partial: 'spree/shared/address', locals: { address: order.bill_address } %>
     </div>
 
     <% if order.has_step?("delivery") %>
-      <div class="columns alpha four" data-hook="order-ship-address">
-        <h6><%= Spree.t(:shipping_address) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:address) unless order.completed? %></h6>
-        <%= render :partial => 'spree/shared/address', :locals => { :address => order.ship_address } %>
+      <div class="col-md-3" data-hook="order-ship-address">
+        <h4><%= Spree.t(:shipping_address) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:address) unless order.completed? %></h4>
+        <%= render partial: 'spree/shared/address', locals: { address: order.ship_address } %>
       </div>
 
-      <div class="columns alpha four" data-hook="order-shipment">
-        <h6><%= Spree.t(:shipments) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:delivery) unless order.completed? %></h6>
+      <div class=" col-md-3" data-hook="order-shipment">
+        <h4><%= Spree.t(:shipments) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:delivery) unless order.completed? %></h4>
         <div class="delivery">
           <% order.shipments.each do |shipment| %>
             <div>
               <i class='fa fa-truck'></i>
-              <%= Spree.t(:shipment_details, :stock_location => shipment.stock_location.name, :shipping_method => shipment.selected_shipping_rate.name) %>
+              <%= Spree.t(:shipment_details, stock_location: shipment.stock_location.name, shipping_method: shipment.selected_shipping_rate.name) %>
             </div>
           <% end %>
         </div>
-        <%= render(:partial => 'spree/shared/shipment_tracking', :locals => {:order => order}) if order.shipped? %>
+        <%= render(partial: 'spree/shared/shipment_tracking', locals: { order: order } ) if order.shipped? %>
       </div>
     <% end %>
   <% end %>
 
-  <div class="columns omega four">
-    <h6><%= Spree.t(:payment_information) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:payment) unless order.completed? %></h6>
+  <div class="col-md-3">
+    <h4><%= Spree.t(:payment_information) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:payment) unless order.completed? %></h4>
     <div class="payment-info">
       <% order.payments.valid.each do |payment| %>
         <%= render payment%><br/>
@@ -41,7 +41,7 @@
 
 <hr />
 
-<table id='line-items' class="index columns alpha omega sixteen" data-hook="order_details">
+<table id='line-items' class="table" data-hook="order_details">
   <col width="15%" valign="middle" halign="center">
   <col width="70%" valign="middle">
   <col width="5%" valign="middle" halign="center">
@@ -49,7 +49,7 @@
   <col width="5%" valign="middle" halign="center">
 
   <thead data-hook>
-    <tr data-hook="order_details_line_items_headers">
+    <tr class="active" data-hook="order_details_line_items_headers">
       <th colspan="2"><%= Spree.t(:item) %></th>
       <th class="price"><%= Spree.t(:price) %></th>
       <th class="qty"><%= Spree.t(:qty) %></th>
@@ -72,16 +72,16 @@
           <%= truncated_product_description(item.variant.product) %>
           <%= "(" + item.variant.options_text + ")" unless item.variant.option_values.empty? %>
         </td>
-        <td data-hook="order_item_price" class="price"><span><%= item.single_money.to_html %></span></td>
-        <td data-hook="order_item_qty"><%= item.quantity %></td>
-        <td data-hook="order_item_total" class="total"><span><%= item.display_amount.to_html %></span></td>
+        <td data-hook="order_item_price" class="lead text-primary price"><span><%= item.single_money.to_html %></span></td>
+        <td data-hook="order_item_qty" class="order-qty"><%= item.quantity %></td>
+        <td data-hook="order_item_total" class="lead text-primary total"><span><%= item.display_amount.to_html %></span></td>
       </tr>
     <% end %>
   </tbody>
   <tfoot id="order-total" data-hook="order_details_total">
-    <tr class="total">
-      <td colspan="4"><b><%= Spree.t(:order_total) %>:</b></td>
-      <td class="total"><span id="order_total"><%= order.display_total.to_html %></span></td>
+    <tr class="warning total">
+      <td colspan="4" align="right"><b><%= Spree.t(:order_total) %>:</b></td>
+      <td class="total"><span id="order_total" class="lead text-primary"><%= order.display_total.to_html %></span></td>
     </tr>
   </tfoot>
 
@@ -96,19 +96,19 @@
     <% if order.all_adjustments.promotion.eligible.exists? %>
       <tfoot id="price-adjustments" data-hook="order_details_price_adjustments">
         <% order.all_adjustments.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
-          <tr class="total">
-            <td colspan="4"><%= Spree.t(:promotion) %>: <strong><%= label %></strong></td>
-            <td class="total"><span><%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency) %></span></td>
-          </tr>
-        <% end %>
-      </tfoot>
+         <tr class="total">
+           <td colspan="4"><%= Spree.t(:promotion) %>: <strong><%= label %></strong></td>
+           <td class="total"><span><%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency) %></span></td>
+         </tr>
+       <% end %>
+     </tfoot>
     <% end %>
   <% end %>
 
   <tfoot id='shipment-total'>
     <% order.shipments.group_by { |s| s.selected_shipping_rate.name }.each do |name, shipments| %>
       <tr class="total" data-hook='shipment-row'>
-        <td colspan="4"><%= Spree.t(:shipping) %>: <strong><%= name %></strong></td>
+        <td colspan="4" align="right" class="text-muted"><%= Spree.t(:shipping) %>: <strong><%= name %></strong></td>
         <td class="total"><span><%= Spree::Money.new(shipments.sum(&:discounted_cost), currency: order.currency).to_html %></span></td>
       </tr>
     <% end %>
@@ -118,7 +118,7 @@
     <tfoot id="tax-adjustments" data-hook="order_details_tax_adjustments">
       <% order.all_adjustments.tax.group_by(&:label).each do |label, adjustments| %>
         <tr class="total">
-          <td colspan="4"><%= Spree.t(:tax) %>: <strong><%= label %></strong></td>
+          <td colspan="4" align="right" class="text-muted"><%= Spree.t(:tax) %>: <strong><%= label %></strong></td>
           <td class="total"><span><%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency) %></span></td>
         </tr>
       <% end %>
@@ -127,12 +127,11 @@
 
   <tfoot id="order-charges" data-hook="order_details_adjustments">
     <% order.adjustments.eligible.each do |adjustment| %>
-    <% next if (adjustment.source_type == 'Spree::TaxRate') and (adjustment.amount == 0) %>
+      <% next if (adjustment.source_type == 'Spree::TaxRate') and (adjustment.amount == 0) %>
       <tr class="total">
-        <td colspan="4"><strong><%= adjustment.label %></strong></td>
+        <td colspan="4" align="right"><strong><%= adjustment.label %></strong></td>
         <td class="total"><span><%= adjustment.display_amount.to_html %></span></td>
       </tr>
     <% end %>
   </tfoot>
-
 </table>