Hiển thị liên kết hỗ trợ theo IP trong Shopify

Giải thích API

Lệnh gọi phía trình duyệt kiểm tra IP người truy cập và trả về IP, quốc gia, khu vực, thành phố của họ. Cách này phù hợp để hiển thị nội dung theo vùng.

{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}

Ngữ cảnh ứng dụng

Các ngữ cảnh này thể hiện giá trị của giao diện thông tin IP và phân biệt rõ IP server với IP người truy cập.

• Các ngữ cảnh này thể hiện giá trị của giao diện thông tin IP và phân biệt rõ IP server với IP người truy cập.
• Hiển thị liên kết hỗ trợ theo IP trong Shopify
• Giải thích API
• Khuyến nghị SEO và UX

Logic triển khai

Trước khi triển khai, hãy xác định bên gửi request: request từ server trả IP server, request từ trình duyệt trả IP người truy cập.

• Trước khi triển khai, hãy xác định bên gửi request: request từ server trả IP server, request từ trình duyệt trả IP người truy cập.
• Lệnh gọi phía trình duyệt kiểm tra IP người truy cập và trả về IP, quốc gia, khu vực, thành phố của họ. Cách này phù hợp để hiển thị nội dung theo vùng.
• Tất cả ví dụ dưới đây dùng trực tiếp https://my.ipin.io/info, với chú thích và nội dung giao diện đã được bản địa hóa.
• Nội dung mặc định cần đầy đủ và dễ đọc, còn nội dung theo vùng là lớp tăng cường. Công cụ tìm kiếm vẫn crawl nội dung ổn định, người dùng vẫn dùng được khi API lỗi.

Ví dụ code

Tất cả ví dụ dưới đây dùng trực tiếp https://my.ipin.io/info, với chú thích và nội dung giao diện đã được bản địa hóa.

theme.liquid

<a class="ipin-support-btn" href="/support">Support</a>
<script>
document.addEventListener("DOMContentLoaded", async function () {
  const buttons = document.querySelectorAll(".ipin-support-btn");
  const map = { TW: "/support/tw", US: "/support/us", JP: "/support/jp" };
  try {
    // Gọi /info ở trình duyệt để nhận diện IP người truy cập.
    const info = await fetch("https://my.ipin.io/info").then(res => res.json());
    buttons.forEach(btn => btn.href = map[info.country] || "/support");
  } catch (e) {
    // Giữ giá trị mặc định khi request API thất bại.
    buttons.forEach(btn => btn.href = "/support");
  }
});
</script>

Khuyến nghị SEO và UX

Nội dung mặc định cần đầy đủ và dễ đọc, còn nội dung theo vùng là lớp tăng cường. Công cụ tìm kiếm vẫn crawl nội dung ổn định, người dùng vẫn dùng được khi API lỗi.

Lỗi thường gặp

Các vấn đề sau ảnh hưởng đến độ chính xác của bài viết, khả năng dùng code và độ tin cậy khi giải thích API.

• Các vấn đề sau ảnh hưởng đến độ chính xác của bài viết, khả năng dùng code và độ tin cậy khi giải thích API.
• Nội dung mặc định cần đầy đủ và dễ đọc, còn nội dung theo vùng là lớp tăng cường. Công cụ tìm kiếm vẫn crawl nội dung ổn định, người dùng vẫn dùng được khi API lỗi.
• Trước khi triển khai, hãy xác định bên gửi request: request từ server trả IP server, request từ trình duyệt trả IP người truy cập.
• Các ngữ cảnh này thể hiện giá trị của giao diện thông tin IP và phân biệt rõ IP server với IP người truy cập.

Tổng kết

Lệnh gọi phía trình duyệt kiểm tra IP người truy cập và trả về IP, quốc gia, khu vực, thành phố của họ. Cách này phù hợp để hiển thị nội dung theo vùng.

Câu hỏi thường gặp

Các câu hỏi dưới đây được viết riêng cho bài này và liên quan trực tiếp đến cách triển khai.