La première étape est de faire en sorte que votre code local soit accessible de l’extérieur en lisant ce billet.

Ensuite pour pouvoir créer une application Shopify, il faut se rendre ici.

Une fois votre compte créé, il faut créer une boutique de test, plusieurs tutos existent, je ne m’étendrai pas sur ce sujet.

Lorsque votre boutique de test est créée, il faut créer une application, pour cela, il faut aller sur l’onglet Applications, et cliquer sur le bouton Créer une application :

Pour simplifier les choses, cliquez sur le bouton Créer une application manuellement :

Ensuite nommez notre application et cliquez sur le bouton Créer :

Votre application apparait maintenant dans la liste, cliquez dessus pour afficher ses paramètres :

Sur l’aperçu, vous pouvez voir les clés affectées à cette application, passons au local pour créer le projet selon le billet dédié, ensuite, le site peut être affiché :

Pour s’assurer que le site est accessible depuis l’extérieur, vous allez, dans l’interface de ligne de commande, aller dans le répertoire du nouveau projet et exécuter :

herd share

pour arriver à l’interface indiquant l’url générée :

Si tout se passe correctement, vous devez avoir accès à la même interface que précédemment, pour s’en assurer, il suffit de modifier le fichier finaltest\resources\views\welcome.blade.php, la page doit être modifiée :

Vous pouvez arrêter ce process en utilisant ctrl-c, puis répondre o.

Passons à la liaison avec Shopify, pour cela nous allons utiliser cette librairie qui fonctionne parfaitement et est maintenue.

Dans la console dans le répertoire de votre application, vous allez exécuter :

composer require kyon147/laravel-shopify

Une fois la librairie installée, il va falloir générer le fichier de config, dans la console exécutez :

php artisan vendor:publish --tag=shopify-config

Dernière étape, la mise à jour de la base, toujours au même endroit, exécutez :

php artisan migrate

La partie console est terminée, maintenant vous allez devoir éditer 4 fichiers :

  • [nom du projet]\.env
  • [nom du projet]\app\Models\User.php
  • [nom du projet]\resources\views\welcome.blade.php
  • [nom du projet]\routes\web.php

Modification de [nom du projet]\.env

Tout à la fin du fichier (ce n’est pas impératif), placez le code suivant :

SHOPIFY_APPBRIDGE_VERSION=latest
SHOPIFY_APP_NAME=[nom du projet]
#SHOPIFY_API_VERSION=2024-04
SHOPIFY_API_KEY=[ID client]
SHOPIFY_API_SECRET=[Secret client]

En remplaçant les données entre crochets avec les vôtres, la ligne avec le dièse est commentée, c’est pour le cas où la version devait changer.

A noter que dans ce fichier il faudra modifier la donnée APP_URL lorsque l’url aura été générée.

Modification de [nom du projet]\app\Models\User.php

Il faut lier ce ficher à Shopify afin qu’un utilisateur soit un lien vers une boutique.

Vous allez devoir remplacer le code de base du modèle par celui ci :

<?php

namespace App\Models;

use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Osiset\ShopifyApp\Contracts\ShopModel as IShopModel;
use Osiset\ShopifyApp\Traits\ShopModel;

class User extends Authenticatable implements IShopModel
{
    use Notifiable, ShopModel;

    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array<int, string>
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * Get the attributes that should be cast.
     *
     * @return array<string, string>
     */
    protected function casts(): array
    {
        return [
            'email_verified_at' => 'datetime',
            //'password' => 'hashed',
        ];
    }
}

Ce modèle est maintenant lié à Shopify, il n’est plus nécessaire de caster le mot de passe dans ce système.

Modification de [nom du projet]\resources\views\welcome.blade.php

Cette étape n’est pas impérative mais va vous permettre de confirmer que vous avez accès aux données de Shopify.

Vous allez devoir remplacer le code de base de la vue par celui ci :

@extends('shopify-app::layouts.default')

@section('content')
    <!-- You are: (shop domain name) -->
    <p>You are: {{ $shopDomain ?? Auth::user()->name }}</p>
@endsection

@section('scripts')
    @parent

    <script>
        actions.TitleBar.create(app, { title: 'Welcome' });
    </script>
@endsection

Modification de [nom du projet]\routes\web.php

Dans ce fichier il va falloir utiliser le middleware de Shopify pour valider la connexion, vous allez donc remplacer :

Route::get('/', function () {
    return view('welcome');
});

par :

Route::get('/', function () {
    return view('welcome');
})->middleware(['verify.shopify'])->name('home');

Attention, il est très important de nommer cette route home.

Vos sources sont prêtes, nous allons relancer l’exposition en ligne de commande dans le répertoire du projet avec :

herd share

pour arriver à l’interface indiquant l’url générée :

Maintenant vous allez saisir cette url, vous devriez arriver à une page de ce type :

C’est tout à fait normal puisque pour le moment Shopify n’a pas lié cette url, c’est ce que nous allons faire, pour cela, rendez vous sur votre compte Shopify, dans votre application, sur l’onglet Configuration :

Vous devez renseigner l’url de base de votre application, puis une de redirection qui comporte le suffixe authenticate, Cliquez sur le bouton en haut à droite pour sauvegarder et publier les données.

Attention dans la version gratuite d’expose, votre url change à chaque fois que vous exécutez herd share et cette dernière n’est valide qu’une heure, il faudra donc mettre à jour ces infos, ainsi que le fichier .env à chaque fois, à moins de souscrire à un compte payant.

Le dernière étape consiste en l’installation de votre application sur votre boutique, pour cela vous devez revenir à l’onglet Aperçu de l’interface de votre application sur Shopify, et cliquer sur le bouton Sélectionner une boutique :

Choisissez la boutique sur laquelle vous souhaitez installer votre application, lorsque vous passerez la souris dessus, un bouton Installer l’application apparaitra, cliquez dessus :

En théorie, vous devriez arriver à la page de demande de validation des accès :

Si vous arrivez à cette page :

Il va falloir modifier le fichier [nom du projet]\bootstrap\app.php et remplacer :

->withMiddleware(function (Middleware $middleware) {
})

par :

->withMiddleware(function (Middleware $middleware) {
$middleware->trustProxies(at: '*');
    $middleware->trustProxies(headers: Request::HEADER_X_FORWARDED_FOR |
        Request::HEADER_X_FORWARDED_HOST |
        Request::HEADER_X_FORWARDED_PORT |
        Request::HEADER_X_FORWARDED_PROTO |
        Request::HEADER_X_FORWARDED_AWS_ELB
    );
})

Une fois la page de validation affichée, cliquez sur le bouton Installer, vous devriez voir une page du type :

Bravo ! Votre application est installée et branchée sur votre serveur local.

Leave a Reply

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

trente neuf + = 40