Cómo personalizar el administrador Jumpseller con Tampermonkey

Tampermonkey es una extensión de navegador de terceros que ejecuta scripts de usuario: pequeños programas que pueden cambiar cómo se ve o se comporta una página en tu navegador. Un script revisado podría destacar información útil o añadir un resumen visual al administrador de Jumpseller.

No necesitas escribir código para usar el ejemplo completo de esta guía. Sí necesitas entender qué hace, qué permisos utiliza y dónde funciona. Esta guía explica la configuración en Chrome y usa un contador visual de unidades de un pedido como ejemplo.

Qué cambia y qué se mantiene

Una personalización visual cambia lo que ves en ese perfil del navegador. No es una función nativa de Jumpseller ni aparece automáticamente para tus compañeros o en otro ordenador.

El contador del ejemplo solo lee las cantidades que ya aparecen en un pedido y añade una franja. No guarda el total en el pedido, no cambia la tienda pública y no añade el total a correos ni exportaciones. Otros scripts pueden comportarse de otra manera: no supongas que todos los scripts de Tampermonkey son de solo lectura.

Antes de empezar

• Usa Chrome en un ordenador donde tengas autorización para instalar extensiones.
• Ten acceso al administrador de tu tienda y un script revisado por alguien de confianza.
• Comprueba que abres los pedidos en la dirección del administrador de tu tienda, que termina en .jumpseller.com, y revisa el alcance del script antes de instalarlo.
• No uses scripts de origen desconocido, no pegues contraseñas ni tokens API en ellos y no los utilices para saltarte permisos, comprobaciones de pago o reglas de procesamiento de pedidos.

Tampermonkey no está desarrollado por Jumpseller. Un cambio en el administrador puede hacer que una personalización deje de funcionar; no se garantiza compatibilidad con todas las tiendas, navegadores o versiones futuras del panel.

1. Instala la extensión oficial

1. Abre Tampermonkey en Chrome Web Store.
2. Comprueba el nombre Tampermonkey y la web del desarrollador tampermonkey.net.
3. Pulsa Add to Chrome o Añadir a Chrome.
4. Lee el diálogo de permisos. En la instalación utilizada para esta guía, Chrome pidió leer y modificar todos tus datos en todos los sitios web, mostrar notificaciones y modificar los datos que copias y pegas. Son permisos amplios de la extensión, aunque un script concreto tenga un alcance reducido.
5. Si aceptas esos permisos y tu organización lo permite, pulsa Add extension o Añadir extensión.
6. Espera la confirmación de que Tampermonkey se ha añadido a Chrome.

Si ves Remove from Chrome o Quitar de Chrome, ya está instalada. No instales otra copia. Si tu organización bloquea la instalación, pide ayuda al administrador en lugar de saltarte la restricción.

2. Revisa los ajustes de scripts de Chrome

1. Escribe chrome://extensions/ en la barra de direcciones de Chrome y pulsa Intro.
2. Comprueba Developer mode o Modo de desarrollador. En nuestro ejemplo ya estaba activado. Si necesitas activarlo, consulta antes al administrador: también permite cargar extensiones manualmente.
3. Busca Tampermonkey y pulsa Details o Detalles.
4. Busca Allow User Scripts o Permitir scripts de usuario. En la versión de Chrome probada era un interruptor separado del modo de desarrollador.
5. Lee su advertencia sobre ejecutar código no revisado por Google. Actívalo solo cuando tu organización lo autorice y confíes en el script.

La imagen muestra los ajustes reales usados en este ejemplo, no una recreación del diálogo de instalación. Los nombres y requisitos pueden variar según la versión de Chrome; consulta la ayuda oficial de Tampermonkey si tu pantalla es diferente. Este ejemplo no necesita acceso de incógnito, acceso a archivos locales ni permisos adicionales de descarga.

3. Copia y activa el contador

El script completo está más abajo. No necesitas cambiar tu dominio ni editar el código. Se ejecuta únicamente en las rutas de pedidos orders-v2 del administrador, bajo direcciones de tiendas que terminan en .jumpseller.com. No se ejecuta en el escaparate público ni en otras páginas web. Un administrador servido desde un dominio personalizado u otra interfaz de pedidos queda fuera de este ejemplo.

1. Pulsa Copiar script completo, debajo de estos pasos. Si el navegador no permite copiar, el código quedará seleccionado: pulsa ⌘C en Mac o Ctrl+C en Windows.
2. Abre Extensiones (la pieza de puzle junto a la barra de direcciones) y selecciona Tampermonkey.
3. Abre Dashboard o Panel de control y elige Create a new script o Crear un nuevo script.
4. Borra todo el texto de ejemplo del editor y pega el código copiado con ⌘V o Ctrl+V. No lo pegues en un campo del pedido ni en la barra de direcciones.
5. Guarda con ⌘S en Mac o Ctrl+S en Windows.
6. Vuelve al panel de Tampermonkey. Debe aparecer una sola copia habilitada de Jumpseller — Order units (visual). Si probaste antes otro contador, desactívalo para evitar dos indicadores.
7. Abre un pedido de tu tienda y recarga la pestaña. Esto también es necesario si llegaste al pedido desde otra sección del administrador que ya estaba abierta.
8. Compara el indicador con la suma de las cantidades, como se explica en el ejemplo siguiente.

El permiso del script cubre las rutas de pedidos de tiendas Jumpseller, no todos los sitios web. Revisa ese alcance al instalarlo. Este código solo añade un indicador local y no envía ni guarda datos. Se probó en alejandrotest y con pruebas de rutas e idiomas; no se ha probado en todas las tiendas. Si el panel cambia o el contador no aparece, desactívalo y consulta a soporte.

Copiar script completo

// ==UserScript==
// @name         Jumpseller — Order units (visual)
// @namespace    jumpseller.local.order-units
// @version      0.2.0
// @description  Suma las cantidades ya renderizadas del pedido. Solo visual; no guarda ni envía datos.
// @match        https://*.jumpseller.com/admin/*/orders-v2/*
// @match        https://*.jumpseller.com/admin/orders-v2/*
// @run-at       document-idle
// @grant        none
// @noframes
// ==/UserScript==
/* Local visual helper for Jumpseller orders-v2 admin pages only.
 * No network calls, credentials, storage or order/theme writes.
 * Tested in alejandrotest and representative DOM fixtures, not every store.
 * Bundles/packs are unsupported: parent/component rows can be double-counted.
 * If the admin markup changes, disable the script and request a review.
 */
(() => {
  'use strict';
  if (!/^([a-z0-9]+(?:-[a-z0-9]+)*)\.jumpseller\.com$/i.test(location.hostname) || window.top !== window.self) return;
  if (location.protocol !== 'https:' || !/^\/admin\/(?:[a-z]{2}(?:-[a-z]{2})?\/)?orders-v2(?:\/|$)/i.test(location.pathname)) return;
  const KEY = '__jumpsellerVisualOrderUnits';
  const ID = 'jumpseller-visual-order-units';
  window[KEY]?.stop?.();
  let scheduled = null;
  let stopped = false;
  const routeId = () => location.pathname.match(/^\/admin\/(?:[a-z]{2}(?:-[a-z]{2})?\/)?orders-v2\/edit\/(\d+)\/?$/i)?.[1] || null;
  const locale = location.pathname.match(/^\/admin\/([a-z]{2})(?:-[a-z]{2})?\/orders-v2/i)?.[1] || 'en';
  const labels = locale === 'pt' ? ['Total de unidades', 'linhas de produto', 'Cálculo local; não é guardado. Bundles não suportados.'] : locale === 'es' ? ['Total de unidades', 'líneas de producto', 'Cálculo local; no se guarda. Bundles no soportados.'] : ['Total units', 'product lines', 'Local calculation; not saved. Bundles unsupported.'];
  function remove() { document.getElementById(ID)?.remove(); }
  function directText(element) {
    return Array.from(element.childNodes).filter(n => n.nodeType === 3).map(n => n.textContent).join('');
  }
  function readTable(table) {
    let units = 0, lines = 0;
    for (const row of table.querySelectorAll('tbody > tr')) {
      // Source TableDesktop renders one price/qty div in each product row;
      // expanded discount/tax/profit rows have colspan and no such price div.
      const price = row.querySelector('td > div.tabular-nums');
      const productImage = row.querySelector('td img[width="56"]');
      if (!price && !productImage) continue;
      if (!price || !productImage) throw Error('Unrecognized product row');
      const match = directText(price).trim().match(/\s[x×]\s*(\d+)\s*$/u);
      if (!match) throw Error('Unrecognized quantity');
      const qty = Number(match[1]);
      if (!Number.isSafeInteger(qty) || qty < 0 || !Number.isSafeInteger(units + qty)) throw Error('Invalid quantity');
      units += qty; lines++;
    }
    if (!lines) throw Error('No product rows');
    return { units, lines };
  }
  function update() {
    scheduled = null;
    if (stopped) return;
    const id = routeId();
    if (!id) { remove(); return; }
    // Tie URL to the order header actually rendered by Edit.jsx. On SPA
    // navigation the old table must not be labelled as the newly requested order.
    const headings = Array.from(document.querySelectorAll('.text-xl.font-normal'))
      .filter(e => new RegExp('#\\s*' + id + '\\s*$').test(e.textContent.trim()));
    if (headings.length !== 1) { remove(); return; }
    const heading = headings[0];
    const root = heading.parentElement;
    const tables = Array.from(root.querySelectorAll('table.w-full.border-collapse'))
      .filter(t => t.querySelector('td img[width="56"]'));
    if (tables.length !== 1) { remove(); return; }
    let count;
    try { count = readTable(tables[0]); }
    catch (_) { remove(); return; } // Fail closed: no misleading partial count.
    let badge = document.getElementById(ID);
    if (!badge) {
      badge = document.createElement('div');
      badge.id = ID;
      badge.setAttribute('role', 'status');
      badge.setAttribute('aria-live', 'polite');
      badge.style.cssText = 'margin:8px 0;padding:10px 14px;border:1px solid #d1d5db;border-radius:6px;background:#f8fafc;color:#111827;font-size:15px;font-weight:600';
      heading.insertAdjacentElement('afterend', badge);
    } else if (badge.previousElementSibling !== heading) {
      heading.insertAdjacentElement('afterend', badge);
    }
    const label = `${labels[0]}: ${count.units}`;
    if (badge.textContent !== label) badge.textContent = label;
    const title = `#${id} · ${count.lines} ${labels[1]} · ${labels[2]}`;
    if (badge.title !== title) badge.title = title;
  }
  function schedule() {
    if (!stopped && scheduled === null) scheduled = setTimeout(update, 80);
  }
  const observer = new MutationObserver(schedule);
  observer.observe(document.body, { childList: true, subtree: true, characterData: true });
  const interval = setInterval(schedule, 1000); // URL changes with no DOM event.
  const handle = {
    stop() {
      stopped = true;
      observer.disconnect();
      clearTimeout(scheduled);
      clearInterval(interval);
      remove();
      if (window[KEY] === handle) delete window[KEY];
    }
  };
  window[KEY] = handle;
  update();
})();

También puedes descargar el mismo script. El bloque y la descarga utilizan una única fuente; no hace falta editar ninguno.

4. Ejemplo práctico de un contador de unidades

Imagina que vendes ingredientes de panadería. Un pedido tiene tres líneas: 3 bolsas de harina, 2 paquetes de polvos de hornear y 5 paquetes de mantequilla. Son 10 unidades, no tres unidades.

La captura siguiente es del administrador real de alejandrotest, con datos ficticios. El pedido 2416 contiene tres líneas de productos físicos sin relaciones de bundle. La captura muestra Total de unidades: 10. La etiqueta sigue el idioma del administrador: Total units en inglés y Total de unidades en español o portugués.

Para comprobar un contador revisado en tu propia tienda:

1. Inicia sesión en tu administrador como lo haces habitualmente.
2. Abre Pedidos y elige un pedido existente con productos normales, sin bundles.
3. Recarga la pestaña y espera a que terminen de cargar los productos.
4. Busca un único contador debajo del número del pedido.
5. Suma las cantidades de los productos y compara el resultado.
6. Abre otro pedido desde el listado. Comprueba que el total cambie para corresponder a ese pedido.
7. Vuelve al listado. El contador del ejemplo no debe permanecer allí.

Los bundles no están soportados por este ejemplo. El script suma las líneas mostradas, por lo que puede contar a la vez la línea padre del bundle y las de sus componentes. No lo uses para determinar cuántos artículos físicos debes embalar en un pedido con bundles. Tu equipo debe acordar e implementar esa regla por separado. Consulta Productos en conjunto o bundles.

El ejemplo se observó en escritorio y en vistas responsive del navegador. Instalar una extensión en Chrome de escritorio no la instala en un teléfono.

5. Desactiva o elimina una personalización

Para dejar de verla, abre Tampermonkey, busca su script, desactívalo y recarga la página del administrador. El contador del ejemplo desaparece sin cambiar el pedido.

Para borrar el script, abre Dashboard, identifica el correcto y usa su papelera. No borres otros scripts que necesites. Para eliminar la extensión completa, abre chrome://extensions/, busca Tampermonkey y pulsa Quitar. Esto también afecta a los demás scripts que gestione la extensión.

Solución de problemas

Mantén cada personalización pequeña, reversible y limitada a las páginas previstas. Si un cambio debe guardarse, compartirse entre usuarios o integrarse con el procesamiento de pedidos, utiliza una función apropiada de Jumpseller o consulta una integración con tu equipo técnico, en lugar de convertir un script visual en un proceso crítico.