From a8de4dc039fb89995a1679d0bc3d592b5f05bb46 Mon Sep 17 00:00:00 2001 From: summerscope Date: Tue, 10 Mar 2015 11:35:53 +1100 Subject: [PATCH] WIP checkout page and order confirmation page. Working on making these pages more consistent to each other, to email confirmation, and to shopping experience. --- app/views/spree/orders/_form.html.haml | 7 +- app/views/spree/orders/_line_item.html.haml | 13 +- app/views/spree/orders/show.html.haml | 10 +- .../spree/shared/_order_details.html.haml | 132 +++++++++--------- 4 files changed, 87 insertions(+), 75 deletions(-) diff --git a/app/views/spree/orders/_form.html.haml b/app/views/spree/orders/_form.html.haml index f0edc75221..6d43e97a92 100644 --- 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 diff --git a/app/views/spree/orders/_line_item.html.haml b/app/views/spree/orders/_line_item.html.haml index 23af2320b8..53eb254812 100644 --- 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? diff --git a/app/views/spree/orders/show.html.haml b/app/views/spree/orders/show.html.haml index f47a3c2d36..0f8174240f 100644 --- 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" diff --git a/app/views/spree/shared/_order_details.html.haml b/app/views/spree/shared/_order_details.html.haml index c66f8d9a92..d0175c830c 100644 --- 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