Créer une page d'achat premium sur xenForo

1899

Ancien staff
Inscription
10 Août 2012
Messages
9 797
Réactions
4 487
Points
29 037
header.png


Bonjour et bienvenue dans ce tutoriel, où je vais vous montrer comment créer une page d'achat sur xenForo (nous utiliserons dans ce tutoriel le grade premium).

Près requis :
• Quelques notions en PHP
• Notions en HTML / CSS
• Notions en xenForo
• Avoir activé le mode debug
• Un logiciel de développement (Sublim Text ou Notepad++ par exemple)

1. Création de la page

Pour débuter, nous allons créer un addon
. Il faut retenir que toutes les pages / templates que vous aller créer seront rattaché à ce dernier. :nerd:

Pour commencer, allez sur votre panel et créez votre extension via l'onglet "Développement" (d'où l'utilité d'avoir activé le mode debug) :
  1. ID de l'extension : entrez l'ID de votre extension (exemple : premiumPage)
  2. Titre : entrez le titre de votre extension (exemple : Premium)
  3. Chaîne de la version : entrez la version de votre extension (exemple : 1.0.0)
  4. ID de la version : entrez le numéro d'une version (exemple : 1 ; si une mise à jour a lieu, entrez : 2)
  5. URL : laissez vide
  6. Code d'installation : laissez vide, si vous voulez créer une installateur cette ligne vous sera utile :espion:
  7. Code de désinstallation : laissez vide, si vous voulez créer une installateur cette ligne vous sera utile :espion:
Maintenant, nous allons créer le préfixe du chemin, ce qui nous permettra de créer le lien pour accéder à la page. Pour ce faire, allez dans l'onglet Développement ensuite dans Préfixes des chemins et créez en un :
  1. Préfixe du chemin : entrez le nom de votre lien (exemple : premium ; ne surtout par mettre de "/")
  2. Type de chemin : Public
  3. Classe du chemin : entrez la route de la class de PageURL (dans mon cas, Premium_Route_PageURL)
  4. Utiliser la classe pour construire le lien : Uniquement quand les données sont fournies
  5. Extension : Sélectionnez votre extension
Ne surtout pas négliger cette étape, sinon vous ne pourrez pas créer des pages pour votre addon ! Le préfixe du chemin sera toujours présent des vos liens. Par exemple, la shoutbox a plusieurs lien (/shoutbox, /shoutbox/motd etc) et bien, le préfixe dans ce cas c'est "/shoutbox" et il sera toujours présent dans les liens de votre extension.

Maintenant, nous allons créer le fichier de l'extension dans votre dossier library (pour ce tutoriel, je le nommerais Premium). Dans ce même dossier, créer le dossier qui contiendra les fichiers nécessaire à la création de l'addon.

Ensuite, créez un dossier Route et ControllerPublic, ce qui nous donne cette arborescence :

  • Premium
    • Route
    • ControllerPublic
Dans le dossier Route, créez un fichier php nommé PageURL et insérez ce code :
PHP:
<?php

class Premium_Route_PageURL implements XenForo_Route_Interface // Changez la class par la votre, à noter que les "/" se traduit par "_" en php. C'est tout simplement la route qui mène au fichier que vous êtes en train de créer.
{
    public function match($routePath, Zend_Controller_Request_Http $request, Xenforo_Router $router) // Ne changez rien
    {
        return $router->getRouteMatch('Premium_ControllerPublic_Page', $routePath); // Changez la class par celle que vous allez créer après cette étape.
    }
}

Une fois vos class changez, allez dans le dossier ControllerPublic et créez un fichier php nommé Page et insérez ce code :
PHP:
<?php

class Premium_ControllerPublic_Page extends XenForo_ControllerPublic_Abstract // Changez la class par la votre, à noter que les "/" se traduit par "_" en php. C'est tout simplement la route qui mène au fichier
{
    public function actionIndex()
    {
        return $this->responseView('Premium_ViewPublic_Page', 'main_premium'); // Changez la class par la votre (le dossier ViewPublic n'a pas besoin d'éxister pour le moment). 'main_premium' sera la template que vous allez créer plus tard dans le tutoriel.
    }
}

Grâce au fichier Page vous allez créer une function pour votre page (ici actionIndex) et grâce au fichier PageURL vous allez créer la route vers votre page.

Après avoir créer ces fichiers, voici l’arborescence des fichiers de l'extension :
  • Premium
    • Route
      • PageURL
    • ControllerPublic
      • Page
Maintenant pour que notre page puisse fonctionner nous allons donc créer la template (c'est là où nous mettrons le contenu de la page). Pour ce faire, allez dans Apparence > Template (veillez à bien sélectionnez le Style maître pour raccorder votre template à votre addon) et cliquez sur créer un nouveau template :
  1. Nom du template : entrez le nom de votre template (à noter que ce nom devra être inscrit dans votre code du fichier Page dans le dossier ControllerPublic)
  2. Contenu : entrez un texte qui sera visible sur la page pour vérifier si tout s'est bien passé durant la création de l'addon.
  3. Extension : choisissez l'extension que vous avez créer auparavant
Si tout s'est bien passé, il y'aura ceci sur votre page :
Sans-titre-1.png


2. Mise en page de votre page d'achat

Maintenant, c'est là que vos connaissances en HTML ainsi qu'en CSS vous seront le plus utile. Dans le template que vous avez crée auparavant, vous allez mettre en place votre page. Et c'est également ici que vos notions en xenForo vont intervenir ! Utilisez les inclusions, les conditions de xenForo, ce qui vous permettra d'inclure des templates qui ne sont pas relié à votre extension ou alors de lever un bloc à la vue d'un certain groupe d'utilisateur etc.

Pour les inclusions de templates :
Code:
<xen:include template="template_name" />  //  Par exemple, vous voulez insérer une sidebar  sur votre page, entrez simplement le nom de la template de la sidebar et elle sera incluse sur votre page, à droite comme sur l'accueil

<xen:require css="style.css" /> // Permet d'inclure une template ayant pour suffixe .css, ainsi vous pourrez créer votre template .css raccordé à votre extension, et ainsi cela permet de styliser votre page sans passer par le fichier EXTRA.css

<xen:avatar user="$user" size="m" /> // Permet d'inclure l'avatar du membre qui visite la page

Pour les conditions dans les templates :
Code:
<xen:if is="{$visitor.user_id}">CONTENU</xen:if> // Le contenu entre crochet sera montré uniquement aux membres connectés

<xen:if is="!{$visitor.user_id}">CONTENU</xen:if> // Le contenu entre crochet sera montré uniquement aux visiteurs

<xen:if is="{xen:helper ismemberof, $visitor, x}">CONTENU</xen:if> // Permet de montrer le contenu entre crochet uniquement à un groupe d'utilisateur spécifique (x = l'ID du groupe)

<xen:if is="!{xen:helper ismemberof, $visitor, x, y}">CONTENU</xen:if> // Permet de ne pas montrer le contenu uniquement à un groupe d'utilisateur (y = l'ID du groupe)

J'ai montré les plus importants, libre à vous de faire vos recherches par la suite :)
Bon, pour ma part, je vais créer une template.css pour mon addon et je vais inclure une sidebar sur la page.

Je créer mon template pour le css :
  1. Nom du template : premium.css
  2. Contenu du template : le template contiendra toutes les stylisation par rapport aux pages que je créerais
  3. Extension : Sélectionnez votre extension
Maintenant je vais donne l'ordre à la template d'utiliser le template que je viens de créer pour exécuter les stylisation contenue :
Code:
<xen:require css="premium.css" />
<div class="title">
    <h3>Créer une page d'achat premium sur xenForo - RealityGaming</h3>
</div>
Maintenant je me rend dans mon template premium.css et j'y ajoute du style :
Code:
.title h3 {
font-family: Open Sans Condensed;
color: orange;
text-align: center;
font-size: 26px;
}

Le rendu :
Sans-titre-1.png

Maintenant, toutes les stylisation de cette page devront être inscrites dans la template premium.css

Maintenant, je veux inclure mon panel visiteur sur ma page, voici le code :
Code:
<xen:require css="premium.css" />
<xen:sidebar>
    <xen:edithint template="sidebar.css" />
</xen:sidebar>
<div class="title">
    <h3>Créer une page d'achat premium sur xenForo - RealityGaming</h3>
</div>
Le rendu :
Sans-titre-1.png


Pas mal non ? :cool:

Pour ajouter la route dans le breadcrumb, c'est simple :
Vous devez utiliser la balise <xen:navigation> voici un exemple :
Code:
<xen:navigation>
<xen:breadcrumb href="{xen:link '{$route}/premium'}">Acheter le premium</xen:breadcrumb>
</xen:navigation>


Le rendu :
Sans-titre-1.png


Je vous conseille fortement d'utiliser des expressions xenForo à la place d'inclure directement vos phrases dans le code, disons que ça respecte un peu plus xenForo :nerveux:

Pour ce faire, allez dans Apparence > Expressions et sélectionnez la Langue maître pour raccorder votre expression à votre addon. Une fois fait, cliquez sur Créer une nouvelle expression :
  1. Titre : c'est l'ID de votre expression, celui qui devra être inclue dans la balise {xen:phrase}. Entrez un nom simple (exemple : premiumTitle)
  2. Texte de l'expression : C'est le texte que devra afficher cette expression
  3. Extension : sélectionnez votre Extension
Maintenant, rendez vous dans votre code et remplacez toutes vos phrases par cette balise :
{xen:phrase premiumTitle}
(par exemple, remplacez premiumTitle par l'ID de votre expression ;))

Voici à quoi devrais ressembler votre code :
Code:
<div class="title">
    <h3>{xen:phrase premiumTitle}</h3>
</div>

Le rendu :
Sans-titre-1.png

Cela affiche la phrase que vous avez inscrit lors de la création de votre expression !


Maintenant, il ne vous reste plus qu'à développer votre page, vous pouvez y inscrire les avantages d'acheter ce grade premium ainsi que les désavantage liée à être membre.

Mon rendu :
Sans-titre-1.png


Donc, une fois que vous avez créer votre page, il ne vous reste plus qu'à créer les abonnements sur votre panneau de configuration.
Rendez vous dans Utilisateurs > Catégories de promotions. Commencez déjà par ajouter votre adresse paypal et cliquez sur Créer une nouvelle promotion d'utilisateur.
  1. Titre : entrez le titre de votre promotion (exemple : Premium - 1 mois)
  2. Description : décrivez cette promotion (vous pouvez utiliser du HTML)
  3. Ordre d'affichage : c'est l'ordre dans laquelle sera affiché cette promotion sur la page account/upgrades
  4. Coût : entre le coût de cette promotion et pensez à mettre la monnaie en Euro
  5. Durée : si votre promotion est permanente, clique sur permanent, sinon saisissez la durée de la promotion
  6. Groupe d'utilisateur supplémentaires : c'est le groupe dans lequel le membre promu sera assigné une fois la promotion acheté (saisissez le grade qu’obtiendra l'utilisateur)
Une fois vos promotions crées, allez sur la page account/upgrades et obtenez le lien vers la promotion. Vous pourrez ensuite l'inclure sur votre page, dans des boutons par exemple pour ce que ce soit plus esthétique ;)

Il n'y a que la possibilité de payer par paypal via ce tutoriel, après si vous avez plus de connaissance pour créer des paiements avec starpass etc à vous d'en faire bon usage :espion:

Merci d'avoir lu ce tutoriel, n'hésitez pas à poster le rendu dans les commentaires !
Je reste à l'écoute de toutes vos question ainsi que de vos critiques ! :)
 

Fichiers joints

  • Sans-titre-1.png
    Sans-titre-1.png
    92.7 KB · Affichages: 155

GoTWaR QLF

Super Saiyajin Rosé Full Power
Premium
Inscription
17 Mai 2014
Messages
267
Réactions
88
Points
11 963
J'aime bien ! :ok:
Mais il y a déjà un addon pour faire ça, mais fait sois-même rend pas mal aussi ! :p
 

UAE

Membre
Inscription
17 Juin 2016
Messages
184
Réactions
90
Points
9 386
Tutoriel pour débutant , Merci de cité @Walky SEC car à a base tu as été inspiré de son tutoriel : https://induste.com/threads/xenforo-xf-creer-une-page-xenforo.381746/
Puis au niveau de la personnalisation on peut faire mieux ! Comme j'ai dit sa reste pour débutant ! mais bonne rédaction ^^
 
D

deleted535977

Je trouve pas ceci
Maintenant, nous allons créer le préfixe du chemin, ce qui nous permettra de créer le lien pour accéder à la page. Pour ce faire, allez dans l'onglet Développement ensuite dans Préfixes des chemins et créez en un :
  1. Préfixe du chemin : entrez le nom de votre lien (exemple : premium ; ne surtout par mettre de "/")
  2. Type de chemin : Public
  3. Classe du chemin : entrez la route de la class de PageURL (dans mon cas, Premium_Route_PageURL)
  4. Utiliser la classe pour construire le lien : Uniquement quand les données sont fournies
  5. Extension : Sélectionnez votre extension
 
Haut