Strumento di localizzazione delle scorte

Lo Stock Locator Tool è un componente React che mostra prezzi e disponibilità in tempo reale per un determinato codice componente del produttore: livelli di stock, fasce di prezzo e link ai distributori, il tutto basato sull’API Octopart. Puoi integrarlo nelle pagine prodotto, negli strumenti di approvvigionamento o in qualsiasi applicazione React.

Prerequisiti

• Un progetto React

• Un token di accesso OAuth 2.0 con l’ambito supply.domain – lo stesso token utilizzato per le query API dirette (vedi Authorization)

Installazione

npm i @altiumnexar/stock-locator-tool

Utilizzo di base

import { StockLocatorTool } from "@altiumnexar/stock-locator-tool";

function MyPage() {
  return (
    <StockLocatorTool
      searchParameters={{ token: "YOUR_ACCESS_TOKEN" }}
    />
  );
}

Questo visualizza un’interfaccia di ricerca completa in cui gli utenti possono inserire qualsiasi MPN per vedere offerte e stock in tempo reale.

Modalità componente singolo

Per precompilare un componente e nascondere la barra di ricerca, utile ad esempio in una pagina di dettaglio prodotto:

<StockLocatorTool
  searchParameters={{
    token: "YOUR_ACCESS_TOKEN",
    q: "LM358DR",
    disableSearch: true,
  }}
/>

Gestione del token

I token di accesso scadono dopo 24 ore. Durante lo sviluppo puoi codificare temporaneamente un token in modo statico. In produzione, recupera il token dal tuo backend tramite il grant client_credentials e aggiornalo prima della scadenza. Non esporre mai il tuo Client Secret nel codice lato client.

Ulteriori riferimenti

Il repository GitHub documenta tutte le props disponibili:

• searchParameters – regione, valuta, filtri autorizzato/disponibile a magazzino, visibilità della barra di ricerca, limite delle offerte e altro ancora

• styles – tema chiaro/scuro, font e riferimento completo dei token colore personalizzati

• hideColumns – controlla quali colonne vengono visualizzate nella tabella delle offerte