สร้างเว็บไซต์อีคอมเมิร์ซตั้งแต่เริ่มต้น

Sep 13, 2025
วิธีการ

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

Library Foundation Blocks Library of Coded UI ส่วนประกอบได้รับการออกแบบมาเพื่อให้ง่ายต่อการเข้าถึงผลิตภัณฑ์ขั้นสุดท้ายได้เร็วขึ้น แตกต่างจากแม่แบบการสร้างบล็อกไม่ได้กำหนดวิธีที่ไซต์ของคุณควรดูหรือมีโครงสร้าง พวกเขาเพียงแค่ให้เครื่องมือในการสร้างรูปลักษณ์ที่กำหนดเองของคุณเองและรู้สึกเร็วขึ้นมาก

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

เริ่มต้น

Building Blocks don’t dictate how your site should look

บล็อกอาคารไม่ได้กำหนดวิธีการที่เว็บไซต์ของคุณควรมอง

สิ่งแรกที่เราต้องทำคือตั้งค่าสภาพแวดล้อมในการสร้างเว็บไซต์ สำหรับการกวดวิชานี้คุณจะต้องดาวน์โหลด node.js. เมื่อติดตั้งแล้วคุณจะต้องติดตั้ง Foundation CLI โดยใช้คำสั่ง การติดตั้ง NPM -G Foundation-CLI .

ตอนนี้คุณมีฐานรากติดตั้งบนระบบของคุณแล้วลองเริ่มโครงการมูลนิธิใหม่โดยใช้ Foundation Command Foundation ใหม่เว็บไซต์อีคอมเมิร์ซใหม่ ในรายการที่ตามมาให้เลือกตัวเลือกแรก 'เว็บไซต์ (มูลนิธิสำหรับไซต์)' พิมพ์ในชื่อโครงการของเรา 'อีคอมเมิร์ซเว็บไซต์' จากนั้นเลือก 'เทมเพลต Zurb' สิ่งนี้จะเริ่มต้นเทมเพลตมูลนิธิและเซิร์ฟเวอร์การพัฒนาเพื่อให้เราสามารถเริ่มสร้างเว็บไซต์ของเราได้อย่างง่ายดาย วิ่ง การเริ่มต้น NPM ในเทอร์มินัลเพื่อเรียกใช้โครงการ

ต่อไปลองดูที่รหัสใหม่ของโครงการใหม่ของเราโดยเปิดขึ้นในโปรแกรมแก้ไขข้อความ ที่นี่คุณจะพบหน้าตัวอย่างใน 'src / pages / index.html' ที่มีวัสดุเทมเพลตเริ่มต้น เราจะลบรหัสทั้งหมดที่นี่

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

การติดตั้งชุด

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

หากคำสั่งนี้ใช้งานไม่ได้ตรวจสอบอีกครั้งว่า Foundation CLI ของคุณได้รับการอัปเดตเป็น 2.2.3 เพื่อตรวจสอบรุ่นที่คุณเปิดใช้งาน มูลนิธิ -V ในเทอร์มินัลของคุณ หากคุณต้องการอัปเดตเพียงถอนการติดตั้ง CLI ด้วย NPM ถอนการติดตั้ง -G Foundation-CLI และติดตั้งใหม่ด้วย การติดตั้ง NPM -G Foundation-CLI .

นี่เป็นเพียงดาวน์โหลดบล็อกทั้งหมดภายในชุดอีคอมเมิร์ซของเรา! เมื่อใดก็ตามที่คุณติดตั้งบล็อกอาคารจะปรากฏใน SRC / บางส่วน / อาคารบล็อก . คุณจะรู้ว่าชุดของคุณติดตั้งอย่างถูกต้องหากบล็อกอาคารทั้งหมดได้รับการนำเข้าโดยอัตโนมัติเป็นของคุณ app.scss ไฟล์.

บล็อกอาคารเหล่านี้บางอย่างรวมถึงไอคอนจากแบบอักษรที่ยอดเยี่ยมดังนั้นคุณจะต้องติดตั้งพวกเขาด้วยตนเองหรือเพิ่ม CDN ของพวกเขาไปยัง & lt; หัว & gt; ของเว็บไซต์ของคุณ ทำสิ่งนี้ให้ไปที่ src / layouts / default.html และเพิ่ม & lt; ลิงค์ href = "https://cdnjscloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-roide.css" rel = "stylesheet" & gt; ระหว่าง & lt; หัว & gt; แท็ก.

นั่งร้านเว็บไซต์

Mix and match blocks to achieve your ideal eCommerce layout

ผสมและจับคู่บล็อกเพื่อให้บรรลุเค้าโครงอีคอมเมิร์ซในอุดมคติของคุณ

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

สำหรับการกวดวิชานี้สองบล็อกแรกที่เราจะเริ่มต้นด้วยส่วนหัวและโปรโมชั่นฮีโร่ ในการทำเช่นนี้เราจะใช้กลไกมือจับบางส่วน ในไฟล์ index.html ที่ว่างเปล่าของเราให้โยนในบางส่วน {{& gt; eCommerce-Header}} และ {{& gt; อีคอมเมิร์ซโปรโมชั่นฮีโร่}} . ด้วยการสร้างสองบล็อกนี้หน้า Landing Page อีคอมเมิร์ซของเราแล้วดูเกี่ยวกับการทำครึ่งทางแล้ว

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

เริ่มต้นด้วย & LT; DIV Class = "Row Small-Up-2 Medium-up-5" & GT; . ภายใน DIV นี้โยนในสิบคอลัมน์ด้วยบัตรผลิตภัณฑ์ภายในแต่ละคอลัมน์ & lt; div class = "คอลัมน์" & gt; {{& gt; อีคอมเมิร์ซผลิตภัณฑ์บัตร}} & lt; / div & gt; .

เราต้องการให้ลูกค้าของเราเป็นวิธีที่จะได้รับผลิตภัณฑ์ของเรามากขึ้นดังนั้นเราจึงเพิ่มปุ่ม CALLOUT ใต้การ์ดผลิตภัณฑ์ของเรา ก่อนอื่นเราต้องสร้างของเรา & lt; div class = "ข้อความคอลัมน์แถวศูนย์" & gt; ดังนั้นปุ่มของเราจะอยู่กึ่งกลางในหน้า ต่อไปเราจะใช้คอมโพเนนต์ปุ่มมูลนิธิเพื่อสร้างการโทรออกของเรา เพิ่ม & lt; ปุ่ม class = "ปุ่ม" & gt; ร้านค้าผลิตภัณฑ์ทั้งหมด & lt; / ปุ่ม & gt; ภายในของ .Row.Column .

หน้านี้ให้ความรู้สึกเกือบเสร็จสมบูรณ์ในขณะนี้ แต่ลองเพิ่มส่วนหัวระหว่างฮีโร่และการ์ดผลิตภัณฑ์ของเราเพื่อให้บริบทเล็กน้อย ภายใต้ฮีโร่เพิ่ม & lt; div class = "คอลัมน์แถว" & gt; ที่จะมีส่วนหัวของเรา & lt; h1 & gt; มาใหม่ล่าสุด & lt; / h1 & gt; .

หน้าแรกของอีคอมเมิร์ซส่วนใหญ่มีเนื้อหาส่งเสริมการขายมากกว่าผลิตภัณฑ์ของพวกเขา ลองใช้บล็อกอาคาร {{& gt; อีคอมเมิร์ซ -Slider-slider-small}} ที่นี่ เพื่อป้องกันตัวเลื่อนจากการขยายความกว้างของหน้าเราจะห่อรอบ ๆ & lt; div class = "คอลัมน์แถว" & gt; .

เนื่องจากไซต์อีคอมเมิร์ซมักจะประกอบด้วยหลาย ๆ หน้าส่วนใหญ่จะต้องใช้ Footer ขนาดใหญ่ที่มีลิงก์จำนวนมากเพื่อจัดการกับปริมาณของหน้า ชุดอีคอมเมิร์ซของเรามาพร้อมกับส่วนท้ายสำหรับกรณีการใช้งานที่แน่นอนนี้ เพื่อพันนั่งร้านนี้มาวางกันเถอะ {{& gt; อีคอมเมิร์ซ - ส่วนท้าย}} ที่ด้านล่างสุดของ HTML ของเรา

ตรวจสอบการตอบสนอง

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

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

อย่างไรก็ตามเมื่อเราคลิกที่เมนูแฮมเบอร์เกอร์ Off-Canvas ของเรายังไม่ได้เชื่อมต่ออย่างถูกต้อง ส่วนนี้มีเล่ห์เหลี่ยมเล็กน้อย แต่ไม่ต้องกังวล! เราจะทำลายสิ่งที่เกิดขึ้นในเมนูนอกผ้าใบนี้แล้วเดินผ่านวิธีที่จะขอมันขึ้นมา

หากคุณดูไฟล์ Ecommerce-Header.html คุณจะสังเกตเห็นว่าส่วนหัวนี้มีผ้าใบที่ติดตั้งอยู่ ดังนั้นทำไมมันไม่ทำงาน เมื่อเราคลิกที่เมนูแฮมเบอร์เกอร์สิ่งเดียวที่ 'ผลัก' คือส่วนหัว ส่วนที่เหลือของหน้ายังคงอยู่ในมุมมองทำให้เกิดการทับซ้อนกันแปลก ๆ

นี่เป็นเพราะส่วนหัวนี้ถูกสร้างขึ้นเพื่อทำงานด้วยตัวเอง แต่ในความเป็นจริงมันต้องทำงานกับทั้งหน้า กล่าวอีกนัยหนึ่งมันต้องผลักดันเนื้อหาทั้งหมดในหน้าเว็บเมื่อเมนู Off-Canvas ถูกเรียกใช้ไม่ใช่เพียงเมนูส่วนหัว ส่วนหัวอีคอมเมิร์ซนี้เขียนแบบนี้เนื่องจากการตั้งค่าปิดผ้าใบต้องใช้การดำน้ำในของคุณ src / layouts / default.html หน้าซึ่งอยู่นอกเหนือการเข้าถึงอาคารบล็อก

This is what we’re currently seeing because the off-canvas hasn't been hooked up yet

นี่คือสิ่งที่เราเห็นอยู่ในขณะนี้เพราะ Off-Canvas ยังไม่ได้ติดอ่าง

เพื่อแก้ไขปัญหาสิ่งนี้สิ่งที่เราต้องทำคือนำทุกอย่างภายใน & lt; div class = "Off-Canvas ecommerce-header-out-off-outcher-outch-id =" eCommerce-header "Data-Off-Canvas & GT; และย้ายไปที่ SRC / Layouts / Default.html . ต่อไปเรากำลังจะห่อ {{& gt; ร่างกาย}} ของเว็บไซต์ของเราภายใน & lt; div class = "off-canvas-content" data-off-canvas-content & gt; . สิ่งนี้จะผลักดันร่างกายของเว็บไซต์ของเราเมื่อปิด - ผ้าใบถูกเรียก

ตอนนี้เมื่อเราคลิกที่แฮมเบอร์เกอร์ของเราเว็บไซต์ทั้งหมดจะย้ายไปที่เมนู Off-Canvas! ร่างกายของเรา default.html หน้าควรมีลักษณะดังนี้: 

& lt; ร่างกาย & gt;
  & lt; div class = "Off-Canvas ecommerce-header-out-off-outcher-outch-id =" eCommerce-header "Data-Off-Canvas & GT;
& lt; ปุ่มปุ่ม = "ปุ่มปิด" aria-label = "ปิดเมนู" type = "ปุ่ม" ข้อมูล - ปิด & gt;
  & lt; span aria-hidden = "true" & gt; & amp; ครั้ง; & lt; / span & gt;
& lt; / ปุ่ม & gt;
& lt; ul class = "เมนูแนวตั้ง & gt;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "categories.html" & gt; หมวดหมู่ที่ 1 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "#" & gt; หมวดหมู่ที่ 2 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "why.html" & gt; หมวดที่ 3 & lt; / a & gt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "build.html" & gt; หมวดหมู่ที่ 4 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "#" & gt; หมวดหมู่ที่ 5 & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; hr & gt;

& lt; ul class = "เมนูแนวตั้ง" & gt;
  & lt; li & gt; & lt; a href = "#" & gt; ช่วยเหลือ & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; สถานะการสั่งซื้อ & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; contact & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; บัญชีของฉัน & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
  & lt; / div & gt;

  & lt; div class = "off-canvas-content" data-off-canvas-content & gt;
{{& gt; ร่างกาย}}
  & lt; / div & gt;
  & lt; สคริปต์ SRC = "{{root}} สินทรัพย์ / js / app.js" & gt; & lt; / script & gt;
& lt; / body & gt;

บทสรุป

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

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

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ปัญหา 266. ซื้อมัน ที่นี่ .

บทความที่เกี่ยวข้อง:

  • สร้าง UI ที่ใช้การ์ดด้วย Foundation
  • 10 เว็บไซต์อีคอมเมิร์ซใหม่ที่สวยงามที่คุณต้องดู
  • วิธีการปรับปรุงประสิทธิภาพของเว็บไซต์อีคอมเมิร์ซ

วิธีการ - บทความยอดนิยม

วิธีการออกแบบด้วยรูปร่าง CSS: บทนำ

วิธีการ Sep 13, 2025

พื้นฐานของทุกเว็บไซต์คือการแบ่งย่อยย่อยลงใน..

วิธีการสร้างตัวละครวิดีโอเกมใน ZBrush

วิธีการ Sep 13, 2025

ที่นี่ฉันจะพูดถึงกระบวนการสร้างเรย์ตัวละครท..

สร้างเมฆด้วย Fumefx สำหรับ 3DS Max

วิธีการ Sep 13, 2025

คู่มือขั้นตอนทีละขั้นตอนนี้ถูกตั้งค่าให้เปิ..

10 เคล็ดลับสำหรับการเรียนรู้แอปภาพถ่ายของ Apple

วิธีการ Sep 13, 2025

แอป MACOS Photos เริ่มต้นชีวิตเป็น iPhoto: แอปผู้บริโภคสำห�..

วิธีการสร้างแอป AR

วิธีการ Sep 13, 2025

หน้า 1 จาก 3: สร้างแอป AR: ขั้นตอนที่ 01-10 ..

ต้นแบบสภาพแวดล้อมขนาดใหญ่ใน 3DS Max

วิธีการ Sep 13, 2025

เป้าหมายของชิ้นนี้คือการผลิตชิ้นส่วนของ ศ..

วิธีการแสดงให้เห็นถึงเหตุการณ์

วิธีการ Sep 13, 2025

การสร้างภาพประกอบสำหรับกิจกรรมนี้เป็นความท้..

สร้างเลย์เอาต์ที่ซับซ้อนด้วย Postcss-Flexbox

วิธีการ Sep 13, 2025

FlexBox เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการลด CSS BLOAT..

หมวดหมู่