Conseil rapide: commerce électronique en 30 secondes avec Gumroad et Jekyll

Ce tutoriel montre comment intégrer de manière transparente les capacités de commerce électronique de Gumroad dans un site Web Jekyll. Le processus est rapide et bénéfique pour les créateurs de contenu.

Étapes de la clé:

1. Obtenez le code GUMROAD: Accédez à la page des widgets de GuMroad et sélectionnez le widget "intégrer" ou "superposition", en copie l'extrait de code généré. Ce tutoriel utilise le widget "Embed" avec une redirection activée.

2. Intégrer le script Gumroad: Ajoutez l'élément <script></script> du code GUMROAD au fichier /_includes/head.html de votre site Jekyll. Enveloppez-le dans une instruction conditionnelle liquide ({% if page.content contains "gumroad" %}) pour optimiser le chargement, garantissant que le script se charge uniquement sur les pages en utilisant le widget Gumroad.

3. Créez le widget dynamique: Créez un nouveau fichier (gumroad-embed.html) dans votre dossier /_includes/. Collez l'élément <div> élément (ou <code><a></a> pour la superposition) du code Gumroad dans ce fichier. Remplacez les valeurs du produit d'espace réservé ("démo") et des valeurs de liaison (href) par des balises liquides ({{ include.id }}) pour faire la dynamique du widget. Cela permet une réutilisation avec différents ID de produit sur la même page. Exemple d'intégration:

   <code class="language-html"><div class="gumroad-product-embed" data-gumroad-product-id="{{ include.id }}" data-outbound-embed="true">
     <a href="https://www.php.cn/link/5f353180421dc744d4e204a6c0f330cd"></a>Loading... </div></code>

   Exemple de superposition:

   <code class="language-html"><a class="gumroad-button" href="https://www.php.cn/link/8239a17531bc8edea4ad8a2ddfdbbe17" target="_blank">{{ include.button }}</a></code>

   4. ENCHED LE WIDGET: Utilisez l'instruction Liquid Inclure ({% include gumroad-embed.html id="YOUR_PRODUCT_ID" button="Buy Now" %}) pour intégrer le widget sur vos pages Jekyll. Remplacez "YOUR_PRODUCT_ID" par votre ID de produit Gumroad réel et ajustez le texte du bouton au besoin.

   

   Avantages de l'intégration de Gumroad:

   • Configuration facile du commerce électronique pour les créateurs de contenu.
   • Analyse des ventes détaillée.
   • Traitement de paiement simplifié.
   • Capacités de réduction.

   Cette approche rationalisée permet l'intégration sans effort de produits Gumroad sur tout votre site Web Jekyll, améliorant sa fonctionnalité de commerce électronique. L'utilisation de modèles liquides assure la flexibilité et l'efficacité.