← Proyectos

PokeStore

Tema de WordPress y WooCommerce hecho desde cero para tiendas de cartas coleccionables. Cartas con efecto holográfico, lupa de inspección, guía de estados, simulador de apertura de sobres y filtros pensados para coleccionistas. Sin CDNs, accesible y personalizable desde el Personalizador.

La ficha de una carta japonesa con el efecto holográfico activo y el estado Near Mint
La tienda filtrada por idioma japonés, con el filtro activo arriba y el panel de filtros a la izquierdaEl simulador de apertura de sobres con un sobre japonés de Scarlet exLa portada de la tienda en el móvil
commits
266
commits
plantillas de WooCommerce
13
plantillas de WooCommerce
módulos JavaScript
21
módulos JavaScript
CDNs externos
0
CDNs externos

Qué hace

  • Fichas de producto para coleccionistas. La carta se inclina siguiendo el ratón con un reflejo holográfico, se puede inspeccionar con una lupa y una retícula de centrado PSA/BGS, y lleva su estado (Near Mint, Lightly Played...) con una guía que explica cada uno.
  • Filtros pensados para TCG. Franquicia, expansión, idioma y tipo de producto, con selección múltiple, filtros rápidos de stock y ofertas, y chips con lo que tienes activo.
  • Búsqueda por código. El buscador en vivo encuentra productos por nombre, SKU, código de set o número de carta.
  • Simulador de apertura de sobres. Eliges un sobre, lo rasgas y te salen cinco productos de la tienda que se voltean.
  • Lista de deseos con vista de álbum 3x3, como una carpeta de cartas.
  • Carrito lateral y vista rápida, para comprar sin salir del catálogo.
  • Modo claro y oscuro, rutas en español y todos los textos preparados para traducir.
  • Todo configurable desde el Personalizador: cabecera, colores, slider, secciones de la portada, botones flotantes, pie de página, datos legales.

Cómo está hecho

Un tema clásico, sin dependencias externas

Es un tema clásico de WordPress en PHP que sobrescribe 13 plantillas de WooCommerce (ficha, carrito, cuenta, catálogo). Los estilos son Tailwind CSS v4 compilado con PostCSS, y el JavaScript son 21 módulos sin framework que se cargan solo en las páginas que los usan. Fuentes, iconos y el único script de terceros (Swiper) van dentro del tema: ninguna petición sale a un CDN.

Pensado para que lo mantenga el dueño de la tienda

Todo lo que cambia de una tienda a otra (logo, colores, textos del slider, categorías destacadas, umbral de envío gratis, columnas del pie, datos legales) está en el Personalizador de WordPress. Los textos usan el dominio pokestore, así que se traducen con un .po sin instalar plugins de idiomas.

SEO y rendimiento

Datos estructurados Schema.org para el producto (con oferta, valoraciones y política de devolución, como pide Google Merchant), las migas de pan, la organización y el buscador del sitio; metaetiquetas Open Graph; imágenes con srcset y subtamaños WebP generados al subir; consultas costosas como el rango de precios, cacheadas.

Problemas que resolví

  • Escapado y nonces. Una revisión del código encontró salidas sin escapar y acciones AJAX sin comprobar. Las corregí todas: la lista de deseos, por ejemplo, ahora valida un nonce también para invitados.
  • Accesibilidad de los paneles. El carrito lateral, la vista rápida y los modales atrapan el foco mientras están abiertos, se cierran con Esc y actualizan aria-expanded.
  • Filtros y el botón Atrás. Al filtrar sin recargar, el historial del navegador se perdía. Ahora cada filtro actualiza la URL y Atrás/Adelante los restaura.
  • Cantidades en el carrito. Cambiar dos filas seguidas hacía que la segunda pisara a la primera. Cada fila tiene ahora su propio temporizador.

Stack

WordPressWooCommercePHPTailwind CSS v4JavaScriptSchema.orgi18n

Artículos