Enabling Turbo on Solidus and Ruby on Rails 7

Enabling Turbo on Solidus and Ruby on Rails 7

Table of contents

No heading

No headings in the article.

In previous post we installed Solidus with Ruby on Rails 7 on Docker.

This time will be enabling Turbo on our site.

Turbo is a great feature presented in Rails 7. It makes navigation between pages look much smoother. In Rails 7 it's enabled by default. But in Solidus's layout it's disabled

Let's make it work.

First of all we need to remove data-turbo="false" from body.

Then, remove

import "@hotwired/turbo-rails"
import "./controllers"

from app/assets/javascripts/solidus_starter_frontend.js

and then modify our layout a bit:

  <%= javascript_include_tag 'solidus_starter_frontend', "data-turbo-track": "reload", defer: true %>
  <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
  <%= stylesheet_link_tag "solidus_starter_frontend", "data-turbo-track": "reload", media: 'screen' %>

And final step: find all entrances of "DOMContentLoaded" even and replace it with turbo:load. Cause with Turbo enabled - we can't rely on Dom load obviously.

And that's pretty all we need to enable Turbo on Solidus.