User Guide - Customizing the SpreeCommerce

User guide customizing the spreecommerce

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

1. HOW TO SET UP SPREECOMMERCE:

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.

2. LAYOUT CUSTOMIZATION:

There are two ways you can edit spreecommerce 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,
  1. First of all, make a new directory:
  2. mkdir app/overrides
  3. 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