boxybird / inertia-wordpress Goto Github PK

Hi there,

Somehow cached responses are showed in a modal.
When i activate SpinupWP (nginx caching plugin from my wordpress hosting environment) or cache-enabler, strange things happens. Some windows / links are opening in a modal, some not.

As Reinink says in #inertiajs/inertia#586

This is what happens when you don't return an Inertia response from the <inertia-link> endpoint. All Inertia requests MUST return an Inertia response, otherwise they are shown in a modal like this. This is core to how the library works. 👍

When Logged in the no-cache is added to the headers, no modal is opened
I thought maybe the 'no-cache, must-revalidate, max-age=0'

Has this todo with the inertia-wordpress adapter or is this default inertia behaviour?

Hi there,
Meanwhile my first wordpress-intertia project is in progress.
However, I'm trying to create filters in my archive page.

function custom_query_vars_filter($vars) {
    $vars[] = 'testing';
    return $vars;
  }
  add_filter( 'query_vars', 'custom_query_vars_filter' );

What happens, with your inertia-wordpress example theme when i visit:
http://inertia.local/movies/?testing=myvar i got a 301 redirected

When i add the post_type and custom query to a default 'twentynineteen'
http://inertia.local/movies/?testing=myvar it's giving me the proper movies archive page + the testing query var

I could write a custom rest controller for now, but just using the inertia-link would be ideal

<inertia-link href="/filmography" :data="{ filters: 'editorial' }">Editorial Work</inertia-link>

Hello, thanks for this awsome adapeter!

I have been using this plugin to create full webpage and have simple contact form that needs to submit data to WordPress and return errors if any.

On Frontend I did create Form helper and on WordPress I did create Rest route. My issue was, that this plugin doesn't document how to use Inertia.js form with Wordpress and I did need a quite a lot of research and debugging to get this working.
Now I have solution to handle errors in Inertia.js as it's required in their docs.

So my question - is possible to integrate or maybe document form use case in plugin?

I was not sure if I should include code snippets, but here you go.

Wordpress code for handling rest route

/**
 * Handle form
 *
 * @param \WP_REST_Request $request The request.
 */
public function handle_contact_form( \WP_REST_Request $request ) {
	$data = $request->get_params();

	// Validate the data.
	$rules = [
		'first_name' => [ 'required' ],
		'email'      => [ 'required', 'email' ],
	];

	$v = new \Valitron\Validator( $data );
	$v->mapFieldsRules( $rules );

	// If validation fails, store errors in session and redirect back to the previous page.
	if ( ! $v->validate() ) {
		$_SESSION['errors'] = $v->errors();

		wp_redirect( wp_get_referer() );
		exit;
	}

	// Code to save data in WP...

	// Redirect back.
	wp_redirect( wp_get_referer() );
	exit;
}

Code for WP session

if ( ! session_id() ) {
	session_start();
}

Frontend code for Svelte

<script> 
  import { useForm, page } from '@inertiajs/svelte';

  const form = useForm({
    first_name: '',
    email: '',
  });

  function handleSubmit() {
    $form.clearErrors();

    // Rest endpoint in WP
    const url = $page.props.ajax_url + '/contacts';

    $form.post(url, {
      preserveScroll: true,
      onSuccess: () => {
        $form.reset();
      },
    });
  }
<script>

<form on:submit|preventDefault={handleSubmit}>
  <div>
    <label for="cf-fist-name">Fist name</label>
    <input id="cf-fist-name" type="text" bind:value={$form.first_name} />
    {#if $form.errors.first_name}
      <span class="error">{$form.errors.first_name}</span>
    {/if}
  </div>

  <div>
    <label for="cf-email">Email</label>
    <input id="cf-email" type="email" bind:value={$form.email} />
    {#if $form.errors.email}
      <span class="error">{$form.errors.email}</span>
    {/if}
  </div>

  <button type="submit">Submit</button>
</form>

Since i already need to run a composer install within the plugin's directoy of the wordpress-inertia-plugin,
I think it's more likely to a add the wordpress-inertia adapter within my theme files, with composer.

Just like the timber v2 installation
https://timber.github.io/docs/v2/installation/

If there is an inertia update, i can check the composer file within my theme.
Or your starter theme.

Dear author,

Is there a way to support SSR, since most WordPress websites need SEO friendly?

Hi there, first of all thanks for your amazing work !

I've seen you added the type="wordpress-plugin" in the composer.json on master so we can use composer to get the plugin, that's cool !

However, the plugin still expect use to run composer install inside the plugin :

Any idea how to fix this ?

Thanks !

The official documentation provides a method for returning a location redirect which is not implemented here.

This is very useful when handling redirects to error pages.

return Inertia::location($url);

I went ahead a made a PR fixing this bug.

#12

Just wanted to say this is awesome. Came across this looking for a way to integrate WP and Inhertia after playing with it on a Laravel setup. I'm very excited about this approach in concept. Looks like it's been a bit stalled since May, curious if you have future plans?

Hi, any idea how to get this to work with Gutenberg?

Im working with timber and advanced custom fields to load custom blocks, These are Just twig files which can be injected with vue components as well.

I will give it a try asap :-)

Hi there,

I did install the plugin to create a wordpress theme using inertia, react and typescript but I was facing an issue with inertia that couldn't get the "app" element. I don't know why but placing the createInertiaApp() function in an event listener fixed it.

The problem is that the element with id 'app' doesn't exist when the function is called in app.js which is strange because it looks like it work in your theme exemple using vuejs. I never used laravel-mix before so it might be the reason it fails.

Here is a repository to see the problem : https://github.com/Tanguy-Plf/wordpress-inertia
you'll need to install the polylang plugin and go to http://localhost:10018/es/ to see the bug in the console.
The fix is commented bellow in app.tsx

Thank you for your help!

Hello,

I'm building a framework on top of your adapter and inertia. I'd like to know if you have any plan to add the Inertia::lazy method to the adapter ? Here is the PR on the official adapter for laravel: inertiajs/inertia-laravel#175
And the commit : inertiajs/inertia-laravel@53ebf77

Would be great to have that feature on wordpress,

Have a nice week-end