WooCommerce Grid / List toggle - Version 0.2.1

Version Description

  • 10/01/2013 =
  • Add active class to grid button on initial load
Download this release

Release Info

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

Code changes from version 0.1.1 to 0.2.1

Files changed (6) hide show
  1. assets/css/style.css +6 -2
  2. assets/css/style.less +4 -2
  3. assets/js/jquery.gridlistview.js +1 -0
  4. assets/js/jquery.gridlistview.min.js +1 -1
  5. grid-list-toggle.php +7 -7
  6. readme.txt +12 -4
assets/css/style.css CHANGED
@@ -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,6 +37,10 @@ ul.products.list li.product .gridlist-buttonwrap {
37
  ul.products.list li.product hr {
38
  clear: both;
39
  }
40
- #gridlist-toggle a span {
 
 
 
 
41
  display: none;
42
  }
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
@@ -16,7 +16,7 @@ ul.products.list {
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,8 +38,10 @@ ul.products.list {
38
  }
39
  }
40
 
41
- #gridlist-toggle {
42
  a {
 
 
43
  span {
44
  display: none;
45
  }
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
  }
assets/js/jquery.gridlistview.js CHANGED
@@ -28,6 +28,7 @@ jQuery(document).ready(function(){
28
 
29
  if (jQuery.cookie('gridcookie') == null) {
30
  jQuery('ul.products').addClass('grid');
 
31
  }
32
 
33
  if (jQuery.cookie('gridcookie') == 'grid') {
28
 
29
  if (jQuery.cookie('gridcookie') == null) {
30
  jQuery('ul.products').addClass('grid');
31
+ jQuery('#gridlist-toggle #grid').addClass('active');
32
  }
33
 
34
  if (jQuery.cookie('gridcookie') == 'grid') {
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"));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()})});
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")==null){jQuery("ul.products").addClass("grid");jQuery("#gridlist-toggle #grid").addClass("active")}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,7 +2,7 @@
2
  /*
3
  Plugin Name: WooCommerce Grid / List toggle
4
  Description: Adds a grid/list view toggle to product archives
5
- Version: 0.1.1
6
  Author: jameskoster
7
  Author URI: http://jameskoster.co.uk
8
  Requires at least: 3.1
@@ -36,12 +36,12 @@ 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', array(&$this, 'gridlist_buttonwrap_open'), 9);
42
- add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_buttonwrap_close'), 11);
43
- add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_hr'), 30);
44
  if ( is_shop() || is_product_category() || is_product_tag() ) {
 
 
 
 
 
45
  add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_excerpt', 5);
46
  }
47
  }
@@ -58,7 +58,7 @@ if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', g
58
  // Toggle button
59
  function gridlist_toggle_button() {
60
  ?>
61
- <nav id="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
2
  /*
3
  Plugin Name: WooCommerce Grid / List toggle
4
  Description: Adds a grid/list view toggle to product archives
5
+ Version: 0.2.1
6
  Author: jameskoster
7
  Author URI: http://jameskoster.co.uk
8
  Requires at least: 3.1
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
  }
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.1
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -11,7 +11,7 @@ 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
 
@@ -29,7 +29,7 @@ Please feel free to contribute on <a href="https://github.com/jameskoster/woocom
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 you may occasionally need to make your own adjustments.
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.
@@ -40,6 +40,14 @@ Thanks! Please fork the repo on <a href="https://github.com/jameskoster/woocomme
40
 
41
  == Changelog ==
42
 
 
 
 
 
 
 
 
 
43
  = 0.1.1 - 08/01/2013 =
44
  * Set grid as default view
45
  * Stricter CSS for list view
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.1
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
 
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.
40
 
41
  == Changelog ==
42
 
43
+ = 0.2.1 - 10/01/2013 =
44
+ * Add active class to grid button on initial load
45
+
46
+ = 0.2 - 09/01/2013 =
47
+ * Delayed gridlist_toggle_button() priority for better WooCommerce 2.0 compatibility
48
+ * Even stricter CSS for list view (improves theme compatibility)
49
+ * Changed #gridlist-toggle to .gridlist-toggle
50
+
51
  = 0.1.1 - 08/01/2013 =
52
  * Set grid as default view
53
  * Stricter CSS for list view