Overriding an admin view with deface in Spree using complex selectors

04 Apr Overriding an admin view with deface in Spree using complex selectors

hello guys I want to write about selectors, overriding, and defaces in spree with the DSL for Spree:

In this time I want to share the code that I have created for a simple task.

The scenario is the following:
I want to edit option type values in the admin section, if you take a look into the code of spree you’ll see that some of the views responsible for the option type edition are located in:

backend/view/spree/admin/option_types/_option_value_fields.html.erb

and

backend/view/spree/admin/option_types/edit.html.erb

I want to edit those views because I need to add a new field in the option type model and the user should select between different values and the code is the following:

File:
app/overrides/spree/admin/option_types/edit/the_name_that_describe_the_new_feature.html.erb.deface

Content:

<!-- insert_after '[data-hook="option_header"] tr th:nth-child(2)' -->
<th><%= Spree.t('select') %></th>

If you looked the above code you can see that I’m just adding a new label in the th element using a translation and you have to declare that translation in you locale file depending on your requirements.
And also I want to talk about the selectors, about the selectors you can be as specific as you need using ids #your-id or classes .your-class or any element that you use in css, in my case I want to add my label after the second th element in the table.

And the other view is the following:
file:
app/overrides/spree/admin/option_types/_option_value_fields/your_feature_here.html.erb.deface

content:

<!-- insert_after '.presentation' -->
<td class="presentation"><%= f.select(:presentation, %w[rap rock country],
                                       { include_blank: true }, class: 'select2 fullwidth')%></td>

And now you are going to see something like:

about option type override

And don’t forget to use the get result task for deface if you want to see which modification will receive an specifi view in this case you need to run in your console:

rake deface:get_result[spree/admin/option_types/_option_value_fields]