Added container controls for WooCommerce pages

src/assets/js/customizer/base-controls.js

@@ -4,6 +4,7 @@ import bgtfwWidgetsSection from './controls/bgtfw-widgets-section';
 import BlogPagePanelExpand from './design/blog/blog-page/panel-expand.js';
 import BlogPostsPanelExpand from './design/blog/posts/panel-expand.js';
 import HomepageSectionExpand from './design/homepage/section-expand.js';
+import WoocommerceSectionExpand from './design/woocommerce/section-expand.js'
 import { Control as GenericControls } from './generic/control.js';
 import { Required } from './required.js';
 import SectionExtendTitle from './menus/extend-title';
@@ -36,6 +37,7 @@ WidgetSectionUpdate();
 	new BlogPagePanelExpand();
 	new BlogPostsPanelExpand();
 	new HomepageSectionExpand();
+	new WoocommerceSectionExpand();
 	new SectionExtendTitle();
 	new GenericControls().init();
 	new HamburgerControlToggle();

src/assets/js/customizer/design/woocommerce/section-expand.js

@@ -0,0 +1,42 @@
+/* esversion: 6 */
+import ExpandSection from '../../expand/section';
+
+const api = wp.customize;
+
+/**
+ * This class is responsible for setting the URL to go to, and
+ * the sections's ID when the Homepage section is expanded.
+ *
+ * @since 2.0.0
+ */
+export class WoocommerceSectionExpand extends ExpandSection {
+
+	/**
+	 * Constructor
+	 *
+	 * @since SINCEVERSION
+	 *
+	 * @param {String} typeId ID of the section to add expand and collapse bindings.
+	 * @param {String} url    URL the user should be directed to on expanded state.
+	 */
+	constructor( { typeId = 'bgtfw_layout_woocommerce' } = {} ) {
+		super( ...arguments );
+		this.typeId = typeId;
+		$( () => this.setUrl() );
+		_.extend( this, ...arguments );
+	}
+
+	/**
+	 * Set the URL the previewer should go to on the expanded state.
+	 *
+	 * This URL is provided in core wp.customize for the homepage.
+	 *
+	 * @return {String} this.url The URL for the previewer.
+	 */
+	setUrl() {
+		this.url = BOLDGRID.CUSTOMIZER.data.design.woocommerce.shopUrl;
+		return this.url;
+	}
+}
+
+export default WoocommerceSectionExpand;

src/assets/scss/customizer/controls/icons/_panel-main.scss

@@ -52,6 +52,20 @@ ul.customize-pane-parent > li {
 	}
 }
 
+#accordion-section-bgtfw_layout_woocommerce {
+	.accordion-section-title:before {
+		font-family: 'WooCommerce';
+		content: '\e03d';
+	}
+}
+
+#sub-accordion-section-bgtfw_layout_woocommerce {
+	div.bgtfw-section-title:before {
+		font-family: 'WooCommerce';
+    		content: '\e03d';
+	}
+}
+
 // Static Front Page (Homepage) Section.
 #accordion-section-static_front_page > h3:before {
 	content: "\f102";

src/includes/class-boldgrid-framework-api.php

@@ -146,8 +146,10 @@ public function print_title_tagline() {
 	 * @return array $classes Filter classes on .site-content element.
 	 */
 	public function blog_container( $classes ) {
+		global $boldgrid_theme_framework;
+		$theme_mod_type = $boldgrid_theme_framework->woo->is_woocommerce_page() ? 'bgtfw_woocommerce_container' : 'bgtfw_blog_page_container';
 		if ( is_single() || is_attachment() ) {
-			$theme_mod = get_theme_mod( 'bgtfw_pages_blog_posts_layout_layout' );
+			$theme_mod = get_theme_mod( $theme_mod_type );
 			$classes[] = empty( $theme_mod ) ? 'full-width' : 'container';
 		}
 
@@ -164,8 +166,30 @@ public function blog_container( $classes ) {
 	 * @return array $classes Filter classes on .site-content element.
 	 */
 	public function page_container( $classes ) {
-		if ( is_page() ) {
-			$theme_mod = get_theme_mod( 'bgtfw_pages_container' );
+		global $boldgrid_theme_framework;
+		$theme_mod_type = $boldgrid_theme_framework->woo->is_woocommerce_page() ? 'bgtfw_woocommerce_container' : 'bgtfw_blog_page_container';
+		if ( is_page() || ( $boldgrid_theme_framework->woo->is_woocommerce_page() && is_shop() ) ) {
+			$theme_mod = get_theme_mod( $theme_mod_type );
+			$classes[] = empty( $theme_mod ) ? 'full-width' : 'container';
+		}
+
+		return $classes;
+	}
+
+	/**
+	 * Add woocommerce container classes.
+	 *
+	 * @since SINCEVERSION
+	 *
+	 * @param array $classes Classes added to .site-content element.
+	 *
+	 * @return array $classes Filter classes on .site-content element.
+	 */
+	public function woocommerce_container( $classes ) {
+		global $boldgrid_theme_framework;
+
+		if ( $boldgrid_theme_framework->woo->is_woocommerce_page() ) {
+			$theme_mod = get_theme_mod( 'bgtfw_woocommerce_container' );
 			$classes[] = empty( $theme_mod ) ? 'full-width' : 'container';
 		}
 
@@ -183,8 +207,11 @@ public function page_container( $classes ) {
 	 */
 	public function blog_page_container( $classes ) {
 		global $wp_query;
-		if ( ( isset( $wp_query ) && ( bool ) $wp_query->is_posts_page ) || is_home() || is_archive() ) {
-			$theme_mod = get_theme_mod( 'bgtfw_blog_page_container' );
+		global $boldgrid_theme_framework;
+		$theme_mod_type = $boldgrid_theme_framework->woo->is_woocommerce_page() ? 'bgtfw_woocommerce_container' : 'bgtfw_blog_page_container';
+
+		if ( ( isset( $wp_query ) && ( bool ) $wp_query->is_posts_page ) || is_home() || is_archive() || is_shop() ) {
+			$theme_mod = get_theme_mod( $theme_mod_type );
 			$classes[] = empty( $theme_mod ) ? 'full-width' : 'container';
 		}
 

src/includes/class-boldgrid-framework-woocommerce.php

@@ -97,7 +97,7 @@ public function customizer( $wp_customize ) {
 	 * @since 2.0.0
 	 */
 	public function add_container_open() {
-		$classes = array( get_theme_mod( 'woocommerce_container', 'container' ) );
+		$classes = array( get_theme_mod( 'bgtfw_woocommerce_container', 'container' ) );
 		$classes = apply_filters( 'bgtfw_woocommerce_wrapper_classes', $classes );
 		echo '<div class="' . esc_attr( implode( ' ', $classes ) ) . '"><div>';
 	}

src/includes/class-boldgrid-framework.php

@@ -31,6 +31,14 @@ class BoldGrid_Framework {
 	 */
 	protected $loader;
 
+	/**
+	 * Boldgrid_Framework_Woocommerce
+	 *
+	 * @since SINCEVERSION
+	 * @var Boldgrid_Framework_Woocommerce
+	 */
+	public $woo;
+
 	/**
 	 * The plugins configs
 	 *
@@ -394,6 +402,8 @@ private function define_theme_hooks() {
 		$this->loader->add_filter( 'bgtfw_main_wrapper_classes', $boldgrid_theme, 'blog_container' );
 		$this->loader->add_filter( 'bgtfw_main_wrapper_classes', $boldgrid_theme, 'page_container' );
 		$this->loader->add_filter( 'bgtfw_main_wrapper_classes', $boldgrid_theme, 'blog_page_container' );
+		$this->loader->add_filter( 'bgtfw_main_wrapper_classes', $boldgrid_theme, 'woocommerce_container' );
+		$this->loader->add_filter( 'bgtfw_site_content_classes', $boldgrid_theme, 'page_container' );
 		$this->loader->add_filter( 'bgtfw_blog_page_post_title_classes', $boldgrid_theme, 'blog_page_post_title_classes' );
 		$this->loader->add_filter( 'bgtfw_posts_title_classes', $boldgrid_theme, 'post_title_classes' );
 		$this->loader->add_filter( 'bgtfw_pages_title_classes', $boldgrid_theme, 'page_title_classes' );
@@ -966,7 +976,8 @@ private function pagination() {
 	 * @access private
 	 */
 	private function woocommerce() {
-		$woo = new Boldgrid_Framework_Woocommerce( $this->configs );
+		$woo       = new Boldgrid_Framework_Woocommerce( $this->configs );
+		$this->woo = $woo;
 		$this->loader->add_action( 'wp_loaded', $woo, 'remove_template_warnings', 99 );
 		$this->loader->add_filter( 'customize_register', $woo, 'customizer', 20 );
 		$this->loader->add_filter( 'woocommerce_loop_add_to_cart_link', $woo, 'buttons' );

src/includes/configs/customizer/controls.config.php

@@ -420,6 +420,43 @@
 			),
 		),
 	),
+
+	'bgtfw_woocommerce_container' => array(
+		'settings' => 'bgtfw_woocommerce_container',
+		'transport'   => 'postMessage',
+		'label'       => esc_html__( 'Container', 'bgtfw' ),
+		'type'        => 'radio-buttonset',
+		'priority'    => 35,
+		'default'   => 'container',
+		'choices'     => array(
+			'container' => '<span class="icon-layout-container"></span>' . esc_attr__( 'Contained', 'bgtfw' ),
+			'' => '<span class="icon-layout-full-screen"></span>' . esc_attr__( 'Full Width', 'bgtfw' ),
+		),
+		'section' => 'bgtfw_layout_woocommerce_container',
+		'sanitize_callback' => function( $value, $settings ) {
+			return 'container' === $value || 'full-width' === $value ? $value : '';
+		},
+		'js_vars' => array(
+			array(
+				'element' => '.woocommerce .site-content, .woocommerce-page .site-content',
+				'function' => 'html',
+				'attr' => 'class',
+				'value_pattern' => 'site-content $',
+			),
+			array(
+				'element' => '.woocommerce .main-wrapper, .woocommerce-page .main-wrapper',
+				'function' => 'html',
+				'attr' => 'class',
+				'value_pattern' => 'main-wrapper $',
+			),
+			array(
+				'element' => '.woocommerce-page .main > .container, .woocommerce-page .main > .full-width',
+				'function' => 'html',
+				'attr' => 'class',
+				'value_pattern' => '$',
+			),
+		),
+	),
 	'bgtfw_layout_page' => array(
 		'type'        => 'radio',
 		'settings'    => 'bgtfw_layout_page',

src/includes/configs/customizer/sections.config.php

@@ -10,7 +10,7 @@
  * @return array Sections to create in the WordPress Customizer.
  */
 
-return array(
+$sections_array = array(
 	'bgtfw_layout_blog' => array(
 		'title' => __( 'Blog', 'bgtfw' ),
 		'panel' => 'bgtfw_layout',
@@ -41,6 +41,14 @@
 		'capability' => 'edit_theme_options',
 		'icon' => 'icon-layout-container',
 	),
+	'bgtfw_layout_woocommerce_container' => array(
+		'title' => __( 'Container', 'bgtfw' ),
+		'panel' => 'bgtfw_design_panel',
+		'section' => 'bgtfw_layout_woocommerce',
+		'description' => esc_html__( 'This section controls the container for your WooCommerce pages.', 'bgtfw' ),
+		'capability' => 'edit_theme_options',
+		'icon' => 'icon-layout-container',
+	),
 	'bgtfw_layout_page_sidebar' => array(
 		'title' => __( 'Sidebar', 'bgtfw' ),
 		'panel' => 'bgtfw_design_panel',
@@ -395,3 +403,24 @@
 	),
 	// End: Generic Blog Design Controls.
 );
+
+/**
+ * Check if WooCommerce is activated
+ */
+$is_woocommerce = false;
+if ( ! function_exists( 'is_woocommerce_activated' ) ) {
+	$is_woocommerce = class_exists( 'woocommerce' );
+}
+
+if ( $is_woocommerce ) {
+	$sections_array['bgtfw_layout_woocommerce'] = array(
+		'title'       => __( 'WooCommerce', 'bgtfw' ),
+		'panel'       => 'bgtfw_design_panel',
+		'description' => esc_html__( 'This section controls the global layout of WooCommerce pages on your website.', 'bgtfw' ),
+		'capability'  => 'edit_theme_options',
+		'priority'    => 1,
+		'icon'        => 'dashicons-admin-page',
+	);
+}
+
+return $sections_array;

src/includes/customizer/class-boldgrid-framework-customizer.php

@@ -506,6 +506,9 @@ public function custom_customize_enqueue() {
 						'mostRecentPost' => ! empty( $posts[0]['ID'] ) ? $posts[0]['ID'] : null,
 					],
 				],
+				'woocommerce' => [
+					'shopUrl' => esc_js( wc_get_page_permalink( 'shop' ) )
+				],
 			],
 			'hoverColors'       => include $this->configs['framework']['includes_dir'] . 'partials/hover-colors-only.php',
 			'loadingTitle'      => __( 'Please wait while the Customizer loads...', 'bgtfw' ),