#298 Getting Started with Spree

Spree 是个功能完备的电子商务解决方案，可以很容易的集成到 Rails 应用程序中。如果你想把 Rails 程序变成一个可以出售产品的在线商店，Spree 无疑是最便捷的方式。本集将在一个 Rails 程序中建立 Spree，然后定制其中的一些功能，在这个过程中你可以看到 Spree 是如何工作的，也可以判断 Spree 是否符合你的需求。

安装 Spree

Spree 处理图片的过程需要用到 ImageMagick，所以我们先来安装它，使用 HomeBrew 是最简单的安装方式。

$ brew install imagemagick

ImageMagick 安装完毕后，新建一个 Rails 3.1 程序，命名为 store。Spree 可以集成到现有的 Rails 程序中，但是最好先在一个新的程序中尝试一下，看看它向程序中添加了什么。

$ rails new store

我们将 Spree 和其所需的众多依赖库加入 Gemfile 中，然后运行 bundle 进行安装。Spree 的更新很频繁，所以最好指定一下要安装的版本。本集制作时的最新版本是 0.70.1。

source 'http://rubygems.org'

gem 'rails', '3.1.1'

gem 'sqlite3'

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.1.4'
  gem 'coffee-rails', '~> 3.1.1'
  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

group :test do
  # Pretty printed test output
  gem 'turn', :require => false
end

gem 'spree', '0.70.1'

所需的 gem 安装完毕后，需要执行 Spree 的生成器，将其加入到程序中。

$ rails g spree:site

这个命令包含许多的操作。它会生产一个数据库迁移文件，以便可以生成 Spree 所需的数据表；它还定制了一些其他的文件，这些文件大都在 app/assets 目录下。这个命令还删除了 application.js 和 application.css 这两个文件，所以如果你曾经改动过这两个文件的话，就需要按照 Spree 的组织方式再修改一次。

如果现在查看一下 app/assets 目录的话，会发现其中的 images、javascripts 和 stylesheets 下都多了两个子目录：admin 和 store。这样做是为了将程序的前端和后端管理界面所用的文件分开。在查看 all.css 或 application.js 文件的话，会发现他们都包含了 Spree 中的许多文件，并会自动加载这些文件。

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *

 *= require store/spree_core
 *= require store/spree_auth
 *= require store/spree_api
 *= require store/spree_promo
 *= require store/spree_dash

 *= require_self
 *= require_tree .
*/

还需要再执行一个命令才能完全将 Spree 安装好。我们需要执行刚才生成的数据库迁移文件，注意该命令会询问是否销毁数据库中已经存在的数据。

$ rake db:bootstrap
This task will destroy any data in the database. Are you sure you want to
continue? [y/n] y
db/development.sqlite3 already exists
...

这个命令还会要求设定管理员的Email地址和密码。我们暂且使用 Spree 默认提供的Email地址和密码。最后该命令还会询问是否加载一些示例数据，我们选择加载，这样这个在线商店就有一些东西可以查看了。

Email [spree@example.com]:
Password [spree123]:
Load Sample Data? [y/n]: y

然后启动服务器就可以浏览这个在线商店了。

Spree 初印象

下图就是这个商店的样子。因为还没有使用主题样式，所以看上去简陋了点。不过它已经是一个功能完善的电子商务在线商店了，商店中有商品，也有购物车和结账程序。

在 http://localhost:3000/admin 还有一个后台管理系统，使用前面设定的 Email 地址和密码登录即可。后台的功能也是很完善的，可以查看订单，从众多的图表中可以查看畅销产品。还可以查看并修改产品信息和订单信息。

后台还有一些设置选项，其中包括修改支付方式的设置项。在不同的环境中有不同的支付方式可以使用，我们可以修改其中某种支付方式使用的支付网关。如果需要修改网关，Spree 会要求输入网关的验证信息。这样就可以设置我们拥有的所有支付网关了。

个性化定制 Spree

现在在 Rails 程序中，我们有了一个较为完善的电子商务解决方案了，但如果我们想更多的控制客户所看到的界面的话该怎么办呢？默认的界面看上去很简陋，因为我们还没有使用主题样式呢。在本集接下来的时间中，将为您介绍个性化定制 Spree 界面和其表现的多种方法。

Spree 支持主题和扩展。Blue Theme 可以作为定制界面的一个参考。这个主题，像 Spree 中的大多数东西一样，是个 Rails 引擎，它会覆盖掉 app/assets 和 app/overrides 中的许多内容。将下面的代码加入 Gemfile，然后执行 bundle 来安装这个主题。

gem 'spree_blue_theme', :git => 'git://github.com/spree/spree_blue_theme.git'

为了使用这个主题，需要将前面提到的样式文件替换掉，换上 Blue Theme 提供的样式文件。

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *

 *= require store/screen
 *= require_self
 *= require_tree .
*/

现在商店的界面已经完全不一样了。不管你是否要使用主题，这算是定制 Spree 界面的一种方法。

定制单独的部分

接下来我们来看看如果单独的定制不同的部分。例如，现在我们要把默认的 LOGO 换成我们自己的。默认的 LOGO 存储路径是 Spree 引擎中的 /assets/admin/bg/spree_50.png，不过在我们的程序中可以定制这个路径。

有两种方法。其一，在我们的 Rails 程序中新建 app/assets/images/admin/bg 目录，将你所需的图片（例如，Rails 中的 rails.png）拷贝进去，将其重命名为 spree_50.png。这个图片便会覆盖 Spree 默认提供的，刷新页面（有可能需要重启服务器）就可以看到新的 LOGO 了。

第二中方法是重新设定 Spree 的配置。Spree 的配置信息都储存在一个文件中，其中就包含了 LOGO 图片路径的设置项。Spree 提供了一个全面的配置系统，允许我们通过多种方式进行设置。我们可以通过数据库设置，可以通过后台管理界面设置，还可以新建一个初始化程序让 Ruby 为我们设置。这里，我们选择第三种方式，新建一个名为 spree.rb 的设置文件。

Spree::Config.set(logo: "store/rails.png")

调用 Spree::Config.set 对 logo 项进行了设置。现在可以把图片移到 /app/assets/images/store/ 目录下，并重命名为 rails.png。刷新页面后，LOGO 的地址就指向 http://localhost:3000/assets/store/rails.png 了。

我们还可以通过重写模板来定制 Spree。首先需要找到模板文件在哪儿，这并不难，但是要确认是否在所用的 Spree 版本中寻找，因为不同版本的模板文件可能存在差异。我们使用的是 0.70.1，所以我们在该版本的源码中寻找模板文件。进入 core/app/views/layouts 目录，找到 spree_application.html.erb。这就是我们要找的模板文件，其中包含了渲染 LOGO 的代码。

<div id="logo" data-hook>
  <%= logo %>
</div>

有很多中方法可以修改界面。我们可以将整个模板文件复制到我们的 Rails 程序中相同的位置，Spree 就会使用这个文件（而不使用 Spree 引擎默认提供的），所以我们做的任何改动都会反应到商店的界面中。

另一种方法是使用 Deface，我们不需要安装这个 gem 了，因为它是 Spree 的依赖库之一。我们在 Spree 生成的 app/overrides 中使用它来覆盖模板文件的相应内容。在 Deface 项目的 README 文件中举例说明了它的多种用法。我们将第一个例子的代码复制，保存为 logo.rb，修改其内容为我们想要修改的。

Deface::Override.new(:virtual_path => "layouts/spree_application",
                     :name => "logo",
                     :replace_contents => "#logo",
                     :text => "Store")

在上面的代码中，指定了四个选项。virtual_path 是要修改的 ERB 模板文件的路径，name 可以是任意的名称。我们想修改 div#logo