Wie erstellt man in BigCommerce mithilfe von Google Tabellen eine nach Postleitzahlen sortierte Suche nach Vertriebsmitarbeitern?

BigCommerce, Ecommerce

Wenn Ihr Unternehmen mit regionalen Vertriebsmitarbeitern zusammenarbeitet, können Sie eine Vertriebsmitarbeiter-Suche für Ihren BigCommerce-Shop hinzufügen. Kunden können ihre Postleitzahl eingeben, um sofort den für sie zuständigen 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.

Voraussetzungen:

  1. Ein Google-Tabellenblatt (für die Datentabelle)
  2. Ein BigCommerce-Shop und eine Seite für die Vertriebsmitarbeiter-Suche.
  3. Google Sheets-API

So erstellen Sie die Vertriebsmitarbeiter-Suche:

Schritt 1: Richten Sie die Google-Tabelle ein

Erstellen Sie eine neue Google-Tabelle und strukturieren Sie diese mit den vier Spalten, wie im folgenden Beispiel gezeigt.

Schritt 2: Google-Tabelle freigeben

Sobald Sie Ihre Daten eingegeben haben, geben Sie die Tabelle frei, indem Sie auf „Freigeben“ → „Jeder mit dem Link“ → „Leser“ klicken. Sie müssen sie nicht öffentlich veröffentlichen. Der im nächsten Schritt erstellte API-Schlüssel regelt den gesamten Zugriff.

Schritt 3: Einen Google Cloud-API-Schlüssel erstellen

  1. Gehen Sie zu console.cloud.google.com und erstellen Sie ein neues Projekt.
  2. Navigieren Sie anschließend zu „APIs & Dienste“ → „Bibliothek“, suchen Sie nach der Google Sheets-API und aktivieren Sie diese.
  3. Gehen Sie nun zu „APIs & Dienste“ → „Anmeldeinformationen“ → „Anmeldeinformationen erstellen“ → „API-Schlüssel“.
  4. Geben Sie einen Namen für den API-Schlüssel ein.
  5. Aktivieren Sie im Feld „API-Einschränkung auswählen“ das Kontrollkästchen „Google Sheets-API“.
  6. Unter „Schlüssel einschränken, um Sicherheitsrisiken zu verringern“ können Sie Ihren Schlüssel einschränken, um Sicherheitsrisiken zu verringern.
  7. Klicken Sie abschließend auf die Schaltfläche „Erstellen“, um die Erstellung der API abzuschließen.
  8. Sobald der API-Schlüssel erstellt ist, kopieren Sie ihn. Sie benötigen ihn in der JavaScript-Logik.

Schritt 4: Erstellen Sie die HTML-Struktur für die Vertreter-Suche.

Fügen Sie einen HTML-Code hinzu, der das Eingabefeld für die Postleitzahl, die Schaltfläche zum Absenden und den Container für das Ergebnis enthält. Sie können CSS hinzufügen, um die Struktur nach Ihren Wünschen zu gestalten. Hier ist ein Beispielcode:

<div class="fsr-columns">
  <div class="fsr-col-left">
    <div class="fsr-field-group">
      <label for="fsr-zip">Zipcode</label>
      <div class="fsr-input-row">
        <input type="text" id="fsr-zip" placeholder="Enter your Zipcode" maxlength="5" inputmode="numeric"
          pattern="[0-9]{5}" aria-label="Enter your 5-digit Zipcode">
        <button id="fsr-search-btn">Search</button>
      </div>
    </div>
  </div>
  <div class="fsr-col-right">
    <div class="fsr-results">
      <!-- Results will be displayed here -->
    </div>
  </div>
</div>

Schritt 5: JavaScript-Logik

Fügen Sie die JavaScript-Logik hinzu, um das Ergebnis anzuzeigen. Sie können das Format des Ergebnisses nach Bedarf anpassen. Ersetzen Sie die Platzhalterwerte durch Ihre tatsächlichen Werte.

const SHEET_ID = 'YOUR_SHEET_ID_HERE'; // Replace with your actual Google Sheet ID
const API_KEY = 'YOUR_API_KEY_HERE'; // Replace with your actual Google API key
const SHEET_NAME = 'YOUR_SHEET_NAME_HERE'; // Replace with your actual sheet name. For example: Sheet1
const API_URL = 'https://sheets.googleapis.com/v4/spreadsheets/' + SHEET_ID + '/values/' + encodeURIComponent(SHEET_NAME + '!A:D') + '?key=' + API_KEY;

let zipInput = document.getElementById('fsr-zip');
let searchBtn = document.getElementById('fsr-search-btn');
let resultsContainer = document.querySelector('.fsr-results');

searchBtn.addEventListener('click', function () {
  let zipCode = zipInput.value.trim();
  if (zipCode.length === 5 && /^\d{5}$/.test(zipCode)) {
    fetch(API_URL)
      .then(response => response.json())
      .then(data => {
        let headers = data.values[0];
        let rows = data.values.slice(1); // Remove header row
        let result = rows.find(row => row[0] === zipCode);
        let resultHTML = '';
        result.forEach((row, index) => {
          resultHTML += `<p><strong>${headers[index]}:</strong> ${row}</p>`;
        });
        resultsContainer.innerHTML = resultHTML;
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }
});

Das Ergebnis wird wie unten gezeigt angezeigt:

Postleitzahl: 10025
Name: Matthew Smith
E-Mail: matthew.smith@example.com
Telefon: (555) 587-9024

Das Ergebnis ist eine ressourcenschonende, wartungsfreundliche Funktion, die keinerlei Backend-Infrastruktur erfordert. Das Google-Tabellenblatt fungiert als Datenbank. Die API übernimmt dabei das Auslesen, während der Browser den Abgleich und die Darstellung übernimmt. Sie können diese Funktion auch auf anderen E-Commerce-Plattformen nutzen, da sie nicht an eine bestimmte Plattform gebunden ist. Sie können sie überall einsetzen.

Bitte kontaktieren Sie uns unter wargis@bay20.com/manish@bay20.com oder rufen Sie uns unter +91-9582784309 oder +91-8800519180 an, wenn Sie Unterstützung im Zusammenhang mit Bigcommerce benötigen. Sie können auch unsere Website besuchen, um sich über unsere Dienstleistungen zu informieren.