Version Description
- 08/01/2013 =
- Set grid as default view
- Stricter CSS for list view
- Only add the excerpt on shop / product category pages
- Removed toggle button styling - this should be done in your theme
Download this release
Release Info
| Developer | jameskoster |
| Plugin |  WooCommerce Grid / List toggle |
| Version | 0.1.1 |
| Comparing to | |
| See all releases | |
Code changes from version 0.1 to 0.1.1
- assets/css/style.css +2 -57
- assets/css/style.less +2 -54
- assets/js/jquery.gridlistview.js +4 -0
- assets/js/jquery.gridlistview.min.js +1 -1
- grid-list-toggle.php +5 -3
- readme.txt +12 -1
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 {
|
|
@@ -37,61 +37,6 @@ 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 {
|
| 37 |
ul.products.list li.product hr {
|
| 38 |
clear: both;
|
| 39 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 40 |
#gridlist-toggle a span {
|
| 41 |
display: none;
|
| 42 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
assets/css/style.less
CHANGED
|
@@ -11,8 +11,8 @@ 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 {
|
|
@@ -39,61 +39,9 @@ ul.products.list {
|
|
| 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 {
|
| 39 |
}
|
| 40 |
|
| 41 |
#gridlist-toggle {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 42 |
a {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 43 |
span {
|
| 44 |
display: none;
|
| 45 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 46 |
}
|
| 47 |
}
|
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.
|
| 10 |
License: GPLv2 or later
|
| 11 |
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
| 12 |
*/
|
|
@@ -38,10 +38,12 @@ if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', g
|
|
| 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
|
| 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
|
| 9 |
+
Tested up to: 3.5
|
| 10 |
License: GPLv2 or later
|
| 11 |
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
| 12 |
*/
|
| 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 |
}
|
| 48 |
|
| 49 |
// Scripts & styles
|
readme.txt
CHANGED
|
@@ -3,7 +3,7 @@ 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 |
|
|
@@ -17,6 +17,8 @@ The list view arranges products in a vertical list and pulls in the excerpt to g
|
|
| 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
|
|
@@ -29,11 +31,20 @@ The grid view you will be familiar with as this is WooCommerce's default layout
|
|
| 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 |
|
| 34 |
1. Example of products laid out in list view in Twenty Eleven
|
| 35 |
|
| 36 |
== Changelog ==
|
| 37 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 38 |
= 0.1 =
|
| 39 |
Initial release.
|
| 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 |
|
| 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
|
| 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.
|
| 36 |
+
|
| 37 |
== Screenshots ==
|
| 38 |
|
| 39 |
1. Example of products laid out in list view in Twenty Eleven
|
| 40 |
|
| 41 |
== Changelog ==
|
| 42 |
|
| 43 |
+
= 0.1.1 - 08/01/2013 =
|
| 44 |
+
* Set grid as default view
|
| 45 |
+
* Stricter CSS for list view
|
| 46 |
+
* Only add the excerpt on shop / product category pages
|
| 47 |
+
* Removed toggle button styling - this should be done in your theme
|
| 48 |
+
|
| 49 |
= 0.1 =
|
| 50 |
Initial release.
|
