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:

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:

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:

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.