Thiết lập liên kết A và điều hướng button theo vị trí IP

2.1 Liên kết A（dùng id）：đặt href theo country

Tình huống: trang chỉ có một liên kết quan trọng, bạn muốn nó trỏ đến các địa chỉ khác nhau theo vùng. Ví dụ dưới đây chỉ minh hoạ logic tối giản: nếu là TW thì dùng link TW, còn lại dùng link mặc định.

<a id="geoLink" href="https://example.com/default">Đi ngay</a>

<script>
(async function () {
  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = (info.country === "TW")
      ? "https://example.com/tw"
      : "https://example.com/default";

    const a = document.getElementById("geoLink");
    if (a) a.href = target;
  } catch (e) {
    // Lỗi thì giữ href mặc định
  }
})();
</script>

2.2 Liên kết A（dùng class）：cập nhật href hàng loạt theo country

Tình huống: trang có nhiều liên kết đều cần phân luồng theo vùng. Cách đơn giản nhất là: gán cùng một class rồi cập nhật đồng loạt. Ví dụ vẫn giữ tối giản: TW dùng link TW, các vùng khác dùng link mặc định.

<a class="geo-link" href="https://example.com/default">Cổng tải xuống</a>
<a class="geo-link" href="https://example.com/default">Cổng mua hàng</a>

<script>
(async function () {
  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = (info.country === "TW")
      ? "https://example.com/tw"
      : "https://example.com/default";

    document.querySelectorAll(".geo-link").forEach(function (el) {
      el.href = target;
    });
  } catch (e) {}
})();
</script>

2.3 Button（dùng id）：bấm rồi điều hướng theo country

Tình huống: button không phải là liên kết trực tiếp, nên bạn cần gắn sự kiện click ở frontend. Ví dụ dưới đây chỉ giữ logic cốt lõi: chọn URL đích theo country trước, rồi khi bấm nút thì điều hướng đến URL đó.

<button id="geoBtn" type="button">Bấm để chuyển trang</button>

<script>
(async function () {
  let target = "https://example.com/default"; // URL mặc định

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    if (info.country === "TW") target = "https://example.com/tw";
  } catch (e) {
    // Lỗi thì dùng URL mặc định
  }

  const btn = document.getElementById("geoBtn");
  if (btn) btn.onclick = function () { window.location.href = target; };
})();
</script>

2.4 Button（dùng class）：gắn click điều hướng hàng loạt

Tình huống: trang có nhiều button đều cần điều hướng theo vùng. Cách đơn giản nhất: dùng class chung rồi vòng lặp để gắn sự kiện click. Lưu ý: button không có “href mặc định”, vì vậy nên chuẩn bị sẵn một URL mặc định trong script để tránh trường hợp API lỗi khiến button “bấm không phản hồi”.

<button class="geo-btn" type="button">Nút 1</button>
<button class="geo-btn" type="button">Nút 2</button>

<script>
(async function () {
  let target = "https://example.com/default"; // URL mặc định

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    if (info.country === "TW") target = "https://example.com/tw";
  } catch (e) {}

  document.querySelectorAll(".geo-btn").forEach(function (btn) {
    btn.onclick = function () { window.location.href = target; };
  });
})();
</script>

2.5.1 Dùng cho A link（id）：đặt href trực tiếp

<a id="geoLink" href="https://example.com/default">Đi ngay</a>

<script>
(async function () {
  const defaultUrl = "https://example.com/default";
  const map = { TW: "https://example.com/tw", US: "https://example.com/us" };

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = map[info.country] || defaultUrl;

    document.getElementById("geoLink").href = target; // ✅ Mấu chốt: ghi target vào href
  } catch (e) {
    // Lỗi thì giữ href mặc định
  }
})();
</script>

2.5.2 Dùng cho button（id）：bấm thì chuyển đến target

<button id="geoBtn" type="button">Bấm để chuyển trang</button>

<script>
(async function () {
  const defaultUrl = "https://example.com/default";
  const map = { TW: "https://example.com/tw", US: "https://example.com/us" };
  let target = defaultUrl;

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    target = map[info.country] || defaultUrl;
  } catch (e) {}

  document.getElementById("geoBtn").onclick = function () {
    window.location.href = target; // ✅ Mấu chốt: bấm thì đi bằng target
  };
})();
</script>

3.1 WordPress

• Dùng plugin “chèn script vào header/footer”, dán script vào Header（áp dụng toàn site）
• Hoặc chèn script trước </head> trong file theme header.php

3.2 Joomla! / Joomla

• Trong template hiện tại, tìm <head> trong index.php và dán script trước </head>
• Hoặc dùng mục “custom head code” của template（tuỳ template sẽ khác nhau）

3.3 Magento

• Thêm script vào head global của theme（khu vực head trong theme/layout）
• Mục tiêu là xuất ra toàn site để bạn dễ quản lý quy tắc mapping theo vùng

3.4 Shopify

• Online Store → Themes → Edit code
• Tìm theme.liquid và dán script trước </head>（áp dụng toàn site）

3.5 Quy luật chung

• Hệ thống nào cho phép sửa <head> dùng chung hoặc file layout đều có thể làm “thiết lập đích link/nút theo vùng IP” theo cách tương tự
• Nên giữ URL mặc định để vẫn dùng được khi API bên ngoài gặp lỗi