Complete customizer implementation of settings. See #516.

wpsc-components/theme-engine-v2/core.php

@@ -45,7 +45,7 @@ function _wpsc_te_v2_includes() {
 		require_once( WPSC_THEME_ENGINE_V2_PATH . '/admin.php' );
 	}
 
-	require_once( WPSC_FILE_PATH . '/wpsc-includes/wpsc-customizer.class.php' );
+	require_once( WPSC_FILE_PATH . '/wpsc-includes/wpsc-customizer.php' );
 
 	if ( ! is_admin() || ( is_admin() && defined( 'DOING_AJAX' ) && DOING_AJAX ) ) {
 		_wpsc_te2_mvc_init();

wpsc-components/theme-engine-v2/helpers/template-engine.php

@@ -376,6 +376,7 @@ function _wpsc_filter_body_class( $classes ) {
 	$classes[] = 'wpsc-controller';
 	$classes[] = 'wpsc-' . _wpsc_get_current_controller_name();
 	$classes[] = 'wpsc-controller-' . _wpsc_get_current_controller_slug();
+	$classes[] = 'wpsc-' . wpsc_get_option( 'layout' );
 
 	return $classes;
 }

wpsc-components/theme-engine-v2/theming/assets/css/customizer.css

@@ -0,0 +1,5 @@
+li.customize-control-wpsc-thumbnail div {
+    max-width: 5em;
+    float: left;
+    margin-right: 4em;
+}

wpsc-components/theme-engine-v2/theming/assets/js/customizer.js

@@ -0,0 +1,25 @@
+( function( $ ) {
+  wp.customize( 'wpsc_layout', function( value ) {
+    value.bind( function( to, from ) {
+        $( 'body' ).removeClass( 'wpsc-' + from );
+        $( 'body' ).addClass( 'wpsc-' + to );
+
+        if ( 'grid' === to ) {
+            $( '#customize-control-wpsc_products_per_row' ).slideDown( 150 );
+        } else {
+            $( '#customize-control-wpsc_products_per_row' ).slideUp( 150 );
+        }
+    } );
+  } );
+
+  wp.customize.bind( 'ready', function() {
+     var value = wp.customize.control( 'wpsc_layout' ).setting();
+
+     if ( 'list' === value ) {
+         $( '#customize-control-wpsc_products_per_row' ).slideUp( 150 );
+     } else {
+         $( '#customize-control-wpsc_products_per_row' ).slideDown( 150 );
+     }
+  } );
+
+} )( jQuery );

wpsc-core/wpsc-includes.php

@@ -84,4 +84,4 @@
 // WP-CLI support
 if ( defined( 'WP_CLI' ) && WP_CLI && version_compare( phpversion(), '5.3', '>=' ) ) {
 	require_once( WPSC_FILE_PATH . '/wpsc-includes/wpsc-wp-cli.php' );
-}
+}

wpsc-includes/wpsc-customizer-thumbnail-control.class.php

@@ -0,0 +1,66 @@
+<?php
+
+if ( ! class_exists( 'WP_Customize_Control' ) ) {
+    return;
+}
+
+/**
+ * Custom control for Customizer.
+ *
+ * Allows us to have a width and a height input for thumbnail settings.
+ *
+ * @package WP eCommerce
+ * @subpackage Customizer
+ * @since 4.0
+ */
+
+/**
+ * Thumbnail setting control for WxH settings in Customizer.
+ *
+ * @todo Move to its own file.
+ * @since 4.0
+ */
+class WPSC_Customizer_Thumbnail_Control extends WP_Customize_Control {
+
+    public $html = array();
+    public $type = 'wpsc-thumbnail';
+
+    public function build_field_html( $key, $setting, $label ) {
+        $value = '';
+
+        if ( isset( $this->settings[ $key ] ) ) {
+            $value = $this->settings[ $key ]->value();
+        }
+
+        $this->html[] = '<div><label>' . $label . '<br /><input type="number" value="' . esc_attr( $value ) . '" ' . $this->get_link( $key ).' /></label>
+        <p>' . $this->description . '</p></div>';
+    }
+
+	/**
+	 * Op since we're using JS template.
+	 *
+	 * @since 4.3.0
+	 * @access protected
+	 */
+	protected function render_content() {
+        $keys = array_keys( get_object_vars( $this ) );
+
+        foreach ( $keys as $key ) {
+            if ( isset( $args[ $key ] ) ) {
+                    $this->$key = $args[ $key ];
+            }
+        }
+
+        $output =  '<label class="customize-control-title">' . esc_html( $this->label ) .'</label>';
+
+        echo $output;
+
+        foreach( $this->settings as $key => $value ) {
+            $label = absint( $key ) ? __( 'Height', 'wp-e-commerce' ) : __( 'Width', 'wp-e-commerce' );
+            $this->build_field_html( $key, $value, $label );
+        }
+
+        echo implode( '', $this->html );
+    }
+
+}