Rendering Scrivito Content with Solidus Layout

We are using the deface gem to have Scrivito content rendered with the layout of Solidus. For an explanation of the concept and the advantages of this gem, see DefaceCommunity/deface on GitHub.

Note that bundle exec rails g spree:install already created a section in your config/application.rb file, which loads Deface rules:

    # ...
    config.to_prepare do
      # ...

      # 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)

All Scrivito pages are handled by app/controllers/cms_controller.rb. To work in the context of Solidus, it needs to be adjusted:

  • Make it a subclass of Spree::StoreController instead of ApplicationController.
  • Make it use the layout of Solidus/Spree: layout 'spree/layouts/spree_application'.

After these changes, the app/controllers/cms_controller.rb file should look like this:

# app/controllers/cms_controller.rb

class CmsController < Spree::StoreController
  include Scrivito::ControllerActions

  layout 'spree/layouts/spree_application'

Now steps 2, 3 and 4 of the Scrivito integration guide need to be re-executed in the context of Solidus/Spree:

Require Scrivito JavaScript assets – step 2

  • Create a new file, app/assets/javascripts/cms.js, containing:

    //= require scrivito
  • Adjust app/assets/javascripts/application.js:

    Replace //= require scrivito with //= require cms.

  • Add //= require cms to /vendor/assets/javascripts/spree/frontend/all.js after //= require jquery_ujs.

Note that cms.js will be used in two different places, in application.js (used by Scrivito's details views) and in frontend/all.js (used by the Spree/Solidus layout).

At this time, app/assets/javascripts/cms.js is really small, but this is the one place where all JavaScripts related to the Scrivito CMS should be put.

Require Scrivito JavaScript assets – step 3

  • Create a new file, app/assets/stylesheets/cms.css, and set its contents to:

    *= require scrivito
    *= require_self
  • Adjust app/assets/stylesheets/application.css:

    Replace *= require scrivito with *= require cms.

  • Add *= require cms to vendor/assets/stylesheets/spree/frontend/all.css

Analogously to the JavaScript, cms.css will be used in two different places, in application.css (used by Scrivito's details views) and in frontend/all.css (used by the Solidus/Spree layout).

The app/assets/stylesheets/cms.css file is very small, too, but this is where all styles related to the Scrivito CMS should be placed.

Add head and body tags – step 4

The solidus/spree frontend layout needs to be adjusted, so it loads scrivito_head_tags and scrivito_body_tags. For this, create a Deface rule in the file app/overrides/spree/layouts/spree_application.rb:

# app/overrides/spree/layouts/spree_application.rb  "spree/layouts/spree_application",
                     insert_bottom: "head[data-hook='inside_head']",
                     text:          "<%= scrivito_head_tags %>",
                     name:          "add_scrivito_head_tags")  "spree/layouts/spree_application",
                     insert_bottom: "body[data-hook='body']",
                     text:          "<%= scrivito_body_tags %>",
                     name:          "add_scrivito_body_tags")

These rules cause <%= scrivito_head_tags %> to be inserted into the header and <%= scrivito_body_tags %> into the body.

If you now restart your app and reload the page displayed you can see the layout of Solidus/Spree even on Scrivito pages (e.g. login/logout or cart). You should also be able to edit content.