Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


Adding classes to cart td and th for easier css styling #1281

wants to merge 1 commit into from

5 participants


Styling using td[data-hook="..."] is going to break older browsers. Aside from polyfills, this is the best cross-browser solution that I'm aware of. Thoughts?


@BDQ and @devilcoders - any thoughts on these proposed changes?

@BDQ BDQ was assigned

I don't have any objections, which "older browsers" are we talking about?


The browser I was thinking of was IE6, but I'm not supporting IE6 anymore in my development. Without checking, I just assumed that IE7 wouldn't have attribute selector support – but I was wrong. Sorry about that.

I think the changes on _form.html.erb would still be useful to allow easy styling + deface selection. I feel as though class selectors are a bit cleaner and more self-documenting than attribute selectors, but having both would clutter things up. I'm guessing reverting changes on _line_item.html.erb and keeping changes on_form.html.erb might be the best solution. Thoughts?


@devilcoders what do you think?


I like classes on _form.erb.html but I don;t think that we need to do that on _line_item.erb.html. We can;t remove data-hooks from _line_item.erb.html, data-hooks are for overriding things and if we remove them so users will be very ungry after update. I don't see any problems with using attributes for styling, if css allow that. Also I don't think we should care about IE6. It's gone, and for those less than 1% percent of it's users - sorry guys, please update, it's just about time.

So, I would give green light to _form.erb.html but not for _line_item.erb.html.


I think we can merge this now.

@radar radar closed this in 586dd50


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
10 core/app/views/spree/orders/_form.html.erb
@@ -2,11 +2,11 @@
<table id="cart-detail" data-hook>
<tr data-hook="cart_items_headers">
- <th colspan="2"><%= t(:item) %></th>
- <th><%= t(:price) %></th>
- <th><%= t(:qty) %></th>
- <th><%= t(:total) %></th>
- <th></th>
+ <th class="cart-item-description-header" colspan="2"><%= t(:item) %></th>
+ <th class="cart-item-price-header"><%= t(:price) %></th>
+ <th class="cart-item-quantity-header"><%= t(:qty) %></th>
+ <th class="cart-item-total-header"><%= t(:total) %></th>
+ <th class="cart-item-delete-header"></th>
<tbody id="line_items" data-hook>
12 core/app/views/spree/orders/_line_item.html.erb
@@ -1,12 +1,12 @@
<tr class="<%= cycle('', 'alt') %> line-item">
- <td data-hook="cart_item_image">
+ <td class="cart-item-image" data-hook="cart_item_image">
<% if variant.images.length == 0 %>
<%= link_to small_image(variant.product), variant.product %>
<% else %>
<%= link_to image_tag(variant.images.first.attachment.url(:small)), variant.product %>
<% end %>
- <td data-hook="cart_item_description">
+ <td class="cart-item-description" data-hook="cart_item_description">
<h4><%= link_to, product_path(variant.product) %></h4>
<%= variant.options_text %>
<% if @order.insufficient_stock_lines.include? line_item %>
@@ -16,16 +16,16 @@
<% end %>
<%= truncate(variant.product.description, :length => 100, :omission => "...") %>
- <td data-hook="cart_item_price">
+ <td class="cart-item-price" data-hook="cart_item_price">
<%= number_to_currency line_item.price %>
- <td data-hook="cart_item_quantity">
+ <td class="cart-item-quantity" data-hook="cart_item_quantity">
<%= item_form.number_field :quantity, :min => 0, :class => "line_item_quantity", :size => 5 %>
- <td data-hook="cart_item_total">
+ <td class="cart-item-total" data-hook="cart_item_total">
<%= number_to_currency(line_item.price * line_item.quantity) unless line_item.quantity.nil? %>
- <td data-hook="cart_item_delete">
+ <td class="cart-item-delete" data-hook="cart_item_delete">
<%= link_to image_tag('icons/delete.png'), '#', :class => 'delete', :id => "delete_#{dom_id(line_item)}" %>
Something went wrong with that request. Please try again.