WooCommerce Grid / List toggle - Version 0.2

Version Description

  • 09/01/2013 =
  • Delayed gridlist_toggle_button() priority for better WooCommerce 2.0 compatibility
  • Even stricter CSS for list view (improves theme compatibility)
  • Changed #gridlist-toggle to .gridlist-toggle
Download this release

Release Info

Developer jameskoster
Plugin Icon 128x128 WooCommerce Grid / List toggle
Version 0.2
Comparing to
See all releases

Code changes from version 0.1 to 0.2

Files changed (6) hide show
  1. assets/css/style.css +6 -57
  2. assets/css/style.less +6 -56
  3. assets/js/jquery.gridlistview.js +4 -0
  4. assets/js/jquery.gridlistview.min.js +1 -1
  5. grid-list-toggle.php +11 -9
  6. readme.txt +20 -4
assets/css/style.css CHANGED
@@ -5,8 +5,8 @@ ul.products.grid hr {
5
  display: none;
6
  }
7
  ul.products.list li.product {
8
- float: none;
9
- width: 100%;
10
  text-align: left !important;
11
  }
12
  ul.products.list li.product:after {
@@ -15,7 +15,7 @@ ul.products.list li.product:after {
15
  clear: both;
16
  }
17
  ul.products.list li.product img {
18
- width: 30.75%;
19
  float: left;
20
  margin-bottom: 1.5em;
21
  -webkit-transition: none !important;
@@ -37,61 +37,10 @@ ul.products.list li.product .gridlist-buttonwrap {
37
  ul.products.list li.product hr {
38
  clear: both;
39
  }
40
- #gridlist-toggle {
41
- display: inline-block;
42
- border: 1px solid #555;
43
- padding: 0 !important;
44
- margin-bottom: 1.5em;
45
- background: #eeeeee;
46
- background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#aaaaaa));
47
- background: -webkit-linear-gradient(#eeeeee, #aaaaaa);
48
- background: -moz-linear-gradient(center top, #eeeeee 0%, #aaaaaa 100%);
49
- background: -moz-gradient(center top, #eeeeee 0%, #aaaaaa 100%);
50
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#eeeeee,endColorstr=#aaaaaa);
51
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#eeeeee, endColorstr=#aaaaaa)";
52
- -webkit-border-radius: 3px;
53
- -moz-border-radius: 3px;
54
- border-radius: 3px;
55
- line-height: 1em !important;
56
- -webkit-box-shadow: inset 0 1px #eeeeee, inset 0 -1px #999999, 0 1px 2px rgba(0, 0, 0, 0.3);
57
- box-shadow: inset 0 1px #eeeeee, inset 0 -1px #999999, 0 1px 2px rgba(0, 0, 0, 0.3);
58
- }
59
- #gridlist-toggle a {
60
- display: inline-block;
61
- width: 2em;
62
- text-align: center;
63
- text-shadow: 0 1px 0 #ffffff;
64
  text-decoration: none !important;
65
- font-weight: normal !important;
66
- font-family: sans-serif !important;
67
- font-size: 1em !important;
68
- line-height: 1.5em !important;
69
- color: #222 !important;
70
- text-shadow: 0 1px 0 #eeeeee;
71
- -webkit-transition: background ease-in-out 0.2s;
72
- -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
73
- box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
74
- }
75
- #gridlist-toggle a#grid {
76
- border-right: 1px solid #000;
77
  }
78
- #gridlist-toggle a span {
79
  display: none;
80
  }
81
- #gridlist-toggle a:hover {
82
- color: #000;
83
- background: rgba(255, 255, 255, 0.2);
84
- }
85
- #gridlist-toggle a.active {
86
- background: #444444;
87
- background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666));
88
- background: -webkit-linear-gradient(#444444, #666666);
89
- background: -moz-linear-gradient(center top, #444444 0%, #666666 100%);
90
- background: -moz-gradient(center top, #444444 0%, #666666 100%);
91
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#444444,endColorstr=#666666);
92
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#444444, endColorstr=#666666)";
93
- color: #fff !important;
94
- text-shadow: 0 1px 0 #000000;
95
- -webkit-box-shadow: inset 0 1px 2px #444444, inset 0 -1px 0 #777777;
96
- -moz-box-shadow: inset 0 1px 2px #444444, inset 0 -1px 0 #777777;
97
- }
5
  display: none;
6
  }
7
  ul.products.list li.product {
8
+ float: none !important;
9
+ width: 100% !important;
10
  text-align: left !important;
11
  }
12
  ul.products.list li.product:after {
15
  clear: both;
16
  }
17
  ul.products.list li.product img {
18
+ width: 30.75% !important;
19
  float: left;
20
  margin-bottom: 1.5em;
21
  -webkit-transition: none !important;
37
  ul.products.list li.product hr {
38
  clear: both;
39
  }
40
+ .gridlist-toggle a {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  text-decoration: none !important;
42
+ font-size: 1.6em;
 
 
 
 
 
 
 
 
 
 
 
43
  }
44
+ .gridlist-toggle a span {
45
  display: none;
46
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
assets/css/style.less CHANGED
@@ -11,12 +11,12 @@ ul.products.grid {
11
 
12
  ul.products.list {
13
  li.product {
14
- float: none;
15
- width:100%;
16
  .clearfix;
17
  text-align: left !important;
18
  img {
19
- width:30.75%;
20
  float: left;
21
  margin-bottom:1.5em;
22
  -webkit-transition:none !important;
@@ -38,62 +38,12 @@ ul.products.list {
38
  }
39
  }
40
 
41
- #gridlist-toggle {
42
- display: inline-block;
43
- border:1px solid #555;
44
- padding:0 !important;
45
- margin-bottom:1.5em;
46
- .vertical_gradient(#eee,#aaa);
47
- .border_radius(3px);
48
- line-height: 1em !important;
49
- -webkit-box-shadow:
50
- inset 0 1px #eee,
51
- inset 0 -1px #999,
52
- 0 1px 2px rgba(0,0,0,0.3);
53
- box-shadow:
54
- inset 0 1px #eee,
55
- inset 0 -1px #999,
56
- 0 1px 2px rgba(0,0,0,0.3);
57
  a {
58
- display: inline-block;
59
- width:2em;
60
- text-align: center;
61
- .text_shadow(0,1px,0,#fff);
62
- text-decoration:none !important;
63
- font-weight: normal !important;
64
- font-family: sans-serif !important;
65
- font-size:1em !important;
66
- line-height: 1.5em !important;
67
- color: #222 !important;
68
- .text_shadow(0,1px,0,#eee);
69
- -webkit-transition:background ease-in-out .2s;
70
- -webkit-box-shadow:
71
- inset 0 0 5px rgba(255,255,255,0.7),
72
- inset 0 0 0 1px rgba(255,255,255,0.4);
73
- box-shadow:
74
- inset 0 0 5px rgba(255,255,255,0.7),
75
- inset 0 0 0 1px rgba(255,255,255,0.4);
76
- &#grid {
77
- border-right:1px solid #000;
78
- }
79
  span {
80
  display: none;
81
  }
82
- &:hover {
83
- color: #000;
84
- background: rgba(255,255,255,0.2);
85
- }
86
- &.active {
87
- .vertical_gradient(#444,#666);
88
-
89
- color: #fff !important;
90
- .text_shadow(0,1px,0,#000);
91
- -webkit-box-shadow:
92
- inset 0 1px 2px #444,
93
- inset 0 -1px 0 #777;
94
- -moz-box-shadow:
95
- inset 0 1px 2px #444,
96
- inset 0 -1px 0 #777;
97
- }
98
  }
99
  }
11
 
12
  ul.products.list {
13
  li.product {
14
+ float: none !important;
15
+ width:100% !important;
16
  .clearfix;
17
  text-align: left !important;
18
  img {
19
+ width:30.75% !important;
20
  float: left;
21
  margin-bottom:1.5em;
22
  -webkit-transition:none !important;
38
  }
39
  }
40
 
41
+ .gridlist-toggle {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  a {
43
+ text-decoration: none !important;
44
+ font-size:1.6em;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  span {
46
  display: none;
47
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  }
49
  }
assets/js/jquery.gridlistview.js CHANGED
@@ -25,6 +25,10 @@ jQuery(document).ready(function(){
25
  if (jQuery.cookie('gridcookie')) {
26
  jQuery('ul.products, #gridlist-toggle').addClass(jQuery.cookie('gridcookie'));
27
  }
 
 
 
 
28
 
29
  if (jQuery.cookie('gridcookie') == 'grid') {
30
  jQuery('#gridlist-toggle #grid').addClass('active');
25
  if (jQuery.cookie('gridcookie')) {
26
  jQuery('ul.products, #gridlist-toggle').addClass(jQuery.cookie('gridcookie'));
27
  }
28
+
29
+ if (jQuery.cookie('gridcookie') == null) {
30
+ jQuery('ul.products').addClass('grid');
31
+ }
32
 
33
  if (jQuery.cookie('gridcookie') == 'grid') {
34
  jQuery('#gridlist-toggle #grid').addClass('active');
assets/js/jquery.gridlistview.min.js CHANGED
@@ -1,2 +1,2 @@
1
  // The toggle
2
- jQuery(document).ready(function(){jQuery("#grid").click(function(){jQuery(this).addClass("active");jQuery("#list").removeClass("active");jQuery.cookie("gridcookie","grid",{path:"/"});jQuery("ul.products").fadeOut(300,function(){jQuery(this).addClass("grid").removeClass("list").fadeIn(300)});return!1});jQuery("#list").click(function(){jQuery(this).addClass("active");jQuery("#grid").removeClass("active");jQuery.cookie("gridcookie","list",{path:"/"});jQuery("ul.products").fadeOut(300,function(){jQuery(this).removeClass("grid").addClass("list").fadeIn(300)});return!1});jQuery.cookie("gridcookie")&&jQuery("ul.products, #gridlist-toggle").addClass(jQuery.cookie("gridcookie"));if(jQuery.cookie("gridcookie")=="grid"){jQuery("#gridlist-toggle #grid").addClass("active");jQuery("#gridlist-toggle #list").removeClass("active")}if(jQuery.cookie("gridcookie")=="list"){jQuery("#gridlist-toggle #list").addClass("active");jQuery("#gridlist-toggle #grid").removeClass("active")}jQuery("#gridlist-toggle a").click(function(e){e.preventDefault()})});
1
  // The toggle
2
+ jQuery(document).ready(function(){jQuery("#grid").click(function(){jQuery(this).addClass("active");jQuery("#list").removeClass("active");jQuery.cookie("gridcookie","grid",{path:"/"});jQuery("ul.products").fadeOut(300,function(){jQuery(this).addClass("grid").removeClass("list").fadeIn(300)});return!1});jQuery("#list").click(function(){jQuery(this).addClass("active");jQuery("#grid").removeClass("active");jQuery.cookie("gridcookie","list",{path:"/"});jQuery("ul.products").fadeOut(300,function(){jQuery(this).removeClass("grid").addClass("list").fadeIn(300)});return!1});jQuery.cookie("gridcookie")&&jQuery("ul.products, #gridlist-toggle").addClass(jQuery.cookie("gridcookie"));jQuery.cookie("gridcookie")==null&&jQuery("ul.products").addClass("grid");if(jQuery.cookie("gridcookie")=="grid"){jQuery("#gridlist-toggle #grid").addClass("active");jQuery("#gridlist-toggle #list").removeClass("active")}if(jQuery.cookie("gridcookie")=="list"){jQuery("#gridlist-toggle #list").addClass("active");jQuery("#gridlist-toggle #grid").removeClass("active")}jQuery("#gridlist-toggle a").click(function(e){e.preventDefault()})});
grid-list-toggle.php CHANGED
@@ -2,11 +2,11 @@
2
  /*
3
  Plugin Name: WooCommerce Grid / List toggle
4
  Description: Adds a grid/list view toggle to product archives
5
- Version: 0.1
6
  Author: jameskoster
7
  Author URI: http://jameskoster.co.uk
8
  Requires at least: 3.1
9
- Tested up to: 3.4.1
10
  License: GPLv2 or later
11
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
12
  */
@@ -36,12 +36,14 @@ if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', g
36
  // Functions
37
  // Setup
38
  function setup_gridlist() {
39
- add_action( 'get_header', array(&$this, 'setup_scripts_styles'), 20);
40
- add_action( 'woocommerce_before_shop_loop', array(&$this, 'gridlist_toggle_button'), 20);
41
- add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_excerpt', 5);
42
- add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_buttonwrap_open'), 9);
43
- add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_buttonwrap_close'), 11);
44
- add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_hr'), 30);
 
 
45
  }
46
 
47
  // Scripts & styles
@@ -56,7 +58,7 @@ if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', g
56
  // Toggle button
57
  function gridlist_toggle_button() {
58
  ?>
59
- <nav id="gridlist-toggle">
60
  <a href="#" id="grid" class="active" title="<?php _e('Grid view', 'wc_list_grid_toggle'); ?>">&#8862; <span><?php _e('Grid view', 'wc_list_grid_toggle'); ?></span></a><a href="#" id="list" title="<?php _e('List view', 'wc_list_grid_toggle'); ?>">&#8863; <span><?php _e('List view', 'wc_list_grid_toggle'); ?></span></a>
61
  </nav>
62
  <?php
2
  /*
3
  Plugin Name: WooCommerce Grid / List toggle
4
  Description: Adds a grid/list view toggle to product archives
5
+ Version: 0.2
6
  Author: jameskoster
7
  Author URI: http://jameskoster.co.uk
8
  Requires at least: 3.1
9
+ Tested up to: 3.5
10
  License: GPLv2 or later
11
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
12
  */
36
  // Functions
37
  // Setup
38
  function setup_gridlist() {
39
+ if ( is_shop() || is_product_category() || is_product_tag() ) {
40
+ add_action( 'get_header', array(&$this, 'setup_scripts_styles'), 20);
41
+ add_action( 'woocommerce_before_shop_loop', array(&$this, 'gridlist_toggle_button'), 30);
42
+ add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_buttonwrap_open'), 9);
43
+ add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_buttonwrap_close'), 11);
44
+ add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_hr'), 30);
45
+ add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_excerpt', 5);
46
+ }
47
  }
48
 
49
  // Scripts & styles
58
  // Toggle button
59
  function gridlist_toggle_button() {
60
  ?>
61
+ <nav class="gridlist-toggle">
62
  <a href="#" id="grid" class="active" title="<?php _e('Grid view', 'wc_list_grid_toggle'); ?>">&#8862; <span><?php _e('Grid view', 'wc_list_grid_toggle'); ?></span></a><a href="#" id="list" title="<?php _e('List view', 'wc_list_grid_toggle'); ?>">&#8863; <span><?php _e('List view', 'wc_list_grid_toggle'); ?></span></a>
63
  </nav>
64
  <?php
readme.txt CHANGED
@@ -2,8 +2,8 @@
2
  Contributors: jameskoster
3
  Tags: woocommerce, grid, list, products, ecommerce
4
  Requires at least: 3.3
5
- Tested up to: 3.4.1
6
- Stable tag: 0.1
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -11,12 +11,14 @@ Adds a grid/list view toggle to product archives
11
 
12
  == Description ==
13
 
14
- WooCommerce Grid / List view is a simple plugin which adds a Grid / List toggle to your product archives allowing users to, you guessed it, toggle between grid / list views of your products.
15
 
16
  The list view arranges products in a vertical list and pulls in the excerpt to give a more detailed overview.
17
 
18
  The grid view you will be familiar with as this is WooCommerce's default layout for product archives.
19
 
 
 
20
  == Installation ==
21
 
22
  1. Upload `woocommerce-grid-list-toggle` to the `/wp-content/plugins/` directory
@@ -27,7 +29,10 @@ The grid view you will be familiar with as this is WooCommerce's default layout
27
 
28
  = It doesn't work with my theme, what gives? =
29
 
30
- You may see varied results depending on how the theme has been built and whether it's already pulling the excerpt into product archives. I've tried to cover all bases with CSS but you may occasionally need to make your own adjustments.
 
 
 
31
 
32
  == Screenshots ==
33
 
@@ -35,5 +40,16 @@ You may see varied results depending on how the theme has been built and whether
35
 
36
  == Changelog ==
37
 
 
 
 
 
 
 
 
 
 
 
 
38
  = 0.1 =
39
  Initial release.
2
  Contributors: jameskoster
3
  Tags: woocommerce, grid, list, products, ecommerce
4
  Requires at least: 3.3
5
+ Tested up to: 3.5
6
+ Stable tag: 0.2
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
11
 
12
  == Description ==
13
 
14
+ WooCommerce Grid / List toggle is a simple plugin which adds a Grid / List toggle to your product archives allowing users to, you guessed it, toggle between grid / list views of your products.
15
 
16
  The list view arranges products in a vertical list and pulls in the excerpt to give a more detailed overview.
17
 
18
  The grid view you will be familiar with as this is WooCommerce's default layout for product archives.
19
 
20
+ Please feel free to contribute on <a href="https://github.com/jameskoster/woocommerce-grid-list-toggle">github</a>.
21
+
22
  == Installation ==
23
 
24
  1. Upload `woocommerce-grid-list-toggle` to the `/wp-content/plugins/` directory
29
 
30
  = It doesn't work with my theme, what gives? =
31
 
32
+ You may see varied results depending on how the theme has been built and whether it's already pulling the excerpt into product archives. I've tried to cover all bases with CSS but it's likely you'll need to make your own adjustments. WooCommerce Grid / List toggle has been tested with Twenty Ten, Twenty Eleven and Twenty Twelve.
33
+
34
+ = I found and fixed a bug how can I help? =
35
+ Thanks! Please fork the repo on <a href="https://github.com/jameskoster/woocommerce-grid-list-toggle">github</a>, push your fix then send a pull request.
36
 
37
  == Screenshots ==
38
 
40
 
41
  == Changelog ==
42
 
43
+ = 0.2 - 09/01/2013 =
44
+ * Delayed gridlist_toggle_button() priority for better WooCommerce 2.0 compatibility
45
+ * Even stricter CSS for list view (improves theme compatibility)
46
+ * Changed #gridlist-toggle to .gridlist-toggle
47
+
48
+ = 0.1.1 - 08/01/2013 =
49
+ * Set grid as default view
50
+ * Stricter CSS for list view
51
+ * Only add the excerpt on shop / product category pages
52
+ * Removed toggle button styling - this should be done in your theme
53
+
54
  = 0.1 =
55
  Initial release.