วิดเจ็ตแผนที่สำหรับ Shopify

ทำไมเซกชันในธีมถึงดีกว่าแอป Shopify

รายการ “แอปแผนที่” ส่วนใหญ่ต้องการให้คุณติดตั้ง ขอสิทธิ์เข้าถึงข้อมูลร้านของคุณ และเก็บค่าบริการรายเดือน — เพื่อสิ่งที่สุดท้ายแล้วก็คือ iframe อันเดียว นี่คือทางเลือกที่ตรงไปตรงมา: ไฟล์ Liquid ไฟล์เดียวที่อยู่ในธีมของคุณเอง ไม่ขอสิทธิ์ใด ๆ ในร้าน ไม่เพิ่มสคริปต์ลงในหน้าเว็บ ไม่ส่งข้อมูลกลับไปที่ใด และไม่มีค่าใช้จ่าย คำขอภายนอกอย่างเดียวที่ผู้เข้าชมของคุณส่งออกไป คือ iframe แผนที่แบบแซนด์บ็อกซ์จาก whatismylocation.ai และไทล์ OpenStreetMap ของมัน — ไม่มีคุกกี้ Google ไม่มีภาระเรื่องแบนเนอร์ขอความยินยอม และถ้าบริการเข้าไม่ได้ขึ้นมา iframe จะล้มเหลวเงียบ ๆ โดยไม่ทำให้หน้าเว็บของคุณพัง ลบไฟล์เซกชันทิ้ง แล้วทุกร่องรอยก็หายไป

ดาวน์โหลด whatismylocation-shopify-sections.zip — ทั้งสองเซกชันพร้อม README ขนาดไม่กี่กิโลไบต์ จากนั้นทำตามขั้นตอนติดตั้งด้านล่าง

ติดตั้งในราวสองนาที

แบ่งเป็นสองส่วน: วางไฟล์ครั้งเดียว แล้วใช้งานเหมือนเซกชันสำเร็จรูปทั่วไป

วางไฟล์: ผู้ดูแล Shopify ▸ Online Store ▸ Themes ▸ ⋯ ▸ Edit code ในแถบด้านซ้ายใต้ Sections คลิก Add a new section ตั้งชื่อว่า whatismylocation-map ลบเนื้อหาตัวอย่างออก แล้ววางเนื้อหาทั้งหมดของ whatismylocation-map.liquid — บล็อก {% schema %} ที่อยู่ด้านล่างคือส่วนที่สร้างแผงตั้งค่าของคุณ จึงต้องติดมาด้วย แล้วบันทึก

ใช้งาน: เปิดตัวแก้ไขธีม (Customize) ไปที่หน้าติดต่อเรา (หรือหน้าใดก็ได้) กด Add section แล้วเลือก WhatIsMyLocation Map แผงตั้งค่าจะปรากฏทางซ้าย จนกว่าคุณจะใส่พิกัด เซกชันจะแสดงข้อความตัวอย่างที่บอกชัดเจนว่าต้องการอะไร

รับพิกัดได้จากตัวสร้างแผนที่ฝัง — พิมพ์ที่อยู่ของคุณ แล้วลากหมุดไปวางที่ทางเข้าก่อนคัดลอก เซกชันจะใช้พิกัดสุดท้ายของคุณ หมุดจึงไม่มีทางเลื่อนไปไหนภายหลัง

สาขาคือบล็อก

ร้านที่มีหลายสาขาจะได้ส่วนที่ดีที่สุด: ในตัวแก้ไขธีม แต่ละสาขาคือบล็อก — กด Add branch ใส่ละติจูด ลองจิจูด ชื่อกำกับ และที่อยู่ แล้วลากเพื่อจัดลำดับใหม่ได้ (สูงสุด 10 สาขา) แผนที่จะย่อขยายให้พอดีทุกสาขาโดยอัตโนมัติ หมุดมีหมายเลขตรงกับรายการ และผู้เข้าชมจะเห็นแผงรายการสถานที่ — เป็นแบบหีบเพลงข้างแผนที่บนเดสก์ท็อป และเป็นแถบการ์ดแบบปัดได้บนมือถือ พร้อมเส้นทางแยกตามสาขา และไอคอน “เปิดใน Google Maps / Apple Maps” ถ้าต้องการ เลย์เอาต์ของแผง (auto, ด้านข้าง, ด้านล่าง, ไม่มี) และแอนิเมชันตอนสลับ (นุ่มนวล, จางหาย, มีชีวิตชีวา, ไม่มี — ผู้เข้าชมที่ตั้งค่าลดการเคลื่อนไหวจะได้แบบทันทีเสมอ) เป็นดรอปดาวน์อยู่ในแผงเดียวกัน

ทุกการตั้งค่า อธิบายครบ

ไฟล์ zip เดียวกันยังมี whatismylocation-widget.liquid — วิดเจ็ตค้นหาตำแหน่งของฉัน เป็นเซกชันที่สอง (ธีม, โหมดกะทัดรัด/เต็ม, ความสูง) สำหรับหน้าจัดส่งและหน้าค้นหาสาขา

แก้ปัญหา

เซกชันไม่ปรากฏใน Add section ไฟล์ต้องอยู่ใน Sections (ไม่ใช่ Snippets หรือ Assets) และต้องวางทั้งไฟล์ — ถ้าบล็อก {% schema %} ขาดหายไป Shopify จะปฏิเสธหรือซ่อนเซกชันนั้น ให้วางไฟล์ทั้งไฟล์ใหม่แล้วบันทึก

ขึ้นข้อผิดพลาด “Invalid schema” ตอนบันทึก เกิดจากวางไม่ครบ ส่วนใหญ่คือปีกกาปิดหายไปเพราะเลือกข้อความถึงบรรทัดสุดท้ายไม่ครบ ให้วางไฟล์ทั้งไฟล์อีกครั้ง และอย่าแก้ schema ด้วยมือถ้าคุณไม่รู้จัก Liquid

แผนที่เป็นสีเทา ไทล์แผนที่มาจาก tile.openstreetmap.org ตัวบล็อกโฆษณาที่เข้มงวดหรือเครือข่ายขององค์กรอาจบล็อกไว้ ลองเช็คบนมือถือด้วยเน็ตมือถือ — ลูกค้าของคุณเกือบทั้งหมดเห็นแผนที่ได้ตามปกติ

หมุดไม่ได้อยู่ตรงหน้าประตูร้าน สร้างพิกัดใหม่ที่ตัวสร้าง ลากหมุดไปวางที่ทางเข้า แล้ววางค่าใหม่ลงในการตั้งค่าของเซกชัน

แก้ไขแล้วไม่ขึ้นบนร้านจริง คุณแก้ในธีมฉบับร่างหรือธีมที่ยังไม่เผยแพร่ ให้แก้ในธีมที่เผยแพร่อยู่ (หรือเผยแพร่ธีมที่คุณแก้) ตัววิดเจ็ตเองไม่มีอะไรให้แคช