{"id":17790,"date":"2026-08-05T13:04:49","date_gmt":"2026-08-05T07:19:49","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=17790"},"modified":"2026-08-05T13:10:54","modified_gmt":"2026-08-05T07:25:54","slug":"wie-erstellt-man-in-bigcommerce-mithilfe-von-google-tabellen-eine-nach-postleitzahlen-sortierte-suche-nach-vertriebsmitarbeitern","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-erstellt-man-in-bigcommerce-mithilfe-von-google-tabellen-eine-nach-postleitzahlen-sortierte-suche-nach-vertriebsmitarbeitern\/","title":{"rendered":"Wie erstellt man in BigCommerce mithilfe von Google Tabellen eine nach Postleitzahlen sortierte Suche nach Vertriebsmitarbeitern?"},"content":{"rendered":"\n

Wenn Ihr Unternehmen mit regionalen Vertriebsmitarbeitern zusammenarbeitet, k\u00f6nnen Sie eine Vertriebsmitarbeiter-Suche f\u00fcr Ihren BigCommerce<\/a><\/strong>-Shop hinzuf\u00fcgen. Kunden k\u00f6nnen ihre Postleitzahl eingeben, um sofort den f\u00fcr sie zust\u00e4ndigen Vertriebsmitarbeiter anzuzeigen, anstatt eine E-Mail an Ihr Support-Team zu senden, um herauszufinden, an wen sie sich wenden sollen. Das Ergebnis zeigt den Namen, die E-Mail-Adresse und die Telefonnummer der Vertriebsmitarbeiter an.<\/p>\n\n\n\n

Voraussetzungen:<\/strong><\/p>\n\n\n\n

    \n
  1. Ein Google-Tabellenblatt (f\u00fcr die Datentabelle)<\/li>\n\n\n\n
  2. Ein BigCommerce-Shop und eine Seite f\u00fcr die Vertriebsmitarbeiter-Suche.<\/li>\n\n\n\n
  3. Google Sheets-API<\/li>\n<\/ol>\n\n\n\n

    So erstellen Sie die Vertriebsmitarbeiter-Suche:<\/strong><\/p>\n\n\n\n

    Schritt 1: Richten Sie die Google-Tabelle ein<\/strong><\/p>\n\n\n\n

    Erstellen Sie eine neue Google-Tabelle und strukturieren Sie diese mit den vier Spalten, wie im folgenden Beispiel gezeigt.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Schritt 2: Google-Tabelle freigeben<\/strong><\/h3>\n\n\n\n

    Sobald Sie Ihre Daten eingegeben haben, geben Sie die Tabelle frei, indem Sie auf \u201eFreigeben\u201c \u2192 \u201eJeder mit dem Link\u201c \u2192 \u201eLeser\u201c klicken. Sie m\u00fcssen sie nicht \u00f6ffentlich ver\u00f6ffentlichen. Der im n\u00e4chsten Schritt erstellte API-Schl\u00fcssel regelt den gesamten Zugriff.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Schritt 3: Einen Google Cloud-API-Schl\u00fcssel erstellen<\/strong><\/p>\n\n\n\n

      \n
    1. Gehen Sie zu console.cloud.google.com und erstellen Sie ein neues Projekt.<\/li>\n\n\n\n
    2. Navigieren Sie anschlie\u00dfend zu \u201eAPIs & Dienste\u201c \u2192 \u201eBibliothek\u201c, suchen Sie nach der Google Sheets-API und aktivieren Sie diese.<\/li>\n\n\n\n
    3. Gehen Sie nun zu \u201eAPIs & Dienste\u201c \u2192 \u201eAnmeldeinformationen\u201c \u2192 \u201eAnmeldeinformationen erstellen\u201c \u2192 \u201eAPI-Schl\u00fcssel\u201c.<\/li>\n\n\n\n
    4. Geben Sie einen Namen f\u00fcr den API-Schl\u00fcssel ein.<\/li>\n\n\n\n
    5. Aktivieren Sie im Feld \u201eAPI-Einschr\u00e4nkung ausw\u00e4hlen\u201c das Kontrollk\u00e4stchen \u201eGoogle Sheets-API\u201c.<\/li>\n\n\n\n
    6. Unter \u201eSchl\u00fcssel einschr\u00e4nken, um Sicherheitsrisiken zu verringern\u201c k\u00f6nnen Sie Ihren Schl\u00fcssel einschr\u00e4nken, um Sicherheitsrisiken zu verringern.<\/li>\n\n\n\n
    7. Klicken Sie abschlie\u00dfend auf die Schaltfl\u00e4che \u201eErstellen\u201c, um die Erstellung der API abzuschlie\u00dfen.<\/li>\n\n\n\n
    8. Sobald der API-Schl\u00fcssel erstellt ist, kopieren Sie ihn. Sie ben\u00f6tigen ihn in der JavaScript-Logik.<\/li>\n<\/ol>\n\n\n\n

      Schritt 4: Erstellen Sie die HTML-Struktur f\u00fcr die Vertreter-Suche.<\/strong><\/h3>\n\n\n\n

      F\u00fcgen Sie einen HTML-Code hinzu, der das Eingabefeld f\u00fcr die Postleitzahl, die Schaltfl\u00e4che zum Absenden und den Container f\u00fcr das Ergebnis enth\u00e4lt. Sie k\u00f6nnen CSS hinzuf\u00fcgen, um die Struktur nach Ihren W\u00fcnschen zu gestalten. Hier ist ein Beispielcode:<\/p>\n\n\n\n

      <div class=\"fsr-columns\">\n  <div class=\"fsr-col-left\">\n    <div class=\"fsr-field-group\">\n      <label for=\"fsr-zip\">Zipcode<\/label>\n      <div class=\"fsr-input-row\">\n        <input type=\"text\" id=\"fsr-zip\" placeholder=\"Enter your Zipcode\" maxlength=\"5\" inputmode=\"numeric\"\n          pattern=\"[0-9]{5}\" aria-label=\"Enter your 5-digit Zipcode\">\n        <button id=\"fsr-search-btn\">Search<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class=\"fsr-col-right\">\n    <div class=\"fsr-results\">\n      <!-- Results will be displayed here -->\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
      Schritt 5: JavaScript-Logik<\/strong><\/h3>\n\n\n\n
      F\u00fcgen Sie die JavaScript-Logik hinzu, um das Ergebnis anzuzeigen. Sie k\u00f6nnen das Format des Ergebnisses nach Bedarf anpassen. Ersetzen Sie die Platzhalterwerte durch Ihre tats\u00e4chlichen Werte.<\/p>\n\n\n\n
      const SHEET_ID = 'YOUR_SHEET_ID_HERE'; \/\/ Replace with your actual Google Sheet ID<\/em>\nconst API_KEY = 'YOUR_API_KEY_HERE'; \/\/ Replace with your actual Google API key<\/em>\nconst SHEET_NAME = 'YOUR_SHEET_NAME_HERE'; \/\/ Replace with your actual sheet name. For example: Sheet1<\/em>\nconst API_URL = 'https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/' + SHEET_ID + '\/values\/' + encodeURIComponent(SHEET_NAME + '!A:D') + '?key=' + API_KEY;\n\nlet zipInput = document.getElementById('fsr-zip');\nlet searchBtn = document.getElementById('fsr-search-btn');\nlet resultsContainer = document.querySelector('.fsr-results');\n\nsearchBtn.addEventListener('click', function () {\n  let zipCode = zipInput.value.trim();\n  if (zipCode.length === 5 && \/^\\d{5}$\/.test(zipCode)) {\n    fetch(API_URL)\n      .then(response => response.json())\n      .then(data => {\n        let headers = data.values[0];\n        let rows = data.values.slice(1); \/\/ Remove header row<\/em>\n        let result = rows.find(row => row[0] === zipCode);\n        let resultHTML = '';\n        result.forEach((row, index) => {\n          resultHTML += `<p><strong>${headers[index]}:<\/strong> ${row}<\/p>`;\n        });\n        resultsContainer.innerHTML = resultHTML;\n      })\n      .catch(error => {\n        console.error('Error fetching data:', error);\n      });\n  }\n});<\/code><\/pre>\n\n\n\n
      Das Ergebnis wird wie unten gezeigt angezeigt:<\/strong><\/p>\n\n\n\n
      Postleitzahl:<\/strong> 10025
      Name<\/strong>: Matthew Smith
      E-Mail<\/strong>: matthew.smith@example.com
      Telefon<\/strong>: (555) 587-9024<\/p>\n\n\n\n
      Das Ergebnis ist eine ressourcenschonende, wartungsfreundliche Funktion, die keinerlei Backend-Infrastruktur erfordert. Das Google-Tabellenblatt fungiert als Datenbank. Die API \u00fcbernimmt dabei das Auslesen, w\u00e4hrend der Browser den Abgleich und die Darstellung \u00fcbernimmt. Sie k\u00f6nnen diese Funktion auch auf anderen E-Commerce-Plattformen nutzen, da sie nicht an eine bestimmte Plattform gebunden ist. Sie k\u00f6nnen sie \u00fcberall einsetzen.<\/p>\n\n\n\n
      Bitte kontaktieren Sie uns unter wargis@bay20.com\/manish@bay20.com<\/strong> oder rufen Sie uns unter +91-9582784309 oder +91-8800519180<\/strong> an, wenn Sie Unterst\u00fctzung im Zusammenhang mit Bigcommerce<\/a><\/strong> ben\u00f6tigen. Sie k\u00f6nnen auch unsere Website besuchen, um sich \u00fcber unsere Dienstleistungen zu informieren.<\/p>\n\n\n\n
      <\/p>\n","protected":false},"excerpt":{"rendered":"
      Wenn Ihr Unternehmen mit regionalen Vertriebsmitarbeitern zusammenarbeitet, k\u00f6nnen Sie eine Vertriebsmitarbeiter-Suche f\u00fcr Ihren BigCommerce-Shop hinzuf\u00fcgen. Kunden k\u00f6nnen ihre Postleitzahl eingeben, um sofort den f\u00fcr sie zust\u00e4ndigen Vertriebsmitarbeiter anzuzeigen, anstatt eine E-Mail an Ihr Support-Team zu senden, um herauszufinden, an wen sie sich wenden sollen. Das Ergebnis zeigt den Namen, die E-Mail-Adresse und die Telefonnummer der […]<\/p>\n","protected":false},"author":1,"featured_media":17706,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,31],"tags":[],"class_list":["post-17790","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bigcommerce","category-ecommerce"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=17790"}],"version-history":[{"count":2,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17790\/revisions"}],"predecessor-version":[{"id":17795,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17790\/revisions\/17795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/17706"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=17790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=17790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=17790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}