Spree Ecommerce – STEFANO MANCINI – AGENDA

View Github Repository Open presentation in a new window

devinterface

See all presentation from devinterface

Spree Ecommerce – STEFANO MANCINI – AGENDA

0 0

spree_presentation

On Github devinterface / spree_presentation

Spree Ecommerce

Commit University Workshop
19/06/2014
Stefano Mancini

STEFANO MANCINI

AGENDA

introduzione a Spree Ecommerce funzionalità principali architettura estensioni ufficiali e popolari come scrivere un'estensione considerazioni finali Q&A

Perchè spree?

ecommerce opensource
l'unica vera soluzione di ecommerce per RoR
perché siamo sviluppatori e ci piace poter personalizzare i prodotti  secondo le esigenze dei clienti

overview - homepage

overview - lista prodotti

overview - dettaglio prodotto

overview - checkout prodotto

overview - admin prodotti

overview - admin ordini

overview - admin configurazioni

caratteristiche principali

estensibile (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 PRINCIPALI

supporto per temi grafici
interfacciabile con i maggiori gateway di pagamento 
Paypal , Braintree, Stripe
Mobile ready (responsive , skeleton)
API REST 

ARchitettura

core (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

Check
Bank 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 permessi dell'utente

Ritorna un JSON di risposta

architettura - rest api

GET /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,
                "height": null,
                "width": null,
                "depth": null,
                "is_master": true,
                "cost_price": "17.0",
                "permalink": "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.",
                "option_values": [],
                "images": [
                    {
                        "id": 21,
                        "position": 1,
                        "attachment_content_type": "image/jpeg",
                        "attachment_file_name": "ror_tote.jpeg",
                        "type": "Spree::Image",
                        "attachment_updated_at": "2014-02-18T18:06:53.628Z",
                        "attachment_width": 360,
                        "attachment_height": 360,
                        "alt": null,
                        "viewable_type": "Spree::Variant",
                        "viewable_id": 1,
                        "mini_url": "http://s3-eu-west-1.amazonaws.com/cloud-ecommerce-demo/app/public/spree/products/21/mini/ror_tote.jpeg?1392746813",
                        "small_url": "http://s3-eu-west-1.amazonaws.com/cloud-ecommerce-demo/app/public/spree/products/21/small/ror_tote.jpeg?1392746813",
                        "product_url": "http://s3-eu-west-1.amazonaws.com/cloud-ecommerce-demo/app/public/spree/products/21/product/ror_tote.jpeg?1392746813",
                        "large_url": "http://s3-eu-west-1.amazonaws.com/cloud-ecommerce-demo/app/public/spree/products/21/large/ror_tote.jpeg?1392746813"
                    },
                    {
                        "id": 22,
                        "position": 2,
                        "attachment_content_type": "image/jpeg",
                        "attachment_file_name": "ror_tote_back.jpeg",
                        "type": "Spree::Image",
                        "attachment_updated_at": "2014-02-18T18:06:58.446Z",
                        "attachment_width": 360,
                        "attachment_height": 360,
                        "alt": null,
                        "viewable_type": "Spree::Variant",
                        "viewable_id": 1,
                        "mini_url": "http://s3-eu-west-1.amazonaws.com/cloud-ecommerce-demo/app/public/spree/products/22/mini/ror_tote_back.jpeg?1392746818",
                        "small_url": "http://s3-eu-west-1.amazonaws.com/cloud-ecommerce-demo/app/public/spree/products/22/small/ror_tote_back.jpeg?1392746818",
                        "product_url": "http://s3-eu-west-1.amazonaws.com/cloud-ecommerce-demo/app/public/spree/products/22/product/ror_tote_back.jpeg?1392746818",
                        "large_url": "http://s3-eu-west-1.amazonaws.com/cloud-ecommerce-demo/app/public/spree/products/22/large/ror_tote_back.jpeg?1392746818"
                    }
                ]
            }
        ],
        "option_types": [],
        "product_properties": [
            {
                "id": 25,
                "product_id": 1,
                "property_id": 9,
                "value": "Tote",
                "property_name": "Type"
            },
            {
                "id": 26,
                "product_id": 1,
                "property_id": 10,
                "value": "15\" x 18\" x 6\"",
                "property_name": "Size"
            },
            {
                "id": 27,
                "product_id": 1,
                "property_id": 11,
                "value": "Canvas",
                "property_name": "Material"
            }
        ]
    }

estensioni - gemme ufficiali

estensioni - altre gemme popolari

estendere spree

Override delle views:

  • 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" itemscope="" itemtype="http://schema.org/Product">
                <div class="product-image"><a href="/products/apple" itemprop="url"><img alt="Apple" itemprop="image" src="/spree/products/2/small/Red_Apple.jpg?1376258869"></a>
                </div>
                <a href="/products/apple" class="info" itemprop="name" title="Apple">Apple</a><span class="price selling" itemprop="price">&#x00A3;1.99</span>
            </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 spree

Extend ed override di models e controllers:
# app/models/spree/product_decorator.rb

Spree::Product.class_eval do

  def some_method

  end

end

Estendere spree

Extend ed override di models e controllers:
# app/controllers/spree/products_controller_decorator.rb

Spree::ProductsController.class_eval do
  def some_action

  end
end

Estendere spree

Cambiare 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 spree

Customizzare 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 spree

la magia:
# config/application.rb
module 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
  end
end

creare un'estensione

spree extension spree_monetaweb


rails g migration add_monetaweb_payment_id_to_payments


# Gemfile
gem '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 finali

PRO

  • ottimo (praticamente l'unico) ecommerce per Rails
  • permette di pubblicare soluzioni anche molto complesse
  • è estensibile: si adatta alle esigenze più disparate dei clienti
  • API

CONTRO

  • pochi template html/css già pronti
  • estensioni 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)