Interacting with Magewire Components Using Vanilla JavaScript

Third-party services often provide JavaScript SDKs for building integrations. In those situations, you'll want to access Magewire components directly from vanilla JavaScript - no Alpine.js required.

When a Magewire component is present on a page, a global Magewire variable is set on the window object. This Magewire variable is the main entry point for interacting with any Magewire component on the page.

Waiting for Magewire to Load

// Register hooks before the components start
document.addEventListener('magewire:init', () => {
  Magewire.hook('component.init', ({ component }) => {
    if (component.name !== 'the.layout.block.name') {
      return;
    }
    // Per component setup goes here
  });

  Magewire.hook('commit', ({ component, succeed }) => {
    succeed(({ snapshot, effects }) => {
      // Runs after the server answered a component update
    });
  });
}, { once: true });

// Work with the components that are already on the page
document.addEventListener('magewire:initialized', () => {
  // Your custom code using Magewire.find() goes here
}, { once: true });

// Wait for Magewire to be fully initialized before using window.Magewire
document.addEventListener('magewire:load', () => {
  // Your custom code using window.Magewire goes here
})

Finding a Magewire Component by Name

The Magewire.find() method gives you access to the JavaScript representation of a Magewire component. Pass the layout block name as a string argument.

// Find a Magewire component by its layout block name
Magewire.find('the.layout.block.name');

Handling Missing Magewire Components

When no Magewire component with the given name is on the current page, Magewire.find() or the next call on its result fails with a TypeError such as Cannot read properties of undefined.

The best way to check if a Magewire component exists before calling Magewire.find() is to look for an element with a matching wire:id attribute.

// Ensure the components on the page have started
document.addEventListener('magewire:initialized', () => {

  // Check if the component is present on the page before accessing it
  if (document.querySelectorAll('[wire\\:id=my-example]').length) {

    // Fetch the Magewire component instance
    const myComponent = Magewire.find('my-example');

    // Do something with the component
  }
}, { once: true })

// Ensure Magewire is initialized
document.addEventListener('magewire:load', () => {

  // Check if the component is present on the page before accessing it
  if (document.querySelectorAll('[wire\\:id=my-example]').length) {

    // Fetch the Magewire component instance
    const myComponent = Magewire.find('my-example');

    // Do something with the component
  }
})

Reading Magewire Component Properties

To access the current value of a Magewire component property from vanilla JavaScript, use the get() method on the component instance returned by Magewire.find().

// Read the property named "config" from a Magewire component
Magewire.find('the.layout.block.name').get('config')

On Magewire 3, get() is an alias of $get(). Hyvä Checkout's own code reads properties with component.$wire.$get('method') inside a component.init hook.

Writing Magewire Component Properties

Updating a Magewire component property from vanilla JavaScript is done with the set() method. Pass the property name and the new value as arguments.

// Set the property "foo" to the value "bar"
Magewire.find('the.layout.block.name').set('foo', 'bar')

The set() method is equivalent to using the $set('foo', 'bar') magic action inside an Alpine.js context.

Calling PHP Methods from Vanilla JavaScript

There are two ways to call PHP methods on a Magewire component using vanilla JavaScript. You can either call the method directly on the component instance, or pass the method name as a string to the call() method.

// Both expressions call the PHP method "navigateToStep" with the argument "payment"

// Option 1: Using call() with the method name as a string
Magewire.find('hyva-checkout-main').call('navigateToStep', 'payment')

// Option 2: Calling the method directly on the component instance
Magewire.find('hyva-checkout-main').navigateToStep('payment')

Both approaches automatically invoke the corresponding PHP method with the same name on the Magewire server-side component.

Calling a Payment Method from Vanilla JavaScript

Here's a practical example. The following JavaScript call to setPaymentToken sends token data from a third-party payment SDK to the Magewire backend component.

// Check if the payment component is present on the page
if (document.querySelectorAll('[wire\\:id=checkout.payment.psp_method_xyz]').length) {

    // Call setPaymentToken on the Magewire payment component
    Magewire.find('checkout.payment.psp_method_xyz').setPaymentToken({token: myToken})
}

The JavaScript call above triggers the setPaymentToken method on the corresponding Magewire PHP component.

class PspMethodXyz extends Component
{
    /**
     * Receives the payment token from the frontend JavaScript SDK
     * and stores it in the quote payment additional data.
     */
    public function setPaymentToken(array $data) {
        $paymentInfo = json_serialize(['token' => $data['myToken']]);
        $this->checkoutSession->getQuote()->getPayment()->setAdditionalData($paymentInfo);
    }
}

Returning Values from Magewire to JavaScript

// Resolves to whatever the PHP method returns
const result = await Magewire.find('checkout.payment.psp_method_xyz').setPaymentToken({token: myToken});