Add the Gift Card e-commerce template (`ecommerce-gift-card`)

Fermée Adaptée aux débutants
  • Quelque chose ne va pas ?
#235 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@bhushan4work y travaille déjà.

Depuis le 24/10/2026.

  • #240 par @bhushan4work — fusionnée

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
85/100
Type d'issue
Fonctionnalité
Clarté
Clairement spécifiée
Activité
Active
Stack technique
typescript
Domaine
frontend

Piste de recherche

Commencez par src/templates/ecommerce/coupon-code.ts pour la mise en page promotionnelle mise en évidence et par src/templates/product/glassmorphism.ts pour un panneau de carte en relief. Implémentez le template dans src/templates/ecommerce/gift-card.ts, puis réexportez-le depuis src/templates/ecommerce/index.ts et enregistrez-le dans src/templates/registry.ts. Vérifiez la lisibilité du texte indiqué, les textes longs et les cas de note vide, puis confirmez qu’il respecte la liste de contrôle commune dans #5.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

good first issue hacktoberfest templates

Part of #5. For gift card promos around holidays and launches.

Idea
The headline sits on the left ("Give them the choice"), with an optional note under it ("Delivered instantly by email"). On the right is a card-shaped panel filled with the accent color: the store name at its top left, "Gift card" at its top right, and the amount large at its bottom left ("$50").

Template details

  • File: src/templates/ecommerce/gift-card.ts, id ecommerce-gift-card
  • Fields: commonFields.siteName (the store name), commonFields.title (the headline), amount (text, default "$50"), note (text, optional), commonFields.bgColor, commonFields.accentColor, commonFields.textColor

Where to look

  • Closest reference: src/templates/ecommerce/coupon-code.ts (a promo layout with a highlighted box), src/templates/product/glassmorphism.ts (a raised card panel)

Acceptance criteria

  • Text on the card stays readable on any accent color (contrastText()), and the headline stays readable on a light background
  • Long amounts and headlines shrink or truncate, and an empty note (or only spaces) hides cleanly
  • Re-exported in src/templates/ecommerce/index.ts and registered in the E-commerce block of src/templates/registry.ts
  • Meets the shared template checklist in #5

One template per contributor at a time, so more people get a chance.

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #235 in the description.

Langage dominant
TypeScript
Étoiles
8
Forks
4
Merge moyen
8 h 37 min
PR mergées (30 j)
155

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de codercops/ogcops

Toutes les issues de codercops/ogcops

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.