programming javascript

Làm cách nào để tạo giỏ hàng bằng HTML CSS và JavaScript?

Gabriele Romanato là một nhà phát triển web. Người đóng góp cho Bộ kiểm tra CSS W3C, anh ấy cũng có kỹ năng với jQuery và WordPress. Bạn có thể tìm hiểu thêm về anh ấy qua … Thông tin thêm về Gabriele ↬

Bản tin email

Email [đập vỡ] của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

Continue Shopping
Go To Checkout

1 Phần này chứa danh sách mà người dùng có thể thêm sản phẩm vào giỏ hàng của họ, chỉ định số lượng cho từng sản phẩm



    
                Item
                Qty
                Price
            
        
            
        
        
    
    
        Sub Total: 
    
    
        
            
        
        
            
        
        
            Continue Shopping
        
        
            Go To Checkout

2 Đây là trang giỏ hàng nơi người dùng có thể cập nhật hoặc làm trống giỏ hàng của họ. Ngoài ra, họ có thể quay lại trang chính để tiếp tục mua sắm hoặc chuyển sang trang thanh toán



    
                Item
                Qty
                Price
            
        
            
        
        
    
    
        Sub Total: 
    
    
        
            
        
        
            
        
        
            Continue Shopping
        
        
            Go To Checkout

3 Trên trang này, người dùng điền vào biểu mẫu thông tin cá nhân của họ — cụ thể là địa chỉ thanh toán và giao hàng của họ



    
                Item
                Qty
                Price
            
        
            
        
        
    
    
        Sub Total: 
    
    
        
            
        
        
            
        
        
            Continue Shopping
        
        
            Go To Checkout

4 Trang này chứa một bản tóm tắt ngắn gọn về đơn đặt hàng của người dùng cộng với biểu mẫu PayPal. Sau khi người dùng gửi biểu mẫu, họ sẽ được chuyển hướng đến trang đích của PayPal

Chúng tôi sẽ xem xét đánh dấu cho dự án này trong các phần sau

mục lục. html

Các thành phần chính của trang này là các biểu mẫu cho phép người dùng thêm sản phẩm vào giỏ hàng của họ

Các thuộc tính dữ liệu được sử dụng ở đây để lưu trữ tên và giá sản phẩm có thể được truy cập thông qua jQuery bằng cách sử dụng. dữ liệu[] và $. phương pháp dữ liệu []

xe đẩy. html

Trang giỏ hàng của chúng tôi được tạo thành từ ba thành phần. một bảng có thông tin của sản phẩm, một thành phần hiển thị tổng phụ và danh sách các hành động của giỏ hàng



    
                Item
                Qty
                Price
            
        
            
        
        
    
    
        Sub Total: 
    
    
        
            
        
        
            
        
        
            Continue Shopping
        
        
            Go To Checkout

Bảng chứa trong trang này trống và chúng tôi sẽ điền dữ liệu vào bảng qua JavaScript. Phần tử hiển thị tổng phụ hoạt động như một trình giữ chỗ cho JavaScript. Hai hành động đầu tiên, “Cập nhật giỏ hàng” và “Làm trống giỏ hàng” sẽ được xử lý bằng JavaScript, trong khi hai hành động sau chỉ là các liên kết đơn giản đến trang danh sách của sản phẩm và trang thanh toán, tương ứng

Thủ tục thanh toán. html

Trang này có bốn thành phần

một bảng hiển thị các mặt hàng đã đặt [cùng một bảng được hiển thị trước đó trong phần giỏ hàng], cộng với giá cuối cùng và phí vận chuyển;
một biểu mẫu trong đó người dùng phải điền chi tiết thanh toán của họ;
một biểu mẫu với thông tin vận chuyển;
một hộp kiểm để cho phép người dùng chỉ định rằng chi tiết thanh toán của họ giống với chi tiết giao hàng của họ



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping

Thuộc tính dữ liệu được sử dụng ở đây để xác thực. Thuộc tính



    
                Item
                Qty
                Price
            
        
            
        
        
    
    
        Sub Total: 
    
    
        
            
        
        
            
        
        
            Continue Shopping
        
        
            Go To Checkout

5 chỉ định loại dữ liệu chúng tôi đang xác thực và



    
                Item
                Qty
                Price
            
        
            
        
        
    
    
        Sub Total: 
    
    
        
            
        
        
            
        
        
            Continue Shopping
        
        
            Go To Checkout

6 chứa thông báo lỗi sẽ hiển thị trong trường hợp không thành công

Tôi không sử dụng tính năng xác thực email được tích hợp trong trình duyệt Web chỉ vì mục đích đơn giản, nhưng bạn có thể sử dụng nó nếu muốn

gọi món. html

Trang cuối cùng này chứa một bản tóm tắt ngắn gọn về đơn đặt hàng của người dùng, thông tin chi tiết của họ và biểu mẫu PayPal


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

    
        Total: 
    



    Your Data

Biểu mẫu PayPal và các thành phần khác của trang này ban đầu trống, ngoại trừ những trường không cần tạo động

Mã JavaScript

Bố cục CSS của dự án này sẽ không có ảnh hưởng thực sự đến mục tiêu mà chúng tôi muốn đạt được. Ngay cả khi chúng tôi tắt CSS hoàn toàn, dự án vẫn tiếp tục hoạt động nhờ mối quan hệ chặt chẽ giữa cấu trúc của HTML và hành vi của JavaScript

Chúng tôi sẽ sử dụng cách tiếp cận hướng đối tượng vì sự phức tạp của các mục tiêu của chúng tôi. Đối tượng của chúng ta sẽ dựa trên một mẫu cấu trúc đơn giản và sẽ sử dụng cả phương thức riêng tư và công khai

Cấu trúc đối tượng

Đối tượng của chúng tôi có cấu trúc rất đơn giản. Cả hai hàm khởi tạo đều khởi tạo phần tử cấp cao nhất bao bọc toàn bộ cấu trúc DOM của chúng ta và gọi phương thức khởi tạo


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];

Thể hiện của đối tượng được tạo khi DOM sẵn sàng. Chúng tôi có thể kiểm tra xem mọi thứ đã hoạt động tốt như sau


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

Điều này xuất ra như sau


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

Bây giờ chúng ta biết đối tượng của mình đã được khởi tạo chính xác, chúng ta có thể định nghĩa các thuộc tính của nó

Thuộc tính đối tượng

Các thuộc tính của đối tượng của chúng tôi chia thành hai loại. thứ nhất, các thuộc tính để xử lý tính toán, biểu mẫu và xác thực và thứ hai, các tham chiếu đến phần tử HTML


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

Hãy lần lượt đi qua các thuộc tính này

Lưu trữ và các thuộc tính khác



    
                Item
                Qty
                Price
            
        
            
        
        
    
    
        Sub Total: 
    

  

    
        
            
        
        
            
        
        
            Continue Shopping
        
        
            Go To Checkout

7 Tiền tố được thêm vào khóa tên của giỏ hàng trong bộ nhớ phiên



    
                Item
                Qty
                Price
            
        
            
        
        
    
    
        Sub Total: 
    
    
        
            
        
        
            
        
        
            Continue Shopping
        
        
            Go To Checkout

8 Khóa tên của giỏ hàng trong bộ lưu trữ phiên [kết hợp chuỗi



    
                Item
                Qty
                Price
            
        
            
        
        
    
    
        Sub Total: 
    
    
        
            
        
        
            
        
        
            Continue Shopping
        
        
            Go To Checkout

7 với chuỗi



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping

1 Khóa tỷ lệ vận chuyển trong lưu trữ phiên


var cart = {
    item: "Product 1",
    price: 35.50,
    qty: 2
};
var jsonStr = JSON.stringify[ cart ];
sessionStorage.setItem[ "cart", jsonStr ];
// now the cart is {"item":"Product 1","price":35.50,"qty":2}
var cartValue = sessionStorage.getItem[ "cart" ];
var cartObj = JSON.parse[ cartValue ];
// original object

8 Khóa của tổng số trong bộ lưu trữ phiên



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping

3 Lối tắt đến đối tượng


var cart = {
    item: "Product 1",
    price: 35.50,
    qty: 2
};
var jsonStr = JSON.stringify[ cart ];
sessionStorage.setItem[ "cart", jsonStr ];
// now the cart is {"item":"Product 1","price":35.50,"qty":2}
var cartValue = sessionStorage.getItem[ "cart" ];
var cartObj = JSON.parse[ cartValue ];
// original object



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping

5 Một thực thể HTML được sử dụng để hiển thị đơn vị tiền tệ hiện tại trong bố cục



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping

6 Ký hiệu tiền tệ hiện tại được sử dụng trong văn bản của phần tử



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping

7 Mã văn bản tiền tệ của PayPal



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping

8 Địa chỉ email của tài khoản PayPal Doanh nghiệp của bạn



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping

9 URL của biểu mẫu PayPal [mặc định là URL của PayPal Sandbox]


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

    
        Total: 
    



    Your Data

0 Một đối tượng chứa các mẫu và quy tắc để xác thực mẫu

Tham chiếu đến các phần tử


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

    
        Total: 
    



    Your Data

1 Biểu mẫu thêm sản phẩm vào giỏ hàng


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

    
        Total: 
    



    Your Data

2 Biểu mẫu giỏ hàng


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

    
        Total: 
    



    Your Data

3 Biểu mẫu giỏ hàng của thanh toán


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

    
        Total: 
    



    Your Data

4 Biểu mẫu thanh toán nơi người dùng nhập thông tin cá nhân của họ


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

  


    
        Total: 
    



    Your Data

5 Phần tử chứa và hiển thị giá vận chuyển


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

    
        Total: 
    



    Your Data

6 Phần tử chứa và hiển thị tổng chi phí


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

    
        Total: 
    



    Your Data

7 Các phần tử chứa các hành động liên quan đến giỏ hàng


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

    
        Total: 
    



    Your Data

8 Nút cập nhật giỏ hàng


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

    
        Total: 
    



    Your Data

9 Nút làm trống giỏ hàng


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];

0 Phần tử chứa và hiển thị thông tin do người dùng nhập vào


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];

1 Biểu mẫu của PayPal

Tất cả các phần tử đều có tiền tố là ký hiệu


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];

2, nghĩa là chúng là các đối tượng jQuery. Nhưng không phải tất cả các yếu tố này đều có sẵn trên tất cả các trang. Để kiểm tra xem một phần tử jQuery có tồn tại hay không, chỉ cần kiểm tra thuộc tính


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];

3 của nó


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

Một cách tiếp cận khác, không được sử dụng trong dự án của chúng tôi, là thêm một ID hoặc lớp cụ thể vào phần tử


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];

4 và thực hiện các hành động có điều kiện


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

phương pháp đối tượng

Các hành động trong mã của chúng tôi diễn ra trong các phương thức của đối tượng, do đó, có thể được chia thành các phương thức công khai và riêng tư. Có thể nói, các phương thức riêng tư hoạt động ở chế độ nền và giúp các phương thức công khai thực hiện nhiệm vụ của chúng. Các phương pháp này được bắt đầu bằng dấu gạch dưới và không bao giờ được sử dụng trực tiếp

Trong khi đó, các phương thức công khai hoạt động trực tiếp trên các thành phần và dữ liệu của trang và chúng không được trộn. Chúng ta đã thấy phương thức


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];

5, phương thức này chỉ khởi tạo các thuộc tính và các phương thức công khai khác trong hàm tạo của đối tượng. Các phương pháp khác sẽ được giải thích dưới đây

Phương pháp riêng tư [Người trợ giúp]

Phương pháp riêng tư đầu tiên,


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];

6, chỉ đơn giản làm trống bộ nhớ phiên hiện tại trong trình duyệt


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

Để định dạng một số theo một số vị trí thập phân đã đặt, chúng tôi triển khai phương thức


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

Phương thức này sử dụng phương thức toFixed[] của JavaScript của đối tượng


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];

8. Vai trò của nó trong dự án của chúng tôi là định dạng đúng giá

Vì không phải tất cả giá trong các trang của chúng tôi đều có trong thuộc tính dữ liệu nên chúng tôi cần một phương pháp chuyên dụng để trích xuất phần số của chuỗi từ các nút văn bản. Phương pháp này được đặt tên là


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

Ở trên,


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

0 là một tham chiếu đến đối tượng


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

1 và chúng ta sẽ cần nó mỗi khi muốn truy cập một thuộc tính hoặc một phương thức của đối tượng mà không phải lo lắng nhiều về phạm vi

Bạn có thể chống đạn cho phương pháp này bằng cách thêm một quy trình khác để loại bỏ tất cả các khoảng trắng ở cuối


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

Hãy nhớ rằng $ của jQuery. Phương thức trim[] xóa tất cả các dòng, khoảng trắng mới [bao gồm cả khoảng trắng không ngắt] và các tab từ đầu và cuối chuỗi. Nếu các ký tự khoảng trắng này xuất hiện ở giữa một chuỗi, chúng sẽ được giữ nguyên

Sau đó, chúng ta cần hai phương thức để chuyển đổi chuỗi thành số và số thành chuỗi. Điều này là cần thiết để thực hiện các phép tính và hiển thị kết quả trên các trang của chúng tôi


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

Ở trên,


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

2 chạy các bài kiểm tra sau

Chuỗi có định dạng thập phân không?
Chuỗi có định dạng số nguyên không?
Nếu định dạng của chuỗi không thể được phát hiện, nó sẽ sử dụng hàm tạo Number[]
Nếu kết quả là một số [được kiểm tra bằng hàm isNaN[]], nó sẽ trả về số. Mặt khác, nó đưa ra một cảnh báo cho bảng điều khiển JavaScript và trả về
```
$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];
```
3

Ngược lại,


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

4 chỉ cần gọi phương thức toString[] để chuyển đổi một số thành một chuỗi

Bước tiếp theo là xác định hai phương thức để chuyển đổi một đối tượng JavaScript thành chuỗi JSON và chuỗi JSON trở lại thành đối tượng JavaScript


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

Phương thức đầu tiên sử dụng phương thức



    
                Item
                Qty
                Price
            
        
            
        
        
    
    
        Sub Total: 
    
    
        
            
        
        
            
        
        
            Continue Shopping
        
        
            Go To Checkout

0, trong khi phương thức sau sử dụng phương thức

9 [xem bài viết của Mozilla Developer Network về “Sử dụng JSON gốc”]

Tại sao chúng ta cần những phương pháp này?

KeyValue


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

Khóa


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

7 chứa một chuỗi JSON đại diện cho một mảng các đối tượng [i. e.


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

00] trong đó mỗi đối tượng hiển thị thông tin liên quan về sản phẩm do người dùng thêm vào — cụ thể là tên, số lượng và giá của sản phẩm

Rõ ràng là bây giờ chúng ta cũng cần một phương pháp chuyên biệt để thêm các mục vào khóa cụ thể này trong bộ nhớ phiên


var total = parseInt[ sessionStorage.getItem[ "total" ] ];
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem[ "total", updatedTotal ]; // '240', a string

Phương thức này lấy khóa của giỏ hàng từ bộ lưu trữ phiên, chuyển đổi nó thành một đối tượng JavaScript và thêm một đối tượng mới dưới dạng chuỗi JSON vào mảng của giỏ hàng. Đối tượng mới được thêm vào có định dạng sau


var total = parseInt[ sessionStorage.getItem[ "total" ] ];
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem[ "total", updatedTotal ]; // '240', a string

Bây giờ, chìa khóa giỏ hàng của chúng tôi sẽ trông như thế này

KeyValue


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

Vận chuyển được tính theo tổng số sản phẩm được thêm vào giỏ hàng, không phải số lượng của từng sản phẩm riêng lẻ


var total = parseInt[ sessionStorage.getItem[ "total" ] ];
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem[ "total", updatedTotal ]; // '240', a string

Bạn có thể thay thế quy trình của phương pháp này bằng quy trình của riêng bạn. Trong trường hợp này, phí vận chuyển được tính dựa trên số tiền cụ thể

Chúng tôi cũng cần xác thực biểu mẫu thanh toán nơi người dùng nhập thông tin cá nhân của họ. Phương pháp sau đây tính đến chuyển đổi khả năng hiển thị đặc biệt mà người dùng có thể chỉ định rằng thông tin thanh toán của họ giống với thông tin vận chuyển của họ


var total = parseInt[ sessionStorage.getItem[ "total" ] ];
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem[ "total", updatedTotal ]; // '240', a string

Khi các thông báo xác thực được thêm vào khi biểu mẫu được gửi, chúng tôi cần xóa các thông báo này trước khi tiếp tục. Trong trường hợp này, chúng tôi chỉ tính đến các trường có trong phần tử


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

03 vẫn hiển thị sau khi người dùng đã kiểm tra chuyển đổi mức độ hiển thị

Việc xác thực diễn ra bằng cách kiểm tra xem trường hiện tại có yêu cầu so sánh chuỗi đơn giản [


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

04] hay kiểm tra biểu thức chính quy [


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

05]. Các thử nghiệm của chúng tôi dựa trên thuộc tính


Your Order


            Item
            Qty
            Price
        
    
        
    
    
    



    
        Shipping: 
    

  


    
        Total: 
    



    Your Data

0. Nếu có lỗi, chúng tôi sẽ hiển thị thông báo bằng cách sử dụng thuộc tính



    
                Item
                Qty
                Price
            
        
            
        
        
    
    
        Sub Total: 
    
    
        
            
        
        
            
        
        
            Continue Shopping
        
        
            Go To Checkout

6 của từng trường

Lưu ý rằng các quy trình xác thực được sử dụng ở trên đã được chèn vào chỉ nhằm mục đích trình diễn và chúng có một số sai sót. Để xác thực tốt hơn, tôi khuyên dùng plugin jQuery chuyên dụng, chẳng hạn như Xác thực jQuery

Cuối cùng nhưng không kém phần quan trọng là đăng ký thông tin mà người dùng đã nhập trong biểu mẫu thanh toán


var total = parseInt[ sessionStorage.getItem[ "total" ] ];
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem[ "total", updatedTotal ]; // '240', a string

Một lần nữa, phương pháp này tính đến khả năng hiển thị của các trường dựa trên lựa chọn của người dùng. Khi biểu mẫu đã được gửi, bộ nhớ phiên của chúng tôi có thể có các chi tiết sau được thêm vào

KeyValue


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

08John Doe


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

09jdoe@localhost


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

10New York


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

11Street 1


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

121234


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

13USA

Phương thức công khai

Các phương thức công khai của chúng ta được gọi trong phương thức khởi tạo [


[function[ $ ] {
    $.Shop = function[ element ] {
        this.$element = $[ element ]; // top-level element
        this.init[];
    };

    $.Shop.prototype = {
        init: function[] {
            // initializes properties and methods
        }
    };

    $[function[] {
        var shop = new $.Shop[ "#site" ]; // object's instance
    }];

}][ jQuery ];

5]. Điều đầu tiên cần làm là tạo các khóa và giá trị ban đầu trong bộ nhớ phiên


var total = parseInt[ sessionStorage.getItem[ "total" ] ];
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem[ "total", updatedTotal ]; // '240', a string

Kiểm tra đầu tiên kiểm tra xem các giá trị của chúng tôi đã được thêm vào bộ nhớ phiên chưa. Chúng tôi cần thử nghiệm này vì chúng tôi thực sự có thể ghi đè lên các giá trị của mình nếu chúng tôi chạy phương thức này mỗi khi tài liệu tải xong

Bây giờ, bộ nhớ phiên của chúng tôi trông như thế này

KeyValue


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

7{“items”. []}


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

160_______12_______170

Bây giờ, chúng tôi cần xử lý các biểu mẫu mà người dùng có thể thêm sản phẩm vào giỏ hàng của họ


var total = parseInt[ sessionStorage.getItem[ "total" ] ];
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem[ "total", updatedTotal ]; // '240', a string

Mỗi khi người dùng gửi một trong các biểu mẫu này, chúng tôi phải đọc số lượng sản phẩm do người dùng chỉ định và nhân nó với đơn giá. Sau đó, chúng ta cần đọc khóa của tổng số có trong bộ nhớ phiên và cập nhật giá trị của nó cho phù hợp. Sau khi hoàn thành việc này, chúng tôi gọi phương thức


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

18 để lưu trữ thông tin chi tiết của sản phẩm trong kho lưu trữ. Số lượng đã chỉ định cũng sẽ được sử dụng để tính phí vận chuyển bằng cách so sánh giá trị của nó với giá trị đã được lưu trữ

Giả sử rằng người dùng chọn sản phẩm đầu tiên, Wine #1, có giá €5. 00 và chỉ định số lượng là 5. Lưu trữ phiên sẽ trông như thế này sau khi biểu mẫu đã được gửi

KeyValue


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

7{“items”. [{"sản phẩm". “Rượu số 1”,“giá”. 5, "số lượng". 5}]}


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

160


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

1725

Giả sử cùng một người dùng quay lại danh sách sản phẩm và chọn Rượu số 2, có giá €8. 00 và chỉ định số lượng là 2

KeyValue


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

7{“items”. [{"sản phẩm". “Rượu số 1”,“giá”. 5, "số lượng". 5},{“sản phẩm”. “Rượu #2”,“giá”. 8, "số lượng". 2}]}


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

160


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

1741

Cuối cùng, người dùng háo hức của chúng tôi quay lại danh sách sản phẩm, chọn Rượu số 3, có giá €11. 00 và chỉ định số lượng là 6

KeyValue


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

7{“items”. [{"sản phẩm". “Rượu số 1”,“giá”. 5, "số lượng". 5},{“sản phẩm”. “Rượu #2”,“giá”. 8, "số lượng". 2},{“sản phẩm”. “Rượu #3”, “giá”. 11,“số lượng”. 6}]}


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

1610


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

17107

Lúc này chúng ta cần hiển thị chính xác giỏ hàng khi người dùng vào trang giỏ hàng hoặc trang thanh toán


var total = parseInt[ sessionStorage.getItem[ "total" ] ];
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem[ "total", updatedTotal ]; // '240', a string

Nếu bảng của giỏ hàng nằm trên trang giỏ hàng, thì phương thức này sẽ lặp lại mảng đối tượng có trong khóa


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

7 và điền vào bảng bằng cách thêm trường văn bản để cho phép người dùng sửa đổi số lượng của từng sản phẩm. Để đơn giản, tôi không bao gồm hành động xóa một mặt hàng khỏi giỏ hàng, nhưng quy trình đó khá đơn giản

Nhận mảng


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

00, chứa trong bộ lưu trữ phiên

Lấy tên của sản phẩm, chứa trong phần tử


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

30 với lớp


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

Tạo một mảng mới bằng cách lọc ra mục có tên sản phẩm, lấy được ở bước 2 [bạn có thể sử dụng $. grep[]]

Lưu mảng mới trong khóa


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

Cập nhật giá trị tổng cộng và phí vận chuyển


var total = parseInt[ sessionStorage.getItem[ "total" ] ];
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem[ "total", updatedTotal ]; // '240', a string

Sau đó, chúng tôi cần một phương thức cập nhật giỏ hàng với giá trị số lượng mới cho từng sản phẩm


var total = parseInt[ sessionStorage.getItem[ "total" ] ];
var quantity = 2;
var updatedTotal = total * quantity;
sessionStorage.setItem[ "total", updatedTotal ]; // '240', a string

Phương thức của chúng tôi lặp qua tất cả các ô trong bảng có liên quan của giỏ hàng và xây dựng một đối tượng mới để chèn vào khóa


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

7. Nó cũng tính toán lại tổng giá và phí vận chuyển bằng cách tính đến các giá trị mới được chèn vào của các trường số lượng

Giả sử rằng người dùng thay đổi số lượng Rượu #2 từ 2 thành 6

KeyValue


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

7{“items”. [{"sản phẩm". “Rượu số 1”,“giá”. 5, "số lượng". 5},{“sản phẩm”. “Rượu #2”,“giá”. 8, "số lượng". 6},{“sản phẩm”. “Rượu #3”, “giá”. 11,“số lượng”. 6}]}


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

1620


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

17139

Nếu người dùng muốn làm trống giỏ hàng của họ và bắt đầu lại, chúng tôi chỉ cần thêm hành động sau


var cart = {
    item: "Product 1",
    price: 35.50,
    qty: 2
};
var jsonStr = JSON.stringify[ cart ];
sessionStorage.setItem[ "cart", jsonStr ];
// now the cart is {"item":"Product 1","price":35.50,"qty":2}
var cartValue = sessionStorage.getItem[ "cart" ];
var cartObj = JSON.parse[ cartValue ];
// original object

Giờ đây, bộ nhớ phiên đã được làm trống hoàn toàn và người dùng có thể bắt đầu mua lại. Tuy nhiên, nếu họ quyết định hoàn tất đơn đặt hàng của mình, thì chúng tôi cần xử lý biểu mẫu thanh toán khi họ nhập thông tin cá nhân của mình


var cart = {
    item: "Product 1",
    price: 35.50,
    qty: 2
};
var jsonStr = JSON.stringify[ cart ];
sessionStorage.setItem[ "cart", jsonStr ];
// now the cart is {"item":"Product 1","price":35.50,"qty":2}
var cartValue = sessionStorage.getItem[ "cart" ];
var cartObj = JSON.parse[ cartValue ];
// original object

Điều đầu tiên chúng ta cần làm là ẩn các trường vận chuyển nếu người dùng kiểm tra chuyển đổi xác định rằng thông tin thanh toán của họ giống với thông tin vận chuyển của họ. Chúng tôi sử dụng sự kiện


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

37, kết hợp với jQuery. phương pháp chống đỡ []. [Nếu bạn tò mò về sự khác biệt giữa


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

38 và


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

39, StackOverflow có một cuộc thảo luận hay về nó. ]

Sau đó, chúng tôi xác thực biểu mẫu bằng cách trả lại giá trị


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

3 trong trường hợp có lỗi, do đó ngăn không cho biểu mẫu được gửi. Nếu xác thực thành công, chúng tôi sẽ lưu dữ liệu của người dùng vào bộ lưu trữ. Ví dụ

KeyValue


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

1620


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

17139


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

08John Doe


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

09jdoe@localhost


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

10New York


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

11Street 1


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

121234


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

13USABước cuối cùng là trang có biểu mẫu PayPal. Trước tiên, chúng tôi cần hiển thị thông tin của người dùng được thu thập trên trang thanh toán.


var cart = {
    item: "Product 1",
    price: 35.50,
    qty: 2
};
var jsonStr = JSON.stringify[ cart ];
sessionStorage.setItem[ "cart", jsonStr ];
// now the cart is {"item":"Product 1","price":35.50,"qty":2}
var cartValue = sessionStorage.getItem[ "cart" ];
var cartObj = JSON.parse[ cartValue ];
// original object

Trước tiên, phương pháp của chúng tôi sẽ kiểm tra xem người dùng đã nhập thông tin thanh toán hoặc thông tin giao hàng hay cả hai. Sau đó, nó chỉ cần xây dựng một đoạn HTML bằng cách lấy dữ liệu của người dùng từ bộ nhớ phiên

Cuối cùng, người dùng có thể mua sản phẩm bằng cách gửi biểu mẫu PayPal. Biểu mẫu chuyển hướng họ đến PayPal, nhưng các trường cần được điền chính xác trước khi có thể gửi biểu mẫu


var cart = {
    item: "Product 1",
    price: 35.50,
    qty: 2
};
var jsonStr = JSON.stringify[ cart ];
sessionStorage.setItem[ "cart", jsonStr ];
// now the cart is {"item":"Product 1","price":35.50,"qty":2}
var cartValue = sessionStorage.getItem[ "cart" ];
var cartObj = JSON.parse[ cartValue ];
// original object

Đầu tiên, chúng tôi nhận được một số thông tin quan trọng từ lưu trữ phiên - cụ thể là tỷ lệ vận chuyển và tổng số mặt hàng trong giỏ hàng. Chúng tôi chia tổng số tiền vận chuyển cho số lượng mặt hàng để tính phí vận chuyển cho từng mặt hàng

Sau đó, chúng tôi đặt URL cho thuộc tính


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

50 của biểu mẫu, cùng với email doanh nghiệp và mã tiền tệ của chúng tôi [được lấy từ các thuộc tính



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping

8 và



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping

7 tương ứng]

Cuối cùng, chúng tôi lặp qua các mặt hàng trong giỏ hàng của mình và chúng tôi thêm vào biểu mẫu một số thành phần đầu vào ẩn có chứa số lượng, tên sản phẩm, số lượng mặt hàng cho từng sản phẩm, giá [số lượng] và đơn giá vận chuyển

Các giá trị tiền tệ được định dạng là


var total = sessionStorage.getItem[ "total" ];
console.log[ total ]; // '120', a string

53. Việc giải thích tất cả các giá trị có thể có của biểu mẫu PayPal và các loại biểu mẫu PayPal khác nhau nằm ngoài phạm vi của bài viết này. Nếu bạn muốn tìm hiểu sâu hơn, tôi khuyên bạn nên đọc phần sau

“Thông tin cơ bản về biểu mẫu HTML cho Tiêu chuẩn thanh toán PayPal,” Nhà phát triển PayPal
“Các biến HTML cho tiêu chuẩn thanh toán PayPal,” Nhà phát triển PayPal

Xem trước và mã nguồn

Video sau đây cho thấy kết quả. Tôi đã bỏ qua trang đích của PayPal để bảo vệ dữ liệu tài khoản của mình

Lấy mã từ kho lưu trữ GitHub. Chỉ cần thay đổi thuộc tính



            Item
            Qty
            Price
        
    
        
    
    

    



    
        Shipping: 
    

    
        Total: 
    



    Your Details
        
            Billing
                


    Name
    



    Email
    



    City
    



    Address
        



    ZIP Code
    



    Country
        
            Select
            USA
            Italy
        



Same as Billing 


Shipping

8 của đối tượng


$[function[] {
    var shop = new $.Shop[ "#site" ];
    console.log[ shop.$element ];
}];

1 thành tài khoản email PayPal Sandbox của bạn

Làm cách nào để tạo giỏ hàng bằng JavaScript?

Tạo Giỏ hàng bằng Mảng và Đối tượng trong vanilla JavaScript .

Tiếp cận. Ban đầu, bạn có một danh sách các mặt hàng mua sắm được sắp xếp. .

Sở thích. .

Html cơ sở. .

Tạo thư viện vật phẩm. .

Tạo các chức năng cơ bản. .

Hiển thị danh sách mua sắm. .

Một chút CSS. .

Thêm và xóa các mặt hàng khỏi giỏ hàng

Tôi có thể kiếm việc làm chỉ với HTML, CSS và JavaScript không?

Tóm lại, bạn chắc chắn có thể tìm việc chỉ bằng HTML và CSS . Và nếu những kỹ năng cơ bản đó không đủ để giúp bạn có được công việc mơ ước, bạn vẫn có thể sử dụng chúng để bắt đầu kiếm tiền trong khi bạn đang xây dựng các kỹ năng khác.

Bạn có thể tạo một ứng dụng bằng HTML CSS và JavaScript không?

Apache Cordova là một khuôn khổ để xây dựng các ứng dụng dành cho thiết bị di động bằng HTML, CSS và JavaScript . Bạn có thể nhắm mục tiêu nhiều nền tảng với một cơ sở mã. Apache Cordova là một khung phát triển di động mã nguồn mở.

Chúng tôi có thể tạo trang web Thương mại điện tử bằng HTML và CSS không?

Người mới bắt đầu tạo Trang web thương mại điện tử bằng HTML và CSS dễ dàng hơn . Bước đầu tiên là tạo bố cục trang web của bạn bằng HTML. Bạn có thể tạo thanh điều hướng, thanh tìm kiếm và các trang có liên quan khác cho trang web của mình bằng HTML.

Bản tin email

mục lục. html

Wine #1

xe đẩy. html

Thủ tục thanh toán. html

Your Details

gọi món. html

Your Order

Your Data

Mã JavaScript

Cấu trúc đối tượng

Thuộc tính đối tượng

Your Details

Your Details

Your Details

Your Details

Your Details

Your Details

Your Details

Your Details

Your Order

Your Data

Your Order

Your Data

Your Order

Your Data

Your Order

Your Data

Your Order

Your Data

Your Order

Your Data

Your Order

Your Data

Your Order

Your Data

Your Order

Your Data

Your Order

Your Data

phương pháp đối tượng

Phương pháp riêng tư [Người trợ giúp]

Wine #1

Your Order

Your Data

Phương thức công khai

Your Details

Your Details

Xem trước và mã nguồn

Your Details

Làm cách nào để tạo giỏ hàng bằng JavaScript?

Tôi có thể kiếm việc làm chỉ với HTML, CSS và JavaScript không?

Bạn có thể tạo một ứng dụng bằng HTML CSS và JavaScript không?

Chúng tôi có thể tạo trang web Thương mại điện tử bằng HTML và CSS không?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề