From 4273409e9e8bd44565f573ea0c3f785c370f8843 Mon Sep 17 00:00:00 2001 From: James Rosado Date: Mon, 1 Jun 2020 14:57:43 -0400 Subject: [PATCH 1/2] Added container controls for WooCommerce pages --- src/assets/js/customizer/base-controls.js | 2 + .../design/woocommerce/section-expand.js | 42 +++++++++++++++++++ .../controls/icons/_panel-main.scss | 14 +++++++ src/includes/class-boldgrid-framework-api.php | 37 +++++++++++++--- .../class-boldgrid-framework-woocommerce.php | 2 +- src/includes/class-boldgrid-framework.php | 13 +++++- .../configs/customizer/controls.config.php | 37 ++++++++++++++++ .../configs/customizer/sections.config.php | 31 +++++++++++++- .../class-boldgrid-framework-customizer.php | 3 ++ 9 files changed, 173 insertions(+), 8 deletions(-) create mode 100644 src/assets/js/customizer/design/woocommerce/section-expand.js diff --git a/src/assets/js/customizer/base-controls.js b/src/assets/js/customizer/base-controls.js index dc065ea50..4621986fa 100644 --- a/src/assets/js/customizer/base-controls.js +++ b/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(); diff --git a/src/assets/js/customizer/design/woocommerce/section-expand.js b/src/assets/js/customizer/design/woocommerce/section-expand.js new file mode 100644 index 000000000..16142c814 --- /dev/null +++ b/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; diff --git a/src/assets/scss/customizer/controls/icons/_panel-main.scss b/src/assets/scss/customizer/controls/icons/_panel-main.scss index 3ca8ccb0b..c4466c3da 100644 --- a/src/assets/scss/customizer/controls/icons/_panel-main.scss +++ b/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"; diff --git a/src/includes/class-boldgrid-framework-api.php b/src/includes/class-boldgrid-framework-api.php index c4d6afb7a..7703c8aa2 100644 --- a/src/includes/class-boldgrid-framework-api.php +++ b/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'; } diff --git a/src/includes/class-boldgrid-framework-woocommerce.php b/src/includes/class-boldgrid-framework-woocommerce.php index 00701d731..d4e3a93be 100644 --- a/src/includes/class-boldgrid-framework-woocommerce.php +++ b/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 '
'; } diff --git a/src/includes/class-boldgrid-framework.php b/src/includes/class-boldgrid-framework.php index 86767ec7d..6b8c287da 100644 --- a/src/includes/class-boldgrid-framework.php +++ b/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' ); diff --git a/src/includes/configs/customizer/controls.config.php b/src/includes/configs/customizer/controls.config.php index 211e7f60d..aaa96dd6c 100644 --- a/src/includes/configs/customizer/controls.config.php +++ b/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' => '' . esc_attr__( 'Contained', 'bgtfw' ), + '' => '' . 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', diff --git a/src/includes/configs/customizer/sections.config.php b/src/includes/configs/customizer/sections.config.php index f02104e75..bdfeb503b 100644 --- a/src/includes/configs/customizer/sections.config.php +++ b/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; diff --git a/src/includes/customizer/class-boldgrid-framework-customizer.php b/src/includes/customizer/class-boldgrid-framework-customizer.php index 66e6af63c..fa170a947 100644 --- a/src/includes/customizer/class-boldgrid-framework-customizer.php +++ b/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' ), From 52f866cb5eddd9948285a6e8d0f42928c13c98ce Mon Sep 17 00:00:00 2001 From: James Rosado Date: Tue, 2 Jun 2020 12:25:08 -0400 Subject: [PATCH 2/2] fix formatting --- .../customizer/class-boldgrid-framework-customizer.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/includes/customizer/class-boldgrid-framework-customizer.php b/src/includes/customizer/class-boldgrid-framework-customizer.php index fa170a947..e996a4708 100644 --- a/src/includes/customizer/class-boldgrid-framework-customizer.php +++ b/src/includes/customizer/class-boldgrid-framework-customizer.php @@ -507,7 +507,9 @@ public function custom_customize_enqueue() { ], ], 'woocommerce' => [ - 'shopUrl' => esc_js( wc_get_page_permalink( 'shop' ) ) + 'shopUrl' => esc_js( + wc_get_page_permalink( 'shop' ) + ), ], ], 'hoverColors' => include $this->configs['framework']['includes_dir'] . 'partials/hover-colors-only.php',