Deface in spree home index

I'm trying to add some content i spree's home#index using Deface's DSL.

I have a file at app/overrides/spree/home/index/add_home_index_steps.html.erb.deface with the following content:

<!-- insert_before 'erb:contains("content_for :sidebar do")' -->
<h1>Hola</h1>

but the result is:

<div id=wrapper" class="row" data-hook>
  <aside id="sidebar" class="columns four" data-hook>
    <div data-hook="homepage_sidebar_navigation">...</div>
  </aside>
  <div id="content" class="columns twelve" data-hook>
    <h1>Hola</h1>
    <div data-hook="homepage_products">...</div>
  </div>
</div>

what I was expecting:

<div id=wrapper" class="row" data-hook>
  <h1>Hola</h1>
  <aside id="sidebar" class="columns four" data-hook>
    <div data-hook="homepage_sidebar_navigation">...</div>
  </aside>
  <div id="content" class="columns twelve" data-hook>
    <div data-hook="homepage_products">...</div>
  </div>
</div>

if I use insert_after instead of insert_before, the result is:

<div id=wrapper" class="row" data-hook>
  <aside id="sidebar" class="columns four" data-hook>
    <h1>Hola</h1>
    <div data-hook="homepage_sidebar_navigation">...</div>
  </aside>
  <div id="content" class="columns twelve" data-hook>
    <div data-hook="homepage_products">...</div>
  </div>
</div>

I'm so confused, can anyone explain this please, What am I doing wrong.

Solution

This is easy to get confused on, so lets look at what's happening. The sidebar code is:

https://github.com/spree/spree/blob/2d31d8a69d66e2555e00f67e3227a54a531aa6b8/frontend/app/views/spree/shared/_sidebar.html.erb

<aside id="sidebar" class="columns four" data-hook>
  <%= yield :sidebar %>
</aside>

https://github.com/spree/spree/blob/v2.1.2/frontend/app/views/spree/home/index.html.erb

<% content_for :sidebar do %>
  <div data-hook="homepage_sidebar_navigation">
    <%= render :partial => 'spree/shared/taxonomies' %>
  </div>
<% end %>

<div data-hook="homepage_products">
  <%= render :partial => 'spree/shared/products', :locals => { :products => @products } %>
</div>

When this is evaluated, the stuff within content_for :sidebar will replace yield :sidebar

Your problem is that when you're doing insert_before. You get this:

<h1>Hola</h1>
<% content_for :sidebar do %>
  <!-- stuff that goes in to the sidebar -->
<% end %>

<div data-hook="homepage_products">...</div>

The content_for can occur at any point in this file, it doesn't really matter since it's just saying what goes in the yield. So in the output, it will come before the homepage_products div, which is what you get in your output.

Insert_after does the following:

<% content_for :sidebar do %>
  <h1>Hola</h1>
  <!-- stuff that goes in to the sidebar -->
<% end %>

<div data-hook="homepage_products">...</div>

So I'd expect that to appear within the section that's being yielded. Something like this:

<aside id="sidebar" class="columns four" data-hook>
  <h1>Hola</h1>
  <!-- stuff that goes in to the sidebar -->
</aside>

Which is also what you see.

If you want something to appear before the sidebar, as in your example, you should do a different override. You should override spree/shared/_sidebar and insert_before #sidebar.

Hope that clears things up.