Spree templating (rails3, spree.3)

I recently started a new project that included a spree store and I hadn’t done a spree implementation since they changed their contemplating logic. I had a really hard time finding comprehensive documentation on how to ‘skin’ the site to match that of my clients, so here are my notes.

The setup – Rails 3, Ruby 1.9.2, Spree .30.1

Getting Spree running

Spree’s getting started guide is really helpful is getting the initial store up and running.

I decided not to bring over all the test data instead just created an admin user and started from scratch.

rake db:admin:create

Through the admin (/admin) configuration tab, you can change the store name and  title .

When you look around your spree app file structure you’ll notice you don’t see any of the views and if you edit the application layout nothing happens. To add your theme you will have to create an extension and make your customizations there.

Create an extension for your theme
First change the spree gemfile to in your Gemfile to

gem 'spree', :git => "git://github.com/railsdog/spree.git", :tag => "v0.30.1"

and run bundle install

You can then create the extension

rails g spree:extension foo

A foo folder will now be in your project directory.

You can edit the application layout /foo/app/views/layouts/spree_application.html.erb

I did all my stylesheet editing outside of the extension – public/stylesheets (doesn’t seem like a best practice, but it didn’t work when i added css inside of the extensions public folder)

Hooks
Now lets say you want to add some code to one of the views, hooks is the best way to do this. Hooks basically provide a bookmark in the code that you can insert_before, insert_after, remove, or replace.

This is from an older version, but it was the best explanation of how to use hooks I could find: Spree hooks (v 0.11)

Add hooks in the following file /foo/lib/foo_hooks.rb

class FooHooks < Spree::ThemeSupport::HookListener

insert_before :homepage_products, :text => "HELLO!"

insert_after :product_description do
'<p><%= link_to("Back to products", products_path) %></p>'
end
end

Note – I noticed that you have to restart rails server for the hook changes to work.

To get a full list of hooks you can run grep -rh ‘hook :’ core/app/views | sed ‘s/^.*hook\s*//;s/[, ].*//’ | sort | uniq   or view this basic list of hooks from the spree guides.

If you can’t access the part of the file you need with hooks, you can override the core views.

Overriding Spree Core Files
By default files in your extension will override the core files.

For example I copied
/Users/me/.rvm/gems/ruby-1.9.2-p0/gems/spree_core-0.30.1/app/views/products/index.html.erb
to /foo/app/views/products/index.html.erb
and then made the needed changes.

Advertisement