Support

Account

Home Forums Backend Issues (wp-admin) Generating a preview in admin options page

Helping

Generating a preview in admin options page

  • So I have an options page that I am using as sort of a button builder where you can select colors/styles/assign class names etc. which are in a repeater to create multiple buttons of different styles. On the front end all you do is add the css style assigned in the acf field to an anchor tag and it styles it. Anyway, what I am wanting to do is generate a preview within the options page in the back end (preferably on the fly with ajax) for each repeater row created. Is there any way to do this or can someone help direct me in the right direction? Thanks.

  • This can be done using JavaScript. https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/, https://www.advancedcustomfields.com/resources/javascript-api/

    I’ve built something like this, but not for repeater fields, and not for buttons. I’m working on a reviews plugin and allowing the admin to set the colors and some other style features.

    I use a message field for the preview.

    I also have several other fields. Each of these fields has several specific classes, one class that designates that it is a setting field and one that designates what the setting is. For example, all of the fields have a class “star-setting”. Basically, there is an JS action hooked to this class so that if any of the setting fields is altered it triggers an refresh of the preview.

    
    $('.acf-field.star-setting').on('change', function(e) {update_star_preview()});
    

    Then using JS I get all the values of the field and populate that message field with the Preview.

    There is also an action that runs when the page is ready that initializes the preview with the current settings.

    Working with repeaters would be a little more difficult because you also need to deal with rows. This can be done by getting the closest row… this code is not exact, it is just an example.

    
    var row = field.closest('.acf-row');
    

    then you can find the field is that row

    
    var field_1 = row.find('.acf-field.star-setting-color');
    

    You can use this to get the field key information and then field methods from the JS API to get the value of the field.

    Not sure how much help that is to you.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.