Support » Developing with WordPress » Customizer Crash

  • Hi dears
    I have one problem with customizer

    I try develop a food theme with manager for menu ( food menu )

    and I have something like this : 10 Menus * 5 menu Items * 20 dishes * 5 Settings for each dishe and the browser promt me “Kill Page” ( all this are defined settings )

    finaly : over 5000 settings in wp Customizer just over this feature and also I want to do something like Daily Dishes ( anothers 5000 other setting )

    After I integrated all this settings the browser prompt me “Kill Page” or “Wait”. Because this is not a good experience for users I think is need to do this with dynamic settings / controls and the problem is I can’t found something over this on the web space.

    Please Help Me.

    I tried to do some think like this ( if will help):

    
    <?php
    
    	if( !class_exists( 'tester_field_control' ) && class_exists( 'WP_Customize_Control' ) ){
    		class tester_field_control extends WP_Customize_Control
    		{
    			public $dynamic;
    			public $id;
    
    			public function __construct( $manager, $id, $args = array() )
    			{
    				parent::__construct( $manager, $id, $args );
    
    				$this -> id = $id;
    
    				if( isset( $args[ 'dynamic' ] ) && $args[ 'dynamic' ] )
    					$this -> dynamic = true;
    			}
    
    			public function render()
    			{
    				if( $this -> type == 'field' ){
    
    					if( $this -> dynamic ){
    
    						$value = is_null( $this -> id ) ? $this -> value() : $this -> value( $this -> id );
    
    						echo '<div class="tester-field-wrapper">';
    					?>
    						<input type="text" value="<?php echo $value ?>" <?php $this -> link(); ?> />
    						<input type="text" value=""  data-customize-setting-link="<?php echo $this -> id ?>[1]" />
    						<input type="text" value=""  data-customize-setting-link="<?php echo $this -> id ?>[2]" />
    						<input type="text" value=""  data-customize-setting-link="<?php echo $this -> id ?>[3]" />
    						<input type="text" value=""  data-customize-setting-link="<?php echo $this -> id ?>[4]" />
    
    					<?php
    						print_r( get_theme_mods() );
    						echo '</div>';
    						echo '<button type="button" data-action="add-new-field">Add New</button>';
    					}
    				}
    			}
    
    			public function enqueue()
    			{
    				wp_register_script( 'tester-fields', get_template_directory_uri() . '/assets/theme/js/fields.js', array( 'jquery' ), '0.0.1', true );
    				wp_enqueue_script( 'tester-fields' );
    			}
    		}
    	}
    
    	function tester_after_setup_theme()
    	{
    		function tester_customize( $api ){
    
    			$api -> add_section( 'test-section', array(
    				'title'	=> __( 'Test Section' )
    			));
    
    			$api -> add_setting( 'test-setting', array(
    				'transport'         => 'refresh',
    				'capability'        => 'edit_theme_options'
    			));
    
    			$api -> add_control( new tester_field_control( $api, 'test-setting', array(
    				'section'	=> 'test-section',
    				'settings'	=> 'test-setting',
    				'type'		=> 'field',
    				'dynamic'	=> true
    			)));
    		}
    
    		add_action( 'customize_register', 'tester_customize' );
    	}
    
    	add_action( 'after_setup_theme', 'tester_after_setup_theme' );
    ?>
    

    but this just does not save multiple data data.

    Please Help.

    • This topic was modified 1 week, 1 day ago by  mythemes.
    • This topic was modified 1 week, 1 day ago by  mythemes.
    • This topic was modified 1 week, 1 day ago by  mythemes.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Also I can provide full source code if this will help. Maybe I do something wrong.

    Moderator bcworkz

    (@bcworkz)

    It sounds like you have too much data for one page because the entire menu structure is added to the customizer. As you suspect, you should not do this, rather dynamically load relevant portions as the user interacts with the customizer. For example, only the 10 different menus are listed, nothing below these is initially on the page.

    When the user selects a menu, the next section of menu items is fetched via Ajax. Again, nothing below the items (the dishes) is loaded until an item is selected. Then the dishes for that item is loaded via Ajax. So on down through the hierarchy until the final settings are reached.

    Unfortunately, loading data via Ajax will result in sluggish menu behavior. Ideally, if it’s not too much data, the next levels should be pre-fetched so that the options are immediately visible and the menus will not appear sluggish. Once a particular menu is picked, the pre-fetched items are of course displayed. At this point pre-fetch the next level of dishes for all items of this menu so this level too is not sluggish. Pre-fetching 100 dishes is quite a bit of data, but far less than 5000. This should yield a good compromise between good menu response and minimal data transmitted.

    This is a particularly good approach for the customizer as you now only need a section for each level instead of several, multiplied out. 3 sections instead of 1000! I’m unable to offer anything specific for Ajax as it is applied in the customizer, but a basic, general tutorial on Ajax in WP is in the Plugin Handbook.

    mythemes

    (@mythemes)

    Thank You ! It is Good Idea !

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.