Gravity Forms & ReactJS – Laden des Formulars in Modal und Senden

Lesezeit: 4 Minuten

Ich stecke derzeit bei einem Problem mit Gravity Forms und ReactJS fest. Ich versuche, ein Gravity-Formular als Modal in eine ReactJS-Komponente für Kontaktzwecke zu laden. Grundsätzlich bin ich derzeit eingerichtet, indem ich a mache GET von dem WP-API für die Seite mit dem geladenen Formular und dann mit dangerouslySetInnerHTML um die Seite in der Komponente zu erstellen. Das Problem ist jedoch, dass ich beim Versuch, das Formular abzusenden, ein Problem mit dem habe POST. Sein Versuch, es dem vorzulegen URL von dem GET. Ich kann hier ernsthafte Hilfe gebrauchen, was der beste Ansatz wäre.

import React, { PropTypes } from 'react';
import Modal from 'react-modal';
import $ from 'jquery';

class RequestContactModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: ''
    };
  }

  componentWillMount() {
    const wpApiUrl="../wp-json/wp/v2/pages/61";

    $.ajax({
      url: wpApiUrl,
      type: 'GET'
    })
      .done((response) => {
        console.log(response);
        this.setState({
          content: response.content.rendered
        });
      })
      .fail((response) => {
        console.log('fail');
        console.log(response);
      });
  }

  handleSubmit = (ev) => {
    ev.preventDefault();
    this.props.closeModal();
  }

  handleCloseClick = (ev) => {
    ev.preventDefault();
    this.props.closeModal();
  }

  render() {
    const customStyles = {
      overlay: {
        backgroundColor: 'rgba(0, 0, 0, 0.65)'
      },
      content: {
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        transform: 'translate(-50%, -50%)',
        background: '#fff'
      }
    };

    return (
      <Modal
        isOpen={this.props.isOpen}
        onRequestClose={this.props.closeModal}
        style={customStyles}
      >
        <div>
          <p>Gravity Forms</p>
          <div dangerouslySetInnerHTML={{__html: this.state.content}} />
        </div>
      </Modal>
    );
  }
}

RequestContactModal.propTypes = {
  closeModal: PropTypes.func.isRequired,
  isOpen: PropTypes.bool
};

RequestContactModal.defaultProps = {
  isOpen: false
};

export default RequestContactModal;

Diese Frage mag alt sein, aber das Erstellen von React-Anwendungen auf WordPress „gesichtslos“ mit der WP-REST-API gewinnt enorm an Dynamik (es ist sogar die Zukunft für den WordPress-Kern), sodass dies zwangsläufig immer häufiger auftauchen wird.

Was also passiert, ist, dass Gravity Forms seine Formularaktion per via festlegt $action = remove_query_arg( 'gf_token' ); die wiederum anruft add_query_arg() die dann anruft $uri = $_SERVER['REQUEST_URI']; – Dies bedeutet, dass, wenn Sie React verwenden, um WordPress-Inhalte anzuzeigen, die ein Gravity-Formular enthalten, die Aktion des Formulars auf den aufgerufenen REST-Endpunkt eingestellt ist, nicht auf den Permalink des Inhalts. Hoppla!

Obwohl Gravity Forms ein echtes WP-REST-API-Add-On in Arbeit hat, gibt es zwei solide Optionen, die ich bisher herausfinden konnte:

Option 1 – Vollständig kopflos

Stellen Sie sicher, dass Sie eine REST-Route haben, die POST akzeptiert (ich schlage vor, nur eine GET-Route wiederzuverwenden) und fügen Sie hinzu do_action('wp'); zu Ihrem Routenrückruf. Sie können es früher hinzufügen, wenn Sie möchten, wie z rest_api_init Haken. Dadurch wird sichergestellt, dass Gravity Forms ausgelöst wird, wenn REST-Anforderungen an es gesendet werden.

Alternativ können Sie anrufen GFForms::maybe_process_form() aus Ihrer Route Callback oder verwenden Sie es als Callback in der rest_api_init Haken. Der Trick besteht darin, sicherzustellen, dass die Methode aufgerufen wird, wenn die API die Anfrage erhält.

Lassen Sie als Nächstes React Ihre Formularübermittlung verarbeiten (Sie möchten nicht, dass der Browser es tatsächlich direkt postet und Ihren Besuchern JSON anzeigt). Die REST-API gibt automatisch eine Antwort mit einem ordnungsgemäß gehandhabten Gravity Form-Markup zurück… Validierungs-/Fehlermeldungen, Bestätigungen usw. Beachten Sie, dass Gravity Forms für diesen Ansatz ajax=false sein muss.

Option 2 – Gesichtslos (halbkopflos)

Angenommen, Sie möchten die Permalinks von WordPress beibehalten, werden Sie wahrscheinlich Ihre REST-API-Endpunkte so konfiguriert haben, dass sie mit den WordPress-Permalink-URIs übereinstimmen. Also zum Beispiel /wp-json/your-post-name-here/ ist äquivalent zu /your-post-name-here/. Wenn nicht, können Sie immer sicherstellen, dass Sie den URI zusammen mit Ihren Anfragen senden. Wenn Sie so damit umgehen, können Sie Folgendes hinzufügen rest_api_init Haken:

function tweak_request_uri() {
    $prefix = "https://stackoverflow.com/" . rest_get_url_prefix();
    $_SERVER['REQUEST_URI'] = str_replace( $prefix, '', $_SERVER['REQUEST_URI'] );
}

Dadurch wird sichergestellt, dass der REQUEST_URI mit der aktuellen Seite übereinstimmt, sodass das Gravity Form seine Daten erfolgreich an WordPress senden kann. Während dies es Gravity Forms-Postbacks ermöglicht, den Server tatsächlich zu erreichen, erhalten Sie jedoch nichts Sinnvolles zurück, wenn Sie es verwenden nur die REST-API … weil die Antwort an die Anfrage an den Server gebunden ist, aber React stellt eine neue, separate Anfrage an die API für Inhalte. Ergo erhalten Sie eine frische Form. Keine gute UX, das.

Um dies zu beheben, müssen Sie jede Funktion, Klasse, jedes Objekt usw., die Sie zum Verpacken Ihrer Daten verwenden, vor rest_ensure_response( $data ) nehmen und sie innerhalb von a aufrufen wp_head() Haken. Sie möchten die Daten json_encode() und innerhalb eines script-Tags als Javascript-Variable ausgeben. Zum Beispiel so etwas:

var $react_first_load_data = json_encode( [ 'id' => get_the_id(), 'title' => get_the_title(), 'content' => get_the_content() ] );
printf('<script type="text/javascript">window.reactFirstLoadData=%s</script>', $react_first_load_data);

Dann prüfen Sie in Ihrer React-App zuerst, ob diese Variable vorhanden ist, und verwenden die Daten, falls vorhanden. Wenn nicht, greifen Sie wie gewohnt auf die REST-Anfrage zurück.

Ich weiß, dass diese Antwort sehr architektonisch war, aber es gibt viele Möglichkeiten, dies anzugehen, und es hängt stark davon ab, wie Sie Ihre React-Implementierung mit WordPress bereits strukturiert haben.

1186280cookie-checkGravity Forms & ReactJS – Laden des Formulars in Modal und Senden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy