StockVolt™ | Real-Time Electronic Component Inventory & Pricing

<!DOCTYPE html>
<html>
  <head>
    <title>Search Box Example</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.css"/>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"/>

#card-title{font-family: 'Instrument Sans', sans-serif !important;
  font-size: 2rem !important;}
      @import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&family=Open+Sans&display=swap");
      .check-stock { background:#fff; padding:20px; min-height:auto; font-family:"Open Sans",sans-serif; }
      #res-error { text-align:center; margin-top:20px; color:red; }
      .distributor-stock { display:flex; flex-direction:column; justify-content:center; align-items:center; width:70%; margin:0 auto; }
      .distributor-stock p { text-align:center; }
      #search-box { display:flex; margin-bottom:10px; font-family:inherit; width:100%; position:relative; }
      #search-input { flex:1; padding:5px; background:#f5f5f5; outline:none; border:none; border-radius:.2rem 0 0 .2rem; font-family:inherit; width:100%; height:calc(1.5em + .75rem + 2px); padding:.375rem .75rem; font-size:1rem; font-weight:400; line-height:1.5; color:#495057; }
      #search-button { padding:5px 10px; background-color:#000; color:#fff; border:none; cursor:pointer; font-family:inherit; }
      #pagination { display:flex; justify-content:center; align-items:center; text-align:center; margin-top:10px; font-family:inherit; }
      #results-table { border-collapse:collapse; margin-top:20px; font-family:inherit; width:100%; }
      #results-table th { font-family:"League Spartan",sans-serif; }
      #results-table th, #results-table td { border:1px solid #ddd; padding:8px; }
      .loader { border:4px solid #f3f3f3; border-top:4px solid #7cb342; border-radius:50%; width:30px; height:30px; animation:spin 2s linear infinite; margin:20px auto; display:none; position:relative; }
      .loader-message { position:absolute; top:30; left:42%; margin:20px auto; }
      .top-card { display:flex; justify-content:left; margin:10px; padding:10px; border:0px solid #ddd; border-radius:5px; background-color:#f9f9f9; }
      .prduct-card { display:none; }
      .prduct-card.visible { display:flex; flex-direction:column; padding-bottom:20px; }
      .card-disc { padding-left:20px; }
      h2#card-title { margin:0; }
      .top-card img { max-height:100px; max-width:100%; }
      .top-card h3 { margin-top:0; font-size:18px; font-weight:bold; }
      .top-card p { margin-bottom:5px; font-size:16px; font-weight:700; }
      .top-card span { font-size:14px; opacity:.5; }
      .card-btn { padding:.5rem .1rem; font-size:1rem; line-height:1.5; border-radius:0px; display:inline-block; font-weight:400; background-color: #CE0014 ; color:#fff; text-align:center; user-select:none;  border:1px solid transparent; padding:.5rem 1.5rem; font-size:1rem; line-height:1.5; border-radius:0px; cursor:pointer; margin-left:10px; margin-bottom:20px; text-decoration:none; border:none; }
      .card-btn i { font-size:1rem; margin-right:12px; }
      .buy-btn { background-color:#CE0014 color:#fff; padding:0.5rem 1rem !important; font-size:0.75rem !important; line-height:1.5; border-radius:0px !important; width:200px; text-decoration:none; }
      .dataTables_length { margin-bottom:10px; }
      .product-card-action { display:flex; flex-direction:row; align-items:center; justify-content:left; }
      .top-card a { display:block; text-align:center; margin-top:10px; font-weight:bold; color:#fff; background-color:#4caf50; padding:5px 10px; border-radius:5px; text-decoration:none; }
      .suggestions { position:absolute; top:50px; left:0px; border-radius:0px; background:#f5f5f5; width:100%; z-index:123; }
      .suggestion-item { padding:5px 20px; cursor:pointer; border-bottom:1px solid #f1e6e6; }
      .suggestion-item:hover, .suggestion-item.selected { color:#495057; border-left:2px solid black; }
      @keyframes spin { 0% { transform:rotate(0deg);} 100% { transform:rotate(360deg);} }
      #results-table { width:100%; border-collapse:collapse; }
      #results-table th, #results-table td { padding:8px; border:1px solid #e8f0fe; font-size:14px; }
      #results-table th { background-color:transparent; border:none; }
      table.dataTable.display tbody tr:hover { background-color:#f9f7e5 !important; }
      @media only screen and (max-width:768px){ .card-btn{padding:.275rem .75rem;} .product-card-action{width:300px;} .top-card{display:flex; flex-direction:column; justify-content:left; padding-left:0;} .distributor-stock{width:100%;} }
      @media screen and (max-width:600px){
        #results-table{ overflow-x:auto; display:block; }
        #results-table thead, #results-table tbody, #results-table th, #results-table td, #results-table tr{ display:block; }
        #results-table thead tr{ position:absolute; top:-9999px; left:-9999px; }
        #results-table tr{ border:1px solid #ccc; }
        #results-table td{ border:none; border-bottom:1px solid #ddd; position:relative; padding-left:50%; }
        #results-table td:before{ position:absolute; top:6px; left:6px; width:45%; padding-right:10px; white-space:nowrap; content:attr(data-label); font-weight:bold; }
      }
      .mobile-layout{ display:none; }
      @media (max-width:600px){ #results-table, #results-table_wrapper{ display:none !important; } .mobile-layout{ display:block; } }
      .mobile-item{ border:1px solid #ccc; margin:10px; padding:10px; display:flex; flex-direction:column; }
      .mobile-logo img{ max-height:50px; max-width:50px; }
      .mobile-common-name{ font-weight:bold; }
      .mobile-stock{ margin-top:5px; }
      .mobile-prices{ display:flex; justify-content:space-between; margin-top:5px; }
      .buy-btn{ margin-top:10px; background: #CE0014; color:#fff; padding:5px 10px; text-align:center; border-radius:5px; text-decoration:none; display:inline-block; width:fit-content; }
    	.paragraph-stockvolt{max-width:500px;}
    </style>
  </head>
  <body>
    <div class="check-stock">
      <div class="distributor-stock">
        <p>Formally known as StockVolt™</p>
        <h2>Global Inventory Search</h2>
        <p class="paragraph-stockvolt">Search a manufacturer part number to compare inventory directly from 130+ component distributors around the world</p>
        <div id="search-box">
          <input type="text" id="search-input" placeholder="Search a Manufacturer Part Number" autocomplete="off"/>
          <div class="suggestions" id="suggestionsContainer"></div>
          <button id="search-button"><i class="ri-search-line"></i></button>
        </div>
      </div>

<div class="prduct-card">
        <div class="top-card">
          <img src="" id="card-img" alt="" srcset=""/>
          <div class="card-disc">
            <h2 id="card-title"></h2>
            <p id="card-description"></p>
            <span id="card-info"></span>
          </div>
        </div>
        <div class="product-card-action">
          <a id="datesheet" class="card-btn" href="#" target="_blank"><i class="ri-file-pdf-line"></i>Download Datasheet</a>
          <a id="buynow" class="card-btn" href="#" target="_blank"><i class="ri-stock-line"></i>Buy Now</a>
        </div>
      </div>

<table id="results-table" class="display responsive table" style="display:none">
        <thead>
          <tr>
            <th>Distributor</th>
            <th>Dist Name</th>
            <th>MOQ</th>
            <th>Packaging</th>
            <th>Dist Country</th>
            <th>Lead Time</th>
            <th>Stock</th>
            <th>Order Pricing</th>
            <th style="visibility:hidden">................</th>
          </tr>
        </thead>
        <tbody id="results-body"></tbody>
      </table>

inputField.addEventListener("input", async () => {
        const inputText = inputField.value;
        suggestionsContainer.innerHTML = "";
        selectedSuggestionIndex = 0;

if (inputText.length >= 3) {
          lastSearchTerm = inputText;

if (cachedSuggestions.length === 0 || lastSearchTerm !== inputText) {
            try {
              const response = await fetch(
                `https://beta.api.oemsecrets.com/partsearch?searchTerm=${encodeURIComponent(inputText)}&apiKey=21ryrlgqwzj5dyqwrmpnv75x6dh3h01csvh3lvrlssbe9uh04nv76yvo3ecpm9nb`
              );
              const data = await response.json();
              cachedSuggestions = data.stock.map((item) => item.part_number);
            } catch (error) {
              console.error("Error fetching suggestions:", error);
              return;
            }
          }

const filteredSuggestions = cachedSuggestions.filter((suggestion) =>
            suggestion.toLowerCase().includes(inputText.toLowerCase())
          );

const bestMatchedSuggestions = [...new Set(filteredSuggestions)].slice(0, 5);
          bestMatchedSuggestions.forEach((suggestion) => {
            displaySuggestion(suggestion);
          });

if (bestMatchedSuggestions.length > 0) {
            suggestionsContainer.scrollTop = 0;
          }
        } else {
          cachedSuggestions = [];
          lastSearchTerm = "";
        }
      });

inputField.addEventListener("keydown", (event) => {
        const suggestionItems = suggestionsContainer.getElementsByClassName("suggestion-item");

if (event.key === "ArrowDown") {
          event.preventDefault();
          if (suggestionItems.length > 0) {
            if (selectedSuggestionIndex >= 0) {
              suggestionItems[selectedSuggestionIndex].classList.remove("selected");
            }
            selectedSuggestionIndex = (selectedSuggestionIndex + 1) % suggestionItems.length;
            suggestionItems[selectedSuggestionIndex].classList.add("selected");
            inputField.value = suggestionItems[selectedSuggestionIndex].innerText;
          }
        } else if (event.key === "ArrowUp") {
          event.preventDefault();
          if (suggestionItems.length > 0) {
            if (selectedSuggestionIndex >= 0) {
              suggestionItems[selectedSuggestionIndex].classList.remove("selected");
            }
            selectedSuggestionIndex = (selectedSuggestionIndex - 1 + suggestionItems.length) % suggestionItems.length;
            suggestionItems[selectedSuggestionIndex].classList.add("selected");
            inputField.value = suggestionItems[selectedSuggestionIndex].innerText;
          }
        }
      });

function displaySuggestion(suggestion) {
        const suggestionItem = document.createElement("div");
        suggestionItem.innerText = suggestion;
        suggestionItem.classList.add("suggestion-item");
        suggestionItem.addEventListener("click", () => {
          inputField.value = suggestion;
          suggestionsContainer.innerHTML = "";
          inputField.focus();
          selectedSuggestionIndex = 0;
          performSearch();
        });
        suggestionsContainer.appendChild(suggestionItem);
      }

$(document).ready(function () {
        const searchInput = $("#search-input");
        const searchButton = $("#search-button");
        const resultsTable = $("#results-table");
        const resultsBody = $("#results-body");
        const loader = $("#loader");
        const paginationContainer = $("#pagination");
        const errorContainer = $("#res-error");
        const loaderMessage = $("#loader-message");
        const mobileLayout = $("#mobile-layout");

let dataTable = null;

function simulateCtrlClick(element) {
          const event = new MouseEvent("click", { bubbles: true, cancelable: true, ctrlKey: true });
          element.dispatchEvent(event);
        }

const downloadButton = document.getElementById("datesheet");
        if (downloadButton) {
          downloadButton.addEventListener("click", function (event) {
            event.preventDefault();
            simulateCtrlClick(downloadButton);
          });
        }

const dataTableConfig = {
          ordering: true,
          order: [],
          language: {
            responsive: true,
            emptyTable: "No data available",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            infoEmpty: "Showing 0 to 0 of 0 entries",
            infoFiltered: "(filtered from _MAX_ total entries)",
            lengthMenu: "Show _MENU_ entries",
            search: "Search:",
            zeroRecords: "No matching records found",
            paginate: { first: "First", last: "Last", next: "Next", previous: "Previous" }
          },
          columnDefs: [
            {
              targets: 6,
              orderable: true,
              type: "num"
            }
          ]
        };

searchButton.click(function () { performSearch(); });
        searchInput.keypress(function (e) { if (e.which === 13) { performSearch(); } });

function performSearch() {
          suggestionsContainer.innerHTML = "";
          const searchTerm = searchInput.val();
          if (searchTerm === "") {
            errorContainer.text("Please enter a search term");
            sendHeight();
            return;
          }

const apiUrl = `https://beta.api.oemsecrets.com/partsearch?searchTerm=${searchTerm}&apiKey=21ryrlgqwzj5dyqwrmpnv75x6dh3h01csvh3lvrlssbe9uh04nv76yvo3ecpm9nb`;

loader.show();
          resultsTable.hide();
          resultsBody.empty();
          paginationContainer.empty();
          errorContainer.empty();
          $(".prduct-card").removeClass("visible");

if (dataTable !== null) {
            dataTable.destroy();
            dataTable = null;
          }

$.getJSON(apiUrl, function (data) {
            loaderMessage.text("Fetching Latest Distributor Data...").show();

loader.hide();
            resultsTable.show();

if (data && data.stock && Array.isArray(data.stock)) {
              const stockItems = data.stock;
              const totalItems = stockItems.length;
              const itemsPerPage = 10;

if (totalItems === 0) {
                errorContainer.text("No product found");
                sendHeight();
                return;
              }

const product = stockItems.find(
                (item) => item.buy_now_url && item.datasheet_url && item.description && item.image_url
              );

if (product) {
                $("#card-img").attr("src", product.image_url);
                $("#card-title").text(product.part_number + " " + "By" + " " + product.manufacturer);
                $("#card-description").text(product.description);
                $("#datesheet").attr("href", product.datasheet_url);
                $("#buynow").attr("href", product.buy_now_url);

var prices = product.prices.USD;
                var firstUnitPrice = prices[0].unit_price;
                var lastUnitPrice = prices[prices.length - 1].unit_price;
                var priceText = "<strong>$" + firstUnitPrice + "</strong> to <strong>$" + lastUnitPrice + "</strong>";

$("#card-info").html(
                  "Prices ranging from " + priceText + ". Orders starting from<strong> 1</strong> unit."
                );

$(".prduct-card").addClass("visible");
              } else {
                $(".prduct-card").removeClass("visible");
              }

const totalPages = Math.ceil(totalItems / itemsPerPage);
              dataTable = $("#results-table").DataTable(dataTableConfig);
              dataTable.clear();

function createMobileLayout(item) {
                const distributor = item.distributor;
                const availStock = item.quantity_in_stock;
                const moq = item.moq;
                const packaging = item.packaging;
                const leadTime = item.lead_time;
                const buyNowUrl = item.buy_now_url;

var prices = item.prices.USD;
                var firstUnitPrice = prices[0].unit_price;
                var lastUnitPrice = prices[prices.length - 1].unit_price;
                var firstUnitBreak = prices[0].unit_break;
                var lastUnitBreak = prices[prices.length - 1].unit_break;

const distributorCommonName = distributor.distributor_common_name;
                const distributorCountry = distributor.distributor_country;
                const distributorLogo = distributor.distributor_logo;

const mobileLayoutDiv = document.createElement("div");
                mobileLayoutDiv.className = "mobile-item";

mobileLayoutDiv.innerHTML = `
                  <div class="mobile-logo">
                    <img src="${distributorLogo}" alt="${distributorCommonName}">
                  </div>
                  <div class="mobile-details">
                    <p class="mobile-common-name">${distributorCommonName}</p>
                    <p class="mobile-stock">In Stock: ${availStock}</p>
                  </div>
                  <div class="mobile-prices">
                    <p><span>${firstUnitBreak}</span> <b>$${firstUnitPrice}</b></p>
                    <p><span>${lastUnitBreak}</span> <b>$${lastUnitPrice}</b></p>
                  </div>
                  <a class="buy-btn" href="${buyNowUrl}" target="_blank">Buy Now</a>
                `;
                return mobileLayoutDiv;
              }

$.each(stockItems, function (index, item) {
                const distributor = item.distributor;
                const availStock = item.quantity_in_stock;
                const moq = item.moq;
                const packaging = item.packaging;
                const leadTime = item.lead_time;
                const buyNowUrl = item.buy_now_url;

dataTable.row.add([
                  `<div style="text-align:center"><img src="${distributorLogo}" style="max-height:50px; max-width:50px;"></div>`,
                  distributorCommonName,
                  moq,
                  packaging,
                  distributorCountry,
                  leadTime,
                  availStock,
                  `<div style="display:flex; flex-direction:column;">
                    <div style="display:flex; justify-content:space-between; align-items:center;"><span>${firstUnitBreak}</span> <b>$${firstUnitPrice}</b></div>
                    <div style="display:flex; justify-content:space-between; align-items:center;"><span>${lastUnitBreak}</span> <b>$${lastUnitPrice}</b></div>
                  </div>`,
                  `<a class="buy-btn" href="${buyNowUrl}" target="_blank">Buy Now</a>`
                ]);

const mobileLayout = createMobileLayout(item);
                $("#mobile-layout").append(mobileLayout);
              });

dataTable.draw();
              loaderMessage.hide();
              if (totalPages > 1) { paginationContainer.show(); } else { paginationContainer.hide(); }
              sendHeight();
              setTimeout(sendHeight, 500); // Dodatno ažuriranje visine nakon renderovanja tabele
            } else {
              errorContainer.text("Error: Invalid response data format");
              sendHeight();
            }
          }).fail(function () {
            loader.hide();
            resultsTable.hide();
            errorContainer.text("Error: Failed to fetch API data");
            $("#loader-message").hide();
            $(".prduct-card").hide();
            sendHeight();
          });
        }

window.addEventListener("click", function (event) {
          const clickedElement = event.target;
          if (!suggestionsContainer.contains(clickedElement)) {
            suggestionsContainer.innerHTML = "";
          }
        });
      });

window.addEventListener("load", sendHeight);
      window.addEventListener("resize", sendHeight);
    </script>
  </body>
</html>

Fonctionnalités puissantes

Inventaire et prix

Informations en temps réel sur les stocks et les prix

Fiches techniques

Téléchargez facilement les spécifications techniques

Complet

Accédez à plus de 40 millions de pièces provenant de plus de 130 distributeurs

Introduction à la recherche d'inventaire mondial

Obtenez un aperçu clair du fonctionnement de la recherche globale des stocks et des raisons pour lesquelles c'est le moyen le plus intelligent de trouver des actions mondiales.

Comment puis-je comparer les prix et l'inventaire des composants électroniques ?

StockVolt™ est facile à utiliser, il vous suffit d'entrer un numéro de pièce du fabricant (MPN) dans la barre de recherche pour comparer la disponibilité des stocks et les prix de centaines de distributeurs de produits électroniques dans le monde entier.

Quelle est la taille de la base de données de pièces électroniques d'Edison Elm ?

StockVolt™ permet aux professionnels de l'ingénierie et de l'approvisionnement d'accéder à plus de 40 millions de pièces uniques, dans de multiples catégories, provenant de distributeurs mondiaux de produits électroniques. Les données sur les pièces sont envoyées directement par les distributeurs et les fabricants souvent quotidiennement, mais aussi en temps réel, pour assurer l'exactitude et la transparence des données.

Avec quels fabricants de pièces électroniques travaillez-vous ?

StockVolt™ répertorie les produits de plus de 5 000 fabricants, dans un large éventail de catégories électroniques, y compris les semi-conducteurs, les connecteurs, les passifs, les appareils électromécaniques, les DEL, les fils et câbles, les essais et mesures, les ordinateurs embarqués et plus encore. Certains fabricants comprennent Analog Devices, TE Connectivity, Samtec, Traco Power, National Instruments et Arduino.

Avec quels distributeurs de pièces électroniques travaillez-vous ?

StockVolt™ permet aux utilisateurs d'accéder aux données sur les pièces provenant de plus de 130 distributeurs à travers le monde, dont Arrow, Avnet, Digi-Key, Master, Farnell, Future, Mouser, RS et de nombreux autres distributeurs autorisés. Les utilisateurs peuvent souvent commander directement auprès des distributeurs en ligne via notre site Web en cliquant sur les liens « Acheter maintenant ».