Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Closed
wants to merge 1 commit into from

5 participants

@iloveitaly

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?

@schof
Owner

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

@BDQ BDQ was assigned
@BDQ
Owner

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

@iloveitaly

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?

@schof
Owner

@devilcoders what do you think?

@devilcoders

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.

@devilcoders

I think we can merge this now.

@radar radar closed this in 586dd50
@radar
Collaborator

Merged!

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.
View
10 core/app/views/spree/orders/_form.html.erb
@@ -2,11 +2,11 @@
<table id="cart-detail" data-hook>
<thead>
<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>
</tr>
</thead>
<tbody id="line_items" data-hook>
View
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>
- <td data-hook="cart_item_description">
+ <td class="cart-item-description" data-hook="cart_item_description">
<h4><%= link_to variant.product.name, 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>
- <td data-hook="cart_item_price">
+ <td class="cart-item-price" data-hook="cart_item_price">
<%= number_to_currency line_item.price %>
</td>
- <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>
- <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>
- <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)}" %>
</td>
</tr>
Something went wrong with that request. Please try again.