2016-05-05 13 views
0

Ich baue ein Javascript Warenkorb, wo der Benutzer ein Produkt in den Warenkorb mit einem Button hinzufügen und in der Lage, in den Warenkorb Übersicht Abschnitt die Menge des Produkts durch Eingabe einer Zahl in die Eingabe ändern können Feld und drücken Sie Update-Warenkorb. Wenn die Menge des Produkts Null ist, wird es nicht im Warenkorb angezeigt. Mein Problem ist, dass ich versuche, den Wert aus dem entsprechenden Eingabefeld innerhalb der updateCart-Funktion zu erhalten und den Cookie mit diesem Wert neu zu schreiben, und ich kann nicht herausfinden, was ich falsch mache. Wie würde ich darüber gehen?Umschreiben von Cookies

function retrieveCookie(cName) { 
 
\t if(document.cookie){ 
 
\t \t var cookieArray = document.cookie.split("; "); 
 
\t \t for(var i = 0; i < cookieArray.length; i++) { 
 
\t \t \t if(cookieArray[i].split("=")[0] == cName) { 
 
\t \t \t \t return unescape(cookieArray[i].split("=")[1]); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
} 
 

 
function writeCookie(cName, cValue, expDate, cPath, cDomain, cSecure) { 
 
    if (cName && cValue != "") { 
 
    var cString = cName + "=" + escape(cValue); 
 
    if (expDate) 
 
     cString += ";expires=" + expDate.toGMTString(); 
 

 
    if (cPath) cString += ";path=" + cPath; 
 
    if (cDomain) cString += ";domain=" + cDomain; 
 
    if (cSecure) cString += ";secure"; 
 

 

 
    document.cookie = cString; 
 
    } 
 
} 
 

 
var productPics = new Array(); 
 
var pictureDesc = new Array(); 
 
var productPrice = new Array(); 
 
var productShortName = new Array(); 
 

 
productPics[0] = "AllTheKids.jpg"; 
 
productPics[1] = "susie.jpg"; 
 
productPics[2] = "princess.jpg"; 
 
productPics[3] = "wicketAndCarlos.jpg"; 
 
productPics[4] = "wicketAndGeorge.jpg"; 
 

 
productShortName[0] = "atk"; 
 
productShortName[1] = "s"; 
 
productShortName[2] = "p"; 
 
productShortName[3] = "wac"; 
 
productShortName[4] = "wag"; 
 

 
productPrice[0] = "5.00"; 
 
productPrice[1] = "5.00"; 
 
productPrice[2] = "5.00"; 
 
productPrice[3] = "5.00"; 
 
productPrice[4] = "5.00"; 
 

 
pictureDesc[0] = "product1"; 
 
pictureDesc[1] = "product2"; 
 
pictureDesc[2] = "product3"; 
 
pictureDesc[3] = "product4"; 
 
pictureDesc[4] = "product5"; 
 

 
alert(document.cookie); 
 

 
function writeTable() { 
 

 
    var table = "<table border='1'><thead><tr><td>Product</td><td>Description</td><td>Price</td><td>Purchase</td></tr></thead>"; 
 

 
    for (var i = 0; i < productPics.length; i++) { 
 
    table += "<tr><td><a href='" + productPics[i].replace(/.jpg/, '.html') + "'><img src='" + productPics[i] + "' height='100px'></a></td>" 
 
    table += "<td>" + pictureDesc[i] + "</td>" 
 
    table += "<td>$" + productPrice[i] + "</td>" 
 
    var results = (retrieveCookie(productPics[i].replace(/.jpg/, ''))) ? retrieveCookie(productPics[i].replace(/.jpg/, '')) : 0; 
 
    table += "<td><input type='button' onclick='addToCart(" + i + ")' value='Add To Cart'></td></tr>"; 
 
    } 
 
    table += "</table>"; 
 
    document.write(table); 
 
} 
 

 
function addToCart(index) { 
 
    var cookieName = productShortName[index] + '~' + productPrice[index]; 
 
    if (retrieveCookie(cookieName)) { 
 

 
    writeCookie(cookieName, parseInt(retrieveCookie(cookieName)) + 1); 
 
    } else { 
 
    writeCookie(cookieName, "1"); 
 
    } 
 
} 
 

 
function viewCart() { 
 

 
    var table = "<table border='1'><thead><tr><td>Product</td><td>Description</td><td>Price</td><td>Quantity</td></tr></thead>"; 
 

 

 
    for (var i = 0; i < productPics.length; i++) { 
 
    var cookieName = productShortName[i] + '~' + productPrice[i]; 
 
    if (retrieveCookie(cookieName)) { 
 
     table += "<tr><td><a href='" + productPics[i].replace(/.jpg/, '.html') + "'><img src='" + productPics[i] + "' height='100px'></a></td>" 
 
     table += "<td>" + pictureDesc[i] + "</td>" 
 
     table += "<td>$" + productPrice[i] + "</td>" 
 
     var cartValue = (retrieveCookie(cookieName)) ? retrieveCookie(cookieName) : 0; 
 
     table += "<td><input class='cartInputs' type='text' id='" + cookieName + "' value='" + cartValue + "'></td></tr>"; 
 
    } 
 
    } 
 
    var total = 'total'; 
 
    table += "<td colspan='2'><input type='button' onclick='updateCart()' value='Update Cart'>" 
 
    table += "</td><td>Total:</td><td>" + total + "</td>" 
 
    table += "</table></br>"; 
 
    document.write(table); 
 
} 
 

 
function updateCart() { 
 
    var inputValues = document.getElementsByTagName("input"); 
 
    var cookieName = productShortName[index] + '~' + productPrice[index]; 
 

 
    if (inputValues.id = cookieName) { 
 
    for (var i = 0; i < inputValues.length; i++) { 
 
     writeCookie(cookieName, document.getElementById(cookieName).value); 
 
    } 
 
    } 
 
}
<!DOCTYPE html> 
 
<head> 
 
<title>Shopping Cart</title> 
 
    
 
    <script type="text/javascript" src="test.js"></script> 
 
    <script src = "cookies.js"></script> 
 

 
</head> 
 

 
<body class="twoColLiqLtHdr"> 
 

 
<div id="container"> 
 
    
 
</div> 
 
<div id="mainContent"> 
 
    <h2>Add to Cart</h2> 
 
    <script> 
 
\t \t writeTable(); 
 
\t 
 
\t </script></br> 
 
\t <h2>Cart Overview</h2> 
 
\t <script> 
 
\t \t viewCart(); 
 
\t 
 
\t </script></br> 
 
</div> 
 
</body> 
 
</html>

Antwort

0

Werfen Sie einen Blick auf https://github.com/js-cookie/js-cookie/tree/v2.1.1#readme sind einfach es Ihnen Website:

<script src="/path/to/js.cookie.js"></script> 

Grundsätzliche Verwendung

ein Cookie erstellen, gültig für die gesamte Seite? ˅ :

Cookies.set('name', 'value'); 

ein Cookie erstellen, die 7 Tage ab jetzt, gültig für die gesamte Seite gültig bis:

Cookies.set('name', 'value', { expires: 7 }); 

Eine auslaufende Cookie, gültig auf den Pfad der aktuellen Seite:

Cookies.set('name', 'value', { expires: 7, path: '' }); 

lesen Cookie:

Cookies.get('name'); // => 'value' 
Cookies.get('nothing'); // => undefined 

Lesen Sie alle sichtbaren Cookies:

Cookies.get(); // => { name: 'value' } 

Delete Cookie:

Cookies.remove('name'); 

Löschen eines Cookie gültig auf den Pfad der aktuellen Seite:

Cookies.set('name', 'value', { path: '' }); 
Cookies.remove('name'); // fail! 
Cookies.remove('name', { path: '' }); // removed!