Storefront Product Pagination - Version 1.0.0

Version Description

  • 04.01.2015 = Initial release.
Download this release

Release Info

Developer jameskoster
Plugin Icon 128x128 Storefront Product Pagination
Version 1.0.0
Comparing to
See all releases

Version 1.0.0

Files changed (8) hide show
  1. assets/css/style.css +60 -0
  2. assets/css/style.scss +96 -0
  3. assets/js/customizer.js +13 -0
  4. assets/js/customizer.min.js +1 -0
  5. changelog.txt +4 -0
  6. index.php +1 -0
  7. readme.txt +41 -0
  8. storefront-product-pagination.php +327 -0
assets/css/style.css ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .storefront-single-product-pagination a {
2
+ display: block;
3
+ width: 48%; }
4
+ .storefront-single-product-pagination a[rel="prev"] {
5
+ float: left; }
6
+ .storefront-single-product-pagination a[rel="next"] {
7
+ float: right; }
8
+
9
+ @media screen and (min-width: 768px) {
10
+ .storefront-single-product-pagination h2 {
11
+ clip: rect(1px 1px 1px 1px);
12
+ /* IE6, IE7 */
13
+ clip: rect(1px, 1px, 1px, 1px);
14
+ position: absolute !important; }
15
+ .storefront-single-product-pagination a {
16
+ display: block;
17
+ width: 17.942em;
18
+ position: fixed;
19
+ float: none;
20
+ background-color: #FCFCFC;
21
+ padding: 1em;
22
+ top: 45%; }
23
+ .storefront-single-product-pagination a img {
24
+ width: 4.236em;
25
+ opacity: 0.5;
26
+ -webkit-transition: all 0.5s ease;
27
+ -moz-transition: all 0.5s ease;
28
+ transition: all 0.5s ease; }
29
+ .storefront-single-product-pagination a:hover img {
30
+ opacity: 1; }
31
+ .storefront-single-product-pagination a .title {
32
+ width: 10.5em; }
33
+ .storefront-single-product-pagination a[rel="prev"] {
34
+ left: -11.706em;
35
+ border-left: 0;
36
+ -webkit-transition: left 0.5s ease;
37
+ -moz-transition: left 0.5s ease;
38
+ transition: left 0.5s ease; }
39
+ .storefront-single-product-pagination a[rel="prev"] img {
40
+ float: right;
41
+ margin-left: 1em; }
42
+ .storefront-single-product-pagination a[rel="prev"]:hover {
43
+ left: 0; }
44
+ .storefront-single-product-pagination a[rel="prev"] .title {
45
+ float: left;
46
+ display: block; }
47
+ .storefront-single-product-pagination a[rel="next"] {
48
+ right: -11.706em;
49
+ border-right: 0;
50
+ -webkit-transition: right 0.5s ease;
51
+ -moz-transition: right 0.5s ease;
52
+ transition: right 0.5s ease; }
53
+ .storefront-single-product-pagination a[rel="next"] img {
54
+ float: left;
55
+ margin-right: 1em; }
56
+ .storefront-single-product-pagination a[rel="next"]:hover {
57
+ right: 0; }
58
+ .storefront-single-product-pagination a[rel="next"] .title {
59
+ float: right;
60
+ display: block; } }
assets/css/style.scss ADDED
@@ -0,0 +1,96 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import 'susy';
2
+ @import 'bourbon';
3
+ @import '../../../../themes/storefront/sass/utils/variables';
4
+ @import '../../../../themes/storefront/sass/utils/mixins';
5
+
6
+ // Styles for mobile
7
+ .storefront-single-product-pagination {
8
+ a {
9
+ display: block;
10
+ width: 48%;
11
+
12
+ &[rel="prev"] {
13
+ float: left;
14
+ }
15
+
16
+ &[rel="next"] {
17
+ float: right;
18
+ }
19
+ }
20
+ }
21
+
22
+ @media screen and (min-width: 768px) {
23
+
24
+ // Styles for desktop
25
+ .storefront-single-product-pagination {
26
+ h2 {
27
+ @include screen_reader_text;
28
+ }
29
+
30
+ a {
31
+ display: block;
32
+ width: 17.942em;
33
+ position: fixed;
34
+ float: none;
35
+ background-color: $body-background;
36
+ padding: 1em;
37
+ top: 45%;
38
+
39
+ img {
40
+ width: 4.236em;
41
+ opacity: 0.5;
42
+ @include transition(all .5s ease);
43
+ }
44
+
45
+ &:hover {
46
+ img {
47
+ opacity: 1;
48
+ }
49
+ }
50
+
51
+ .title {
52
+ width: 10.5em;
53
+ }
54
+
55
+ &[rel="prev"] {
56
+ left: -11.706em;
57
+ border-left: 0;
58
+ @include transition(left .5s ease);
59
+
60
+ img {
61
+ float: right;
62
+ margin-left: 1em;
63
+ }
64
+
65
+ &:hover {
66
+ left: 0;
67
+ }
68
+
69
+ .title {
70
+ float: left;
71
+ display: block;
72
+ }
73
+ }
74
+
75
+ &[rel="next"] {
76
+ right: -11.706em;
77
+ border-right: 0;
78
+ @include transition(right .5s ease);
79
+
80
+ img {
81
+ float: left;
82
+ margin-right: 1em;
83
+ }
84
+
85
+ &:hover {
86
+ right: 0;
87
+ }
88
+
89
+ .title {
90
+ float: right;
91
+ display: block;
92
+ }
93
+ }
94
+ }
95
+ }
96
+ }
assets/js/customizer.js ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * Customizer enhancements for a better user experience.
3
+ *
4
+ * Contains handlers to make Theme Customizer preview reload changes asynchronously.
5
+ */
6
+
7
+ ( function( $ ) {
8
+ wp.customize( 'spp_background_color', function( value ) {
9
+ value.bind( function( to ) {
10
+ $( '.storefront-single-product-pagination a' ).css( 'background-color', to );
11
+ } );
12
+ } );
13
+ } )( jQuery );
assets/js/customizer.min.js ADDED
@@ -0,0 +1 @@
 
1
+ !function($){wp.customize("spp_background_color",function(o){o.bind(function(o){$(".storefront-single-product-pagination a").css("background-color",o)})})}(jQuery);
changelog.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
1
+ *** Storefront Product Pagination Changelog ***
2
+
3
+ 2015.04.01 - version 1.0.0
4
+ * Initial release
index.php ADDED
@@ -0,0 +1 @@
 
1
+ <?php // Silence is golden... ?>
readme.txt ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Storefront Product Pagination ===
2
+ Contributors: jameskoster, woothemes
3
+ Tags: woocommerce, ecommerce, products, storefront, pagination, next, previous
4
+ Requires at least: 3.5
5
+ Tested up to: 4.1.1
6
+ Stable tag: 1.0.0
7
+ License: GPLv2 or later
8
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
+
10
+ Add unobstrusive links to next/previous products on your WooCommerce single product pages.
11
+
12
+ == Description ==
13
+
14
+ A simple plugin that displays next and previous links on single product pages. A product thumbnail is displayed with the title revealed on hover. Products are ordered chronologically and the display can be customised in the Customizer.
15
+
16
+ This plugin requires both the WooCommerce eCommerce plugin and the Storefront theme to be installed.
17
+
18
+ == Installation ==
19
+
20
+ 1. Upload `storefront-product-pagination` to the `/wp-content/plugins/` directory
21
+ 2. Activate the plugin through the 'Plugins' menu in WordPress
22
+ 3. Configure the display in the Customizer (look for the 'Product Pagination' section).
23
+ 3. Done!
24
+
25
+ == Frequently Asked Questions ==
26
+
27
+ = I installed the plugin but cannot see the links =
28
+
29
+ First of all it's important to note that this plugin requires that <a href="https://wordpress.org/plugins/woocommerce/">WooCommerce</a> be installed, and that you use the <a href="https://wordpress.org/themes/storefront/">Storefront</a> theme.
30
+
31
+ The links will appear on any single product page, providing there is more than one product at your store.
32
+
33
+
34
+ == Screenshots ==
35
+
36
+ 1. The product pagination.
37
+
38
+ == Changelog ==
39
+
40
+ = 1.0.0 - 04.01.2015 =
41
+ Initial release.
storefront-product-pagination.php ADDED
@@ -0,0 +1,327 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Plugin Name: Storefront Product Pagination
4
+ * Plugin URI: http://woothemes.com/storefront/
5
+ * Description: Add unobstrusive links to next/previous products on your WooCommerce single product pages.
6
+ * Version: 1.0.0
7
+ * Author: WooThemes
8
+ * Author URI: http://woothemes.com/
9
+ * Requires at least: 4.0.0
10
+ * Tested up to: 4.0.0
11
+ *
12
+ * Text Domain: storefront-product-pagination
13
+ * Domain Path: /languages/
14
+ *
15
+ * @package Storefront_Product_Pagination
16
+ * @category Core
17
+ * @author James Koster
18
+ */
19
+
20
+ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
21
+
22
+
23
+ /**
24
+ * Returns the main instance of Storefront_Product_Pagination to prevent the need to use globals.
25
+ *
26
+ * @since 1.0.0
27
+ * @return object Storefront_Product_Pagination
28
+ */
29
+ function Storefront_Product_Pagination() {
30
+ return Storefront_Product_Pagination::instance();
31
+ } // End Storefront_Product_Pagination()
32
+
33
+ Storefront_Product_Pagination();
34
+
35
+ /**
36
+ * Main Storefront_Product_Pagination Class
37
+ *
38
+ * @class Storefront_Product_Pagination
39
+ * @version 1.0.0
40
+ * @since 1.0.0
41
+ * @package Storefront_Product_Pagination
42
+ */
43
+ final class Storefront_Product_Pagination {
44
+ /**
45
+ * Storefront_Product_Pagination The single instance of Storefront_Product_Pagination.
46
+ * @var object
47
+ * @access private
48
+ * @since 1.0.0
49
+ */
50
+ private static $_instance = null;
51
+
52
+ /**
53
+ * The token.
54
+ * @var string
55
+ * @access public
56
+ * @since 1.0.0
57
+ */
58
+ public $token;
59
+
60
+ /**
61
+ * The version number.
62
+ * @var string
63
+ * @access public
64
+ * @since 1.0.0
65
+ */
66
+ public $version;
67
+
68
+ // Admin - Start
69
+ /**
70
+ * The admin object.
71
+ * @var object
72
+ * @access public
73
+ * @since 1.0.0
74
+ */
75
+ public $admin;
76
+
77
+ /**
78
+ * Constructor function.
79
+ * @access public
80
+ * @since 1.0.0
81
+ * @return void
82
+ */
83
+ public function __construct() {
84
+ $this->token = 'storefront-product-pagination';
85
+ $this->plugin_url = plugin_dir_url( __FILE__ );
86
+ $this->plugin_path = plugin_dir_path( __FILE__ );
87
+ $this->version = '1.0.0';
88
+
89
+ register_activation_hook( __FILE__, array( $this, 'install' ) );
90
+
91
+ add_action( 'init', array( $this, 'spp_load_plugin_textdomain' ) );
92
+
93
+ add_action( 'init', array( $this, 'spp_setup' ) );
94
+ }
95
+
96
+ /**
97
+ * Main Storefront_Product_Pagination Instance
98
+ *
99
+ * Ensures only one instance of Storefront_Product_Pagination is loaded or can be loaded.
100
+ *
101
+ * @since 1.0.0
102
+ * @static
103
+ * @see Storefront_Product_Pagination()
104
+ * @return Main Storefront_Product_Pagination instance
105
+ */
106
+ public static function instance() {
107
+ if ( is_null( self::$_instance ) )
108
+ self::$_instance = new self();
109
+ return self::$_instance;
110
+ } // End instance()
111
+
112
+ /**
113
+ * Load the localisation file.
114
+ * @access public
115
+ * @since 1.0.0
116
+ * @return void
117
+ */
118
+ public function spp_load_plugin_textdomain() {
119
+ load_plugin_textdomain( 'storefront-product-pagination', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
120
+ }
121
+
122
+ /**
123
+ * Cloning is forbidden.
124
+ *
125
+ * @since 1.0.0
126
+ */
127
+ public function __clone() {
128
+ _doing_it_wrong( __FUNCTION__, __( 'Cheatin&#8217; huh?' ), '1.0.0' );
129
+ }
130
+
131
+ /**
132
+ * Unserializing instances of this class is forbidden.
133
+ *
134
+ * @since 1.0.0
135
+ */
136
+ public function __wakeup() {
137
+ _doing_it_wrong( __FUNCTION__, __( 'Cheatin&#8217; huh?' ), '1.0.0' );
138
+ }
139
+
140
+ /**
141
+ * Installation.
142
+ * Runs on activation. Logs the version number and assigns a notice message to a WordPress option.
143
+ * @access public
144
+ * @since 1.0.0
145
+ * @return void
146
+ */
147
+ public function install() {
148
+ $this->_log_version_number();
149
+
150
+ // get theme customizer url
151
+ $url = admin_url() . 'customize.php?';
152
+ $url .= 'url=' . urlencode( site_url() . '?storefront-customizer=true' ) ;
153
+ $url .= '&return=' . urlencode( admin_url() . 'plugins.php' );
154
+ $url .= '&storefront-customizer=true';
155
+
156
+ $notices = get_option( 'spp_activation_notice', array() );
157
+ $notices[] = sprintf( __( '%sThanks for installing the Storefront Product Pagination extension. Configure the settings in the %sCustomizer%s.%s %sOpen the Customizer%s', 'storefront-product-pagination' ), '<p>', '<a href="' . esc_url( $url ) . '">', '</a>', '</p>', '<p><a href="' . esc_url( $url ) . '" class="button button-primary">', '</a></p>' );
158
+
159
+ update_option( 'spp_activation_notice', $notices );
160
+ }
161
+
162
+ /**
163
+ * Log the plugin version number.
164
+ * @access private
165
+ * @since 1.0.0
166
+ * @return void
167
+ */
168
+ private function _log_version_number() {
169
+ // Log the version number.
170
+ update_option( $this->token . '-version', $this->version );
171
+ }
172
+
173
+ /**
174
+ * Setup all the things.
175
+ * Only executes if Storefront or a child theme using Storefront as a parent is active and the extension specific filter returns true.
176
+ * Child themes can disable this extension using the storefront_extension_boilerplate_enabled filter
177
+ * @return void
178
+ */
179
+ public function spp_setup() {
180
+ $theme = wp_get_theme();
181
+
182
+ if ( 'Storefront' == $theme->name || 'storefront' == $theme->template && apply_filters( 'storefront_product_pagination_supported', true ) ) {
183
+ add_action( 'wp_enqueue_scripts', array( $this, 'spp_styles' ), 999 );
184
+ add_action( 'customize_register', array( $this, 'spp_customize_register' ) );
185
+ add_action( 'customize_preview_init', array( $this, 'spp_customize_preview_js' ) );
186
+ add_action( 'admin_notices', array( $this, 'spp_customizer_notice' ) );
187
+
188
+ add_action( 'woocommerce_after_single_product_summary', array( $this, 'spp_single_product_pagination' ), 30 );
189
+
190
+
191
+ // Hide the 'More' section in the customizer
192
+ add_filter( 'storefront_customizer_more', '__return_false' );
193
+ } else {
194
+ add_action( 'admin_notices', array( $this, 'spp_install_storefront_notice' ) );
195
+ }
196
+ }
197
+
198
+ /**
199
+ * Admin notice
200
+ * Checks the notice setup in install(). If it exists display it then delete the option so it's not displayed again.
201
+ * @since 1.0.0
202
+ * @return void
203
+ */
204
+ public function spp_customizer_notice() {
205
+ $notices = get_option( 'spp_activation_notice' );
206
+
207
+ if ( $notices = get_option( 'spp_activation_notice' ) ) {
208
+
209
+ foreach ( $notices as $notice ) {
210
+ echo '<div class="updated">' . $notice . '</div>';
211
+ }
212
+
213
+ delete_option( 'spp_activation_notice' );
214
+ }
215
+ }
216
+
217
+ /**
218
+ * Storefront install
219
+ * If the user activates the plugin while having a different parent theme active, prompt them to install Storefront.
220
+ * @since 1.0.0
221
+ * @return void
222
+ */
223
+ public function spp_install_storefront_notice() {
224
+ echo '<div class="updated">
225
+ <p>' . __( 'Storefront Product Pagination requires that you use Storefront as your parent theme.', 'storefront-product-pagination' ) . ' <a href="' . esc_url( wp_nonce_url( self_admin_url( 'update.php?action=install-theme&theme=storefront' ), 'install-theme_boutique' ) ) .'">' . __( 'Install Storefront now', 'storefront-product-pagination' ) . '</a></p>
226
+ </div>';
227
+ }
228
+
229
+ /**
230
+ * Customizer Controls and settings
231
+ * @param WP_Customize_Manager $wp_customize Theme Customizer object.
232
+ */
233
+ public function spp_customize_register( $wp_customize ) {
234
+ /**
235
+ * Add a new section
236
+ */
237
+ $wp_customize->add_section( 'spp_section' , array(
238
+ 'title' => __( 'Product Pagination', 'storefront-extention-boilerplate' ),
239
+ 'priority' => 55,
240
+ ) );
241
+
242
+ /**
243
+ * Color picker
244
+ */
245
+ $wp_customize->add_setting( 'spp_background_color', array(
246
+ 'default' => apply_filters( 'spp_default_background_color', 'ffffff' ),
247
+ 'sanitize_callback' => 'sanitize_hex_color',
248
+ 'transport' => 'postMessage', // Refreshes instantly via js. See customizer.js. (default = refresh).
249
+ ) );
250
+
251
+ $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'spp_background_color', array(
252
+ 'label' => __( 'Background color', 'storefront-product-pagination' ),
253
+ 'description' => __( 'Background color for the product pagintion links', 'storefront-product-pagination' ),
254
+ 'section' => 'spp_section',
255
+ 'settings' => 'spp_background_color',
256
+ 'priority' => 30,
257
+ ) ) );
258
+ }
259
+
260
+ /**
261
+ * Enqueue CSS and custom styles.
262
+ * @since 1.0.0
263
+ * @return void
264
+ */
265
+ public function spp_styles() {
266
+ wp_enqueue_style( 'spp-styles', plugins_url( '/assets/css/style.css', __FILE__ ) );
267
+
268
+ $heading_background_color = storefront_sanitize_hex_color( get_theme_mod( 'spp_background_color', apply_filters( 'spp_default_background_color', '#ffffff' ) ) );
269
+
270
+ $spp_style = '
271
+ .storefront-single-product-pagination a {
272
+ background-color: ' . $heading_background_color . ';
273
+ }';
274
+
275
+ wp_add_inline_style( 'spp-styles', $spp_style );
276
+ }
277
+
278
+ /**
279
+ * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
280
+ *
281
+ * @since 1.0.0
282
+ */
283
+ public function spp_customize_preview_js() {
284
+ wp_enqueue_script( 'spp-customizer', plugins_url( '/assets/js/customizer.min.js', __FILE__ ), array( 'customize-preview' ), '1.0.0', true );
285
+ }
286
+
287
+ /**
288
+ * Single product pagination
289
+ * Display links to the next/previous products on the single product page
290
+ * @since 1.0.0
291
+ * @return void
292
+ * @uses previous_post_link(), next_post_link()
293
+ */
294
+ function spp_single_product_pagination() {
295
+ $placeholder = '<img src="' . wc_placeholder_img_src() . '" />';
296
+ $previous_product = get_previous_post();
297
+ $next_product = get_next_post();
298
+ $previous_product_thumbnail = '';
299
+ $next_product_thumbnail = '';
300
+
301
+ // If a next/previous product exists, get the thumbnail (or place holder)
302
+ if ( $previous_product ) {
303
+ $previous_product_thumbnail = get_the_post_thumbnail( $previous_product->ID, 'shop_catalog' );
304
+
305
+ if ( ! $previous_product_thumbnail ) {
306
+ $previous_product_thumbnail = $placeholder;
307
+ }
308
+ }
309
+
310
+ if ( $next_product ) {
311
+ $next_product_thumbnail = get_the_post_thumbnail( $next_product->ID, 'shop_catalog' );
312
+ if ( ! $next_product_thumbnail ) {
313
+ $next_product_thumbnail = $placeholder;
314
+ }
315
+ }
316
+
317
+ // Output the links
318
+ if ( $next_product || $previous_product ) {
319
+ echo '<nav class="storefront-single-product-pagination">';
320
+ echo '<h2>' . __( 'More products', 'storefront' ) . '</h2>';
321
+ previous_post_link( '%link', $previous_product_thumbnail . '<span class="title">&larr; %title</span>' );
322
+ next_post_link( '%link', $next_product_thumbnail . '<span class="title">%title &rarr;</span>' );
323
+ echo '</nav>';
324
+ }
325
+ }
326
+
327
+ } // End Class