<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1571737753057138&amp;ev=PageView&amp;noscript=1">

Magento 2 PWA Projects

Posted by Cipher on 20-Jan-2020 08:58:38

Magento 2 PWA Projects

ตอนนี้คุณสามารถสำรวจ Magento 2 PWA ได้ตามนี้คือ

Vue Storefront

Vue Storefront  ได้รับการพัฒนาโดย  Vue.js เป็นโปรเจคแบบ open source ดำเนินการโดย agency Divante ของโปแลนด์

Vue จะต้อนรับเราด้วยหน้าโฮมเพจที่โหลดได้อย่างรวดเร็วพร้อมด้วยองค์ประกอบสำหรับทำให้เกิดการโต้ตอบมากมาย เช่น banners, sliders, และ  links. Scroll down, และ menu bar, search, favorite products, cart, และ customer account 

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

ส่วนหน้าสินค้านั้นจะทำงานตามที่คุณคาดหวัง แม้ว่าจะไม่มีอะไรพิเศษเกิดขึ้น แต่การตอบสนองของมันนั้นรวดเร็วมากทีเดียว ส่วนข้อมูลนั้นจะถูกนำไปไว้ที่ด้านล่างของเพจ

 

การกำหนดค่าตัวเลือกผลิตภัณฑ์และเพิ่มลงในรถเข็น เป็นไปอย่างรวดเร็วจนคุณอาจจะเกิดความประหลาดใจได้

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

 

สำหรับการชำระเงิน Vue  ส่วนสรุปการสั่งซื้อมีขนาดใหญ่พร้อมข้อมูล พร้อมภาพขนาดย่อของสินค้าที่ใหญ่พอจะมองว่านั่นคือสินค้าอะไร เป็นหน้าการสรุปการสั่งซื้อและชำระเงินที่มีประสิทธิภาพและใช้งานง่าย

DEITY

Detity เป็น React ธีม แบบที่มีส่วนประกอบบางส่วนเป็น closed-source เริ่มต้นพัฒนาโดย agency Hatimeria DEITY  แสดงให้เห็นว่า Magento 2 PWA สามารถทำงานอย่างรวดเร็วและง่ายได้อย่างไร แม้ว่าส่วน frontend ที่ปรากฏจะแตกต่างต่างจากโปรเจคก่อนหน้านี้  แต่ Fronted ของ DEITY ก็ยังคงเป็นทางเลือกของลูกค้าในการท่องชมผลิตภัณฑ์  เพราะส่วนหน้าที่ยังคงความเจ๋งเอาไว้ได้

หน้าผลิตภัณฑ์มีองค์ประกอบน้อยกว่าที่ Vue ใช้ แต่ยังคงความรวดเร็วและการใช้งานได้อย่างสมบูรณ์

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

จากนั้นสามารถเปลี่ยนเส้นทางจากรถเข็นขนาดเล็กไปยังหน้ารถเข็นแบบเต็มรูปแบบในเวลาไม่นาน

ที่หน้าเช็คเอาท์ สามารถใช้งานได้อย่างง่ายดาย

Front Commerce

Front Commerce เป็น โซลูชั่นแบบ  closed-source จากฝรั่งเศส ได้รับการยอมรับกับ Magento 2 ทำงานกับbackend และ React frontend

 

หน้า Category

การดีไซร์หน้าสินค้า

มีไอคอน Minicart

และหน้ารถเข็น

การเช็คเอาท์

 

 

Magento 2.3 + GraphQL + Gatsby – Another Approach to Magento PWA

Magento 2.3 กับ GraphQL พร้อมใช้งาน  คุณสามารถสร้างหน้า Landing Page แบบคงที่ด้วย Gatsby.js ซึ่งจะทำให้หน้า Landing Page ของคุณใช้งานได้อย่างรวดเร็วมากทีเดียว สำหรับ Gatsby.js ช่วยให้คุณสามารถสืบค้นข้อมูลด้วย GraphQL ในฐานะ Developer  คุณสามารถกำหนดข้อมูลของตัวเอง  การซัพพอร์ต GraphQL ช่วยให้คุณขจัดความซับซ้อน และใช้งานได้ง่ายขึ้น

เพื่อให้บรรลุเป้าหมายคุณต้องกำหนด node ของตนเอง จากหน้า Landing Page ซึ่งจะส่ง query ไปยัง Magento GraphQL

Category เพจ

หน้าสินค้า

รถเข็น

การเช็คเอาท์

Magento 2 Venia Theme Store

เป็น PWA analog ของธีม Luma  เป็นธีมของ Magento 2 PWA Venia เป็นส่วนหนึ่งของ PWA Studio 

อ่านเพิ่มเติมและตอนก่อนหน้านี้ :

PWA & Headless Magento 2

Magento 2 PWA Demo โดย Inchoo

Magento 2 PWA Studio

ความพร้อมของ Magento PWA

Topics: E-Commerce, Online marketing, Magento, technology, PWA

content marketing service