Spree Deface,可以选择除课程之外的任何东西

Dav*_*ook 3 css-selectors spree deface

我正在尝试使用Deface在Spree Admin的表中的列中添加一个按钮.但我无法让我的CSS类选择器正确.我可以使用数据挂钩选择表行,并且可以选择子元素(例如td,span),但不能通过特定类(在本例中为.balance_due)进行选择.我错过了一些简单的事吗?

我的覆盖:

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>'
                  )
Run Code Online (Sandbox Code Playgroud)

我已经使用jQuery确认了CSS选择器,即:

$("[data-hook='admin_orders_index_rows'] .balance_due") 
  => [<span class=?"state balance_due">?…</span>]
Run Code Online (Sandbox Code Playgroud)

生成的HTML的一个exerpt:

<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>
Run Code Online (Sandbox Code Playgroud)

gma*_*all 5

.html.erb呈现之前,Deface会对实际模板执行操作,而不是生成的输出.

您需要确保选择器匹配直接在虚拟路径中指定的模板中的内容.

狂欢模板的相关行是:

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

请注意,.balance_due未在模板中直接指定,而是从变量中指定.

解决这个问题的最简单方法是覆盖整个

[data-hook='admin_orders_index_rows']
Run Code Online (Sandbox Code Playgroud)

与您的内容,或使用一些花哨的CSS选择器,:first-child以获得您想要的确切部分.

一个更好的办法来解决,这将是提交pull请求与数据挂钩的大礼包,让人们与抹掉选择特定行.如果某人决定重新订购或添加新行,那么将来破坏的可能性就会大大降低.