Customizing the SpreeCommerce

User guide customizing the spreecommerce
SpreeCommerce
RubyOnRails

Introduction

Spree commerce is an open source commerce site that offers a bundle of innovative and valuable features. To help you use this wonderful source efficiently, here we  give you simple steps  to guide you:
  1. How to set up SpreeCommerce
  2. Layout customization
  3. Checkout process customization

Setup Spree

Setting up spreecommerce is very easy. To do that you require Rails(~> 4.2.6)

Rails (~> 4.2.6)

Once you have installed Rails, you need to add the following lines to your gem file:
gem 'spree', '~> 3.1.0.rc1'
gem 'spree_auth_devise', '~> 3.1.0.rc1'
gem 'spree_gateway', '~> 3.1.0.rc1'
once, you have added the above-given lines, run 'bundle install' and later use the default generator to set up Spree
rails g spree:install –user_class=Spree::User
rails g spree:auth:install
rails g spree_gateway:install
This is all. You now have Spreecommerce installed on your machine. Give it a test run.

LAYOUT CUSTOMIZATION

There are two ways you can edit spree commerce layout:
  • Deface
  • Customization by downloading required file

Deface

Deface let you to customize erb templates without downloading that file. It allows you to use CSS3 style selectors to target any element.To deface,
First of all, make a new directory:
mkdir app/overrides
Create a new file with some meaningful name in this directory and add code like below
Deface::Override.new(
 :virtual_path => #{path_to_your_desired_file},
 :name => 'change view',
 :replace => “[data-hook=#{data_hook_name}]”,
 :text => “Add your own HTML here”
 )
* data-hook is like an id in html which let you select the div you want to change.


There are following actions available for Deface.
 :remove- Removes all elements that match the supplied selector
 :replace- Replaces all elements that match the supplied selector, with the content supplied
 :replace_contents- Replaces the contents of all elements that match the supplied selector
 :surround- Surrounds all elements that match the supplied selector, expects replacement markup to contain <%= render_original %> placeholder
 :surround_contents- Surrounds the contents of all elements that match the supplied selector, expects replacement markup to contain <%= render_original %> placeholder
 :insert_after- Inserts after all elements that match the supplied selector
 :insert_before- Inserts before all elements that match the supplied selector
 :insert_top- Inserts inside all elements that match the supplied selector, as the first child
 :insert_bottom- Inserts inside all elements that match the supplied selector, as the last child
 :set_attributes- Sets attributes on all elements that match the supplied selector, replacing existing attribute value if present or adding if not. Expects :attributes option to be passed.
 :add_to_attributes- Appends value to attributes on all elements that match the supplied selector, adds attribute if not present. Expects :attributes option to be passed.
 :remove_from_attributes- Removes value from attributes on all elements that match the supplied selector. Expects :attributes option to be passed.

- Customization By Downloading Required File:

There is another way to customize spreecommerce layout i.e. through downloading frontend/app/views/spree folder to your project's app/views.
For admin panel download backend/app/views/spree/admin folder to your project's app/views/spree.

For layout files download frontend/app/views/spree/layouts/spree_application.html.erb and backend/app/views/spree/layouts/admin.html.erb to your project's app/views/spree/layouts.

Then modify the files as per your requirements of your project.

* Take note that the downloaded files include many lines of code in gem which will not be in use.

3.  CHECKOUT CUSTOMIZATION FOR CASH ON DELIVERY AND FREE SHIPMENT:

Add new file order_decorator.rb in app/models/spree/ and write following code to this file

checkout_flow do
  go_to_state :address
  #go_to_state :delivery
  #go_to_state :payment, :if => lambda { |order| order.payment_required? }
  #go_to_state :confirm, :if => lambda { |order| order.confirmation_required? }
  go_to_state :complete
  #remove_transition :from => :delivery, :to => :confirm
end

Since we want to implement the cash on delivery, I have commented out payment, confirm and  remove_transition processes from code and for free delivery, the delivery process is commented.

Thank You 

SpreeCommerce
RubyOnRails