Documentación Shipping

• Botón “Enviar a Shipping” en la ficha del pedido (abre pestaña nueva). El botón hace un POST hacia /nuevoEnvio (autopost).
• Columna en el listado (opcional): icono camión + tracking (si existe). Si hay tracking, al hacer clic muestra un modal de seguimiento (ver más abajo).
• Alertas del pedido: si bloqueas o adviertes, pasa mensajes en alertasMarketplace para que Shipping las pinte en pantalla (ej: “ya enviado”, “estado no permitido”, etc.).

• Tarjeta “Seguimiento del envío” con tracking + transportista.
• Botón “Ver seguimiento” que abre un modal con el seguimiento embebido (iframe) o una pestaña nueva.

<!-- Botón / link (admin o cliente) -->
<a href="#" class="zb-open-tracking" data-trk="PQ29BT071019809B">
  Ver seguimiento
</a>

<!-- Modal simple -->
<div id="zbTrackModal" style="display:none; position:fixed; inset:0; z-index:99999;">
  <div id="zbTrackBackdrop" style="position:absolute; inset:0; background:rgba(0,0,0,.55);"></div>
  <div style="position:relative; max-width:980px; margin:5vh auto; background:#fff; border-radius:10px; padding:12px; box-shadow:0 10px 35px rgba(0,0,0,.35);">

    <button type="button" id="zbTrackClose"
      style="position:absolute; top:8px; right:10px; background:transparent; border:0; font-size:28px; line-height:28px; cursor:pointer;">
      &times;
    </button>

    <div style="padding:6px 6px 10px 6px; border-bottom:1px solid #eee;">
      <strong>Seguimiento del envío</strong>
      <a id="zbTrackOpenNew" href="#" target="_blank" rel="noopener" style="float:right; font-size:13px;">Abrir en pestaña nueva</a>
    </div>

    <div style="padding:10px 6px 0 6px;">
      <iframe id="zbTrackFrame" src="about:blank" style="width:100%; height:70vh; border:0;" loading="lazy"></iframe>
      <div style="margin-top:10px;">
        <div style="padding:10px; border:1px solid #ffeeba; background:#fff3cd; border-radius:6px; font-size:13px;">
          Si no se muestra el contenido, usa “Abrir en pestaña nueva”.
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  function q(sel, root){ return (root||document).querySelector(sel); }
  function qa(sel, root){ return Array.prototype.slice.call((root||document).querySelectorAll(sel)); }

  var modal = q('#zbTrackModal');
  var frame = q('#zbTrackFrame');
  var openNew = q('#zbTrackOpenNew');
  var closeBtn = q('#zbTrackClose');
  var backdrop = q('#zbTrackBackdrop');

  function buildUrl(trk){
    trk = (trk||'').trim();
    return trk ? ('https://shipping.z-bombilla.com/envio/seguimiento?numSeguimiento=' + encodeURIComponent(trk)) : '';
  }

  function openModal(trk){
    var url = buildUrl(trk);
    if(!url) return;
    frame.src = url;
    openNew.href = url;
    modal.style.display = 'block';
  }

  function closeModal(){
    modal.style.display = 'none';
    frame.src = 'about:blank';
  }

  qa('.zb-open-tracking').forEach(function(a){
    a.addEventListener('click', function(ev){
      ev.preventDefault();
      openModal(a.getAttribute('data-trk') || '');
    });
  });

  closeBtn.addEventListener('click', closeModal);
  backdrop.addEventListener('click', closeModal);
  document.addEventListener('keydown', function(e){
    if(e && e.keyCode === 27 && modal.style.display === 'block') closeModal();
  });
})();
</script>

1. Llamas a calcular-envio para obtener precio/servicio de todas las agencias disponibles según bultos y destino.
2. El usuario (o tu lógica) elige una agencia/servicio.
3. Llamas a do-envio indicando la agencia elegida y recibes etiqueta + tracking.
4. Si la tienda está conectada, Shipping notificará el tracking al e-commerce por callback (si está configurado).

Para operativas avanzadas, puedes preconfigurar reglas en Shipping (preferencias por calidad/precio/rapidez, horarios, recogidas, etc.) y lanzar do-envio para que Shipping elija el mejor servicio automáticamente.

Este flujo reduce lógica en el e-commerce y centraliza decisiones en Shipping.