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

Geschlossen Anfängerfreundlich
  • Stimmt etwas nicht?
#235 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@bhushan4work arbeitet bereits daran.

Seit 24.10.2026.

  • #240 von @bhushan4work — gemerged

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
85/100
Issue-Typ
Feature
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
typescript
Bereich
frontend

Rechercherichtung

Beginne mit src/templates/ecommerce/coupon-code.ts für das hervorgehobene Promo-Layout und mit src/templates/product/glassmorphism.ts für ein erhöhtes Kartenfeld. Implementiere das Template in src/templates/ecommerce/gift-card.ts, exportiere es anschließend erneut aus src/templates/ecommerce/index.ts und registriere es in src/templates/registry.ts. Prüfe die Lesbarkeit des aufgeführten Textes, lange Texte und Fälle mit leerer Notiz und bestätige, dass es die gemeinsame Checkliste in #5 erfüllt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
TypeScript
Sterne
8
Forks
4
Ø Merge
8 Std. 47 Min.
Gemergte PRs (30 T.)
157

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus codercops/ogcops

Alle Issues in codercops/ogcops

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.