How to use ERB syntax as a selector on Deface

Having trouble finding a selector to override a view? Here in this blog post, we show you a simple way to use ERB syntax on Deface DSL.

What is Deface?

Before learning how to use ERB syntax as a selector on Deface, let’s explain what Deface is. From their Github page:

Deface is a library that allows you to customize HTML (ERB, Haml, and Slim) views in a Rails application without editing the underlying view.

It allows you to easily target HTML & ERB elements as the hooks for customization using CSS selectors as supported by Nokogiri.

Setup

To set it up, we need a quick and easy way to test the selectors. To do it, we will be using the test_selector rake task provided by Deface. Here is important for you to know that this task takes two arguments: 1] the layout that contains the element you’re trying to find, and 2] the selector you will be using to find it.

Oh, and also, we will be using the layout spree/admin/slides/_form.html.erb from the solidus_slider  gem to test our ERB selectors.

Finding the ERB

After the setup, let’s analyze the view we are trying to select from. To do it, select the line 48 from the file that contains the following:

<%= f.field_container :slide_locations do >

The rake task will be:

bundle exec rake deface:test_selector["spree/admin/slides/_form.html.erb",
"erb[loud]:contains('f.field_container :slide_locations')"]

• deface:test_selector is the rake task we are executing.
• spree/admin/slides/_form.html.erb the first argument for the rake task, it’s the layout that contains the ERB sentence we’re trying to find. The path starts from the “views” folder.
• erb[loud]:contains('f.field_container :slide_locations'). It’s the second argument for the task. Here we are trying to find the sentence f.field_container :slide_locations that exists among the erb[loud] elements. 

The easiest way to know if we need to look for silent or loud elements is: if the ERB starts with <%= it’s loud, and if it starts with <% then it is silent. A perfect example of a silent element is the if sentence.

But, what about if you want to find ERB that contains strings?

Let’s try using the line 50 from the test view, If we want to use hidden_field_tag 'slide[slide_location_ids]' we will have to change its quotes to some other kind. We already use single and double quotes, so we can use the `` quotes to do so. The complete rake task will look like this:

$ bundle exec rake deface:test_selector["spree/admin/slides/_form.html.erb",
"erb[loud]:contains('hidden_field_tag `slide[slide_location_ids]`')"]

There you go, this is how you can use ERB syntax as a selector on Deface. We hope you find this helpful, and…

Thanks for reading!

This blog post is a collaboration among: @JuanNegrete, Software Engineer at MagmaLabs & @DiegoMendoza, Software Engineer at MagmaLabs

Find it useful? Share it with your peers and friends!
Having trouble finding a selector to override a view? Here in this blog post, we show you a simple way to use ERB syntax on Deface DSL. Share on X