1

我需要通过 Ajax 加载重力表单，只需按一下按钮（在 PHP/Wordpress 中），感谢 Steven Henty，我找到了他的解决方案来解决我的问题。稍微修改它以在模态（lity modal）中打开我的表单，它可以工作！然而......现在我开始将我的网站迁移到 Wordpress 中的新 Gutenberg 编辑器。所以我需要一个可以从 Gutenberg 块 (javascript) 代码中执行相同操作的系统。

我可以编写一些代码，但我不是铁杆，所以如果有人能告诉我如何实现这个以前的（基于 PHP 的）“系统”，例如实现这个代码的（基于 JavaScript 的）古腾堡按钮块，​​我会很高兴。这是当前（工作）按钮的代码：

按钮.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-b​​utton.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 上的第二篇文章，所以如果您需要更多详细信息，请告诉我......真的希望你们中的一个熟练的人能够处理这个问题。谢谢！

4

0 回答 0