Intégration avec le module WordPress

Si votre site Web utilise le CMS Open Source WordPress, nous mettons à votre disposition une extension WordPress qui vous permettra de disposer d’une intégration forte sans devoir implémenter notre API ce qui vous permettra de gagner un temps précieux et de faire bénéficier vos clients d’une intégration transparente de la billetterie sur votre propre site.

Vous bénéficierez également ainsi de la possibilité d’importer les fiches des événements directement dans WordPress ce qui permettra en outre d’utiliser les fonctions de recherche fournies par le CMS et d’éviter de réimplémenter un importeur depuis votre base de données de programmation ou de resaisir vos fiches d’événements. Cette fonctionnalité est recommandée, mais n’est pas obligatoire.

La façon dont sont affichées les informations et le type d’information affiché sont par ailleurs complètement personnalisables au moyen d’un mécanisme d’overrides de templates.

Installation et mises à jour

Première installation

Vous pouvez installer notre extension directement depuis le gestionnaire d’extensions de WordPress en cherchant « Ticketack » ; une fois installé, vous devez encore l’activer depuis le gestionnaire des extensions.

Rendez-vous ensuite dans la gestion des permaliens et cliquez simplement sur « Enregistrer » afin d’enregistrer les nouveaux permaliens fournis par l’extension.

Configuration de base

L’extension Ticketack pour WordPress doit être configuré pour communiquer avec votre billetterie.

Pour cela, rendez-vous dans la partie Réglages > Ticketack (Onglet API) de l’espace d’administration de votre WordPress et remplissez les champs suivants avec les informations fournies par Net Oxygen :

• URL de l’engine
• URL du eshop
• Clé d’API

Validez ensuite pour faire apparaître la liste des points de ventes et caisses auquel cet utilisateur a accès et sélectionnez-les dans la liste déroulante.

Finalement, assurez-vous que chacun de vos sites Web WordPress (y compris staging et développement) est déclaré dans l’interface de gestion Kronos (Paramètres (onglet intégrations)) afin de permettre la propagation automatique des paramètres, événements et articles sur votre site.

Mises à jour

Avant de réaliser une mise à jour de l’extension Ticketack ou de votre thème, vérifiez que vous avez bien fait une sauvegarde de votre installation complète de WordPress en ayant lu le changelog fourni afin que toute régression, changement incompatible ou installation de fonctionnalités non voulues soit évité.

Prenez particulièrement garde aux mises à jour de thèmes qui peuvent effacer vos personnalisations de mise en page.

Si vous avez personnalisé les vues générées par l’extension au moyen du mécanisme d’overrides de templates, veillez à mettre à jour vos surcharges à partir des modèles fournis avec l’extension et mentionnés dans le changelog afin de bénéficier des dernières fonctionnalités et correctifs.

Création des pages type

Afin d’afficher les contenus de la billetterie ou du shop en ligne directement sur votre site WordPress, il est nécessaire de créer des pages type (depuis la fonctionnalité de base « Pages » de WordPress) qui viendront recueillir un shortcode spécifique (les shortcodes sont documentés plus loin).

En fonction de votre cas d’utilisation, nous vous invitons à créer les pages suivantes :

• Programme (utiliser le shortcode [tkt_program][/tkt_program])
• Vente d’abonnements (utiliser le shortcode [tkt_buy_pass][/tkt_buy_pass])
• Vente d’articles (utiliser le shortcode [tkt_shop][/tkt_shop])
• Panier (utiliser le shortcode
  ou [tkt_checkout][/tkt_checkout]
• Validation d’achat (utiliser le shortcode [tkt_checkout][/tkt_checkout])
• Connexion avec un compte et/ou un ticket (utiliser le shortcode [tkt_user_login][/tkt_user_login] et/ou [tkt_ticket_connect][/tkt_ticket_connect])
• Vue d’un ticket et de ses réservations (utiliser le shortcode
  )

Une fois les pages types créées, vous pouvez les indiquer à l’extension depuis la partie Réglages > Ticketack (Onglet Pages).

Shortcodes disponibles

L’extension WordPress Ticketack vous permet d’utiliser les shortcodes suivant dans vos pages ou directement depuis votre code personnalisé à l’aide de la fonction WordPress do_shortcode().

Les shortcodes sont des petits bouts de code entre crochets qui seront interprétés par WordPress au moyen de l’extension Ticketack pour afficher du contenu dynamique à la place du shortcode en question. Ainsi, vous pouvez tout à fait mélanger du contenu classique dans une page ou un article WordPress avec les shortcodes fournis.

Affichage du panier

[tkt_cart][/tkt_cart]

Attributes

Possibles values

Value by default

Description

theme

dark|light

light

Thème

Affichage de l’icône panier

[tkt_cart_icon][/tkt_cart_icon]

Affichage d’un événement

[tkt_event][/tkt_event]

Affichage de la VOD Pantaflix

Pantaflix modifie les screenings dans Ticketack en injectant des valeurs dans les refs des séances. Voici le contenu des refs de la séance :

 "refs" : [
        { "id" : "172517" },
        { "id" : "pantaflix_id_dev/1263" },
        { "id" : "pantaflix_id_pre/1266" },
        { "id" : "pantaflix_id_prod/6752"}
  ]

Le pantaflix_id_prefix  est le prefix qu’il faut retirer dans les refs pour obtenir le content ID Pantaflix. Dans le cas présent, le pantaflix_id_prefix est égal à pantaflix_id_prod.

Affichage du formulaire de mise au panier de réservations

[tkt_booking_form layout="form" show="pricings,ticket_id" theme="dark" ids="12345678-1234-1234-1234-123456789012"][/tkt_booking_form]

Attributes :

Attributes	Possibles values	Value by default	Description
layout	form|screenings_list	form	Mode d’affichage
theme	dark|light	light	Thème
ids	ID_place1,…2,…3,…		Liste des ids de séances
show	pricings|pricings,ticket_id|ticket_id	pricings,ticket_id	Affichage des tarifs et/ou de la zone de connexion avec son ticket_id

Affichage d’une partie du programme

[tkt_program layout="events" order="chrono" xsection_ids="18_noday"][/tkt_program]

Description des attributs :

Attribut	Valeurs possibles	Valeur par défaut	Description
layout	screenings | events	screenings	Offre la possibilité d’afficher les séances ou les films2
template	list | grid | gallery | blocks*	list	Définit le type d’affichage (cf : choix du template)
item_width	12/nb_colonne_par_item	12	Définit le nombre de colonnes par item3
order	chrono / alpha	chrono si layout=screenings alpha si layout=events	Définit le tri par ordre chronologique ou alphabétique
section_ids	ID_section1,…2,…3,….		Utile si on veut sélectionner une section en particulier
xsection_ids	ID_section1,…2,…3,…		Utile si on veut exclure une section en particulier
day	2020-12-1		Définit la date des évents ou screenings à afficher
tags	Tag1,..2,..3		Filtre les événements par tag
screening_section_ids	ID_sreenings1,..2,…3,…		Filtre la section des séances à afficher
top_filter	Screenings | events		Définit le filtre entre les films ou séance
places	ID_salle1,..2 ,..3,…		Affiche les événements en fonction des salles
filter_fields	Label | value |…		Filtre sur les événements en fonction d’un tableau de filtre

*Template blocks:

items_per_row	1 | 2 | 3 | 4 | 6	1	Nombre d’éléments par ligne
image_width_pct	chiffre	35	Largeur de l’image en %
image_ratio	chiffre / décimal	auto	Hauteur de l’image (ratio de la largeur)

description_max_line

chiffre

4

Nombre de lignes de la description visible

Exemples de templates :

– list : affichage en liste avec une image et une description à la suite comme ci-dessous.

– grid : affichage de l’event ou du screening avec une image et le texte en dessous, le nombre de colonnes est définies par l’attribut item_width décrit un peu plus bas.

– gallery : affichage uniquement des images.

– Blocks :

 

Affichage de la prochaine séance

[tkt_next_screening output="title" with_link="1" places="12345678-1234-1234-1234-123456789012"][/tkt_next_screening]

Attributes :

Attributes	Possibles values	Value by default	Description
output	title|date|time|datetime|venue|poster|url		Affiche le champs séléctionné
with_link	0 | 1	1	Affichage avec lien
places	ID_place1,…2,…3,…		Affichage des séances par salles

Filtres

Filtre par jour :

[tkt_days_filter][/tkt_days_filter ]

Ce shortcode affiche une barre de filtres par jour et permet de filtrer les séances par leur date de
début.
Description des attributs :

Attribut	Valeurs possibles	Valeur par défaut	Description
min_start_at	aaaa-mm-jj	Date du jour	Premier jour de la barre de filtres
max_start_at	aaaa-mm-jj	Date du jour	Dernier jour de la barre de filtres
nb_days	Nombre_de_jour		Nombre de jours dans la barre de filtres4

Lignes de filtres :

[tkt_filter_rows row-hall="Salle 1|Salle 2|Salle 3" row-next-days="7"][/tkt_filter_rows]

Description des attributs :

Attribut	Valeurs possible	Valeur par défaut	Description
row-hall	Salle1 | Salle 2| Salle 3| …		Permet de créer une ligne de filtre sur les salles
row-next-days	7		Permet de créer une ligne de filtre sur les X jours à venir

Achat d’abonnements

[tkt_buy_pass][/tkt_buy_pass]

Description des attributs :

Attribut	Valeurs possibles	Valeur par défaut	Description
types	ID_type1,…2,…3,…		Choisit le ou les types d’abonnement à afficher

theme

dark|light

light

Thème

Formulaire de connexion avec un TicketID

[tkt_ticket_connect][/tkt_ticket_connect]

Ce shortcode ne nécessite aucun attribut

Affichage des détails sur le ou les tickets connectés

[tkt_ticket_view][/tkt_ticket_view]

Formulaire d’authentification avec un utilisateur

[tkt_user_login][/tkt_user_login]

Ce shortcode ne nécessite aucun attribut

Validation de la commande

[tkt_checkout][/tkt_checkout]

Attributes

Possibles values

Value by default

Description

theme

dark|light

light

Thème

Affichage de la boutique

[tkt_shop][/tkt_shop]

Description des attributs :

Attributs	Valeurs possibles	Valeur par défaut	Description
template	list | grid | gallery	list	Définit le type d’affichage (cf : choix du template)
category_ids	ID_category1,…2,…3 ,…		Définit la/les catégorie(s) d’articles à afficher
item_width	12/nb_colonnes	12	Définit la taille d’affichage des articles
hide_sorters	0 | 1	1	Affiche le tri possible
only_in_stock	0 | 1	1	Choisit d’afficher les articles disponible ou non
nb	nb_tot_article_affiché	-1 (permet d’afficher tout les articles)	Choisit le nombre total d’article à afficher
exclude	ID_article1,..2,..3,…		Exclu des articles en fonction de leur ID
sort	alpha | rev-alpha | incr_price | decr-price | random | sort_weight (ordre de Kronos)		Permet de trier les articles
show	0 | 1	0	Créer une pagination
tkt_page	numéro_de_page	1	Définit le numéro de page à afficher
nb_by_page	nb_article_par_page	9	Définit le nombre d’article par page

theme

dark|light

light

Thème

Personnalisation du rendu et du style

Si le rendu (visuel, informations affichées, etc.) des shortcodes fournis ne vous convient pas, vous avez la possibilité de les surcharger dans votre propre thème.

Couleurs

L’extension Ticketack vous permet de gérer les couleurs utilisées dans les templates fournis depuis la partie Réglages > Ticketack (Onglet Paramètres avancés).

Feuille de style (style.css)

Afin de modifier l’apparence de votre site à votre guise rendez-vous dans : apparence → Personnalisation → CSS additionnel. Ici, vous pouvez écrire au format CSS le style que vous souhaitez modifier.

Surcharge du rendu des shortcodes

Les templates d’origine de l’extension Ticketack se trouvent dans wp-content/plugins/ticketack/app/templates/. Chacun des dossiers contenus dans ce répertoire gère l’affichage d’un shortcode.

Pour surcharger le style d’une partie votre site générée par un des shortcodes précédemment décrits, il vous faut créer à la racine de votre thème un dossier ticketack ainsi qu’un dossier templates à l’intérieur de ce dernier.

Vous pouvez ensuite surcharger l’affichage d’un shortcode en copiant le dossier correspondant depuis wp-content/plugins/ticketack/app/templates/ vers wp-content/themes/[votre_theme]/ticketack/templates/, puis en modifiant les fichiers de templates..

Voici une liste exhaustive des dossiers que vous pouvez surcharger :

• article : Modifie la vue d’un article.
• booking : Modifie la vue des réservations.
• buy_article : Modifie la vue d’achat d’un article.
• buy_pass : Modifie la vue d’achat d’abonnement.
• cart : Modifie la vue du panier.
• checkout : Modifie la vue de validation de commande
• event : Modifie la vue d’un film.
• filter : Modifie la vue des filtres.
• next_screenings : Modifie la vue des prochaines séances.
• people : Modifie la vue
• program : Modifie la vue de la programmation
• shop : Modifie la vue du shop.
  

Important : avertissement lors de mises à jour de votre thème

Il est fortement conseiller de travailler sur un thème enfant afin de ne pas perdre vos modifications de style lors des mises à jour du thème.

Un thème enfant est un thème basé sur votre thème parent. Il en reprend toutes les fonctionnalités sans jamais le modifier. Ainsi vous pouvez apporter des modifications à votre thème enfant et en cas de mise à jour du parent, vous ne les perdez pas !

Tout fichier placé dans le thème enfant et portant le même nom que dans le thème parent, prendra le dessus et écrasera le fichier d’origine (sauf functions.php).

Utilisation avec une extension WordPress de gestion du cache

Si vous utilisez un module d’extension de cache comme Comet Cache et la fonction de proxy image, les images provenant de Ticketack sont optimisées en fonction du navigateur et peuvent être convertie dans le format WebP qui n’est pas supporté par certains navigateurs. Il est ainsi nécessaire de configurer votre plugin de cache pour générer une version des pages pour les navigateurs qui supportent ce format et une version pour ceux qui ne le supportent pas.

Exemple de configuration pour Comet Cache Pro :

Create a Dynamic Version Salt For Comet Cache :

(strpos( $_SERVER[‘HTTP_ACCEPT’], ‘image/webp’ ) !== false ? ‘webp’ :  »)

Import des événements et articles depuis Ticketack

Si vous avez correctement déclaré votre site Web depuis l’interface de gestion Kronos comme indiqué dans la procédure d’installation, les étapes manuelles suivantes ne sont pas nécessaires, car elles sont réalisées automatiquement par Ticketack.

Import manuel des événements, articles et personnes depuis Ticketack

Rendez-vous sur le type de poste correspondant parmi Ticketack Events, Ticketack Articles, Ticketack People, puis cliquez sur « Importer depuis Ticketack ».