Xây dựng một trang web thương mại điện tử từ đầu

Thương mại điện tử đã trở nên phổ biến trong những năm gần đây, giờ đây, thật khó để tưởng tượng một tương lai mà không có nó. Sức mạnh của Internet đã kết nối với khách hàng một cách dễ dàng cho các doanh nghiệp và thương hiệu, và thương mại điện tử, phần lớn, là cách dễ nhất để giao sản phẩm cho khán giả của họ.

Thư viện khối xây dựng của Foundation Các thành phần UI được mã hóa được thiết kế để dễ dàng đạt được một sản phẩm cuối cùng nhanh hơn. Không giống như các mẫu, khối xây dựng không ra lệnh cho trang web của bạn sẽ trông hoặc được cấu trúc. Họ chỉ đơn giản là cung cấp cho bạn các công cụ để xây dựng vẻ ngoài tùy chỉnh của riêng bạn và cảm thấy nhanh hơn nhiều.

Trong hướng dẫn này, bạn sẽ tìm hiểu cách xây dựng một trang web thương mại điện tử tĩnh từ đầu bằng bộ công nghệ thương mại điện tử, một bộ sưu tập các khối xây dựng được quản lý được thiết kế để giúp bạn xây dựng các loại trang web cụ thể. Mặc dù giàn giáo này là nguyên mẫu, các khối xây dựng, chúng tôi đang sử dụng và bố trí chúng tôi kết thúc có thể được áp dụng cho bất kỳ hệ thống nào.

Bắt đầu

Điều đầu tiên chúng ta cần làm là thiết lập một môi trường để xây dựng trang web. Đối với hướng dẫn này, trước tiên bạn cần tải xuống Node.js. Khi đã được cài đặt, bạn sẽ muốn cài đặt Nền tảng CLI bằng lệnh Cài đặt NPM -G Foundation-CLI .

Bây giờ bạn đã cài đặt nền tảng trên hệ thống của mình, hãy bắt đầu một dự án nền tảng mới bằng cách sử dụng Công ty Thương mại điện tử MỚI. Trong danh sách sau, chọn tùy chọn đầu tiên, 'Một trang web (nền tảng cho các trang web)', nhập tên dự án của chúng tôi 'Thương mại điện tử', sau đó chọn 'ZUỐI Mẫu'. Điều này sẽ khởi động một mẫu nền tảng và máy chủ phát triển để chúng ta có thể dễ dàng bắt đầu xây dựng trang web của mình. Chạy NPM bắt đầu trong thiết bị đầu cuối để chạy dự án.

Tiếp theo, hãy xem qua mã dự án mới của chúng tôi bằng cách mở nó trong trình soạn thảo văn bản. Ở đây, bạn sẽ tìm thấy một trang mẫu trong 'src / pages / index.html' chứa một số tài liệu mẫu mặc định. Chúng ta sẽ xóa tất cả các mã ở đây.

Ghi chú của biên tập viên: Tìm kiếm một thiết kế trang web thương mại điện tử cho doanh nghiệp của bạn? Nếu bạn đang tìm kiếm thông tin để giúp bạn chọn một thông tin phù hợp với bạn, hãy sử dụng bảng câu hỏi bên dưới để cung cấp cho bạn thông tin từ nhiều nhà cung cấp miễn phí:

Cài đặt một bộ

Trước khi chúng tôi viết bất kỳ mã nào, chúng tôi sẽ kéo trong bộ công nghệ thương mại điện tử của Foundation với CLI của Foundation. Đi đến thiết bị đầu cuối của bạn và sử dụng Bộ dụng cụ Foundation Command Lắp đặt thương mại điện tử.

Nếu lệnh này không hoạt động, hãy kiểm tra kỹ xem CLI Foundation của bạn được cập nhật thành 2.2.3 hay không. Để kiểm tra phiên bản nào bạn đang bật, hãy chạy Nền tảng -V. trong thiết bị đầu cuối của bạn. Nếu bạn cần cập nhật, chỉ cần gỡ cài đặt CLI bằng npm gỡ cài đặt -g Foundation-CLI và cài đặt lại nó với Cài đặt NPM -G Foundation-CLI .

Điều này vừa tải xuống tất cả các khối xây dựng bên trong bộ công nghệ thương mại điện tử của chúng tôi! Bất cứ khi nào bạn cài đặt một khối xây dựng, nó sẽ xuất hiện trong SRC / một phần / khối xây dựng . Bạn sẽ biết rằng bộ của bạn được cài đặt chính xác nếu tất cả các khối xây dựng đã được tự động nhập vào app.scss. tập tin.

Một số khối xây dựng này bao gồm các biểu tượng từ phông chữ tuyệt vời, vì vậy bạn sẽ muốn cài đặt chúng thủ công hoặc thêm CDN của họ vào & lt; Head & GT; của trang web của bạn. Để làm điều này, điều hướng đến src / bố cục / default.html và thêm & lt; liên kết href = "https://cdnjs.cloudflare.com/ajax/libs/font-wesome/4.7.0/css/font-wesome.css" rel = "stylesheet" & gt; giưa & lt; Head & GT; Tags.

Giàn giáo trang web

Hãy để xây dựng! Với bộ của chúng tôi được cài đặt, những bước tiếp theo này sẽ cảm thấy giống như chơi với Lego: Trong các dự án của riêng bạn, bạn có thể chọn sử dụng tất cả chúng hoặc bạn có thể sử dụng chỉ là một lựa chọn. Hãy thoải mái trộn và kết hợp các khối xây dựng để đạt được bố trí thương mại điện tử trong mơ của bạn.

Đối với hướng dẫn này, hai khối đầu tiên chúng ta sẽ bắt đầu với Header và Promo Hero. Để làm điều này, chúng ta sẽ sử dụng cơ chế một phần của tay lái. Trong tệp index.html trống của chúng tôi, hãy ném vào phần {{& gt; Tiêu đề thương mại điện tử}} và {{& gt; Thương mại điện tử-Promo-Hero}} . Chỉ với hai khối xây dựng này, trang đích thương mại điện tử của chúng tôi đã tìm cách thực hiện nửa chừng.

Tiếp theo, chúng tôi sẽ ném vào một số thẻ sản phẩm dưới phần Hero của chúng tôi. Để sử dụng khối xây dựng thẻ sản phẩm, chúng tôi sẽ sử dụng lưới khối của Foundation để các thẻ ngồi đều trong lưới. Điều này cũng sẽ giúp việc thay đổi bố cục của các thẻ này dễ dàng hơn.

Hãy bắt đầu với & lt; div class = "hàng nhỏ-up-2 trung bình tăng-5" & gt; . Bên trong div này, ném trong mười cột với thẻ sản phẩm bên trong mỗi cột & lt; div class = "cột" & gt; {{& gt; thương mại điện tử-card}} & lt; / div & gt; .

Chúng tôi muốn cung cấp cho khách hàng của chúng tôi một cách để có được nhiều sản phẩm của chúng tôi, vì vậy hãy thêm một nút gọi bên dưới thẻ sản phẩm của chúng tôi. Đầu tiên chúng ta cần tạo ra & lt; div class = "Cột hàng-Text-Center" & GT; để nút của chúng tôi sẽ được tập trung vào trang. Tiếp theo, chúng tôi sẽ sử dụng thành phần nút Foundation để tạo cuộc gọi của chúng tôi. Thêm A. & lt; nút lớp = "nút" & gt; mua tất cả các sản phẩm & lt; / nút & gt; Bên trong của The. .row.column. .

Bây giờ, trang cảm thấy gần như hoàn thành, nhưng hãy thêm một tiêu đề giữa anh hùng và thẻ sản phẩm của chúng ta để đưa ra một chút bối cảnh. Dưới người anh hùng, thêm một & lt; div class = "cột hàng" & gt; Để chứa tiêu đề của chúng tôi & lt; H1 & GT; Hàng mới nhất & LT; / H1 & GT; .

Hầu hết các trang chủ thương mại điện tử có nhiều nội dung quảng cáo hơn dưới sản phẩm của họ. Hãy sử dụng khối xây dựng {{& gt; Thương mại điện tử-Hero-Slider-Small}} đây. Để ngăn thanh trượt kéo dài chiều rộng của trang, chúng ta sẽ quấn nó xung quanh một & lt; div class = "cột hàng" & gt; .

Vì các trang web thương mại điện tử thường bao gồm nhiều trang, hầu hết sẽ yêu cầu chân trang lớn với nhiều liên kết để xử lý âm lượng của các trang. Bộ công nghệ thương mại điện tử của chúng tôi đi kèm với một chân trang cho trường hợp sử dụng chính xác này. Để kết thúc giàn giáo này, hãy thả vào {{& gt; Thương mại điện tử-footer}} ở dưới cùng của html của chúng tôi.

Kiểm tra khả năng đáp ứng

Những ngày này, thật khó cho bất kỳ trang web nào để có được bằng cách mà không thân thiện với thiết bị di động. Điều này đặc biệt đúng đối với các trang web thương mại điện tử. Bây giờ việc mua sắm trực tuyến đã trở thành tiêu chuẩn, chúng tôi không muốn mất phần trăm người dùng làm điều này thông qua điện thoại di động của họ.

Sau phương châm của chúng tôi về di động đầu tiên, các khối xây dựng của Foundation được xây dựng để đáp ứng một cách tự nhiên. Kiểm tra nhanh trên màn hình nhỏ hơn cho thấy trang web của chúng tôi vẫn đang trông khá tốt.

Tuy nhiên, khi chúng ta nhấp vào menu Hamburger, Off-Canvas của chúng tôi đã không được nối đúng cách. Phần này có một chút khó khăn, nhưng đừng lo lắng! Chúng ta sẽ phá vỡ những gì đang xảy ra trong menu ngoài Canvas này và sau đó đi qua cách kết nối nó.

Nếu bạn xem xét tệp thương mại điện tử.html, bạn sẽ nhận thấy rằng tiêu đề này có một khung vẽ được tích hợp vào nó. Vì vậy, tại sao nó không hoạt động? Khi chúng tôi nhấp vào menu Hamburger, thứ duy nhất được 'đẩy' là tiêu đề. Phần còn lại của trang vẫn còn trong chế độ xem, gây ra một số chồng chéo lạ.

Điều này là do tiêu đề này được xây dựng để tự làm việc, nhưng trong thực tế, nó cần phải làm việc với toàn bộ trang. Nói cách khác, nó cần phải đẩy tất cả nội dung trên trang qua trang khi menu off-canvas được kích hoạt, không chỉ menu tiêu đề. Tiêu đề thương mại điện tử này được viết như thế này bởi vì thiết lập một canvas cần lặn vào src / bố cục / default.html trang, vượt quá tầm với của khối xây dựng.

Để khắc phục điều này, tất cả những gì chúng ta cần làm là lấy tất cả mọi thứ bên trong & lt; div class = "off-canv can-off-off-off-off-stute-left" id = "Offer-Header" Data-Off-Off-Canvas & GT; và di chuyển nó vào src / layouts / default.html . Tiếp theo, chúng ta sẽ quấn {{& gt; thân hình}} của trang web của chúng tôi bên trong của một & lt; div class = "off-canvas-nội dung" nội dung-canvas-canvas & gt; . Điều này sẽ đẩy phần thân của trang web của chúng tôi khi off-canvas được kích hoạt.

Bây giờ khi chúng tôi nhấp vào Hamburger của chúng tôi, toàn bộ trang web di chuyển qua menu ngoài Canvas! Cơ thể của chúng ta default.html. Trang sẽ trông như thế này:

& lt; body & gt;
  & lt; div class = "off-canv can-off-off-off-off-stute-left" id = "Offer-Header" Data-Off-Off-Canvas & GT;
& lt; nút lớp = "nút đóng" aria-nhãn = "Đóng menu" type = "nút" Đóng & GT;
  & lt; span aria-hidden = "true" & gt; & amp; lần; & lt; / span & gt;
& lt; / nút & gt;
& lt; ul class = "menu dọc" & gt;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "danh mục.html" & gt; loại 1 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "#" & gt; loại 2 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "Why.html" & gt; loại 3 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "build.html" & gt; loại 4 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "chính-nav-link" & gt; & lt; a href = "#" & gt; loại 5 & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; hr & gt;

& lt; ul class = "menu dọc" & gt;
  & lt; li & gt; & lt; a href = "#" & gt; trợ giúp & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; trạng thái đơn hàng & 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; tài khoản của tôi & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
  & lt; / div & gt;

  & lt; div class = "off-canvas-nội dung" nội dung-canvas-canvas & gt;
{{& gt; thân hình}}
  & lt; / div & gt;
  & lt; script src = "{{root}} Tài sản / js / app.js" & gt; & lt; / script & gt;
& lt; / body & gt; 

Phần kết luận

Chúng tôi đã chỉ cho bạn cách nhảy-khởi động trang web thương mại điện tử của bạn với bộ công nghệ thương mại điện tử của Foundation, nhưng đừng dừng lại ở đó! Có hơn 100 khối xây dựng có thể được sử dụng để giúp nâng cao các trang của bạn. Trong vài phút, chúng tôi đã giàn thành một trang web thương mại điện tử tĩnh với các khối xây dựng. Điều này giúp bạn tiết kiệm rất nhiều thời gian mà giờ đây bạn có thể sử dụng để xếp lớp trong hình ảnh và kiểu trang web để phù hợp với thương hiệu của bạn.

Ngay cả khi bạn đang sử dụng thêm và sử dụng hệ thống back-end, cơ chế một phần khác nhau hoặc có một cách khác để lấy dữ liệu của bạn vào trang web, quy trình làm việc đã cho với các khối xây dựng sẽ thực sự tiết kiệm thời gian và do đó tiền. Khối xây dựng của Foundation là một cách tuyệt vời để bắt đầu vì chúng có nghĩa là được mở rộng, phù hợp với các kiểu hiện có của bạn và được sử dụng trong bất kỳ hệ thống ứng dụng nào.

Bài viết này ban đầu xuất hiện trong Tạp chí Net. Vấn đề 266. Mua nó đây .

Những bài viết liên quan:

• Xây dựng giao diện người dùng dựa trên thẻ với Foundation
• 10 trang web thương mại điện tử mới đẹp bạn phải xem
• Cách cải thiện hiệu suất của các trang web thương mại điện tử