一篇文章教你如何建立一個電商APP

時間 2021-02-18

標籤 css html jquery npm json bootstrap 瀏覽器服務器 app ide 欄目 CSS 简体版

原文原文鏈接

在本教程中，咱們將使用HTML、CSS、jQuery和Kendo UI提供的一些組件來構建電商APP。在本教程中，咱們將構建電子商務應用程序的基本版本。html

從頭開始構建組件有時會很是耗時，爲了方便的處理應用程序，咱們將使用Kendo UI組件，這將節省大量時間。jquery

Kendo UI是由Progress的Telerik團隊開發的JavaScript庫，它能幫助您快速構建Web應用程序的UI。Kendo UI的核心庫提供了一系列易於使用的UI組件，例如網格、文本框、數字文本框、圖表等，Kendo UI提供了流行的JavaScript庫（如jQuery，Angular，React和Vue）的組件。npm

先決條件

要構建此應用程序，請使用如下一些工具：json

Kendo UI
HTML/CSS
jQuery

初始化應用程序

雖然開發功能齊全/可擴展的電子商務應用程序可能會很麻煩，可是實現基本版本很容易建立，咱們將使用HTML/CSS, jQuery和Kendo UI建立一個應用。bootstrap

建立一個名爲marketplace的文件夾，並在其中定義此文件夾結構：瀏覽器

marketplace/
css/
styles.css
js/
items.js
functions.js
index.html服務器

對於咱們的應用程序，將使用一種很是簡單的方法：app

定義一個css文件夾來保存樣式表。
定義一個保存jQuery函數的js和一個包含市場商品的item.js文件。
最後在文件夾的底部建立一個index.html文件，以用做應用程序的入口點。

首先準備index.html文件來接收和顯示內容，在索引文件中，輸入如下代碼行：ide

`
<html>
<head>
<title>Awesome Market</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href=" https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<main>
<header>
<nav class="navbar navbar-light bg-light justify-content-between">
MarketPlace
<div id="cart-container">
<div id="cart">
cart

Empty cart </div>
<span id="itemCount"></span>
</div>
</nav>
</header>
<div id="shoppingCart">
<div id="cartItemsContainer">
<h2>Items in your cart</h2>

<div id="cartItems"></div>
<span id="cartTotal"></span>
</div>
</div>
<div id="products" class="row"> </div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script src="js/functions.js"></script>
</body>
</html>`

經過CDN導入全部相關資源，資源包括jQuery、Bootstrap和fontawesome，以及自定義樣式表。
定義將顯示項目的區域。
標題包含當前購物車項目和一個用於清空圖表的按鈕。
定義div在每次查看時保存圖表項。
div爲空，將自動從jQuery函數動態注入產品。
導入jQuery和自定義js文件

到目前爲止，咱們已經定義了一個樣式表和一個包含空內容的函數文件，繼續填充它們。

打開您的CSS文件並添加文件，並向其中添加如下代碼：

`// css/styles.css
main {
padding: 10px 0;
width: 1024px;
margin: 0 auto;
}

cart-container {

float: right;
width: 210px;
position: relative;
}

itemCount {

position: absolute;
display: none;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
color: white;
text-align: center;
}
nav {
margin-bottom: 30px;

nav ul {
list-style: none;
overflow: auto;
width: 100%;
background: #444444;
}
nav ul li {
float: left;
padding: 5px 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li:hover {
color: #444444;
background: #cccccc;
}
nav ul li:hover a {
color: #444444;
}
img {
width: 100%;
}
.item {
width: 31%;
float: left;
margin: 1%;
}
.itemText p {
margin-bottom: 20px;
}
.price-container {
margin-top: 20px;
}
i:hover {
cursor: pointer;
}

shoppingCart {

top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
position: absolute;
z-index: 9999;
background: rgba(0, 0, 0, 0.6);
}

cartItemsContainer {

position: relative;
width: 600px;
left: 50%;
top: 150px;
margin-left: -300px;
padding: 40px;
box-shadow: 0 0 10px black;
background: #e9e9e9;
overflow: auto;
}

cartItemsContainer i {

position: absolute;
top: 20px;
right: 20px;
}

cartItemsContainer .itemDetails {

overflow: auto;
width: 100%;
margin-bottom: 40px;
}

emptyCart {

display: none;
}

cartItemsContainer .itemImage {

float: left;
width: 260px;
padding: 0 40px;
}

cartItemsContainer .itemText {

float: right;
width: 260px;
padding: 0 40px;
}

cartItemsContainer .itemText .price-container {

margin-top: 0;
}
.removeItem {
margin-left: 40px;
}
.col-sm-4 {
margin-bottom: 15px;
}`

如今，用產品填充items.js文件，向其添加如下代碼：

`// js/items.js
[
{
"name": "Berries",
"price": 23.54,
"image": "https://images.unsplash.com/photo-1488900128323-21503983a07e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Sweet popsicles to help with the heat"
},
{
"name": "Orange",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=340&w=340&q=80",
"description": "Mouth watering burger. Who cares if it's healthy"
},
{
"name": "Lemons",
"price": 12.13,
"image": "https://images.unsplash.com/photo-1504382262782-5b4ece78642b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Sumptuous egg sandwich"
},
{
"name": "Bananas",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1478369402113-1fd53f17e8b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "A great tower of pancakes. Dig in!"
},
{
"name": "Apples",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1505253304499-671c55fb57fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80",
"description": "Great looking Waffle to start the day"
},
{
"name": "Sharifa",
"price": 10.33,
"image": "https://images.unsplash.com/photo-1470119693884-47d3a1d1f180?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80",
"description": "What's greater than 5 minutes with grilled corn"
}
]`

如今打開您的functions.js文件，並向其中添加如下代碼：

`// js/functions.js

function init(){

// read our array of products and display it
$.getJSON( "js/items.js", function( json ) {

json.forEach(function (item) {
$("#products").append('<div class="col-sm-4"><div class="card">' +
'<img class="card-img-top" src="' + item.image + '">' +
'<div class="card-body">' +
'<h5 class="card-title">' + item.name + '</h5>' +
'<p class="card-text price">' + "Price: $" + item.price + '</p>' +
'<p class="card-text price">' + item.description + '</p>' +
'Add to cart' +
'</div>' +
'</div></div>');
});
});
}
$(init);`

使用jQuery：

從items.js文件中讀取內容
構建產品DOM元素
附加並顯示在index.html文件中

如今，當您嘗試加載index.html時，將看到一個空白屏幕。那是由於瀏覽器因爲訪問控制源而沒法讀取JSON文件。爲了解決這個問題，須要使用http服務器來加載文件。

首先經過在終端中輸入如下命令來安裝http-server：

npm install -g http-server

安裝後，您就能夠在系統中的任何地方使用http服務器，如今在終端中輸入如下內容來提供文件：

http-server -c-1

如今，當您在瀏覽器中訪問http：// localhost：8080時，您將看到如下內容：

這意味着已經可以閱讀和顯示產品及其信息，接下來，咱們須要編寫函數來處理從購物車中添加和刪除商品的操做。

打開functions.js並添加如下代碼：

`// js/functions.js

function init(){
var itemCount = 0;
var priceTotal = 0;
// other code stays same

// Add Item to Cart
$('.add').click(function (){
itemCount ++;

$('#itemCount').text(itemCount).css('display', 'block');
$(this).siblings().clone().appendTo('#cartItems').append('<button class="removeItem">Remove Item</button>');

// Calculate Total Price
var price = parseInt($(this).siblings().find('.price').text());
priceTotal += price;
$('#cartTotal').text("Total: $" + priceTotal);
});

// Hide and Show Cart Items
$('.openCloseCart').click(function(){
$('#shoppingCart').toggle();
});

// Empty Cart
$('#emptyCart').click(function() {
itemCount = 0;
priceTotal = 0;
$('#itemCount').css('display', 'none');
$('#cartItems').text('');
$('#cartTotal').text("Total: $" + priceTotal);
});

// Remove Item From Cart
$('#shoppingCart').on('click', '.removeItem', function(){
$(this).parent().remove();
itemCount --;
$('#itemCount').text(itemCount);

// Remove Cost of Deleted Item from Total Price
var price = parseInt($(this).siblings().find('.price').text());
priceTotal -= price;
$('#cartTotal').text("Total: €" + priceTotal);

if (itemCount == 0) {
$('#itemCount').css('display', 'none');
}
});
}
$(init);`

在這裏，咱們定義了應用程序所需的功能。

使用Click方法，咱們將特定元素做爲目標，並根據所單擊的按鈕來更新它們的狀態
當用戶添加、刪除、清空或查看當前購物車時，狀態會更改
最後，一旦文件加載到索引頁上，咱們就使用jQuery的$調用init函數來初始化文件

至此，咱們有了一個電子商務應用程序的工做版本，經過Kendo UI添加另外一項功能。

使用Kendo UI添加空購物車按鈕

您可能已經注意到，當加載頁面時，沒有顯示空購物車。這是由於咱們最初將其設置爲從CSS根本不顯示。在本節中咱們將：

使用Kendo UI按鈕組件顯示和設置按鈕樣式
僅在購物車中至少有一件商品後才顯示按鈕

咱們須要先將Kendo UI導入到項目中，而後才能訪問按鈕組件。

打開index.html文件，並向其中添加如下代碼行：

`// ./index.html

<head>
//import kendoui through the cdn in your header
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"> </script>
</head>`

在此文件中，咱們僅經過CDN導入Kendo UI。

如今在js文件中初始化函數，打開functions.js文件，並將如下代碼添加到其中：

`// js/functions.js

// add inside init function
$("#emptyCart").kendoButton();

//insert code in bold into this function
$(document).on("click", ".add", function (){
// new code
$('#emptyCart').css('display', 'inline');
//other code stays same`

這裏咱們作兩件事：