0

So I have a page select in my theme's customizer and a bit of code to make the preview change when the user selects a different page:

api('gm_pages', function (setting) {
           var pageID = setting.get();
            setting.bind( function onChange( pageID ) {
                api.previewer.previewUrl.set(api.settings.url.home + '?page_id=' + pageID);
               })
        });

I use this simple plugin so user can reset customizer settings to default:

https://plugins.trac.wordpress.org/browser/customizer-reset-by-wpzoom/trunk

When you click a button, you get a warning popup then if you click through it, the plugin deletes the theme_mod data and refreshes the entire site.

The problem I am having is when I do this, the page dropdown option returns to the default "home" page but the preview URL doesn't update and stays on the last page the user had selected. If I console.log(pageID); the correct page number (showing in the select box) shows, it's the preview that doesn't run for some reason.

Edit: I can add this line in:

 if (performance.navigation.type === 1) {
            api.previewer.previewUrl.set(api.settings.url.home + '?page_id=' + pageID);
        }

and that does the trick, but how can I do this conditionally without needing 2 lines of the same code?

0

I managed it by adding this conditional:

if (performance.navigation.type >= 0) {
                api.previewer.previewUrl.set(api.settings.url.home + '?page_id=' + pageID);
            }

This takes care of all the navigation possibilities. It's sort of a workaround but it does the trick.

MDN Web Doc:

PerformanceNavigation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.