ЗАДАЧА: загрузить гравитационные формы через AJAX - заменить работающее PHP-решение на код Гутенберга - PullRequest
Новая
       7

ЗАДАЧА: загрузить гравитационные формы через AJAX - заменить работающее PHP-решение на код Гутенберга

0 голосов
/ 23 ноября 2018

Мне нужно было загрузить форму Gravity через Ajax одним нажатием кнопки (в PHP / Wordpress), и благодаря Стивену Хенти я нашел его решение , чтобы исправить мою проблему.Немного изменил его, чтобы открыть мою форму в модальном режиме (lity modal), и это работает!Однако .... Теперь я начал переносить свой сайт в новый редактор Gutenberg в Wordpress.Поэтому мне нужна система, которая может сделать то же самое из блочного (javascript) кода Гутенберга.

Я могу написать несколько кодов, но я не хардкор, поэтому буду рад, если кто-нибудь скажет мне, как реализовать этот первый (Основанный на PHP) 'system', например, на кнопочный блок Gutenberg (основанный на javascript), который реализует этот код.Вот код текущей (рабочей) кнопки:

button.php 

// Hook up the AJAX ajctions
add_action('wp_ajax_nopriv_gf_button_get_form', 'gf_button_ajax_get_form');
add_action('wp_ajax_gf_button_get_form', 'gf_button_ajax_get_form');

// Add the "button" action to the gravityforms shortcode
// e.g. [gravityforms action="button" id=1 text="button text"]
add_filter('gform_shortcode_button', 'gf_button_shortcode', 10, 3);

function gf_button_shortcode($shortcode_string, $attributes, $content)
{
    $a = shortcode_atts(array(
        'id' => 0,
        'text' => 'Open',
        'button_class' => '',
        'button_style' => ''
    ), $attributes);

    $form_id = absint($a['id']);
    $curr_lang = ICL_LANGUAGE_CODE;

    if ($form_id < 1) {
        return '<div>Missing the ID attribute.</div>';
}
gravity_form_enqueue_scripts($form_id, true);
$ajax_url = admin_url('admin-ajax.php');
$html = sprintf('<button id="gf_button_get_form_%d" class="gf_button_get_form %s" style="%s"><div class="gf_button_get_form-label">%s</div></button>', $form_id, $a['button_class'], $a['button_style'], $form_id, $a['text']);
$html .= "<script>
            (function (SHFormLoader, $) { 
            $('#gf_button_get_form_{$form_id}').click(function(){
                $.ajaxSetup({
                    beforeSend: function() {
                        $('.spinner_{$form_id}').addClass('active');
                    },
                    complete: function() {
                        $('.spinner_{$form_id}').removeClass('active');
                        var fieldsWithHiddenLabels = $('.gfield.hidden-label');

                        if (fieldsWithHiddenLabels.length) {
                            fieldsWithHiddenLabels.each(function(){
                                if($(this).hasClass('gfield_contains_required')){
                                    $(this).find('.ginput_container label').prepend('<span class=\"gfield_required\">*</span>');
                                }
                            }); 
                        }
                    }                        
                });
                $.get('{$ajax_url}?lang={$curr_lang}&action=gf_button_get_form&form_id={$form_id}',function(response){
                    lity(response);
                    if(window['gformInitDatepicker']) {gformInitDatepicker();}
                });                 
            });
        }(window.SHFormLoader = window.SHFormLoader || {}, jQuery));
        </script>";
return $html;

}

function gf_button_ajax_get_form() {
    $form_id = isset($_GET['form_id']) ? absint($_GET['form_id']) : 0;
    gravity_form($form_id, true, false, false, false, true);
    die();
}

Я использую превосходные create-guten-blocks как шаблон, и мой файл шаблона шаблона выглядит следующим образом:

form-button.js 

import './style.scss';
import './editor.scss';

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

registerBlockType( 'my-blocks/form-button', {
    title: __( 'Form Button' ),
    icon: heart,
    category: 'common',
    keywords: [
        __( 'my-blocks — Form Button' )
    ],



    edit: function( props ) {
    return (
        <div className={ props.className }>
            <p>— Hello from the backend.</p>
            <p>
                CGB BLOCK: <code>configit-blocks</code> is a new Gutenberg block
            </p>
            <p>
                It was created via{ ' ' }
                <code>
                    <a href="https://github.com/ahmadawais/create-guten-block">
                        create-guten-block
                    </a>
                </code>.
            </p>
        </div>
    );
},
save: function( props ) {
    return (
        <div>
            <p>— Hello from the frontend.</p>
            <p>
                CGB BLOCK: <code>configit-blocks</code> is a new Gutenberg block.
            </p>
            <p>
                It was created via{ ' ' }
                <code>
                    <a href="https://github.com/ahmadawais/create-guten-block">
                        create-guten-block
                    </a>
                </code>.
            </p>
        </div>
    );
},
} );

Надеюсь, это имеет смысл.Это мой второй пост о Stackoverflow, поэтому, пожалуйста, дайте мне знать, если вам нужно больше деталей ... Очень надеюсь, что один из вас, опытный человек, справится с этим.Спасибо!

...