From fc4275cbc11031d38f81591f7d1e27707f01df1b Mon Sep 17 00:00:00 2001 From: stevebosworth Date: Wed, 13 May 2015 00:06:28 -0400 Subject: [PATCH 1/6] switch cart over to table layout --- assets/timber.scss.liquid | 14 ++- templates/cart.liquid | 246 +++++++++++++++----------------------- 2 files changed, 111 insertions(+), 149 deletions(-) diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid index 8b6bd40d2..a8e4512de 100755 --- a/assets/timber.scss.liquid +++ b/assets/timber.scss.liquid @@ -2239,7 +2239,6 @@ label.error { &:first-child { padding-top: 0; - border-top: 0 none; } .js-qty { @@ -2247,6 +2246,18 @@ label.error { } } +.cart-table { + th { + font-weight: normal; + } + + td, + th { + padding: 30px 15px; + border: none; + } +} + @include at-query ($min, $large) { .cart__row--table-large { display: table; @@ -2266,6 +2277,7 @@ label.error { img { display: block; + max-width: 100%; } } diff --git a/templates/cart.liquid b/templates/cart.liquid index 1abb51766..059b4f357 100755 --- a/templates/cart.liquid +++ b/templates/cart.liquid @@ -6,162 +6,112 @@ - Shopify Payments - http://docs.shopify.com/manual/more/shopify-payments/testing-shopify-payments {% endcomment %} -{% if cart.item_count > 0 %} - -
- -

{{ 'cart.general.title' | t }}

- -
-
-
-
-
- {{ 'cart.label.product' | t }} -
-
-
-
-
-
- {{ 'cart.label.price' | t }} -
-
- {{ 'cart.label.quantity' | t }} -
-
- {{ 'cart.label.total' | t }} -
-
-
-
-
- - {% comment %} - Loop through products in the cart - {% endcomment %} - {% for item in cart.items %} -
-
- -
-
- -
- - {% comment %} - More image size options at: - - http://docs.shopify.com/themes/filters/product-img-url - {% endcomment %} - {{ item.title | escape }} - -
- -
- - {{ item.product.title }} - - {% unless item.variant.title contains 'Default' %} -
- {{ item.variant.title }} - {% endunless %} - - {% if settings.cart_vendor_enable %} -

{{ item.vendor }}

- {% endif %} +{% if cart.item_count > 0 %} +

{{ 'cart.general.title' | t }}

+ + + + + + + + + + {% for item in cart.items %} + + + + + + + + {% endfor %} + + {% if settings.cart_notes_enable %} -
+
{% endif %} -
-

- {{ 'cart.general.subtotal' | t }} - {{ cart.total_price | money }} -

-

{{ 'cart.general.shipping_at_checkout' | t }}

- - - - {% if additional_checkout_buttons %} -
{{ content_for_additional_checkout_buttons }}
- {% endif %} -
- - - - + + +
{{ 'cart.label.product' | t }}{{ 'cart.label.price' | t }}{{ 'cart.label.quantity' | t }}{{ 'cart.label.total' | t }}
+ {% comment %} - Optional, loop through custom product line items if available - - For more info on line item properties, visit: - - http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-product-page-Like-for-a-monogram-engraving-or-customization + More image size options at: + - http://docs.shopify.com/themes/filters/product-img-url {% endcomment %} - {% assign property_size = item.properties | size %} - {% if property_size > 0 %} - {% for p in item.properties %} - {% unless p.last == blank %} - {{ p.first }}: - - {% comment %} - Check if there was an uploaded file associated - {% endcomment %} - {% if p.last contains '/uploads/' %} - {{ p.last | split: '/' | last }} - {% else %} - {{ p.last }} - {% endif %} - -
- {% endunless %} - {% endfor %} - {% endif %} - - - {{ 'cart.general.remove' | t }} - - - - - - -
-
- -
- {{ 'cart.label.price' | t }} - {{ item.price | money }} -
- -
- {{ 'cart.label.quantity' | t }} - -
- -
- {{ 'cart.label.total' | t }} - {{ item.line_price | money }} -
- -
-
- - - - {% endfor %} - -
-
- {% comment %} - Optional, add a textarea for special notes - - Your theme settings can turn this on or off. Default is on. - - Make sure you have name="note" for the message to be submitted properly - {% endcomment %} + {{ item.title | escape }} + +
+ + {{ item.product.title }} + + {% unless item.variant.title contains 'Default' %} +
+ {{ item.variant.title }} + {% endunless %} + + {% if settings.cart_vendor_enable %} +

{{ item.vendor }}

+ {% endif %} + + {% comment %} + Optional, loop through custom product line items if available + + For more info on line item properties, visit: + - http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-product-page-Like-for-a-monogram-engraving-or-customization + {% endcomment %} + {% assign property_size = item.properties | size %} + {% if property_size > 0 %} + {% for p in item.properties %} + {% unless p.last == blank %} + {{ p.first }}: + + {% comment %} + Check if there was an uploaded file associated + {% endcomment %} + {% if p.last contains '/uploads/' %} + {{ p.last | split: '/' | last }} + {% else %} + {{ p.last }} + {% endif %} + +
+ {% endunless %} + {% endfor %} + {% endif %} + + + {{ 'cart.general.remove' | t }} + + 		+ + {{ item.price | money }} + + + + + + {{ item.line_price | money }} + +
- + +

+ {{ 'cart.general.subtotal' | t }} + {{ cart.total_price | money }} +

+

{{ 'cart.general.shipping_at_checkout' | t }}

+ + + + {% if additional_checkout_buttons %} +
{{ content_for_additional_checkout_buttons }}
+ {% endif %} +
- {% else %} {% comment %} The cart is empty @@ -169,4 +119,4 @@

{{ 'cart.general.title' | t }}

{{ 'cart.general.empty' | t }}

{{ 'cart.general.continue_browsing_html' | t }}

-{% endif %} +{% endif %} \ No newline at end of file From c2c62015e500244c4efb63ff78262a29f9d04142 Mon Sep 17 00:00:00 2001 From: stevebosworth Date: Wed, 13 May 2015 00:49:48 -0400 Subject: [PATCH 2/6] added responsive css --- assets/timber.scss.liquid | 73 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid index a8e4512de..0a321267c 100755 --- a/assets/timber.scss.liquid +++ b/assets/timber.scss.liquid @@ -1190,6 +1190,79 @@ th, td { border: 1px solid $colorBorder; } +/*============================================================================ + Responsive tables, defined with .table--responsive on table element. + Only defined for IE9+ +==============================================================================*/ +html:not(.lt-ie9) { + .table--responsive { + @include at-query($max, $small) { + thead { + display: none; + } + + tr { + display: block; + } + + // IE9 table layout fixes + tr, + td { + float: left; + clear: both; + width: 100%; + } + + th, + td { + display: block; + text-align: right; + padding: 15px; + } + + td:before { + content: attr(data-label); + float: left; + text-align: center; + font-size: 12px; + padding-right: 10px; + } + + &.cart-table { + img { + margin: 0 auto; + } + + .js-qty { + float: right; + } + } + } + } + + @include at-query($max, $small) { + .table--small-hide { + display: none !important; + } + + .table__section + .table__section { + position: relative; + margin-top: 10px; + padding-top: 15px; + + &:after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 15px; + right: 15px; + border-bottom: 1px solid $colorBorder; + } + } + } +} + /*============================================================================ #OOCSS Media Object From 51c6152f1ebd4880f0d86b079b0b17cf7101f2e9 Mon Sep 17 00:00:00 2001 From: stevebosworth Date: Thu, 14 May 2015 00:42:30 -0400 Subject: [PATCH 3/6] fixed indendation, added hidden text --- assets/timber.scss.liquid | 1 + locales/en.default.json | 4 +++- snippets/product-grid-item.liquid | 1 + templates/cart.liquid | 22 +++++++++++----------- templates/collection.list.liquid | 2 +- templates/product.liquid | 2 ++ templates/search.liquid | 2 +- 7 files changed, 20 insertions(+), 14 deletions(-) diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid index 0a321267c..66a6959ff 100755 --- a/assets/timber.scss.liquid +++ b/assets/timber.scss.liquid @@ -29,6 +29,7 @@ #Links and Buttons #Lists #Tables + #Reponsive Tables #OOCSS Media Object #Images and Iframes #Forms diff --git a/locales/en.default.json b/locales/en.default.json index 5e3b301b6..24e6a5188 100644 --- a/locales/en.default.json +++ b/locales/en.default.json @@ -263,7 +263,9 @@ "general": { "previous_product_html": "← Previous Product", "next_product_html": "Next Product →", - "from_text_html": "From {{ price }}" + "from_text_html": "From {{ price }}", + "sale_price": "Sale price", + "regular_price": "Regular price" }, "product": { "sold_out": "Sold Out", diff --git a/snippets/product-grid-item.liquid b/snippets/product-grid-item.liquid index 0a91c3b6f..bc0108855 100755 --- a/snippets/product-grid-item.liquid +++ b/snippets/product-grid-item.liquid @@ -83,6 +83,7 @@
{{ 'products.product.sold_out' | t }} {% endif %} {% if on_sale %} +
{{ product.compare_at_price | money }} {% endif %}

diff --git a/templates/cart.liquid b/templates/cart.liquid index 059b4f357..89bca19c3 100755 --- a/templates/cart.liquid +++ b/templates/cart.liquid @@ -97,18 +97,18 @@ {% endif %} -

- {{ 'cart.general.subtotal' | t }} - {{ cart.total_price | money }} -

-

{{ 'cart.general.shipping_at_checkout' | t }}

- - +

+ {{ 'cart.general.subtotal' | t }} + {{ cart.total_price | money }} +

+

{{ 'cart.general.shipping_at_checkout' | t }}

+ + - {% if additional_checkout_buttons %} -
{{ content_for_additional_checkout_buttons }}
- {% endif %} - + {% if additional_checkout_buttons %} +
{{ content_for_additional_checkout_buttons }}
+ {% endif %} + diff --git a/templates/collection.list.liquid b/templates/collection.list.liquid index b0d50215d..3078853d5 100755 --- a/templates/collection.list.liquid +++ b/templates/collection.list.liquid @@ -127,7 +127,7 @@
{{ 'products.product.sold_out' | t }} {% endif %} {% if on_sale %} -
{{ product.compare_at_price | money }} +
{{ product.compare_at_price | money }} {% endif %}
diff --git a/templates/product.liquid b/templates/product.liquid index 740c630dc..df0331f95 100755 --- a/templates/product.liquid +++ b/templates/product.liquid @@ -90,11 +90,13 @@ {% endfor %} + {{ current_variant.price | money }} {% if product.compare_at_price_max > product.price %} +

{{ 'products.product.compare_at' | t }} {{ current_variant.compare_at_price | money }}

diff --git a/templates/search.liquid b/templates/search.liquid index c902ed3ef..bbaf8f219 100755 --- a/templates/search.liquid +++ b/templates/search.liquid @@ -109,7 +109,7 @@
{{ 'products.product.sold_out' | t }} {% endif %} {% if on_sale %} -
{{ item.compare_at_price | money }} +
{{ item.compare_at_price | money }} {% endif %}

{% endif %} From b674987452d35e90864c1e23fd61981680caab2f Mon Sep 17 00:00:00 2001 From: stevebosworth Date: Thu, 14 May 2015 10:40:28 -0400 Subject: [PATCH 4/6] added .visually-hidden, removed ie8 conditionals --- assets/timber.scss.liquid | 120 +++++++++++++++++++------------------- 1 file changed, 61 insertions(+), 59 deletions(-) diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid index 66a6959ff..2a4f5a2d1 100755 --- a/assets/timber.scss.liquid +++ b/assets/timber.scss.liquid @@ -745,6 +745,14 @@ body { } } +.visually-hidden { + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + height: 1px; width: 1px; + margin: -1px; padding: 0; border: 0; +} + /*============================================================================ #Typography ==============================================================================*/ @@ -1195,71 +1203,69 @@ th, td { Responsive tables, defined with .table--responsive on table element. Only defined for IE9+ ==============================================================================*/ -html:not(.lt-ie9) { - .table--responsive { - @include at-query($max, $small) { - thead { - display: none; - } +.table--responsive { + @include at-query($max, $small) { + thead { + display: none; + } - tr { - display: block; - } + tr { + display: block; + } - // IE9 table layout fixes - tr, - td { - float: left; - clear: both; - width: 100%; - } + // IE9 table layout fixes + tr, + td { + float: left; + clear: both; + width: 100%; + } - th, - td { - display: block; - text-align: right; - padding: 15px; - } + th, + td { + display: block; + text-align: right; + padding: 15px; + } - td:before { - content: attr(data-label); - float: left; - text-align: center; - font-size: 12px; - padding-right: 10px; - } + td:before { + content: attr(data-label); + float: left; + text-align: center; + font-size: 12px; + padding-right: 10px; + } - &.cart-table { - img { - margin: 0 auto; - } + &.cart-table { + img { + margin: 0 auto; + } - .js-qty { - float: right; - } + .js-qty { + float: right; } } } +} - @include at-query($max, $small) { - .table--small-hide { - display: none !important; - } +@include at-query($max, $small) { + .table--small-hide { + display: none !important; + } - .table__section + .table__section { - position: relative; - margin-top: 10px; - padding-top: 15px; - - &:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: 15px; - right: 15px; - border-bottom: 1px solid $colorBorder; - } + .table__section + .table__section { + position: relative; + margin-top: 10px; + padding-top: 15px; + + &:after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 15px; + right: 15px; + border-bottom: 1px solid $colorBorder; } } } @@ -1610,11 +1616,7 @@ label.error { remaining accessible to screen readers (h5bp.com) ==============================================================================*/ .supports-fontface .icon-fallback-text .fallback-text { - clip: rect(0, 0, 0, 0); - overflow: hidden; - position: absolute; - height: 1px; - width: 1px; + @extend .visually-hidden; } .icon:before { From a57431c0ab545e1d9e3a9ec4e63946af50dd3f9f Mon Sep 17 00:00:00 2001 From: stevebosworth Date: Thu, 14 May 2015 15:10:55 -0400 Subject: [PATCH 5/6] updated a11y prices and cart table layout --- snippets/product-grid-item.liquid | 2 +- templates/cart.liquid | 38 ++++++++++++++----------------- templates/collection.list.liquid | 2 +- 3 files changed, 19 insertions(+), 23 deletions(-) diff --git a/snippets/product-grid-item.liquid b/snippets/product-grid-item.liquid index bc0108855..bc9962c35 100755 --- a/snippets/product-grid-item.liquid +++ b/snippets/product-grid-item.liquid @@ -83,7 +83,7 @@
{{ 'products.product.sold_out' | t }} {% endif %} {% if on_sale %} - +
{{ product.compare_at_price | money }} {% endif %}

diff --git a/templates/cart.liquid b/templates/cart.liquid index 89bca19c3..de4cec32a 100755 --- a/templates/cart.liquid +++ b/templates/cart.liquid @@ -89,28 +89,24 @@ {% endfor %} - - {% if settings.cart_notes_enable %} - - - - - {% endif %} - -

- {{ 'cart.general.subtotal' | t }} - {{ cart.total_price | money }} -

-

{{ 'cart.general.shipping_at_checkout' | t }}

- - - - {% if additional_checkout_buttons %} -
{{ content_for_additional_checkout_buttons }}
- {% endif %} - - +
+ {% if settings.cart_notes_enable %} +
+ + +
+ {% endif %} +
+

+ {{ 'cart.general.subtotal' | t }} + {{ cart.total_price | money }} +

+

{{ 'cart.general.shipping_at_checkout' | t }}

+ + +
+
{% else %} {% comment %} diff --git a/templates/collection.list.liquid b/templates/collection.list.liquid index 3078853d5..86f47b7dd 100755 --- a/templates/collection.list.liquid +++ b/templates/collection.list.liquid @@ -127,7 +127,7 @@
{{ 'products.product.sold_out' | t }} {% endif %} {% if on_sale %} -
{{ product.compare_at_price | money }} +
{{ product.compare_at_price | money }} {% endif %}
From 93d82d9735e030e1c8a6a5d6043024414191994b Mon Sep 17 00:00:00 2001 From: stevebosworth Date: Wed, 20 May 2015 12:37:41 -0400 Subject: [PATCH 6/6] added i18n strings --- locales/de.json | 4 +++- locales/es.json | 4 +++- locales/fr.json | 4 +++- locales/pt-BR.json | 4 +++- locales/pt-PT.json | 4 +++- 5 files changed, 15 insertions(+), 5 deletions(-) diff --git a/locales/de.json b/locales/de.json index 6e4aa8156..2fe5f40fd 100644 --- a/locales/de.json +++ b/locales/de.json @@ -263,7 +263,9 @@ "general": { "previous_product_html": "← Vorheriger Artikel", "next_product_html": "Nächster Artikel →", - "from_text_html": "Von {{ price }}" + "from_text_html": "Von {{ price }}", + "sale_price": "Sonderpreis", + "regular_price": "Normaler Preis" }, "product": { "sold_out": "Ausverkauft", diff --git a/locales/es.json b/locales/es.json index 80e3cfc36..2332b4c60 100644 --- a/locales/es.json +++ b/locales/es.json @@ -263,7 +263,9 @@ "general": { "previous_product_html": "← Producto anterior", "next_product_html": "Siguiente producto →", - "from_text_html": "De {{ price }}" + "from_text_html": "De {{ price }}", + "sale_price": "Precio de oferta", + "regular_price": "Precio habitual" }, "product": { "sold_out": "Agotado", diff --git a/locales/fr.json b/locales/fr.json index 2b95e469f..4aee764b5 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -263,7 +263,9 @@ "general": { "previous_product_html": "← Produit précédent", "next_product_html": "Produit suivant →", - "from_text_html": "À partir de {{ price }}" + "from_text_html": "À partir de {{ price }}", + "sale_price": "Prix réduit", + "regular_price": "Prix régulier" }, "product": { "sold_out": "Épuisé", diff --git a/locales/pt-BR.json b/locales/pt-BR.json index a761a60ab..b27cee2df 100644 --- a/locales/pt-BR.json +++ b/locales/pt-BR.json @@ -263,7 +263,9 @@ "general": { "previous_product_html": "← Produto anterior", "next_product_html": "Próximo produto →", - "from_text_html": "A partir de {{ price }}" + "from_text_html": "A partir de {{ price }}", + "sale_price": "Preço promocional", + "regular_price": "Preço normal" }, "product": { "sold_out": "Esgotado", diff --git a/locales/pt-PT.json b/locales/pt-PT.json index cec17f282..699311542 100644 --- a/locales/pt-PT.json +++ b/locales/pt-PT.json @@ -263,7 +263,9 @@ "general": { "previous_product_html": "← Produto Anterior", "next_product_html": "Produto Seguinte →", - "from_text_html": "Desde {{ price }}" + "from_text_html": "Desde {{ price }}", + "sale_price": "Preço de saldo", + "regular_price": "Preço normal" }, "product": { "sold_out": "Esgotado",