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

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

• Danh sách kiểm tra thiết kế giao diện thông minh

• Nguyên tắc chung về kiểu chữ với Elliot Jay Stocks

• Giao diện người dùng SmashingConf 2023

• Các mẫu thiết kế giao diện Đào tạo UX

• Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern

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

Lưu trữ phiên là một tính năng mới được giới thiệu bởi đặc tả "Lưu trữ web" của W3C. Nó được hỗ trợ trong Internet Explorer 8+, Firefox, Chrome, Safari và Opera Desktop (để biết danh sách đầy đủ, vui lòng tham khảo “”). Trong loạt bài viết này, chúng ta sẽ đi sâu vào triển khai lưu trữ phiên thực tế bằng cách tạo một giỏ mua hàng thương mại điện tử hoàn chỉnh với đố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

Hãy nhớ rằng, trong các bài viết này, tôi sẽ không đề xuất một kỹ thuật mới để thay thế các kỹ thuật phía máy chủ hiện có, mà chỉ là một bằng chứng về khái niệm lưu trữ phiên.

Lưu trữ phiên. Lời nhắc nhanh

Chúng tôi sử dụng các phiên để lưu trữ dữ liệu và chia sẻ dữ liệu đó trên một số trang. Thông thường, người dùng sẽ chọn một sản phẩm và chúng tôi sẽ lưu tên sản phẩm cùng với số lượng và giá đã chọn

Sau đó, người dùng sẽ điền vào biểu mẫu có thông tin cá nhân của họ và chúng tôi sẽ lưu nó trong phiên hiện tại trước khi kết thúc quá trình, thường là trang thanh toán và chuyển hướng tiếp theo đến cổng thanh toán (ví dụ: PayPal

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Các biểu mẫu web là trung tâm của mọi tương tác có ý nghĩa, vì vậy chúng đáng để xử lý chắc chắn. Làm quen với Mẫu thiết kế biểu mẫu của Adam Silver, một hướng dẫn thiết thực để thiết kế và xây dựng biểu mẫu cho web

Đọc thêm trên SmashingMag.

• Nguyên tắc cơ bản của thiết kế thanh toán thương mại điện tử
• Giảm Giỏ Hàng Bị Bỏ Rơi Trong Thương Mại Điện Tử
• Bộ nhớ cục bộ và cách sử dụng nó trên trang web
• Hành trình nhỏ qua các trang web thương mại điện tử (nhỏ và lớn)

Giỏ hàng được xây dựng như thế nào? . Mảng kết hợp cho phép các nhà phát triển Web PHP giữ dữ liệu phiên có cấu trúc và tổ chức

Các phiên JavaScript hoạt động khác nhau. Nói chung, một phiên hết hạn khi người dùng đóng trình duyệt của họ (nhưng hãy nhớ rằng khái niệm “đóng trình duyệt” không rõ ràng trên thiết bị di động). Khi một phiên hết hạn, tất cả dữ liệu được lưu trữ trong bộ lưu trữ phiên của trình duyệt Web sẽ bị xóa. Không cần phải khởi tạo một phiên một cách rõ ràng vì trong JavaScript, một phiên có dạng đố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

Dữ liệu phiên có dạng cặp khóa-giá trị và giá trị của mỗi khóa chỉ có thể chứa các chuỗi. Để ghi dữ liệu, chúng ta có thể sử dụng phương thức

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

sessionStorage.setItem( "total", 120 );

Trong trường hợp này, khóa có tê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

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

    
Wine #1
        
€ 5
        

            

                Quantity
                
            
            

        

    
Wine #1
        
€ 5
        

            

                Quantity
                
            
            

        

    
Wine #1
        
€ 5
        

            

                Quantity
                
            
            

        

Lưu ý rằng khi khóa không tồn tại trong bộ lưu trữ phiên, giá trị của nó luôn là

    
Wine #1
        
€ 5
        

            

                Quantity
                
            
            

        

    
Wine #1
        
€ 5
        

            

                Quantity
                
            
            

        

Như bạn có thể đoán, khóa của chúng tôi hiện tại luôn có sẵn, ngay cả khi người dùng điều hướng các trang trên trang web của chúng tôi. Để có được giá trị của nó, chúng tôi chỉ cần viết như sau

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

Chúng tôi cũng có thể cập nhật giá trị của nó bằng cách sử dụng lại

    
Wine #1
        
€ 5
        

            

                Quantity
                
            
            

        

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

Bây giờ, khóa có tê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

    
Wine #1
        
€ 5
        

            

                Quantity
                
            
            

        

    
Wine #1
        
€ 5
        

            

                Quantity
                
            
            

        

Nhưng đợi đã. Còn đồ vật thì sao?

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

Để cập nhật đối tượng của chúng tôi, chúng tôi chỉ cần mở rộng nó và sau đó lặp lại quy trình trên

Cân nhắc về Bảo mật

Bảo mật là quan trọng. Nếu chúng tôi đọc thông số kỹ thuật của W3C, thì chúng tôi sẽ nhận thức được các rủi ro bảo mật của ngay cả một công nghệ phía máy khách, chẳng hạn như lưu trữ Web

Tài liệu kỹ thuật về bảo mật trang web (PDF) của Nhóm Sẵn sàng Khẩn cấp Máy tính Hoa Kỳ nêu rõ

“Mọi tổ chức cộng đồng, tập đoàn, doanh nghiệp hoặc cơ quan chính phủ đều dựa vào một trang web hướng ngoại để cung cấp thông tin về họ, thông báo một sự kiện hoặc bán sản phẩm hoặc dịch vụ. Do đó, các trang web công cộng thường là các vectơ tấn công được nhắm mục tiêu nhiều nhất cho hoạt động độc hại. ”

Ngay cả khi phiên trình duyệt kết thúc khi trình duyệt bị đóng, các cuộc tấn công nguy hiểm vẫn có thể xảy ra, đặc biệt nếu trình duyệt đã bị xâm phạm bởi một số khai thác nhất định. Hơn nữa, các trang web bị xâm nhập thường có thể được sử dụng để phát tán phần mềm độc hại nhắm mục tiêu đến các trình duyệt cụ thể

Vì lý do này, hãy đảm bảo trang web của bạn an toàn trước khi dựa vào bất kỳ kỹ thuật nào để lưu trữ dữ liệu trong trình duyệt. Giữ an toàn cho một trang web nằm ngoài phạm vi của bài viết này, nhưng chỉ cần làm theo các biện pháp bảo mật tốt nhất, bạn sẽ có thể hưởng lợi từ lưu trữ Web mà không phải lo lắng quá nhiều về tác động bảo mật của nó

Dự án mẫu của chúng tôi. Nhà máy rượu

Dự án mẫu của chúng tôi là một cửa hàng trực tuyến bán rượu. Đó là một trang web thương mại điện tử đơn giản với điểm phức tạp duy nhất là cách tính phí vận chuyển

Nói tóm lại, rượu vang được bán theo gói sáu chai. Điều này có nghĩa là tổng số lượng chai bán ra phải luôn là bội số của sáu. Sau đó, phí vận chuyển được tính theo tổng số lượng chai đã bán

Cửa hàng của chúng tôi sẽ dựa vào PayPal, vì vậy chúng tôi sẽ phải tạo tài khoản Doanh nghiệp trong PayPal Sandbox để kiểm tra mã của chúng tôi

Người dùng có thể thêm và xóa sản phẩm khỏi giỏ hàng của mình, cập nhật giỏ hàng, thay đổi số lượng của từng sản phẩm và làm trống giỏ hàng. Họ phải điền vào biểu mẫu thông tin liên hệ của họ, chỉ định xem địa chỉ thanh toán của họ có giống địa chỉ giao hàng hay không

Trước khi được chuyển hướng đến PayPal, người dùng sẽ thấy một trang tóm tắt với dữ liệu cá nhân, giỏ hàng của họ và tổng giá của giỏ hàng cộng với phí vận chuyển

Sau khi hoàn tất giao dịch mua của họ, người dùng sẽ được chuyển hướng trở lại trang web của chúng tôi. Đây là bước duy nhất của quy trình mà chúng tôi không thể xử lý chỉ với JavaScript. PayPal sẽ gửi lại nhiều dữ liệu khác nhau qua yêu cầu HTTP phải được xử lý bằng ngôn ngữ phía máy chủ (chẳng hạn như PHP). Nếu bạn cần thêm thông tin để bắt đầu với loại xử lý này, vui lòng tham khảo hướng dẫn của PayPal

Cấu trúc HTML

Dự án của chúng tôi bao gồm các phần sau

• 
  
      
  
          
  
              
  
                  
  Item
                  
  Qty
                  
  Price
              
          
          
  
      
      
  
          Sub Total: 
      
      
  
          
  
              
          
          
  
              
          
          
  
              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ọ

    
Wine #1
        
€ 5
        

            

                Quantity
                
            
            

        

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
        
    

    

        

            

                
Item
                
Qty
                
Price
            
        
        

    
    

        Sub Total: 
    
    

        

            
        
        

            
        
        

            Continue Shopping
        
        

            Go To Checkout
        
    

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
      
  
  
  
  
  
  

  0)

• 
  
      
  
          
  
              
  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
  

  4

• 
  
      
  
          
  
              
  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 );

(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

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 );

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 );

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 );

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 );

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 );
});

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

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 );
});

1. Chuỗi có định dạng thập phân không?
2. Chuỗi có định dạng số nguyên không?
3. 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()
4. 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 );
});

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
        
    

    
Wine #1
        
€ 5
        

            

                Quantity
                
            
            

        

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

$(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 );
});

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

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

$(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

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

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

Your Order


    

        

            
Item
            
Qty
            
Price
        
    
    

    



    

        Shipping: 
    

    

        Total: 
    



    
Your Data
        




    
    
    

    
    

    

        

            

                
Item
                
Qty
                
Price
            
        
        

    
    

        Sub Total: 
    
    

        

            
        
        

            
        
        

            Continue Shopping
        
        

            Go To Checkout
        
    

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

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

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

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

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

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

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

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 );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 );
});

1. 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
2. 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
   

   31
3. 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())
4. Lưu mảng mới trong khóa

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

   7
5. 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 );
});

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

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

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

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

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

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

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

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 );
});

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

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

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

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

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

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

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

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

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

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

    

        

            
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
    

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

• “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
    

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

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?