Spree Deface, can select anything but a class

Question

I'm trying to use Deface to add a button in a column in a table in Spree Admin. But I just can't get my CSS-like selector right. I can select the table row using a data-hook, and can select child elements (eg td, span), but can't select by a specific class (in this case, .balance_due). Am I missing something simple??

My override:

Deface::Override.new(:virtual_path    => "spree/admin/orders/index",
                  :name           => "add_capture_order_shortcut2",
                  :insert_bottom => "[data-hook='admin_orders_index_rows'] .balance_due", 
                  :text           => '<h1>hey yo, your balance is due</h1>'
                  )

I have confirmed the CSS selector using jQuery, ie:

$("[data-hook='admin_orders_index_rows'] .balance_due") 
  => [<span class="state balance_due">…</span>]

An exerpt from the generated HTML:

<tr data-hook="admin_orders_index_rows" class="state-complete odd">
  ...
  <td class="align-center"><span class="state balance_due"><a href="/admin/orders/R617712280/payments">balance due</a></span></td>
  ...
</tr>

What does the generated HTML look like? – BoltClock Jun 07 '13 at 16:25 — BoltClock, Jun 07 '13 at 16:25

score 5 · Answer 1 · edited Mar 27 '16 at 04:18

Deface acts upon the actual .html.erb template, before it is rendered, not the generated output.

You need to ensure that the selector matches something that is directly in your template specified in your virtual path.

The relevant line from the spree template is:

<td class="align-center"><span class="state <%= order.state.downcase %>"><%= Spree.t("order_state.#{order.state.downcase}") %></span></td>

Note that .balance_due is not specified directly in the template, but assigned from a variable.

The easiest way to fix this would be to override the entire

[data-hook='admin_orders_index_rows']

with your content, or use some fancy CSS selectors like :first-child to get the exact portion you want.

A better way to fix this would be to submit a pull request to spree with data-hook's to allow people to select specific rows with deface. That will be much less likely to break in the future if someone decides to re-order things, or add a new row.

You're right, I had wondered if a data-related value would work; however I also had trouble even selecting the 'state' class. In the end I just inserted into the admin_orders_index_row_actions data-hook instead. — David Cook, Jun 14 '13 at 04:32

Spree Deface, can select anything but a class

1 Answers1