customizer view not showing full background of homepage using parallax widget

Hi there
While the shapely website displays fine in the browser, the customizer view does not show full background images using parallax widget in the customizer view, causing an uncaught error (see attachment). I am working with a shapely-child theme and latest version of shapely. It worked fine before adding some extra templates cloning the home page. I called them template-home2.php, template-home3.php, etc. This is the code for template-home2.php:

<?php
/**
 * Template Name: Home Page 2
 *
 * Displays the Home page 2 with Parallax effects.
 *
 */
?>

<?php get_header(); ?>
<?php
if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 'home2-1' ) ) :
?>
	<div class="container p24 wp-caption-text">
		<h5><?php echo esc_html__( 'This is the "Home Sidebar Section", add some widgets to it to change it.', 'shapely' ); ?></h5>
	</<div>
<?php endif; ?>

<?php get_footer(); ?>

For the parallax effect to work on the additional home page clones I changed functions.php and header.php of shapely-child as follows:

header.php:

<section class="content-area <?php echo ( get_theme_mod( 'top_callout', true ) ) ? '' : ' pt0 '; ?>">
			<div id="main" class="<?php echo ( ! is_page_template(array( 'page-templates/template-home.php','page-templates/template-home2.php','page-templates/template-home3.php') ) ) ? 'container' : ''; ?>"
				 role="main">

and functions.php:

if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
    function chld_thm_cfg_parent_css() {
        wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap','font-awesome','flexslider' ) );
		
		if ( is_page_template( 'page-templates/template-home2.php' ) || is_page_template( 'page-templates/template-home3.php' ) || is_page_template( 'page-templates/template-home4.php' )) {
		wp_enqueue_script( 'shapely-parallax', get_template_directory_uri() . '/assets/js/parallax.min.js', array( 'jquery' ), '20160115', true );
	}
    }
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );

add_action( 'widgets_init', 'theme_slug_widgets_init' );
function theme_slug_widgets_init() {
register_sidebar( array(
'name' => __( 'Home2', 'theme-slug' ),
'id' => 'home2-1',
'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'theme-slug' ),
'before_widget' => '<li id=”%1$s” class=”widget %2$s”>',
'after_widget' => '</li>',
'before_title' => '<h2 class=”widgettitle”>',
'after_title' => '</h2>',
) );

register_sidebar( array(
'name' => __( 'Home3', 'theme-slug' ),
'id' => 'home3-1',
'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'theme-slug' ),
'before_widget' => '<li id=”%1$s” class=”widget %2$s”>',
'after_widget' => '</li>',
'before_title' => '<h2 class=”widgettitle”>',
'after_title' => '</h2>',
) );

register_sidebar( array(
'name' => __( 'Home4', 'theme-slug' ),
'id' => 'home4-1',
'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'theme-slug' ),
'before_widget' => '<li id=”%1$s” class=”widget %2$s”>',
'after_widget' => '</li>',
'before_title' => '<h2 class=”widgettitle”>',
'after_title' => '</h2>',
) );

}

Any idea what I missed? It cannot be all wrong as the website displays fine in the browser. Any help appreciated.
Thanks!

Hello there,

I hope you are doing well today.

This seems to be associated with the changes you made to the PHP files so simply try reverting those changes temporarily to see if that fixes the issue .

Best Regards,
Support

Hi there,

thanks for your reply.

I don’t know why but this part of functions.php caused the problem:

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:

if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
    function chld_thm_cfg_parent_css() {
        wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap','font-awesome','flexslider' ) );
		
		if ( is_page_template( 'page-templates/template-home2.php' ) || is_page_template( 'page-templates/template-home3.php' ) || is_page_template( 'page-templates/template-home4.php' )) {
		wp_enqueue_script( 'shapely-parallax', get_template_directory_uri() . '/assets/js/parallax.min.js', array( 'jquery' ), '20160115', true );
	}
    }
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );

and I replaced it as follows:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'shapely-style'; 

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css', array( 'bootstrap','flexslider'));
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
	
	if ( is_page_template( 'page-templates/template-home2.php' ) || is_page_template( 'page-templates/template-home3.php' ) || is_page_template( 'page-templates/template-home4.php' )) {
		wp_enqueue_script( 'shapely-parallax', get_template_directory_uri() . '/assets/js/parallax.min.js', array( 'jquery' ), '20160115', true );
	}
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

And it worked. First some style elements like button shape and fonts did not display right, but after adding array( 'bootstrap','flexslider') to the code it looks fine now (see attachment).

So I am really happy now!

Hello there,

I am glad that you were able to get it working.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support