เครื่องมือแก้ไขโค้ดใบเสร็จที่พิมพ์สำหรับ Shopify POS

คุณสามารถปรับแต่งใบเสร็จฉบับพิมพ์ได้โดยใช้ตัวแก้ไขโค้ดในส่วนผู้ดูแล Shopify ของคุณ ไฟล์ที่ประกอบกันเป็นใบเสร็จของคุณจะมี Liquid ซึ่งเป็นภาษาเทมเพลตของ Shopify อยู่ ด้วยตัวแก้ไขโค้ด คุณสามารถสร้างการปรับแต่งขั้นสูงโดยใช้ HTML, CSS และ Liquid ได้มากกว่าการใช้ตัวแก้ไขแบบรูปภาพ

คุณสามารถเปลี่ยนเทมเพลตใบเสร็จและเทมเพลตส่วนที่ใช้บนใบเสร็จที่พิมพ์ของคุณได้ ไฟล์เทมเพลตใบเสร็จคือประเภทของใบเสร็จที่คุณสามารถพิมพ์ได้ในร้านค้าของคุณ ส่วนคือองค์ประกอบต่างๆ ของใบเสร็จ เช่น ส่วนหัวหรือส่วนท้าย ส่วนต่างๆ สามารถนำไปใช้ซ้ำกับใบเสร็จหลายใบได้

ข้อควรพิจารณาสำหรับการใช้เครื่องมือแก้ไขโค้ดใบเสร็จ

ก่อนที่คุณจะใช้เครื่องมือแก้ไขโค้ดใบเสร็จ โปรดตรวจสอบข้อควรพิจารณาต่อไปนี้

ข้อจำกัดสิทธิ์การเข้าถึง

• คุณสามารถใช้เครื่องมือแก้ไขโค้ดได้จากส่วนผู้ดูแล Shopify บนเดสก์ท็อปเท่านั้น
• เครื่องมือแก้ไขโค้ดไม่มีให้บริการสำหรับตำแหน่งที่ตั้ง POS ในประเทศอิตาลี

ส่วนที่จะมีการใช้การเปลี่ยนแปลง

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

ภาษาของโค้ด

• ไฟล์ที่ประกอบกันเป็นใบเสร็จของคุณจะมี Liquid ซึ่งเป็นภาษาเทมเพลตของ Shopify อยู่ ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้Liquid
• หากต้องการแก้ไขเทมเพลตในตัวแก้ไขโค้ดใบเสร็จ คุณจำเป็นต้องมีความคุ้นเคยกับ HTML, CSS และ Liquid ฝ่ายช่วยเหลือด้านธีมของ Shopify สามารถช่วยเหลือในการปรับเปลี่ยนเล็กน้อยได้ภายใต้ขอบเขตของนโยบายการออกแบบของ Shopify

ข้อจำกัดด้านการปรับแต่ง

• คุณไม่สามารถดูตัวอย่างใบเสร็จในขนาดเครื่องพิมพ์ต่างๆ ผ่านเครื่องมือแก้ไขโค้ดได้ หากต้องการดูตัวอย่างตามขนาดเครื่องพิมพ์ ให้ใช้เครื่องมือแก้ไขแบบวิชวล
• คำอธิบายสินค้าไม่พร้อมให้ใช้งานเป็นตัวแปรในเทมเพลตใบเสร็จ และไม่สามารถเพิ่มลงในใบเสร็จที่พิมพ์ออกมาได้

การบำรุงรักษาเทมเพลต

• หากคุณปรับแต่งใบเสร็จด้วยเครื่องมือแก้ไขโค้ดใบเสร็จ เทมเพลตที่มีอยู่ของคุณอาจขาดคุณสมบัติใหม่ไป เช่น selling_plan_name หากต้องการเพิ่มคุณสมบัติใหม่ล่าสุดที่ใช้ได้ลงในเทมเพลตของคุณ คุณจะต้องรีเซ็ตเทมเพลตใบเสร็จให้เป็นค่าเริ่มต้น การรีเซ็ตเทมเพลตใบเสร็จให้เป็นค่าเริ่มต้นจะลบการปรับแต่งใดๆ ที่คุณได้ทำไว้ โปรดจดบันทึกโค้ดที่คุณปรับแต่งไว้ก่อนทำการรีเซ็ต หลังจากที่คุณรีเซ็ตเทมเพลตแล้ว คุณจะต้องใช้การปรับแต่งของคุณด้วยตนเองอีกครั้ง

เข้าถึงตัวแก้ไขโค้ด

คุณสามารถแก้ไขเทมเพลตของคุณได้โดยใช้ตัวแก้ไขโค้ด คุณต้องสลับไปใช้ตัวแก้ไขโค้ดจากตัวแก้ไขแบบรูปภาพที่เป็นค่าเริ่มต้นก่อน และคุณสามารถสลับกลับไปใช้ตัวแก้ไขแบบรูปภาพได้ทุกเมื่อ

ขั้นตอนในการสลับระหว่างตัวแก้ไขจะแตกต่างกันเล็กน้อย ขึ้นอยู่กับว่าตำแหน่งที่ตั้ง POS ทั้งหมดของคุณมีคุณสมบัติใช้งานตัวแก้ไขโค้ดได้หรือไม่ หรือมีเพียงบางตำแหน่งที่ตั้ง POS เท่านั้นที่ใช้งานได้ ตัวอย่างเช่น บางตำแหน่งที่ตั้ง POS ของคุณไม่ได้ใช้ POS Pro หรือตั้งอยู่ในอิตาลีหรือฝรั่งเศส

ขั้นตอน

ใช้ไฟล์แบบกำหนดเองในเทมเพลตใบเสร็จของคุณ

คุณสามารถใช้ไฟล์ต่างๆ เช่น แอสเซทรูปภาพ ที่คุณอัปโหลดไปยังส่วนผู้ดูแล Shopify เพื่อปรับแต่งใบเสร็จที่พิมพ์ของคุณได้

คุณจำเป็นต้องอัปโหลดไฟล์ไปยังส่วนผู้ดูแล Shopify ของคุณก่อนจึงจะสามารถใช้ไฟล์ดังกล่าวในใบเสร็จฉบับพิมพ์ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการอัปโหลดไฟล์

ขั้นตอน

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ เนื้อหา > ไฟล์

2. ข้างไฟล์ที่คุณต้องการจะรวมไว้ในโค้ดใบเสร็จที่พิมพ์ของคุณ ให้คลิก เพื่อคัดลอกลิงก์

3. ไปยังตัวแก้ไขโค้ด

4. รวมลิงก์แอสเซทไว้ในเทมเพลตของคุณ

รีเซ็ตเทมเพลตใบเสร็จของคุณเป็นค่าเริ่มต้น

คุณสามารถรีเซ็ตเทมเพลตใบเสร็จให้เป็นเวอร์ชันเริ่มต้นได้โดยใช้ตัวแก้ไขโค้ด

ขั้นตอน

ตัวแปร Liquid ที่ใช้ได้ในตัวแก้ไขโค้ดใบเสร็จ

คุณสามารถใช้Liquid เพื่อปรับแต่งเทมเพลตใบเสร็จฉบับพิมพ์และประเภทใบเสร็จของคุณได้

อ็อบเจกต์ข้อมูลต่อไปนี้พร้อมใช้งานสำหรับตัวแก้ไขโค้ดใบเสร็จ

อ็อบเจกต์ใบเสร็จ

shop

location

order

return

gift_card

อ็อบเจกต์คำสั่งซื้อ

id

created_at

source_identifier

change_due

balance_due

name

note

line_items

subtotal_price

total_price

total_tip_received

discounts

transactions

taxes_included

tax_lines

customer

shipping_address

shipping_groups

อ็อบเจกต์การคืนสินค้า

name

created_at

is_unverified

is_exchange

exchange_type

return_discount

return_subtotal

return_total

exchange_subtotal

exchange_total

total_cash_rounding_adjustment

total_adjusted_amount

net_total

return_line_items

exchange_line_items

return_tax_lines

exchange_tax_lines

shipping_refund_amount

tip_refund_amount

transactions

อ็อบเจกต์กลุ่มการจัดส่ง

destination

products

อ็อบเจกต์สินค้าเฉพาะรายการ

id

name

variant_title

price

is_gift_card

discount

total_price

selling_plan_name

tax_rates

custom_attributes

variant_title

variant_id

variant_metafields

staff_member_description

product_metafields

อ็อบเจกต์สินค้าเฉพาะรายการที่ส่งคืน

รวมทุกอย่างในอ็อบเจกต์สินค้าเฉพาะรายการพร้อมด้วยคุณสมบัติต่อไปนี้

return_reason

return_reason_note

ตัวกรอง Liquid ที่มีให้ใช้งานในเครื่องมือแก้ไขโค้ดใบเสร็จ

คุณสามารถใช้ตัวกรอง Liquid เพื่อปรับเปลี่ยนข้อมูลในเทมเพลตใบเสร็จของคุณ ตัวอย่างเช่น คุณสามารถเปลี่ยนรูปแบบของสกุลเงินหรือการใช้อักษรตัวพิมพ์ใหญ่ของข้อความที่ระบุ เช่น รหัสภาษี

หากต้องการใช้ตัวกรอง ให้เพิ่มอักขระไปป์ | แล้วตามด้วยตัวกรองภายในบล็อกโค้ด Liquid ที่อยู่ระหว่างวงเล็บปีกกาสองชั้น {{ }} โดยสามารถใช้ตัวกรองได้กับบล็อกของโค้ด Liquid เท่านั้น

ในตัวอย่างต่อไปนี้ ตัวกรองจะปรับรหัสภาษีจากตัวพิมพ์เล็กเป็นตัวพิมพ์ใหญ่

{{ tax_line.title | upcase }}

ในบล็อกโค้ดตัวอย่าง product คืออ็อบเจกต์ title คือคุณสมบัติของอ็อบเจกต์ และ upcase คือตัวกรองที่ใช้ ตัวกรอง upcase จะเปลี่ยนรูปแบบตัวพิมพ์ของค่า tax_line.title เป็นตัวพิมพ์ใหญ่ ตัวอย่างเช่น หาก tax_line.title มีค่าเป็น Hst ตัวกรอง upcase จะเปลี่ยนค่าดังกล่าวเป็น HST

โปรดดูรายละเอียดเกี่ยวกับวิธีใช้ตัวกรอง Liquid ได้จากส่วนตัวกรองในเอกสารอ้างอิง Liquid สำหรับธีม Shopify

ตัวกรองต่อไปนี้พร้อมให้ใช้งานในตัวแก้ไขโค้ดใบเสร็จ

t

money

escape

barcode

qrcode

ตัวอย่างการปรับแต่งโค้ดเทมเพลตใบเสร็จสำหรับพิมพ์

คุณสามารถใช้ Liquid เพื่อเพิ่มข้อความตามเงื่อนไขได้ ฟังก์ชันการทำงานนี้คล้ายกับการบันทึกไปยังตำแหน่งที่ตั้งเดียวด้วยตัวแก้ไขแบบรูปภาพ ตัวอย่างเช่น ธุรกิจของคุณเริ่มต้นจากตำแหน่งที่ตั้งเดียวและตอนนี้คุณมีตำแหน่งที่ตั้งใหม่ๆ หลายแห่ง คุณจึงต้องการไฮไลท์ร้านค้าดั้งเดิมของคุณบนใบเสร็จฉบับพิมพ์

คุณสามารถเพิ่มข้อความที่ปรับแต่งเองไปยังเทมเพลต header.liquid ในโฟลเดอร์ Sections ของตัวแก้ไขโค้ด และใช้ Liquid เพื่อแสดงข้อความสำหรับตำแหน่งที่ตั้งหลักของคุณเท่านั้น

โค้ดต่อไปนี้จะตรวจสอบชื่อตำแหน่งที่ตั้ง ในกรณีนี้คือตำแหน่งที่ตั้งดั้งเดิมของคุณที่ชื่อว่า 'Home' และจะแสดงข้อความ “Welcome to our original store, opened in 1972.” หากตำแหน่งที่ตั้งมีชื่อตรงกัน ใบเสร็จที่พิมพ์จากตำแหน่งที่ตั้งอื่นๆ ของคุณจะแสดงข้อความ “Welcome to our store.” แทน

{% if location.name == 'Home' %}
  Welcome to our original store, opened in 1972.
{% else %}
  Welcome to our store.
{% end %}

ดูตัวอย่างการเปลี่ยนแปลงโค้ดในตัวแก้ไขโค้ด

คุณสามารถดูตัวอย่างการเปลี่ยนแปลงใบเสร็จที่พิมพ์ของคุณได้ในเครื่องมือแก้ไขรหัส POS ในส่วนผู้ดูแล Shopify

หน้าต่างแสดงตัวอย่างจะไฮไลต์ดีไซน์หรือส่วนของใบเสร็จที่ได้รับผลกระทบโดยขึ้นอยู่กับไฟล์ Liquid ที่คุณเลือก โดยค่าเริ่มต้น หน้าต่างแสดงตัวอย่างจะแสดงเนื้อหาสำหรับคำสั่งซื้อจาก POS ล่าสุดของคุณ คุณสามารถเลือกคำสั่งซื้อที่ต้องการเพื่อใช้เป็นเนื้อหาใบเสร็จในหน้าต่างแสดงตัวอย่างสำหรับไฟล์ Liquid ทุกไฟล์ ยกเว้นไฟล์ gift-card.liquid ซึ่งจะแสดงเพียงตำแหน่งที่ตั้งต่างๆ เป็นตัวเลือกในการแสดงตัวอย่าง

ขั้นตอน