• Resolved Marcus Karlos

    (@power2009)


    Hi,

    I am using the latest 8.9.1 version and 9.0.0 DEV, and I want to ask about support for the ACF plugin in the Beta Editor.

    Are there plans to support the new WooCommerce editor + ACF, which is currently in beta? Additionally, I am interested in whether there is or will be documentation available on how to interact with the new product editor. My theme includes certain fields that currently work only with the old editor, and I would like to update my theme to add these fields to the new editor. Do you have any hooks or any other information for developers on how to interact with your block editor and add support for plugins like ACF and WooCommerce Dropbox Integration?

    jQuery(function($) {
        const wcdb = {
            lastSelectedButton: false,
            options: {
                success: function(files) {
                    wcdb.afterFileSelected(files);
                },
                linkType: 'preview',
                multiselect: true
            },
    
            init: function() {
                if (!this.checkBrowserSupport()) {
                    return;
                }
    
                this.addButtons();
                this.addButtonsNewEditor();
                this.addButtonEventHandler();
    
                $('#variable_product_options').on('woocommerce_variations_added', () => {
                    wcdb.addButtons();
                    wcdb.addButtonsNewEditor();
                    wcdb.addButtonEventHandler();
                });
    
                $('#woocommerce-product-data').on('woocommerce_variations_loaded', () => {
                    wcdb.addButtons();
                    wcdb.addButtonsNewEditor();
                    wcdb.addButtonEventHandler();
                });
            },
    
            checkBrowserSupport: function() {
                return (typeof Dropbox !== 'undefined') && Dropbox.isBrowserSupported();
            },
    
            addButtons: function() {
                let button = $('<button type="button" class="button insert-dropbox">' + woocommerce_dropbox_translation.choose_from_dropbox + '</button>');
    
                $('.downloadable_files').each(function() {
                    let insertButton = $(this).find('a.button.insert');
                    if ($(this).find('button.insert-dropbox').length === 0) {
                        insertButton.after(button.clone());
                    }
                });
            },
    
            addButtonsNewEditor: function() {
                const observer = new MutationObserver(function(mutationsList) {
                    for (let mutation of mutationsList) {
                        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                            let targetNode = $('.woocommerce-downloads-menu__menu-content .components-dropdown-menu__menu [role="group"]');
                            if (targetNode.length > 0 && !targetNode.find('.insert-dropbox').length) {
                                let button = $('<div class="components-dropbox"><span class="components-menu-item__item">Use file from DropBox</span><button type="button" class="button insert-dropbox">' + woocommerce_dropbox_translation.choose_from_dropbox + '</button></div>');
                                targetNode.last().append(button);
    
                                wcdb.addButtonEventHandler();
                            }
                            break;
                        }
                    }
                });
    
                observer.observe(document.body, { childList: true, subtree: true });
            },
    
            addButtonEventHandler: function() {
                $('button.insert-dropbox').on('click', function(e) {
                    e.preventDefault();
                    wcdb.lastSelectedButton = $(this);
                    Dropbox.choose(wcdb.options);
                });
            },
    
            afterFileSelected: function(files) {
                let productId = ''; 
    
                $.each(files, function(index, file) {
                    let fileData = {
                        'name': file.name,
                        'url': file.link.replace('dl=0', 'dl=1'),
                        'product_id': productId
                    };
    
                    $.ajax({
                        type: 'POST',
                        url: wcdb_ajax_object.ajax_url,
                        dataType: 'json',
                        data: {
                            'action': 'woocommerce_add_product_file',
                            'file_data': fileData,
                            'security': wcdb_ajax_object.ajax_nonce
                        },
                        success: function(response) {
                            if (response.success) {
                               
                                let body = $('.wp-block-woocommerce-product-downloads-field__body');
                                let table = $('<div class="woocommerce-sortable wp-block-woocommerce-product-downloads-field__table" role="listbox"></div>');
                                let fileRow = $('<div class="woocommerce-sortable__item woocommerce-list-item wp-block-woocommerce-product-downloads-field__table-row is-last-droppable" role="listitem" tabindex="-1" aria-description="Press spacebar to reorder"></div>');
    
                                let fileName = $('<div class="wp-block-woocommerce-product-downloads-field__table-filename"><span>' + file.name + '</span><span class="wp-block-woocommerce-product-downloads-field__table-filename-description">' + file.link.replace('dl=0', 'dl=1') + '</span></div>');
                                let actions = $('<div class="wp-block-woocommerce-product-downloads-field__table-actions"><button type="button" class="components-button is-tertiary">Edit</button><button type="button" class="components-button has-icon" aria-label="Remove file"></button></div>');
    
                                fileRow.append(fileName);
                                fileRow.append(actions);
                                table.append(fileRow);
                                body.append(table);
                            } else {
                                console.error('', response.data.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Error AJAX:', error);
                            console.error('Server Respond:', xhr.responseText);
                        }
                    });
                });
            }
        };
    
        wcdb.init();
    });

    I have a script that can add a button to the “Download” block, but I need the logic to add a file to the Input Link of WordPress Blocks (using React). Could you provide guidance on how to achieve this with the new WooCommerce Beta Editor?

    Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support omarfpg a11n

    (@omarfpg)

    Hi @power2009,

    Thank you for your interest in using our new Product Editor (Beta). Please note that since 8.9.0 we support custom fields natively in the new product editor, you can learn more about it in our changelog release here.

    Regarding compatibility with other plugins or themes, it’s up to the third-party developers to make sure they’re compatible with our plugin’s latest versions and features. It’s possible that the folks at ACF are workign on this already, but it’d be best to check with them! Same with your theme.

    Regarding editing your theme, that’s more of a development question. I can recommend the Woo Developer Resources Portal for resources on developing for WooCommerce.

    You can also visit the WooCommerce Facebook group or the #developers channel of the Woo Community Slack. We’re lucky to have a great community of open-source developers for Woo, and many of our developers hang out there, as well.

    I hope this helps so far!
    -OP

    Thread Starter Marcus Karlos

    (@power2009)

    Hi! I understand everything, but my question was different. You haven’t published any documentation on how to work and interact specifically with the fields of the new editor, and I am familiar with the WooCommerce documentation.

    You haven’t created hooks or provided a way to interact with the fields (blocks), and there are no templates available to modify sections like DOWNLOADS, where I would like to add my own button. Unfortunately, I can’t do this because there is no documentation regarding the new editor for developers, only for user settings.

    Plugin Support Shameem R. a11n

    (@shameemreza)

    Hi @power2009

    You haven’t created hooks or provided a way to interact with the fields (blocks), and there are no templates available to modify sections like DOWNLOADS, where I would like to add my own button. Unfortunately, I can’t do this because there is no documentation regarding the new editor for developers, only for user settings.

    Currently, our new product editor is in beta, and we don’t have any public documentation available yet. However, if you need help, feel free to create a report in our GitHub repo or pop a question in the #developers channel of the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question.

    Additionally, if you’re considering using the new product editor to add product details with the block editor, you can easily make that happen! All you need to do is add this custom code snippet to your child theme’s functions.php file to enable the block editor for products without the new product editor: https://gist.github.com/shameemreza/0f1c2baf2f7009ad12733efa34c992e5

    I hope this provides some clarity. Please let us know if you have any other questions!

    Plugin Support omarfpg a11n

    (@omarfpg)

    Hi there ?? ,

    We haven’t heard from you in a while, so I’m going to mark this as resolved. Feel free to start a new thread if you have any more questions.

    All the best,
    Omar

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Support the new Woocommerce Beta Editor for ACF’ is closed to new replies.