Spree E-Commerce Integration
Spree E-Commerce Application setup in local machine
(Spree Version 3.0.stable)
Step 1. Set up all required configuration in your console
-
Install rails version
$ gem install rails -v 4.2.2
-
Gem install bundler
$ gem install bundler
-
Install ImageMagick gem to manage images in the application
$ sudo apt-get install imagemagick
-
Now install spree through the following command.
$ gem install spree_cmd
-
Create new rails application.
$ rails_4.2.2_new <Application Name>
-
Go to application
$ cd <Application Name>
-
Use rvm version.
$ rvm use 2.2.1
-
Install all spree application dependencies with the help of the following command.
$ spree install --auto-accept
It will add spree to our rails application.
Run the application
$ rails s
You will be having one default admin for this application with the
UserName: spree@example.com
Password: spree123
-
If you want to create new admin to your application
You can create admin user in 2 ways
-
Using command through console
$ rake spree_auth:admin:create
-
And in front login with existing admin user and go to admin panel in that click user and create the admin user.
Customization of spree
Customization of spree application follows the simple steps
Here few simple features customization are shown
The spree application contains a folder called Overrides to customize the features required.
-
First to change home text name to customized paste the following piece of code in the folder Overrides/spree/change_home_text.rb
Deface::Override.new(:virtual_path => 'spree/shared/_main_nav_bar',
:replace => "li#home-link",
:text => "<li id='home-link' data-hook><%= link_to 'Home Page', spree.root_path %></li>",
:name => "chnage_home_text")
-
To change logo to your required logo
Go to config/initializers/spree.rb
spree.config do |config|
config.logo = 'logo.png'
config.admin_interface_logo = 'logo.png'
end
And paste the image logo.png in your app/assets/images folder
-
To change footer for the user panel
Go to the folder app/views/
Create a folder spree
In spree create layouts folder, inside that create a new file name as spree_application.html.erb
Inside the file paste the following piece of code
<!doctype html>
<!--[if It IE 7]> <html class="ie ie6" lang="<%= I18n.locale %>"><![endif]-->
<!--[if IE 7]> <html class="ie ie7" lang="<%= I18n.locale %>"><![endif]-->
<!--[if IE 8]> <html class="ie ie8" lang="<%= I18n.locale %>"><![endif]-->
<!--[if IE 9]> <html class="ie ie9" lang="<%= I18n.locale %>"><![endif]-->
<!--[if gt IE 9]><!--> <html lang="<%= I18n.locale %>"><![endif]-->
<head data-hook="inside_head">
<%= render partial: 'spree/shared/head'%>
</head>
<body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body">
<%= render partial: 'spree/shared/google_analystics.js' %>
<%= render partial: 'spree/shared/header' %>
<div class="container">
<div class="row" data-hook>
<%= breadcrumbs(@taxon) %>
<%= render partial: 'spree/shared/sidebar' if content_for? :sidebar %>
<div id="content" class="<%= !content_for?(:sidebar) ? "col-sm-12" : "col-sm-8 col-md-9" %>" data-hook>
<%= flash_messages %>
<%= yield %>
</div>
<%= yield :templates %>
</div>
</div>
<footer class="footer pt-80">
<hr />
<section class="copyright ptb-60">
<div class="container">
<center><p class="">
All Right Reserved
</p></center>
</div>
</section>
</footer>
</body>
</html>
Hosting spree application in Heroku server
-
In config/environment/production.rb add the following line
config.assets.initialize_on_precompile = false
-
In gem file comment sqlite3 and add the following gems to your Gemfile
gem 'rails_12factor', group: :production
group :production do
gem 'pg'
end
group :development, :test do
gem 'sqlite3'
end
$ bundle install
-
Login to your Heroku app in console with the help of command
$ heroku login
-
Create the Heroku app with the same name of your application
heroku create app_name
- Push the code to Heroku application with the help of the following command
git push heroku master
S3 Bucket Setup for Uploading Images
s3 bucket bucket setup follows the few simple steps are listed below.
Step 1: Before going to set up s3 bucket in your spree and Heroku app, you should have s3 bucket credentials.
Credentials Required
a. Bucketname
b. Access Key Id
c. Secret Access Key
Step 2: In your application go to Gemfile
Add gem 'aws-sdk', '< 2.0'
$ rake db:migrate
Step 3: Goto to config/initializers/spree.rb
Paste the following piece of code
Spree.config do |config|
attachment_config = {
s3_credentials: {
access_key_id: ENV['AWS_ACCESS_KEY_ID'],
secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
bucket: ENV['S3_BUCKET_NAME']
},
storage: :s3,
s3_headers: { "Cache-control" => "max-age=31557600"},
s3_protocol: "https",
bucket: ENV['S3_BUCKET_NAME'],
url: ":s3 domain url",
styles: {
mini: "48x48>",
small: "100x100>",
product: "240x240>",
large: "600x600>"
},
path: "/spree/:class/:id/:style/:basename.:extension",
default_url: "/spree/products/:id/:style/:basename.:extension",
default_style: "product",
}
attachment_config.each do |key, value|
Spree::Image.attachment_definitions[:attachment][key.to_sym] = value
end
end
Step 4: Login to your Heroku app
Run the following commands
$ heroku config:set S3_BUCKET_NAME=bucket_name
$ heroku config:set AWS_ACCESS_KEY_ID=access_key_id
$ heroku config AWS_SECRET_ACCESS_KEY=secret_access_key
Run the following command
$ git push heroku master
Spree Email Integration
Add the following gem to your Gemfile
gem 'spree_mail_settings', github: 'spree-contrib/spree_mail_settings', branch: '3-0-stable'
Run bundle
$ bundle install
Push to Heroku master
$ git push heroku master
Then login to your application as an admin and in that go to admin path in that select configuration in that goto Mail method Settings and add your credentials they are you will be done with email settings to your spree app
Setting Paypal Express to your Spree Application
Add the following gem to your gem file
gem 'spree_paypal_express', github: 'spree-contrib/better_spree_paypal_express', branch: '3-0-stable'
Run bundle command
$ bundle install
Also, run the following command
$ bundle exec rails g spree_paypal_express:install
To set this one in Heroku application commit all migration added, Gemfile and Gemlock.file and login to Heroku application push the code to Heroku server using
$ git psuh heroku master
You also need to run the migration with the help of the following command
$ heroku run rake db:migrate
To set PayPal express method in your spree application login to application in the server as an admin and go to admin in that select configuration inside that select Payment Method select new payment method in that select PayPal express method in that and write a name you want to display on the front end, and then press create., it will redirect to next page there you update credentials you will be done with Paypal express integration to your application.
