Spree + Angular.js + Bootstrap

• Full Spree front-end
• Single page checkout
• 1-click checkout
• Product listing with infinite scroll
• Product search with auto-complete
• Easy to override templates/controllers
• Easy to add new routes/controllers/templates
• Full Google Analytics support via Angularytics
• Variant selection by option type
• Cart dropdown/popover
• Lookup shipping & tax by zip code (Planned)
• Newsletter signup form (optional) via spree_chimpy
• Example rails app DynamoMTL/sprangular-demo

Create a rails project

rails new <your-app-name>
cd <you-app-name>

Add spree, sprangular and rails-assets source in your Gemfile. (notice we dont use the spree umbrella gem, because it contains the generic spree_frontend)

source 'https://rails-assets.org'

gem 'spree_core', '~> 2.3.4'
gem 'spree_api', '~> 2.3.4'
gem 'spree_backend', '~> 2.3.4'
gem 'spree_sample', '~> 2.3.4'
gem 'sprangular', github: 'DynamoMTL/sprangular'

Run bundler

bundle

Then install spree into your app

spree install --auto-accept

Then install sprangular:

rails generate sprangular:install

The admin is now accessible at http://localhost:3000/spree/admin

The following events are emitted

• cart.add
• cart.empty
• account.login
• account.logout
• loading.start
• loading.end

# show modal when item added to cart
$scope.$on 'cart.add', ->
  $scope.showModal = true

By default templates are fetched on-demand. Templates in app/assets/templates/layout are pre-generated and cached in the layout for increased speed. You can add additional templates to be pre-cached, by setting config.cached_paths. Example:

# config/initializers/sprangular.rb
Sprangular::Engine.config.cached_paths += %w(products)

Copy the template to your app/assets/templates directory. The host app's version always takes presidence.

Create a app/assets/javascripts/sprangular/controllers or resources directory, and copy the gem version of the script. The host app's version always takes presidence.

Edit your app/assets/javascripts/sprangular/extraRoutes.coffee and add the route. For example:

Sprangular.config ($routeProvider) ->

  $routeProvider
    .when '/about',
      template: '<h1>#1 Internet Site</h1>'

Sprangular configures Rack::Rewrite to provide a 301 redirect for your existing URLs. URLs like /products become /#!/products

This gem contains a dummy spree app in the spec/dummy folder. You can use that to test out changes when modifying this gem. Just bootstrap the database and start the server:

cd spec/dummy
rake db:reset AUTO_ACCEPT=1 && rake spree_sample:load
rails server

MIT