Lo esencial

{{ s.kicker }}

{{ s.title }}

{{ s.body }}

Reseñas verificadas

Agrega por

$10$309

Redmi Buds 6 Play

En la compra de POCO M8 5G (8+512 GB), POCO Pad C1 (4+64 GB) o Redmi Pad 2 (8+256 GB).

Ver equipos participantes

Agrega por

$99$959

Xiaomi Smart Band 10

En la compra de POCO M8 Pro 5G (8+256 GB). Disponible en negro y blanco.

Ver equipos participantes

Válido del 1 al 31 de agosto de 2026 o hasta agotar existencias. Limitado a una promoción por cliente y por ticket de compra. No acumulable con otros descuentos, promociones ni cupones vigentes. No canjeable por dinero en efectivo. Consulta modelos y colores participantes en tienda. Imágenes con fines ilustrativos.

Xiaomi 15

Fotografía Leica de nivel profesional. Una obra de ingeniería que cabe en tu bolsillo.

Finalizar compra

Estados, avisos y overlays

Todo lo de esta hoja ya vive en las pantallas del prototipo. Aquí queda fijado el comportamiento: qué lo dispara, cuánto dura, dónde vive el estado y qué componente lo pinta. Los overlays y el stack de avisos se montan una sola vez en App.vue y se controlan desde un store de Pinia — nunca dentro de la pantalla que los invoca.

// stores/notifications.js — una sola fuente de verdad para los avisos
export const useNotifications = defineStore('notifications', () => {
  const DUR = { ok: 4000, info: 3500, err: 0, load: 0 }   // 0 = cierre manual
  const items = ref([])

  function push(type, title, body, opts = {}) {
    const id = crypto.randomUUID()
    items.value = [...items.value, { id, type, title, body, ...opts }].slice(-3)
    const ms = opts.timeout ?? DUR[type]
    if (ms) setTimeout(() => close(id), ms)
    return id                                             // úsalo para reemplazar el 'load'
  }
  const close = id => { items.value = items.value.filter(t => t.id !== id) }

  return { items, push, close,
    success: (t, b, o) => push('ok',   t, b, o),
    error:   (t, b, o) => push('err',  t, b, o),
    info:    (t, b, o) => push('info', t, b, o),
    loading: (t, b)    => push('load', t, b) }
})

// uso desde cualquier componente
const notify = useNotifications()
notify.success('Agregado al carrito', producto.nombre, { action: 'Ver carrito', to: '/carrito' })

// stores/ui.js — modales, drawers y hojas viven aquí, no en la pantalla
export const useUi = defineStore('ui', () => {
  const overlay = ref(null)        // 'cart' | 'login' | 'compare' | 'confirm' | null
  const payload = ref(null)        // el producto, el pedido, lo que necesite el overlay
  const open  = (name, data = null) => { overlay.value = name; payload.value = data }
  const close = () => { overlay.value = null; payload.value = null }
  return { overlay, payload, open, close }
})

// App.vue — montados UNA vez al final del layout, después del router-view
<RouterView />
<ToastStack />                 // lee useNotifications()
<CartDrawer />                 // v-if="ui.overlay === 'cart'"
<AppDialog />                  // resuelve login | compare | confirm según ui.overlay

// bloqueo de scroll y cierre por teclado, una sola vez
const { overlay, close } = useUi()
watch(overlay, v => useScrollLock(document.body).value = !!v)
useEventListener(document, 'keydown', e => e.key === 'Escape' && close())

// composables/useProductos.js — el patrón para toda petición de datos
const { state: productos, isLoading, error, execute } = useAsyncState(
  () => api.get('/productos', { params: filtros }), [], { immediate: false, resetOnExecute: false }
)
// en la plantilla, en este orden y sin excepciones:
// isLoading && !productos.length  → <SkeletonGrid :count="6" />
// error                           → <ErrorBlock @retry="execute()" />
// !productos.length               → <EmptyState @clear="filtros.reset()" />
// resto                           → <ProductGrid :items="productos" />

Las cinco pantallas críticas en 390 px

Mismo store, misma lógica, otra piel: el mega-menú se vuelve drawer, los filtros una hoja inferior, la barra de compra queda fija y los avisos suben al borde superior. Los toques nunca bajan de 44 px.

// un solo store, dos pieles — nunca duplicar lógica
const { smaller } = useBreakpoints({ sm:640, md:768, lg:1024, xl:1280 })
const esMovil = smaller('md')

// el componente cambia, los datos no
const Filtros = computed(() => esMovil.value ? FiltrosSheet : FiltrosSidebar)
const cart = useCartStore()          // el mismo store en ambos

// el carrito sobrevive recargas y pestañas
const items = useLocalStorage('xm.cart.v1', [])

// posición de los avisos según viewport
const pos = computed(() => esMovil.value ? 'top-full' : 'bottom-right')

Cómo se construye esta tienda en Vue 3

Todo lo que este prototipo demuestra, aquí queda escrito como código de referencia: la estructura de carpetas, el archivo de tema, los cuatro stores, los composables y el inventario de componentes. No es una propuesta abierta: es el contrato. Si algo no aparece en esta hoja, se decide con diseño antes de escribirlo.

// router/index.js — carga diferida por vista y guardia solo donde hace falta
const routes = [
  { path: '/',                 component: () => import('@/views/HomeView.vue') },
  { path: '/c/:categoria',     component: () => import('@/views/CatalogView.vue'), props: true },
  { path: '/p/:slug',          component: () => import('@/views/ProductView.vue'), props: true },
  { path: '/carrito',          component: () => import('@/views/CartView.vue') },
  { path: '/checkout',         component: () => import('@/views/CheckoutView.vue'), meta: { auth: true } },
  { path: '/:pathMatch(.*)*',  component: () => import('@/views/NotFoundView.vue') }
]

router.beforeEach(to => {
  if (!to.meta.auth) return true
  const user = useUser(); if (user.isLogged) return true
  useUi().open('login', { then: to.fullPath })    // el modal decide, no una redirección
  return false
})
// los filtros del catálogo viven en la URL: /c/celulares?marca=poco&precio=5000-10000&orden=precio-asc

// stores/cart.js — el store más usado de la tienda
export const useCart = defineStore('cart', () => {
  const lines = useLocalStorage('xm.cart.v1', [])        // sobrevive recarga y pestañas
  const notify = useNotifications()

  const count    = computed(() => lines.value.reduce((n, l) => n + l.qty, 0))
  const subtotal = computed(() => lines.value.reduce((n, l) => n + l.precio * l.qty, 0))
  const descuento = computed(() => lines.value.reduce((n, l) => n + (l.antes - l.precio) * l.qty, 0))
  const envio    = computed(() => subtotal.value >= 499 ? 0 : 149)
  const total    = computed(() => subtotal.value + envio.value)

  function add(producto, variante, qty = 1) {
    const key = `${producto.sku}:${variante.id}`
    const hit = lines.value.find(l => l.key === key)
    hit ? (hit.qty += qty) : lines.value.push({ key, qty, ...producto, ...variante })
    notify.success('Agregado al carrito', `${producto.nombre} · ${variante.nombre}`,
                   { action: 'Ver carrito', run: () => useUi().open('cart') })
  }

  // optimista: la UI cambia ya y se revierte con aviso si el servidor dice no
  async function setQty(key, qty) {
    const line = lines.value.find(l => l.key === key)
    const antes = line.qty
    line.qty = Math.max(1, Math.min(qty, line.maxPorPedido ?? 5))
    try { await api.patch(`/carrito/${key}`, { qty: line.qty }) }
    catch { line.qty = antes; notify.error('No pudimos actualizar la cantidad', 'Vuelve a intentarlo.') }
  }

  function remove(key) {                                    // siempre con Deshacer, nunca en silencio
    const i = lines.value.findIndex(l => l.key === key)
    const [fuera] = lines.value.splice(i, 1)
    notify.info('Producto eliminado', 'Lo guardamos 30 días en “Guardados”.',
                { timeout: 6000, action: 'Deshacer', run: () => lines.value.splice(i, 0, fuera) })
  }

  return { lines, count, subtotal, descuento, envio, total, add, setQty, remove }
})

El tema no entrega componentes: entrega clases y variables. Por eso no se declara un componente por cada elemento visible — se declara solo cuando hay comportamiento, estado o composición que repetir. Un botón sí (variantes, carga, deshabilitado); una etiqueta no (es .tag y ya).