Widget bản đồ cho Shopify

Vì sao một section trong theme tốt hơn app Shopify

Hầu hết các mục “map app” đều đòi bạn cài đặt, cấp quyền truy cập dữ liệu cửa hàng và trả phí hằng tháng — cho thứ rốt cuộc chỉ là một iframe. Đây là lựa chọn trung thực: một tệp Liquid duy nhất nằm trong theme của chính bạn. Nó không xin quyền nào với cửa hàng, không thêm script vào trang, không gửi dữ liệu về đâu cả và không tốn đồng nào. Yêu cầu bên ngoài duy nhất mà khách của bạn tạo ra là iframe bản đồ chạy trong sandbox từ whatismylocation.ai cùng các ô bản đồ OpenStreetMap — không cookie của Google, không phiền toái banner đồng ý. Và nếu dịch vụ có lúc nào đó không truy cập được, iframe sẽ lặng lẽ không hiện mà không làm hỏng trang. Xóa tệp section đi là mọi dấu vết biến mất.

Tải whatismylocation-shopify-sections.zip — cả hai section kèm một tệp README, chỉ vài kilobyte. Sau đó làm theo các bước cài đặt bên dưới.

Cài đặt trong khoảng hai phút

Hai phần: dán tệp một lần, rồi dùng nó như bất kỳ section có sẵn nào.

Dán tệp: trang quản trị Shopify ▸ Online Store ▸ Themes ▸ ⋯ ▸ Edit code. Ở thanh bên trái, trong mục Sections bấm Add a new section, đặt tên là whatismylocation-map, xóa nội dung mẫu và dán toàn bộ nội dung của whatismylocation-map.liquid — khối {% schema %} ở cuối tệp chính là thứ tạo nên bảng cài đặt, nên phải dán kèm. Lưu lại.

Dùng nó: mở trình chỉnh sửa theme (Customize), đi tới trang liên hệ (hoặc trang bất kỳ), bấm Add section rồi chọn WhatIsMyLocation Map. Bảng cài đặt hiện ra ở bên trái; cho tới khi bạn nhập tọa độ, section sẽ hiện một chỗ giữ chỗ thân thiện cho biết chính xác nó cần gì.

Lấy tọa độ từ trình tạo mã nhúng bản đồ — nhập địa chỉ của bạn, rồi kéo ghim vào đúng lối vào trước khi sao chép. Section dùng đúng tọa độ cuối cùng của bạn, nên ghim không bao giờ bị lệch về sau.

Mỗi chi nhánh là một block

Cửa hàng nhiều địa điểm được hưởng phần hay nhất: trong trình chỉnh sửa theme, mỗi chi nhánh là một block — bấm Add branch, điền vĩ độ, kinh độ, nhãn và địa chỉ, rồi kéo để sắp xếp lại thứ tự (tối đa 10). Bản đồ tự khớp khung hiển thị mọi chi nhánh, các ghim được đánh số trùng với danh sách, và khách xem sẽ thấy bảng địa điểm — dạng accordion cạnh bản đồ trên máy tính, dạng dải thẻ vuốt ngang trên điện thoại, kèm chỉ đường cho từng chi nhánh và biểu tượng tùy chọn “Mở trong Google Maps / Apple Maps”. Bố cục bảng (auto, bên cạnh, bên dưới, không có) và hiệu ứng chuyển (mượt, mờ dần, sinh động, không — khách bật chế độ giảm chuyển động luôn nhận bản chuyển tức thì) là các menu thả xuống trong cùng bảng đó.

Toàn bộ tùy chọn, một bảng

Cũng trong tệp zip đó có whatismylocation-widget.liquid — widget tìm vị trí của tôi dưới dạng section thứ hai (tông màu, chế độ gọn/đầy đủ, chiều cao), dùng cho trang giao hàng và trang tìm cửa hàng.

Xử lý sự cố

Section không xuất hiện trong Add section. Tệp phải nằm trong Sections (không phải Snippets hay Assets) và phần dán phải là toàn bộ tệp — nếu khối {% schema %} bị cắt mất, Shopify sẽ từ chối hoặc ẩn section. Hãy dán lại toàn bộ tệp rồi lưu.

Lỗi “Invalid schema” khi lưu. Bạn dán thiếu — thường gặp nhất là thiếu dấu ngoặc nhọn đóng do bôi đen tới cuối nhưng hụt một dòng. Hãy dán lại tệp đầy đủ; đừng tự sửa tay phần schema trừ khi bạn biết Liquid.

Bản đồ bị xám. Các ô bản đồ đến từ tile.openstreetmap.org; trình chặn quảng cáo quá mạnh tay hoặc mạng công ty có thể chặn chúng. Hãy thử trên điện thoại dùng dữ liệu di động — gần như chắc chắn khách của bạn vẫn xem bình thường.

Ghim không nằm đúng cửa của tôi. Hãy tạo lại tọa độ tại trình tạo, kéo ghim vào đúng lối vào, rồi dán giá trị mới vào phần cài đặt của section.

Chỉnh sửa không hiện trên cửa hàng đang chạy. Bạn đã sửa một theme nháp hoặc chưa xuất bản — hãy sửa trên theme đã xuất bản (hoặc xuất bản theme bạn vừa sửa). Bản thân widget không có gì để lưu vào bộ nhớ đệm.