สร้างธีม Shopify ด้วยเอ็นจิ้น Liquid

เนื้อหา

• ไฟล์ธีมและโฟลเดอร์
• การแมป URL กับเทมเพลต
• ของเหลว: พื้นฐาน
• ทำความเข้าใจกับ product.liquid
• เอาท์พุท
• ตรรกะ
• ฟิลเตอร์
• อะไรต่อไป?
• แหล่งข้อมูลและแรงบันดาลใจเพิ่มเติม

ในช่วงสองสามสัปดาห์ที่ผ่านมาฉันได้สร้างธีม Shopify สำหรับ Viewport Industries ซึ่งเป็น บริษัท Elliot Jay Stocks และฉันก่อตั้งขึ้นเมื่อปีที่แล้ว เราเลือก Shopify ด้วยเหตุผลหลายประการ:

1. ช่วยให้เราขายสินค้าทั้งแบบดิจิทัลและแบบจับต้องได้
2. โฮสต์เต็มจึงไม่ต้องกังวลกับเซิร์ฟเวอร์
3. รองรับเกตเวย์การชำระเงินจำนวนมากที่รวมเข้ากับธนาคารของเราได้เป็นอย่างดี
4. ตามธีมซึ่งหมายความว่าเราสามารถนำ HTML, CSS และ JavaScript ของไซต์ที่มีอยู่มาใช้ซ้ำได้อย่างง่ายดาย

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

หากคุณเคยใช้ Smarty, ERB หรือ Twig สิ่งต่อไปนี้จะเป็นที่คุ้นเคยสำหรับคุณ ถ้าไม่ไม่ต้องกังวลมันเป็นเพียงเรื่องของการเรียนรู้กฎง่ายๆสองสามข้อ เมื่อคุณเพิ่มทักษะ Liquid ในชุดเครื่องมือการพัฒนาเว็บแล้วคุณจะสามารถเริ่มสร้างธีมสำหรับลูกค้าได้ในเวลาไม่นาน

ไฟล์ธีมและโฟลเดอร์

ธีม Shopify ไม่ใช่ไฟล์จำนวนมาก (ไฟล์ HTML ที่มีนามสกุล. liquid, CSS, JS, รูปภาพและอื่น ๆ ) และโฟลเดอร์ ธีมสามารถดูและใช้งานได้ตามที่คุณต้องการ: ไม่มีข้อ จำกัด ใด ๆ โครงสร้างพื้นฐานของธีมมีดังนี้

• สินทรัพย์
• config
• เค้าโครง
• theme.liquid
• ตัวอย่าง
• เทมเพลต
• 404. ของเหลว
• บทความของเหลว
• blog.liquid
• cart.liquid
• collection.liquid
• ดัชนีของเหลว
• page.liquid
• product.liquid
• search.liquid

ด้วยไฟล์เหล่านี้คุณสามารถสร้างธีมพื้นฐานที่สุดได้ แน่นอนคุณอาจต้องการเพิ่ม CSS, JavaScript และรูปภาพบางส่วน คุณต้องใส่สิ่งเหล่านี้ในโฟลเดอร์เนื้อหา (เป็นที่น่าสังเกตว่าขณะนี้คุณไม่ได้รับอนุญาตให้ใช้โฟลเดอร์ย่อยภายในโฟลเดอร์เนื้อหาของคุณ)

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการทำงานของธีมและหากต้องการทราบเกี่ยวกับโฟลเดอร์ config และ snippets ฉันขอแนะนำให้อ่าน Theme จาก Scratch และ Theme Settings ใน Shopify Wiki

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

การแมป URL กับเทมเพลต

ธีม Shopify ทำงานโดยการแมป URL ปัจจุบันกับเทมเพลตเฉพาะ ตัวอย่างเช่นหากเรากำลังดูผลิตภัณฑ์ที่มี URL ต่อไปนี้ ...

http://www.unitedpixelworkers.com/products/indianapolis

... แล้ว Shopify จะรู้จักใช้ไฟล์ product.liquid แม่แบบ ด้วยเหตุนี้คุณจึงควรใช้เฉพาะชื่อไฟล์ที่ระบุไว้ด้านบนสำหรับเทมเพลตของคุณ

นอกจาก Shopify จะทราบว่าเทมเพลตใดที่จะแสดงโดยสัมพันธ์กับ URL ปัจจุบันแล้วยังมีตัวแปรที่เฉพาะเจาะจงจำนวนมากให้เราใช้งานอีกด้วย สิ่งเหล่านี้เรียกว่า "ตัวแปรเทมเพลต" และช่วยให้เราสามารถแสดงข้อมูลในเทมเพลตของเราได้

ตัวอย่างเช่นในเทมเพลต product.liquid ของเราเราสามารถเข้าถึงชื่อ aptly ได้ ผลิตภัณฑ์ ตัวแปร. ซึ่งหมายความว่าเราสามารถแสดงชื่อคำอธิบายราคาและความพร้อมใช้งานของผลิตภัณฑ์ของเราในเทมเพลตของเราได้ เราจะใช้การรวมกันของตัวแปร Liquid และเทมเพลตเพื่อเติมข้อมูลเทมเพลตของเราด้วยข้อมูลที่เกี่ยวข้องกับผลิตภัณฑ์ของเรา

สำหรับรายการตัวแปรเทมเพลตที่มีทั้งหมดโปรดไปที่เอกสารข้อมูลโกง Shopify ของ Mark Dunkley

ของเหลว: พื้นฐาน

Liquid มาที่นี่เพื่อทำให้ชีวิตของเราในฐานะนักออกแบบธีมง่ายขึ้น วิธีหลักวิธีหนึ่งคือการใช้เลย์เอาต์ เลย์เอาต์เหมาะอย่างยิ่งสำหรับการรวมองค์ประกอบของหน้าทั่วไปเช่นส่วนหัวการนำทางหลักส่วนท้ายและอื่น ๆ

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

ฉันไม่เห็นไฟล์ theme.liquid ของ United Pixelworkers แต่คุณคงนึกภาพออกว่ามันมีมาร์กอัปสำหรับพื้นที่ที่แสดงเป็นสีแดงด้านล่าง

นี่คือลักษณะพื้นฐานของเค้าโครง theme.liquid:

1. ! DOCTYPE html>
2. html>
3. หัว>
4. {{content_for_header}}
5. title> ชื่อหน้าไปที่นี่ / ชื่อ>
6. / หัว>
7. ร่างกาย>
8. {{content_for_layout}}
9. / ร่างกาย>
10. / html>

คุณจะสังเกตเห็นสองวลีที่อยู่ในวงเล็บปีกกาคู่: {{content_for_header}} และ {{content_for_layout}}. นี่คือตัวอย่างแรกของเราในการใช้งาน Liquid

Shopify มักจะใช้ {{content_for_header}} เพื่อเพิ่มไฟล์เฉพาะในส่วน head> ของเอกสาร: ตัวอย่างเช่นการเพิ่มในโค้ดติดตาม {{content_for_layout}} คือที่ที่เนื้อหาของเทมเพลตที่แมป URL ของเราจะปรากฏ ตัวอย่างเช่นหากเรากำลังดูหน้าผลิตภัณฑ์ไฟล์ product.liquid ของเราจะแทนที่ {{content_for_layout}} ในไฟล์เลย์เอาต์ของเรา

ทำความเข้าใจกับ product.liquid

ตอนนี้เราได้ดำเนินการผ่านพื้นฐานของการจัดวางแล้วก็ได้เวลาดูเทมเพลตร้านค้าล้วนเกี่ยวกับผลิตภัณฑ์ดังนั้นเรามาดูกันดีกว่า product.liquid.

นี่คือตัวอย่างที่เรียบง่าย แต่ใช้งานได้ของเทมเพลต product.liquid

1. h2> {{product.title}} / h2>
2. {{product.description}}
3. {% if product.available%}
4. form action = "/ cart / add" method = "post">
5. เลือก id = "product-select" name = ’id’>
6. {% สำหรับตัวแปรใน product.variants%}
7. option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
8. {% endfor%}
9. / เลือก>
10. input type = "submit" name = "add" value = "Add to cart" id = "purchase" />
11. / form>
12. {% else%}
13. p> ผลิตภัณฑ์นี้ไม่มีจำหน่าย / p>
14. {% endif%}

มีแนวคิดหลักหลายประการเกี่ยวกับ Liquid ในการทำงานที่นี่ มาดูกันตามลำดับ

เอาท์พุท

บรรทัดแรกของโค้ดประกอบด้วยวลี {{product.title}}. เมื่อแสดงผลสิ่งนี้จะแสดงชื่อของผลิตภัณฑ์ซึ่งตอนนี้คุณทราบแล้วว่าถูกกำหนดโดย URL ในตัวอย่าง United Pixelworkers ด้านล่างชื่อผลิตภัณฑ์คือ "Indianapolis"

Liquid ใช้รูปแบบไวยากรณ์ dot ในกรณีนี้ {{product.title}} จะเท่ากับตัวแปรเทมเพลตผลิตภัณฑ์และแอตทริบิวต์ title เราสามารถแสดงคำอธิบายผลิตภัณฑ์ในลักษณะเดียวกันโดยใช้ {{product.description}}.

สิ่งนี้เรียกว่า Liquid ในรูปแบบ เอาท์พุท. ผลลัพธ์ทั้งหมดแสดงโดยวงเล็บปีกกาคู่ดังนี้: {{your_output}}

ตรรกะ

ในบรรทัดถัดไปของโค้ดคุณจะสังเกตเห็นข้อความในวงเล็บปีกกาตามด้วย%: ในกรณีนี้ {% if product.available%}. นี่เป็นอีกหนึ่งแนวคิดที่สำคัญใน Liquid ที่เรียกว่า ตรรกะ. ยิ่งไปกว่านั้นคุณจะสังเกตเห็น {% else%} และสุดท้ายคือคำสั่ง {% endif%}

นี้ ถ้าคำสั่ง ช่วยให้เราสามารถกำหนดสิ่งที่แม่แบบของเราจะแสดงโดยขึ้นอยู่กับเงื่อนไขอย่างน้อยหนึ่งเงื่อนไข: ในกรณีนี้ผลิตภัณฑ์ของเราจะพร้อมใช้งานหรือไม่ กล่าวได้อย่างมีประสิทธิภาพว่า“ หากมีผลิตภัณฑ์ของเราให้แสดงข้อมูลที่เกี่ยวข้อง มิฉะนั้นจะแสดงข้อความแจ้งให้ผู้ใช้ทราบว่าสินค้าหมด "

คำสั่งลอจิกทั้งหมดใน Liquid ใช้สัญกรณ์เปอร์เซ็นต์ปีกกานั่นคือ {% if …%} อย่าลืมปิดงบของคุณอย่างเหมาะสมมิฉะนั้นคุณจะประสบปัญหา ตัวอย่างเช่น:

1. {% if product.available%}
2. แสดงปุ่มเพิ่มลงในรถเข็นที่นี่
3. {% else%}
4. แสดงข้อความว่าสินค้าจะวางจำหน่ายครั้งต่อไปเมื่อใด
5. {% endif%}

ฟิลเตอร์

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

เมื่อดูตัวอย่าง product.liquid ด้านบนคุณจะสังเกตเห็น {money}. ตัวแปรคือคำที่ใช้อธิบายรูปแบบของผลิตภัณฑ์ตัวอย่างเช่นสีและขนาดที่แตกต่างกัน สิ่งที่น่าสนใจคือเราใช้ตัวกรองเพื่อเปลี่ยนผลลัพธ์ของราคา - ในกรณีนี้โดยใช้ตัวกรองเงิน ซึ่งจะส่งผลให้สัญลักษณ์สกุลเงินของร้านค้าถูกเพิ่มไว้ด้านหน้าราคา

ตัวกรองอื่น ๆ ได้แก่ strip_htmlซึ่งจะตัดแท็ก HTML ออกจากข้อความและ ucase, ซึ่งจะแปลงเป็นตัวพิมพ์ใหญ่

คุณยังสามารถรวมตัวกรองเข้าด้วยกัน ตัวอย่างเช่น:

1. {article.content}

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

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

1. {asset_url}

การใช้สิ่งนี้ในธีม Shopify ของเราจะส่งผลให้องค์ประกอบ img ต่อไปนี้แสดงผลในเทมเพลตของเรา:

1. img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "โลโก้เว็บไซต์" />

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

อะไรต่อไป?

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

แหล่งข้อมูลและแรงบันดาลใจเพิ่มเติม

• บทเรียนเริ่มต้นที่เป็นประโยชน์ของ Shopify
• Mark Dunkley’s Shopify Cheat Sheet
• Blankify: ธีมเริ่มต้นของ Shopify
• บทช่วยสอน: การสร้างธีมตั้งแต่เริ่มต้น
• โปรแกรมพันธมิตร Shopify
• ร้านค้า Shopify ที่สร้างแรงบันดาลใจ 40 แห่ง