WIP checkout page and order confirmation page. Working on making these pages more consistent to each other, to email confirmation, and to shopping experience.

2026-01-24 20:36:49 +00:00 · 2015-03-10 11:35:53 +11:00
parent c7cf9695bc
commit a8de4dc039
4 changed files with 87 additions and 75 deletions
--- a/app/views/spree/orders/_form.html.haml
+++ b/app/views/spree/orders/_form.html.haml
@@ -3,8 +3,7 @@
 .row
  .columns.large-12
    %table#cart-detail{"data-hook" => ""}
-      / %col{halign: "center", valign: "middle", width: "30%"}/
-      %col{halign: "left", valign: "middle"}/
+      %col{halign: "left", valign: "middle", width: "60%"}/
      %col{halign: "left", valign: "middle", width: "15%"}/
      %col{halign: "center", valign: "middle", width: "10%"}/
      %col{halign: "center", valign: "middle", width: "10%"}/
@@ -12,8 +11,8 @@
      %thead
        %tr{"data-hook" => "cart_items_headers"}
          %th.cart-item-description-header= t(:item)
-          %th.cart-item-price-header= t(:price)
-          %th.cart-item-quantity-header= t(:qty)
+          %th.cart-item-price-header.text-right= t(:price)
+          %th.text-center.cart-item-quantity-header= t(:qty)
          %th.cart-item-total-header.text-right= t(:total)
          %th.cart-item-delete-header

--- a/app/views/spree/orders/_line_item.html.haml
+++ b/app/views/spree/orders/_line_item.html.haml
@@ -1,5 +1,6 @@
 %tr.line-item{class: "variant-#{variant.id}"}
  
+  / removed image thumbnail on shopping cart & checkout to simplify
  / %td.cart-item-image{"data-hook" => "cart_item_image"}
  /   - if variant.images.length == 0
  /     = link_to small_image(variant.product), variant.product
@@ -7,7 +8,13 @@
  /     = link_to image_tag(variant.images.first.attachment.url(:small)), variant.product

  %td.cart-item-description{'data-hook' => "cart_item_description"}
-    / %h4= variant.product.name
+
+    %div.item-thumb-image{"data-hook" => "cart_item_image"}
+      - if variant.images.length == 0
+        = link_to mini_image(variant.product), variant.product
+      - else
+        = link_to image_tag(variant.images.first.attachment.url(:mini)), variant.product
+
    - if variant.product.name == variant.name_to_display
      %h5
        %span= variant.product.name
@@ -23,14 +30,14 @@
        = variant.in_stock? ? t(:insufficient_stock, :on_hand => variant.on_hand) : t(:out_of_stock)
        %br/

-  %td.cart-item-price{"data-hook" => "cart_item_price"}
+  %td.text-right.cart-item-price{"data-hook" => "cart_item_price"}
    = line_item.single_display_amount_with_adjustments.to_html
    -# Now in a template in app/assets/javascripts/templates !
    %price-breakdown{"price-breakdown" => "_", variant: "variant", 
      "price-breakdown-append-to-body" => "true",
      "price-breakdown-placement" => "left",
      "price-breakdown-animation" => true}
-  %td.cart-item-quantity{"data-hook" => "cart_item_quantity"}
+  %td.text-center.cart-item-quantity{"data-hook" => "cart_item_quantity"}
    = item_form.number_field :quantity, :min => 0, :class => "line_item_quantity", :size => 5
  %td.cart-item-total.text-right{"data-hook" => "cart_item_total"}
    = line_item.display_amount_with_adjustments.to_html unless line_item.quantity.nil?
--- a/app/views/spree/orders/show.html.haml
+++ b/app/views/spree/orders/show.html.haml
@@ -24,7 +24,9 @@

      = render :partial => 'spree/shared/order_details', :locals => { :order => @order }

-      = link_to t(:back_to_store), main_app.shop_path, :class => "button"
-      - unless params.has_key? :checkout_complete
-        - if try_spree_current_user && respond_to?(:spree_account_path)
-          = link_to t(:my_account), spree_account_path, :class => "button"
+      .row
+        .columns.large-12
+          = link_to t(:back_to_store), main_app.shop_path, :class => "button"
+          - unless params.has_key? :checkout_complete
+            - if try_spree_current_user && respond_to?(:spree_account_path)
+              = link_to t(:my_account), spree_account_path, :class => "button"
--- a/app/views/spree/shared/_order_details.html.haml
+++ b/app/views/spree/shared/_order_details.html.haml
@@ -73,72 +73,76 @@
  
      
 %br
-%table#line-items{"data-hook" => "order_details"}
-  %col{halign: "center", valign: "middle", width: "15%"}/
-  %col{valign: "middle", width: "70%"}/
-  %col{halign: "center", valign: "middle", width: "5%"}/
-  %col{halign: "center", valign: "middle", width: "5%"}/
-  %col{halign: "center", valign: "middle", width: "5%"}/
-  %thead{"data-hook" => ""}
-    %tr{"data-hook" => "order_details_line_items_headers"}
-      %th{colspan: "2"}= t(:item)
-      %th.price= t(:price)
-      %th.qty= t(:qty)
-      %th.total
-        %span= t(:total)
-  %tbody{"data-hook" => ""}
-    - @order.line_items.each do |item|
-      %tr{"data-hook" => "order_details_line_item_row"}
-        %td{"data-hook" => "order_item_image"}
-          - if item.variant.images.length == 0
-            = link_to small_image(item.variant.product), item.variant.product
-          - else
-            = link_to image_tag(item.variant.images.first.attachment.url(:small)), item.variant.product
-        %td(data-hook = "order_item_description")
-          - if item.variant.product.name == item.variant.name_to_display
-            %h5= item.variant.product.name
-          - else
-            %h5
-              %span= item.variant.product.name
-              %span= "- " + item.variant.name_to_display
-          %p= "(" + variant_options(item.variant) + ")" unless item.variant.option_values.empty?
-        %td.price{"data-hook" => "order_item_price"}
-          %span= item.single_display_amount_with_adjustments.to_html
-        %td{"data-hook" => "order_item_qty"}= item.quantity
-        %td.total{"data-hook" => "order_item_total"}
-          %span= item.display_amount_with_adjustments.to_html
+.row
+  .columns.large-12
+    %table#line-items{"data-hook" => "order_details"}
+      %col{valign: "middle"}/
+      %col{halign: "center", valign: "middle", width: "5%"}/
+      %col{halign: "center", valign: "middle", width: "5%"}/
+      %col{halign: "center", valign: "middle", width: "5%"}/
+      %thead{"data-hook" => ""}
+        %tr{"data-hook" => "order_details_line_items_headers"}
+          %th= t(:item)
+          %th.price= t(:price)
+          %th.text-center.qty= t(:qty)
+          %th.text-right.total
+            %span= t(:total)
+      %tbody{"data-hook" => ""}
+        - @order.line_items.each do |item|
+          %tr{"data-hook" => "order_details_line_item_row"}
+            %td(data-hook = "order_item_description")

-  %tfoot#order-total{"data-hook" => "order_details_total"}
-    %tr.total
-      %td{colspan: "4"}
-        %b
-          = t(:order_total)
-          \:
-      %td.total
-        %span#order_total= @order.display_total.to_html
+              %div.item-thumb-image 
+                placeholder
+                

-  - if order.price_adjustment_totals.present?
-    %tfoot#price-adjustments{"data-hook" => "order_details_price_adjustments"}
-      - @order.price_adjustment_totals.each do |key, total|
+              - if item.variant.product.name == item.variant.name_to_display
+                %h5
+                  %span= item.variant.product.name
+                  %span.text-small.text-skinny=  "(" + variant_options(item.variant) + ")" unless item.variant.option_values.empty?
+              - else
+                %h5
+                  %span= item.variant.product.name
+                  %span= "- " + item.variant.name_to_display
+                  %span.text-small.text-skinny=  "(" + variant_options(item.variant) + ")" unless item.variant.option_values.empty?
+             
+            %td.text-right.price{"data-hook" => "order_item_price"}
+              %span= item.single_display_amount_with_adjustments.to_html
+            %td.text-center{"data-hook" => "order_item_qty"}= item.quantity
+            %td.text-right.total{"data-hook" => "order_item_total"}
+              %span= item.display_amount_with_adjustments.to_html
+
+      %tfoot#order-total{"data-hook" => "order_details_total"}
        %tr.total
-          %td{colspan: "4"}
+          %td.text-right{colspan: "3"}
+            %h5
+              Total
+          %td.text-right.total
+            %h5#order_total= @order.display_total.to_html
+
+      - if order.price_adjustment_totals.present?
+        %tfoot#price-adjustments{"data-hook" => "order_details_price_adjustments"}
+          - @order.price_adjustment_totals.each do |key, total|
+            %tr.total
+              %td.text-right{colspan: "3"}
+                %strong
+                  = key
+              %td.text-right.total
+                %span= total
+
+      %tfoot#subtotal{"data-hook" => "order_details_subtotal"}
+        %tr#subtotal-row.total
+          %td.text-right{colspan: "3"}
            %strong
-              = key
-              \:
-          %td.total
-            %span= total
+              Produce
+          %td.text-right.total
+            %span= display_checkout_subtotal(@order)

-  %tfoot#subtotal{"data-hook" => "order_details_subtotal"}
-    %tr#subtotal-row.total
-      %td{colspan: "4"}
-        Produce:
-      %td.total
-        %span= display_checkout_subtotal(@order)
-
-  %tfoot#order-charges{"data-hook" => "order_details_adjustments"}
-    - checkout_adjustments_for(@order, exclude: [:line_item]).reject{ |a| a.amount == 0 }.reverse_each do |adjustment|
-      %tr.total
-        %td{:colspan => "4"}
-          = adjustment.label + ":"
-        %td.total
-          %span= adjustment.display_amount.to_html
+      %tfoot#order-charges{"data-hook" => "order_details_adjustments"}
+        - checkout_adjustments_for(@order, exclude: [:line_item]).reject{ |a| a.amount == 0 }.reverse_each do |adjustment|
+          %tr.total
+            %td.text-right{:colspan => "3"}
+              %strong
+                = adjustment.label
+            %td.text-right.total
+              %span= adjustment.display_amount.to_html