Rapidez

Appearance

Upgrading ​

Rapidez v3 ​

In this release, we refactored the checkout from the Magento API to GraphQL! 🚨 And with that 🥁, we added a one-step checkout option! 🚀 Furthermore:

And a lot of frontend changes:

You should review all template/config changes

Composer dependencies ​

First, follow the Laravel 11 upgrade guide and check all your dependencies one by one to see if they're compatible and what has changed in changelogs / release notes.

bash
composer outdated

Laravel 11 ​

With Laravel 11, a new application structure was introduced. Laravel doesn't recommend upgrading to the new structure, but since we are using the redirectUsing() within our new MagentoCartTokenGuard, you have to make 1 change; remove the redirectTo() method from app/Http/Middleware/Authenticate.php:

code
<?php

namespace App\Http\Middleware;

use Illuminate\Auth\Middleware\Authenticate as Middleware;
use Illuminate\Http\Request;

class Authenticate extends Middleware
{
    /**
     * Get the path the user should be redirected to when they are not authenticated.
     */
    protected function redirectTo(Request $request): ?string
    {
        return $request->expectsJson() ? null : route('login');
    }
    //
}

Frontend changes ​

Dependencies ​

  1. Install
bash
yarn add -D graphql graphql-tag universal-cookie "graphql-combine-query@indykoning/graphql-combine-query#feature/add-allowed-duplicates"
  1. Build
bash
yarn build

TIP

We recommend to double check all frontend dependencies with yarn outdated. But keep in mind that Rapidez doesn't support Vue 3 yet.

Event changes ​

If you need to interact with the current Vue instance, do not use turbo:load. Instead, use vue:loaded to ensure Vue has actually been booted.

GraphQL component ​

The check property on the GraphQL component has been changed from a string that gets evaluated to a function. This means that you will have to update each (normal) usage:

blade
<graphql ... check="[...]">
<graphql ... check="(data) => data.[...]">

Colors ​

The colors got new names, see the color docs. You could upgrade to those new classes by replacing them in overwritten and custom Blade templates; have a look at the color names refactor PR for examples. An easier approach is to merge those new colors with your existing colors in the tailwind.config.js. That way you're existing and new colors work.

Z-indexes ​

The rapidez.frontend.z-indexes config has been removed with the named z-indexes refactor. The z-index names are not defined within the tailwind.config.js. Most likely you've published the config/rapidez/frontend.php file so nothing will break there. You only have to add the new zIndex options from the tailwind.config.js into your project Tailwind config. We recommend replacing all the rapidez.frontend.z-indexes usage with the Tailwind z-index names.

Components ​

Within Rapidez we'd multiple components for inputs, buttons, etc within the core. Most of them are extracted to a separated package: rapidez/blade-components. The migration to those new components within the core can be found here. We recommend to migrate everything to those new components. Check out the readme and demo.

Checkout changes ​

Everything has been migrated to use the GraphQL components for queries and mutations. On those components, callbacks are used to process the data. So any changes made in an overwritten checkout.vue file and any checkout views should be reviewed. Have a look at the GraphQL checkout PR for all changes.

The opinionated checkout options (checkout-theme and confira) are already made compatible with Rapidez v3. No onestep there as they're multi step checkouts.

TIP

The fastest option is to remove all checkout customizations and reimplement them within the new checkout as a lot has been changed!

Routing ​

We moved everything to Laravel routes where previously this was handled with custom JavaScript. The benefit of this is that every checkout step will go through PHP where we can add/check any data, just like everything else within Rapidez. So /checkout#credentials becomes /checkout/credentials. With that, we introduced authentication providers which can be used as middleware on routes:

  • auth:magento-customer
  • auth:magento-cart

With these routes, you can "secure" them where previously this was checked on the frontend. When unauthorized, you were redirected away after the page load. This is now handled server-side. All checkout steps are secured with the auth:magento-cart middleware by default to validate the cart mask. To make this possible, the mask and customer token are moved from LocalStorage to Cookies.

Onestep checkout ​

In the config/rapidez/frontend.php config there is a checkout_steps option. Those steps link to Blade views within the resources/views/checkout/pages directory. To use the one step checkout just swap the default with the onestep view:

php
'checkout_steps' => [
    'default' => ['login', 'credentials', 'payment'], 
    'default' => ['onestep'], 
],

Magento configuration ​