Cart_WithService.ssp

 

The following code creates a View Cart touchpoint that references an UpdateQuantity backend function. To work, this code requires the UpdateQuantity.ss file.

<html> <head> <%=getPageFullHead()%> <script language="JavaScript"> var xmlhttp = new XMLHttpRequest(); /* * Dynamically build out the cart header */ function buildCartHeader() { var tHead = cartTable.createTHead(); var row, cell; row = tHead.insertRow(-1); tHead.setAttribute("bgColor","lightskyblue"); cell = row.insertCell(-1); cell.align = "center"; cell.style.fontWeight = "bold"; cell.innerHTML = 'Item'; cell = row.insertCell(-1); cell.align = "center"; cell.style.fontWeight = "bold"; cell.innerHTML = 'QTY'; cell = row.insertCell(-1); cell.align = "center"; cell.style.fontWeight = "bold"; cell.innerHTML = 'Rate'; cell = row.insertCell(-1); cell.align = "center"; cell.style.fontWeight = "bold"; cell.innerHTML = 'Amount'; } /* * Dynamically build out the cart */ function buildCartItems(items) { var row, cell; // Insert table rows and cells into body for (var i=0; i<items.length; i++) { row = cartBody.insertRow(-1); cell = row.insertCell(-1); cell.innerHTML = items[i].name; cell = row.insertCell(-1); cell.innerHTML = items[i].quantity; cell = row.insertCell(-1); cell.innerHTML = items[i].rate; cell = row.insertCell(-1); cell.innerHTML = items[i].amount; } // Set the background color of the table body. cartBody.setAttribute("bgColor","white"); } /* * Process result of AJAX call to update quantity */ function handleServiceResponse() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // remove the cart contents document.getElementById('cartBody').innerHTML = ''; // parse the JSON result into JavaScript objects, // and rebuild the cart var items = JSON.parse(xmlhttp.responseText); buildCartItems(items); } } /* * AJAX call to NetSuite service * Service updates the quantity on line 1 */ function updateQuantity() { xmlhttp.onreadystatechange=handleServiceResponse; xmlhttp.open('POST', 'updateQuantity.ss', true); xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); try { xmlhttp.send('quantity=' + document.getElementById('quantity').value); } catch (ex) { alert(ex); } } </script> </head> <body> <table cellpadding=0 cellspacing=0 border=0 width=100%> <%=getPageTop()%> </table> <button id="updateqty"type="button"onclick="updateQuantity();">Update QTY(line1)</button> <input id="quantity"type="text"/> <br><br> <table id="cartTable"border="1"bgcolor="lightslategray"> <tbody id="cartBody"></tbody> </table> <script language="JavaScript"> <%var order = nlapiGetWebContainer().getShoppingSession().getOrder();%> // JSON.parse not used here since client script is generated similar to... // var items = '[{"itemid":"Urban Dining Table","onlinecustomerprice":"1686.26"' // Setting a variable explicitly equal to a JSON string automatically converts to objects var items = <%=JSON.stringify(order.getItems())%> buildCartHeader(); buildCartItems(items); </script> </body> </html>