Criando um e-commerce com Spree em 15 minutos!

O que é o Spree?

O Spree é uma plataforma de e-commerce criada usando Ruby On Rails e vem evoluindo constantemente. Ela possui diversas extensões que ajudam na customização do e-commerce gerado e possui uma grande versatilidade na hora das customizações.

Exemplos de  lojas usando
O que vamos Aprender?
  1. Como gerar um e-commerce usando o Spree
  2. Como traduzir esse e-commerce para Português
  3. Como criar páginas estáticas dentro desse e-commerce
  4. Como customizar esse e-commerce
    • Adicionar Css
    • Deface
Ingredientes
  1. ruby 2.3.1
  2. rails 4.2.6
  3. PostgreSql 9.5
  4. Spree 3.1.0
  5. Spree Static Content 3.1.0
  6. Spree i18n 3.1.0
Código completo

Como de costume, você pode acessar o código desenvolvido durante o tutorial no GitHub para realizar comparações caso você tenha alguma dúvida :), acessa aqui o código e já me segue por lá.

Lista de comandos usados no Screencast em ordem
Parte 1:  Como gerar um e-commerce usando o Spree
  1. Primeiro instalando  o ImageMagic
    • Linux
      1
      
      sudo apt-get install imagemagick
    • Mac
      1
      
      brew install imagemagick
    • Windows (Mude para um sistema unix e seja mais feliz 🙂 )
      • http://www.imagemagick.org/script/binary-releases.php
  2. Instalar a versão do Rails certa
    1
    
    gem install rails --version=4.2.6 --no-ri --no-rdoc
  3. Criar o Projeto Rails 4.2.6
    1
    
    rails _4.2.6_ new my_store
  4. Criando o banco de dados
    1
    
    rake db:create
  5. Colocar as Gems no Gemfile (copie e cole no Gemfile)
    1
    2
    3
    
    gem 'spree', '~> 3.1.0'
    gem 'spree_auth_devise', '~> 3.1.0'
    gem 'spree_gateway', '~> 3.1.0'
  6. Instalar as Gems
    1
    
    bundle install
  7. Rodar os generates do Spree
    1
    2
    3
    
    rails g spree:install --user_class=Spree::User
    rails g spree:auth:install
    rails g spree_gateway:install
  8. Rodar o servidor
    1
    
    rails s
Parte 2: Como traduzir esse e-commerce para Português
  1. Colocar no gem file  (copie e cole no Gemfile)
    1
    
    gem 'spree_i18n', github: 'spree-contrib/spree_i18n', branch: '3-1-stable'
  2. Instalar a Gem
    1
    
    bundle install
  3. Rodar o instalador
    1
    
    bundle exec rails g spree_i18n:install
  4. Adicionar sobrescrita manual do locale em “config/initializers/spree.rb”
    1
    2
    
    Spree::Frontend::Config[:locale] = 'pt-BR'
    Spree::Backend::Config[:locale] = 'pt-BR'
  5. Rodar o servidor
    1
    
    rails s
Parte 3: Como criar páginas estáticas dentro desse e-commerce
  1. Colocar no gem file  (copie e cole no Gemfile)
    1
    
    gem 'spree_static_content', github: 'spree-contrib/spree_static_content', branch: '3-1-stable'
  2. Intalar a Gem
    1
    
    bundle install
  3. Rodar o instalador
    1
    
    bundle exec rails g spree_static_content:install
  4. Rodar o servidor
    1
    
    rails s
Parte 4: Como customizar o  e-commerce
  1. Css customizado (Criar o arquivo e adicionar em “vendor/assets/stylesheets/spree/frontend/bar_color.css”)
    1
    2
    3
    
    #spree-header{
        background: grey;
    }
  2. Deface (Criar o arquivo e adicionar em “app/overrides/inicio.rb”)
    1
    2
    3
    4
    
    Deface::Override.new(:virtual_path => "spree/shared/_main_nav_bar",
    :replace_contents => "#home-link",
    :text => "<a href='/sobre'>Inicio</a>",
    :name => "change_link")

 

Referências
Conclusão

O Spree é uma plataforma bem legal e você pode criar lojas virtuais incríveis usando ele, se você quiser saber mais, dê uma olhada na documentação oficial (clicando aqui), comenta aí em baixo ou me adiciona no Facebook (clicando aqui).

Se você gostou desse Screencast não se esqueça de se inscrever no canal do Youtube (Clicando aqui) e de dar um Like no vídeo pra aumentar o número de pessoas que vão se beneficiar com o conteúdo dele :), ajuda bastante!

Se você não viu o Screencast da semana passado sobre “Autenticação usando o Facebook com devise + omniauth” dá uma olhada lá (clicando aqui).

Muito obrigado por acompanhar o blog e pelos feedbacks, se você tiver alguma dúvida ou precisar de ajuda comenta aí em baixo.

Um grande Abraço,
Leonardo Scorza.

 

Deixe seu Feedback!

Comentários