making customizer sections sortable but items not getting sorted first time items are moved

Question

I’m trying to make a panel in customizer whose sections are sortable and the order of the sections determines the order of the areas they control at the front-end. I referred to the following question –
possible to make sections in theme customizer sortable and saveable at publish button clicked?

Ecverything seems to be working fine. But when I try to sort the elements, sorting fails for the first time and items don’t change their order. It works normally second time onwards. It’s the first time that causes issues.

Here is my JS code (modified it a bit depending on my project )

frontPanel      = jQuery('#sub-accordion-panel-itpg_front_page')
frontSections   = frontPanel.find('li[id^="accordion-section-"]').not('#accordion-section-itpg_hidden_front_order')
hiddenAcc       = jQuery('#accordion-section-itpg_hidden_front_order')
hiddenPanel     = hiddenAcc.attr('data-owns');

frontSections.each(function() {
    jQuery(this).addClass('itpg_draggable') 
})

frontPanel.sortable({
    item: 'li',
    axis: 'y',
    start: function( event, ui ){
        hiddenAcc.remove()
    },
    stop: function( event, ui ) {
        
        getOrder()
        hiddenSection.find('input').trigger('change')
        
    }
})


//Get ids of all the sections of Front Page and save them in the 'itpg_front_order' setting
const getOrder = () => {
    
    order = frontPanel.find('.itpg_draggable').map( function() {
        
        var id = jQuery(this).attr('id'),
            id = id.replace('accordion-section-','');
        
        return id;
    }).get().join(',');
    
    hiddenPanel.find('input').prop('value', order)
    
}

When I comment out the trigger event that is used to let Publish Button know that a change needs to be saved, it works fine but setting cannot be saved.

Any help would be appreciated! Thanks

0
Divjot Singh 1 month 2021-08-14T15:02:33-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse