I’m attempting to make a board in customizer whose segments are sortable and the request for the segments decides the request for the spaces they control at the front-end. I alluded to the accompanying inquiry –
possible to make areas in topic customizer sortable and saveable at distribute button clicked?
Everything is by all accounts turned out great. However, when I attempt to sort the components, arranging bombs interestingly and things don’t change their request. It works regularly second time onwards. It’s the first occasion when that causes issues.
Here is the PHP code I used to add segments –
function itpg_front_page() {
$wp_customize->add_panel(
'itpg_front_page', cluster(
'title' => __('Front Page', 'it-picture taker'),
'portrayal' => __('Modules for the Static Front Page.<br/>Will work on Static Front page with Front Page Template set.', 'it-photographic artist'),
'need' => 30
)
);
/Sections for te Panel. This is presently in default request however will change contingent upon worth of 'itpg_front_order'
$default_sections = cluster(
'itpg_hero' => cluster(
'title' => __('Hero', 'it-picture taker'),
'portrayal' => '',
'board' => 'itpg_front_page'
),
'itpg_home_portfolio' => cluster(
'title' => __('Projects', 'it-picture taker'),
'portrayal' => __('Jetpack should be introduced and Portfolios should be actuated for this part to work', 'it-photographic artist'),
'board' => 'itpg_front_page'
),
'itpg_home_testimonial' => cluster(
'title' => __('Testimonials', 'it-picture taker'),
'portrayal' => __('Jetpack should be introduced and Testimonials should be actuated for this part to work', 'it-photographic artist'),
'board' => 'itpg_front_page'
),
'itpg_front_blog' => cluster(
'title' => __('From the Blog', 'it-picture taker'),
'portrayal' => '',
'board' => 'itpg_front_page'
),
'itpg_cat_tabs' => cluster(
'title' => __('Category Tabs', 'it-picture taker'),
'portrayal' => '',
'board' => 'itpg_front_page'
),
'itpg_counters' => cluster(
'title' => __('Counters', 'it-picture taker'),
'portrayal' => '',
'board' => 'itpg_front_page'
)
);
$sortable_sections = get_theme_mod('itpg_front_order');
in the event that( !isset( $sortable_sections ) || void( $sortable_sections ) {
set_theme_mod( 'itpg_hidden_front_order', implode(',', array_keys( $default_sections ) );
$sortable_sections = get_theme_mod('itpg_front_order');
}
$sortable_sections = explode(',', $sortable_sections );
foreach( $sortable_sections as $sortable_section ){
$wp_customize->add_section( $sortable_section, cluster(
'title' => $default_sections[$sortable_section]['title'],
'portrayal' => $default_sections[$sortable_section]['description'],
'board' => 'itpg_front_page'
) );
}
$wp_customize->add_section(
'itpg_hidden_front_order', cluster(
'title' => __('Front Page Order', 'it-picture taker'),
'board' => 'itpg_panel_front_page'
)
);
$wp_customize->add_setting(
'itpg_front_order', cluster(
'default' => '',
'sanitize_callback' => 'sanitize_text_field'
)
);
$wp_customize->add_control(
'itpg_front_order', cluster(
'type' => 'covered up',
'area' => 'itpg_hidden_front_order'
)
);
...Added Controls for the separate areas...
}
add_action('customize_register', 'itpg_front_page');
The CSS nad JS documents are enqueued in the customizer utilizing customize_controls_enqueue_scripts –
function itpg_customize_control_scripts() {
wp_enqueue_script( 'jquery-ui-sortable' );
wp_enqueue_script("itpg-alter control-js", esc_url(get_template_directory_uri() . "/resources/js/customize_controls.js"), cluster(), ITPG_VERSION, valid );
}
add_action("customize_controls_enqueue_scripts", "itpg_customize_control_scripts");
work itpg_custom_admin_styles() {
wp_enqueue_style( 'itpg-administrator css', esc_url( get_template_directory_uri() . '/resources/subject styles/css/admin.css' ), cluster(), ITPG_VERSION );
}
add_action( 'admin_enqueue_scripts', 'itpg_custom_admin_styles' );
Since sortable jQuery module is to be utilized, I enqueued it from WordPress.
There are 6 areas in the above code that should be re-orchestrated. I made another part in which the control stores the request for the sections.
I utilized CSS to shroud the segment with covered up input. Added the accompanying code in admin.css –
li#accordion-segment itpg_hidden_front_order {
show: none !significant;
}
Here is my JS code I wrote in customize_controls.js –
jQuery(document).ready(function() {
var frontPanel, frontSections, hiddenSection, hiddenAcc, request
frontPanel = jQuery('#sub-accordion-board itpg_front_page')
frontSections = frontPanel.find('li[id^="accordion-section-"]').not('#accordion-area itpg_hidden_front_order')
hiddenAcc = jQuery('#accordion-area itpg_hidden_front_order')
hiddenPanel = jQuery('#' + hiddenAcc.attr('aria-possesses'));
/Added 'itpg_draggable' class to every one of the apparent areas
frontSections.each(function() {
jQuery(this).addClass('itpg_draggable')
})
/Initialised the sortable for all things containing 'itpg_draggable' class
frontPanel.sortable({
thing: 'li.itpg_draggable',
hub: 'y',
stop: work( occasion, ui ) {
getOrder()
}
})
/Get ids of the multitude of areas of Front Page and save them in the 'itpg_front_order' setting
const getOrder = () => {
request = frontPanel.find('.itpg_draggable').map( work() {
var id = jQuery(this).attr('id'),
id = id.replace('accordion-segment ','');
bring id back;
}).get().join(',');
/Save the worth in the secret info field
hiddenPanel.find('input').prop('value', request)
/Make sure to trigger the change occasion to empower the Publish Button
hiddenPanel.find('input').trigger('change')
}
}
When I remark out the trigger occasion that is utilized to tell Publish Button that a change should be saved, it turns out great yet setting can’t be saved.
Any help would be valued! Thanks