Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta Para iniciantes
  • Algo errado?
#235 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
85/100
Tipo de issue
Funcionalidade
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
typescript
Domínio
frontend

Direção de pesquisa

Comece com src/templates/ecommerce/coupon-code.ts para o layout promocional em destaque e com src/templates/product/glassmorphism.ts para um painel de cartão elevado. Implemente o template em src/templates/ecommerce/gift-card.ts, depois exporte-o novamente de src/templates/ecommerce/index.ts e registre-o em src/templates/registry.ts. Verifique a legibilidade do texto listado, textos longos e casos de nota vazia, e confirme que ele atende à lista de verificação compartilhada em #5.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
TypeScript
Estrelas
8
Forks
4
Merge médio
5h 19min
PRs com merge (30d)
99

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de codercops/ogcops

Todas as issues de codercops/ogcops

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.