SPREE ECOMMERCECommit University Workshop

19/06/2014

Stefano Mancini

http://www.devinterface.com

STEFANO MANCINICo-Founder di DevInterface snc

Agile Web DeveloperStartupper

Globitalia srl

Laureato in Informatica a VeronaContatti:

stefano.mancini@devinterface.com

http://www.devinterface.com

https://twitter.com/stefano_mancini

http://it.linkedin.com/in/mancinistefano/

AGENDA

1. introduzione a Spree Ecommerce2. funzionalità principali3. architettura4. estensioni ufficiali e popolari5. come scrivere un'estensione6. considerazioni finali7. Q&A

PERCHÈ SPREE?ecommerce opensource

l'unica vera soluzione di ecommerce per RoR

perché siamo sviluppatori e ci piace poter personalizzare iprodotti secondo le esigenze dei clienti

demo site:

demo code:

http://demo.cloud-ecommerce.it

https://github.com/devinterface/commit_university_demo

OVERVIEW - HOMEPAGE

OVERVIEW - LISTA PRODOTTI

OVERVIEW - DETTAGLIO PRODOTTO

OVERVIEW - CHECKOUT PRODOTTO

OVERVIEW - ADMIN PRODOTTI

OVERVIEW - ADMIN ORDINI

OVERVIEW - ADMIN CONFIGURAZIONI

CARATTERISTICHE PRINCIPALIestensibile (rails engines)

seo friendly /t/categories/brand

/products/samsung-tv-t22c300-22-full-hd

localizzazione del sito e dei contenuti

ricerche configurabili (built-in, Solr, ElasticSeach)

CARATTERISTICHE PRINCIPALIsupporto per temi grafici

interfacciabile con i maggiori gateway di pagamento Paypal , Braintree, Stripe

Mobile ready (responsive , skeleton)

API REST

ARCHITETTURAcore (models, mailers e tutte le funzionalità principali)

frontend (store, lista prodotti, dettaglio prodotti, checkout prodotti, area riservata utenti)

backend (area di amministrazione)

API RESTFUL (per integrarsi in lettura e scrittura con sistemi esterni)

ARCHITETTURA - PRODOTTI

ARCHITETTURA - ORDINI

ARCHITETTURA - PAGAMENTI

CheckBank Transfer

Gateway

ARCHITETTURA - SPEDIZIONI

shipping methods (spedizionieri)

zones (zone geografiche)

calculations (flat, per quantità, per peso)

ARCHITETTURA - MAGAZZINO

ARCHITETTURA - REST API

Permette di leggere/scrivere ogni risorsa dell'ecommerce

Dipende dai permessi dell'API KEY utilizzata, quindi dai permessidell'utente

Ritorna un JSON di risposta

ARCHITETTURA - REST APIGET /api/products/1 $ curl http://demo.cloud-ecommerce.it/api/products/1.json?token=YOUR_KEY_HERE

{ "id": 1, "name": "Ruby on Rails Tote", "description": "Autem omnis quos esse at incidunt odio. Quia in quam odio architecto cum tempora non. Nesciunt magni doloremque adipisci. Neque assumenda fugiat ad." "price": "14.0", "display_price": "€14,00 EUR", "available_on": "2014-02-18T18:04:37.870Z", "permalink": "ruby-on-rails-tote", "meta_description": null, "meta_keywords": null, "shipping_category_id": 1, "taxon_ids": [ 3, 11, 14, 15 ], "variants": [ { "id": 1, "name": "Ruby on Rails Tote", "sku": "ROR-00011", "price": "14.0", "weight": null,

ESTENSIONI - GEMME UFFICIALISpree Wishlist ( )

Spree Recently Viewed ( )

Spree Paypal Express ( )

Spree i18n ( )

Spree Social ( )

Spree Related Products ( )

https://github.com/spree/spree_wishlist

http://github.com/spree/spree_recently_viewed

http://github.com/spree/spree_paypal_express

https://github.com/spree/spree_i18n

http://github.com/spree/spree_comments

http://github.com/spree/spree_related_products

ESTENSIONI - ALTRE GEMME POPOLARIBlogging Spree ( ) http://github.com/stefansenk/spree-blogging-spree

Spree Simple CMS ( ) http://github.com/damianogiacomello/spree_simple_cms

Spree Loyalty Points ( ) http://github.com/vinsol/spree-loyalty-points

Spree Solr ( ) https://github.com/devinterface/spree_solr

Spree Monetaweb ( ) https://github.com/devinterface/spree_monetaweb

ESTENDERE SPREEOverride delle views:

Deface ( ) https://github.com/spree/deface

Template replacement

DEFACE# app/views/spree/home/index.html.erb

<div data-hook="homepage_products"> <ul id="products" class="inline product-listing" data-hook=""> <li id="product_2" class="columns three alpha" data-hook="products_list_item" <div class="product-image"><a href="/products/apple" itemprop="url"><img </div> <a href="/products/apple" class="info" itemprop="name" title="Apple">Apple </li>

</ul> </div>

DEFACE

# app/overrides/homepage_contents.rb

Deface::Override.new(:virtual_path => "spree/home/index",:replace => "[data-hook='homepage_products']",:name => "homepage_contents",:partial => "home/homepage_contents")

ESTENDERE SPREEExtend ed override di models e controllers:

# app/models/spree/product_decorator.rb

Spree::Product.class_eval do

def some_method

end

end

ESTENDERE SPREEExtend ed override di models e controllers:

# app/controllers/spree/products_controller_decorator.rb

Spree::ProductsController.class_eval do def some_action

endend

ESTENDERE SPREECambiare l'output di una action:

# app/controllers/spree/products_controller_decorator.rb

Spree::ProductsController.class_eval do

respond_override :index => { :html => { :success => lambda { render 'shared/some_file' } } }

end

ESTENDERE SPREECustomizzare le dimensioni delle immagini:

Spree::Image.class_eval do attachment_definitions[:attachment][:styles] = { :mini => '48x48>', # thumbs under image :small => '100x100>', # images on category view :product => '240x240>', # full product image :large => '600x600>' # light box image }end

ESTENDERE SPREEla magia:

# config/application.rbmodule Mistercucina class Application < Rails::Application config.to_prepare do # Load application's model / class decorators Dir.glob(File.join(File.dirname(__FILE__), "../app/**/*_decorator*.rb")) do |c| Rails.configuration.cache_classes ? require(c) : load(c) end

# Load application's view overrides Dir.glob(File.join(File.dirname(__FILE__), "../app/overrides/*.rb")) do |c| Rails.configuration.cache_classes ? require(c) : load(c) end end endend

CREARE UN'ESTENSIONE

spree extension spree_monetaweb

rails g migration add_monetaweb_payment_id_to_payments

# Gemfilegem 'spree_monetaweb', :path => '../spree_monetaweb'

bundle install

rails g spree_monetaweb:install

SPREE_MONETAWEB

engine.rb

https://github.com/devinterface/spree_monetaweb/blob/master/lib/spree_monetaweb/engine.rb

SPREE_MONETAWEB

moneta_web.rb

https://github.com/devinterface/spree_monetaweb/blob/master/app/models/spree/payment_method/moneta_web.rb

SPREE_MONETAWEB

SPREE_MONETAWEB

checkout_controller_decorator.rb

https://github.com/devinterface/spree_monetaweb/blob/master/app/controllers/spree/checkout_controller_decorator.rb

SPREE_MONETAWEB

monetaweb_controller.rb

https://github.com/devinterface/spree_monetaweb/blob/master/app/controllers/spree/monetaweb_controller.rb

SPREE_SOLR

engine.rb

https://github.com/devinterface/spree_solr/blob/2-2-

stable/lib/spree_solr/engine.rb

SPREE_SOLR

solr.rb

https://github.com/devinterface/spree_solr/blob/2-2-

stable/lib/spree/search/solr.rb

SPREE_SOLR

product_decorator.rb

https://github.com/devinterface/spree_solr/blob/2-2-

stable/app/models/spree/product_decorator.rb

CONSIDERAZIONI FINALIPRO

ottimo (praticamente l'unico) ecommerce per Railspermette di pubblicare soluzioni anche molto complesseè estensibile: si adatta alle esigenze più disparate dei clientiAPI

CONTRO

pochi template html/css già prontiestensioni valide ma limitate (alcune non più aggiornate)è necessario saper mettere le mani sul codice

Q&A

GRAZIE PER L'ATTENZIONE

Stefano Mancini

DevInterface ( )http://www.devinterface.com