In the new Theme Customizer API, how to send a value from the front back to the admin panel?

I finally managed to solve my issue, but not in the most elegant way : polling. I would still be interested in more elegant solution !

The main issue I have is that the point move is done in the iframe containing the site preview, whereas the theme customizer form inputs are in the main document. So I need a way to pass variable from the iframe to the main document.

Inside the iframe :

// update point global var
$('.point').draggable({ 
    drag: function(event, ui){
        // update the position value
        var ref="id"+$(this).attr('data-id');
        points[ref].top = ui.position.top;
        points[ref].left = ui.position.left;   
    }
});

In the theme customizer :

setInterval(function(){
    if(frames.length) {
        var from = $('#customize-points').val();
        var to = JSON.stringify(frames[0].points);

        // use theme customizer API in order to enable the save button
        if(from != to) $('#customize-points').val(to).change();
    }
}, 500);

I have also added a system to calculate the points position relative to the background image, but that’s not the subject here.

I know that the theme customizer generate events targetting the preview iframe to enable the theme author to live update the preview, but I can’t find how to do the other way round : generate an event from the preview to the theme customizer.

You can see the result online here: focus.tv5monde.com, even if you cannot access to the backend.

Leave a Comment