Embed

<section class="rpm-forge-section">
  <div class="rpm-forge-shell">
    <div class="rpm-forge-head">
      <span class="rpm-forge-badge">Forge Motorsport Parts</span>
      <h2>Search Forge parts for your car</h2>
      <p>
        Browse Forge Motorsport products and send us an enquiry for supply,
        fitting, or a complete performance package.
      </p>
    </div>

    <div class="rpm-forge-fitment-box">
      <div class="rpm-forge-fitment-copy">
        <h3>Need help finding the right part?</h3>
        <p>
          Search using your car model, engine, platform, or Forge part code.
          If you are unsure on fitment, send us your reg on WhatsApp and we will help point you in the right direction.
        </p>
        <ul class="rpm-forge-fitment-list">
          <li>Search examples: Golf R Mk7, M140i B58, S3 8V, FMINDK57</li>
          <li>Use the dropdown to narrow by product group</li>
          <li>Always double-check the product title and details before ordering</li>
        </ul>
      </div>
      <a
        class="rpm-fitment-btn"
        href="https://wa.me/447702162570?text=Hi%20Alex%2C%20can%20you%20help%20me%20find%20the%20right%20Forge%20part%20for%20my%20car%3F%20My%20reg%20is%3A"
        target="_blank"
        rel="noopener noreferrer"
      >
        Check fitment on WhatsApp
      </a>
    </div>

    <div class="rpm-forge-toolbar">
      <input
        type="text"
        id="forge-search"
        placeholder="Example: Golf R Mk7, M140i B58, S3 8V, FMINDK57"
        aria-label="Search Forge products"
      />

      <select id="forge-category" aria-label="Filter by category">
        <option value="">Select product group</option>
      </select>

      <div class="rpm-forge-toolbar-actions">
        <button id="forge-search-btn" type="button" class="rpm-toolbar-btn rpm-toolbar-btn-primary">Search</button>
        <button id="forge-clear-btn" type="button" class="rpm-toolbar-btn rpm-toolbar-btn-secondary" disabled>Clear</button>
      </div>
    </div>

    <div class="rpm-forge-example-row" aria-label="Popular search examples">
      <button type="button" class="rpm-example-chip" data-search="wheel spacers">Wheel spacers</button>
      <button type="button" class="rpm-example-chip" data-search="exhaust">Exhaust</button>
      <button type="button" class="rpm-example-chip" data-search="BMW B58">BMW B58</button>
      <button type="button" class="rpm-example-chip" data-search="Audi RS3 8Y">Audi RS3 8Y</button>
    </div>

    <div id="forge-status" class="rpm-forge-status">Loading products...</div>
    <div id="forge-results" class="rpm-forge-grid"></div>
  </div>
</section>

<style>
  .rpm-forge-section {
    padding: 50px 20px;
    background: #0f0f10;
    color: #fff;
  }

  .rpm-forge-shell {
    max-width: 1200px;
    margin: 0 auto;
  }

  .rpm-forge-head {
    margin-bottom: 28px;
  }

  .rpm-forge-badge {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
    opacity: .85;
  }

  .rpm-forge-head h2 {
    margin: 0 0 10px;
    font-size: 36px;
    line-height: 1.1;
  }

  .rpm-forge-head p {
    margin: 0;
    max-width: 760px;
    color: rgba(255,255,255,0.78);
    font-size: 16px;
    line-height: 1.6;
  }

  .rpm-forge-fitment-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.16);
  }

  .rpm-forge-fitment-copy h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.2;
  }

  .rpm-forge-fitment-copy p {
    margin: 0 0 10px;
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    line-height: 1.6;
    max-width: 760px;
  }

  .rpm-forge-fitment-list {
    margin: 0;
    padding-left: 18px;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.7;
  }

  .rpm-fitment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 12px;
    background: #ffffff;
    color: #111111;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: transform .15s ease, opacity .2s ease;
  }

  .rpm-fitment-btn:hover {
    transform: translateY(-1px);
    opacity: .95;
  }

  .rpm-forge-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 1fr) 220px;
    gap: 12px;
    margin-bottom: 12px;
    align-items: stretch;
  }

  .rpm-forge-toolbar input,
  .rpm-forge-toolbar select {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .rpm-forge-toolbar input {
    background: #18181b;
    color: #ffffff;
  }

  .rpm-forge-toolbar input::placeholder {
    color: rgba(255,255,255,0.45);
  }

  .rpm-forge-toolbar select {
    background: #ffffff;
    color: #111111;
    -webkit-text-fill-color: #111111;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
  }

  .rpm-forge-toolbar select.is-placeholder {
    color: #777777;
    -webkit-text-fill-color: #777777;
  }

  .rpm-forge-toolbar select option {
    background: #ffffff;
    color: #111111;
  }

  .rpm-forge-toolbar input:focus,
  .rpm-forge-toolbar select:focus,
  .rpm-toolbar-btn:focus,
  .rpm-example-chip:focus,
  .rpm-fitment-btn:focus {
    outline: none;
    border-color: rgba(255,255,255,0.28);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
  }

  .rpm-forge-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-width: 220px;
  }

  .rpm-toolbar-btn {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform .15s ease, opacity .2s ease, background .2s ease, color .2s ease;
    box-sizing: border-box;
  }

  .rpm-toolbar-btn:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .rpm-toolbar-btn:disabled {
    cursor: not-allowed;
    opacity: .55;
  }

  .rpm-toolbar-btn-primary {
    background: #ffffff;
    color: #111111;
  }

  .rpm-toolbar-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.14);
  }

  .rpm-forge-example-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
  }

  .rpm-example-chip {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, opacity .2s ease;
  }

  .rpm-example-chip:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.09);
  }

  .rpm-forge-status {
    min-height: 24px;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
  }

  .rpm-forge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .rpm-forge-card {
    background: #161619;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-shadow: 0 10px 24px rgba(0,0,0,0.16);
  }

  .rpm-forge-image-wrap {
    aspect-ratio: 16 / 10;
    background: #0d0d0f;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .rpm-forge-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .rpm-forge-image-placeholder {
    color: rgba(255,255,255,0.35);
    font-size: 14px;
  }

  .rpm-forge-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }

  .rpm-forge-code {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
  }

  .rpm-forge-title {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
  }

  .rpm-forge-desc {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
  }

  .rpm-forge-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
  }

  .rpm-forge-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.82);
    font-size: 12px;
  }

  .rpm-forge-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
  }

  .rpm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: transform .15s ease, opacity .2s ease;
  }

  .rpm-btn:hover {
    transform: translateY(-1px);
    opacity: .95;
  }

  .rpm-btn-primary {
    background: #fff;
    color: #111;
  }

  .rpm-btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
  }

  @media (max-width: 980px) {
    .rpm-forge-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rpm-forge-fitment-box {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .rpm-fitment-btn {
      min-width: 0;
      width: 100%;
    }

    .rpm-forge-toolbar {
      grid-template-columns: 1fr 1fr;
    }

    .rpm-forge-toolbar-actions {
      grid-column: 1 / -1;
      min-width: 0;
    }
  }

  @media (max-width: 640px) {
    .rpm-forge-head h2 {
      font-size: 28px;
    }

    .rpm-forge-grid {
      grid-template-columns: 1fr;
    }

    .rpm-forge-toolbar {
      grid-template-columns: 1fr;
    }

    .rpm-forge-toolbar-actions {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>

<script>
(() => {
  const API_ENDPOINT = "https://rpm-forge-api.alex-1a3.workers.dev";
  const CONTACT_URL = "/contact";
  const WHATSAPP_NUMBER = "447702162570";

  const searchInput = document.getElementById("forge-search");
  const categorySelect = document.getElementById("forge-category");
  const searchBtn = document.getElementById("forge-search-btn");
  const clearBtn = document.getElementById("forge-clear-btn");
  const statusEl = document.getElementById("forge-status");
  const resultsEl = document.getElementById("forge-results");
  const exampleChips = document.querySelectorAll(".rpm-example-chip");

  function escapeHtml(value) {
    return String(value || "")
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/\"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  function stripHtml(value) {
    return String(value || "").replace(/<[^>]*>/g, "").trim();
  }

  function decodeHtmlEntities(text) {
    const textarea = document.createElement("textarea");
    textarea.innerHTML = text;
    return textarea.value;
  }

  function truncate(value, max = 160) {
    const text = decodeHtmlEntities(stripHtml(value));
    return text.length > max ? text.slice(0, max).trim() + "..." : text;
  }

  function getFirst(obj, paths, fallback = "") {
    for (const path of paths) {
      const parts = path.split(".");
      let current = obj;
      let found = true;

      for (const part of parts) {
        if (current && Object.prototype.hasOwnProperty.call(current, part)) {
          current = current[part];
        } else {
          found = false;
          break;
        }
      }

      if (found && current !== undefined && current !== null && current !== "") {
        return current;
      }
    }

    return fallback;
  }

  function normaliseArray(data) {
    if (Array.isArray(data)) return data;
    if (Array.isArray(data.products)) return data.products;
    if (Array.isArray(data.categories)) return data.categories;
    if (Array.isArray(data.data)) return data.data;
    if (Array.isArray(data.results)) return data.results;
    return [];
  }

  function getImage(product) {
    const possible = [
      getFirst(product, ["image.url"]),
      getFirst(product, ["image"]),
      getFirst(product, ["thumbnail"]),
      getFirst(product, ["thumbnail_url"]),
      getFirst(product, ["image_url"]),
      getFirst(product, ["featured_image"]),
    ].filter(Boolean);

    if (possible.length) return possible[0];

    if (Array.isArray(product.additional_images) && product.additional_images.length) {
      const first = product.additional_images[0];
      if (first && first.location) return first.location;
    }

    return "";
  }

  function getCode(product) {
    return getFirst(product, ["code", "sku", "product_code"], "Forge Product");
  }

  function getName(product) {
    return decodeHtmlEntities(getFirst(product, ["name", "title"], "Unnamed product"));
  }

  function getDescription(product) {
    return getFirst(product, ["short_desc", "short_description", "description", "desc"], "");
  }

  function getPrice(product) {
    return getFirst(product, ["price.normal", "public_price", "price", "price_inc_vat", "rrp", "display_price"], "");
  }

  function getStock(product) {
    return getFirst(product, ["stock.qty", "stock_status", "availability", "stock", "in_stock"], "");
  }

  function buildWhatsAppLink(product) {
    const code = getCode(product);
    const name = getName(product);
    const message = encodeURIComponent(
      `Hi Alex, I'm interested in this Forge part:\n\n${name}\nCode: ${code}\n\nCan you let me know price, fitment, and fitting availability please?`
    );
    return `https://wa.me/${WHATSAPP_NUMBER}?text=${message}`;
  }

  function updateSelectState() {
    if (!categorySelect.value) {
      categorySelect.classList.add("is-placeholder");
    } else {
      categorySelect.classList.remove("is-placeholder");
    }
  }

  function updateClearButtonState() {
    const hasFilters = Boolean(searchInput.value.trim() || categorySelect.value);
    clearBtn.disabled = !hasFilters;
  }

  async function apiFetch(params = {}) {
    const url = new URL(API_ENDPOINT);

    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== null && value !== "") {
        url.searchParams.set(key, value);
      }
    });

    const response = await fetch(url.toString(), {
      method: "GET",
      headers: { "Accept": "application/json" }
    });

    const data = await response.json();

    if (!response.ok) {
      throw new Error(data?.errors?.[0]?.message || "Unable to load Forge data.");
    }

    return data;
  }

  function renderCategories(items) {
    const options = items.map((item) => {
      const id = getFirst(item, ["id"], "");
      const name = decodeHtmlEntities(getFirst(item, ["name", "title"], ""));
      if (!id || !name) return "";
      return `<option value="${escapeHtml(id)}">${escapeHtml(name)}</option>`;
    }).join("");

    categorySelect.innerHTML = `<option value="">Select product group</option>${options}`;
    updateSelectState();
    updateClearButtonState();
  }

  function renderProducts(items) {
    if (!items.length) {
      resultsEl.innerHTML = "";
      statusEl.textContent = "No products found. Try a broader search or send us your reg for help with fitment.";
      return;
    }

    statusEl.textContent = `${items.length} product${items.length === 1 ? "" : "s"} found`;

    resultsEl.innerHTML = items.map((product) => {
      const code = escapeHtml(getCode(product));
      const name = escapeHtml(getName(product));
      const description = escapeHtml(truncate(getDescription(product)));
      const price = escapeHtml(String(getPrice(product)));
      const stock = escapeHtml(String(getStock(product)));
      const image = getImage(product);
      const whatsappLink = buildWhatsAppLink(product);
      const partUrl = getFirst(product, ["link", "url", "product_url"], "");

      return `
        <article class="rpm-forge-card">
          <div class="rpm-forge-image-wrap">
            ${image ? `<img src="${escapeHtml(image)}" alt="${name}" loading="lazy">` : `<div class="rpm-forge-image-placeholder">No image available</div>`}
          </div>
          <div class="rpm-forge-body">
            <div class="rpm-forge-code">${code}</div>
            <h3 class="rpm-forge-title">${name}</h3>
            <p class="rpm-forge-desc">${description || "Performance part available for enquiry and fitting."}</p>
            <div class="rpm-forge-meta">
              ${price ? `<span class="rpm-forge-pill">£${price}</span>` : ""}
              ${stock ? `<span class="rpm-forge-pill">Stock: ${stock}</span>` : ""}
            </div>
            <div class="rpm-forge-actions">
              <a class="rpm-btn rpm-btn-primary" href="${whatsappLink}" target="_blank" rel="noopener noreferrer">Ask about fitting</a>
              ${partUrl
                ? `<a class="rpm-btn rpm-btn-secondary" href="${escapeHtml(partUrl)}" target="_blank" rel="noopener noreferrer">View part</a>`
                : `<a class="rpm-btn rpm-btn-secondary" href="${CONTACT_URL}">Enquire</a>`
              }
            </div>
          </div>
        </article>
      `;
    }).join("");
  }

  async function loadCategories() {
    try {
      const data = await apiFetch({ action: "categories" });
      renderCategories(normaliseArray(data));
    } catch (error) {
      console.error(error);
    }
  }

  async function searchProducts() {
    try {
      statusEl.textContent = "Loading products...";
      resultsEl.innerHTML = "";

      const data = await apiFetch({
        action: "products",
        q: searchInput.value.trim(),
        category: categorySelect.value,
        limit: 12
      });

      renderProducts(normaliseArray(data));
      updateClearButtonState();
    } catch (error) {
      console.error(error);
      statusEl.textContent = error.message || "Something went wrong.";
    }
  }

  function clearFilters() {
    searchInput.value = "";
    categorySelect.value = "";
    updateSelectState();
    updateClearButtonState();
    searchProducts();
  }

  searchBtn.addEventListener("click", searchProducts);

  clearBtn.addEventListener("click", clearFilters);

  searchInput.addEventListener("input", updateClearButtonState);

  searchInput.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      searchProducts();
    }
  });

  categorySelect.addEventListener("change", () => {
    updateSelectState();
    updateClearButtonState();
    searchProducts();
  });

  exampleChips.forEach((chip) => {
    chip.addEventListener("click", () => {
      searchInput.value = chip.dataset.search || "";
      updateClearButtonState();
      searchProducts();
    });
  });

  updateSelectState();
  updateClearButtonState();
  loadCategories();
  searchProducts();
})();
</script>


Real Performance Mapping

RPM Sussex is a West Sussex-based automotive tuning and servicing business specialising in remapping, diagnostics, exhaust upgrades, servicing, and performance-focused vehicle solutions. We aim to deliver high-quality work, honest advice, and a professional customer experience for both private and trade clients.