I am using a cookie based javascript shopping cart within a web site. After a 'buy' button is clicked on the sales page the data is displayed on the sales checkout page, showing quantity, price, total etc. in a javascript table. I want to be able to then print an order form but without a lot of the graphics and other text. Is there a way to write the shopping cart data into another printable page?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
printing javascript dynamic data
- Thread starter BobTB
- Start date
You can do this with style sheets instead of another window. Use the following:
<link rel="stylesheet" type="text/css" href="default.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
In default.css, add the style for web page as you normally would. In print.css, add style that you want when they print the page. The style in default.css will still be applied, but if their are classes or id's with identical names in both css documents, the print.css one will override the other.
I commonly put this in print.css:
.hideOnPrint{
display:none;
}
Then I add class="hideOnPrint" to anything I don't want to show up on the printed version. Adam
<link rel="stylesheet" type="text/css" href="default.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
In default.css, add the style for web page as you normally would. In print.css, add style that you want when they print the page. The style in default.css will still be applied, but if their are classes or id's with identical names in both css documents, the print.css one will override the other.
I commonly put this in print.css:
.hideOnPrint{
display:none;
}
Then I add class="hideOnPrint" to anything I don't want to show up on the printed version. Adam
- Thread starter
- #3
Hi Adam0101, Thanks for the reply, it's good to know that i can control these with CSS but how would i do it if a want to do the printed page layout with slightly different design, e.g. Company Header, and other text that is not on the original salesorder form?
Many Thanks
BobTB
Many Thanks
BobTB
You can do it by opening popup window and writing there the checkout data. The idea is this:
function writeCheckout(data) {
a = window.open("","","width=200,height=200,toolbar=no,...."
a.document.open();
a.document.write("<html><head></head><body onload='print()'>"
a.document.write(data);
a.document.write("</body></html>"
a.document.close();
}
"data" is a string with text, or even html code for table. If you don't want to pass it as a parameter, do this:
a.document.write("<table><tr><td>quantity:</td><td>30</td></tr> ..."
function writeCheckout(data) {
a = window.open("","","width=200,height=200,toolbar=no,...."
a.document.open();
a.document.write("<html><head></head><body onload='print()'>"
;a.document.write(data);
a.document.write("</body></html>"
;a.document.close();
}
"data" is a string with text, or even html code for table. If you don't want to pass it as a parameter, do this:
a.document.write("<table><tr><td>quantity:</td><td>30</td></tr> ..."
;- Thread starter
- #5
Thanks Starway,
Can you clear up a question?
The shopping cart data is firstly written to the sales checkout page using the cookie based javascript. This page has graphics and other sales information on it. Once the shopping cart data is written into this page is it possible to then transfer the cart data, for example - Quantity, Price, Total etc. onto another printable page without including certain graphics and sales information?
Can you clear up a question?
The shopping cart data is firstly written to the sales checkout page using the cookie based javascript. This page has graphics and other sales information on it. Once the shopping cart data is written into this page is it possible to then transfer the cart data, for example - Quantity, Price, Total etc. onto another printable page without including certain graphics and sales information?
- Thread starter
- #7
starway,
1. Do i place the script that you have supplied into the new web page?
2. Do I need to place the cookie javascript into the new page as well?
3. What code do i actually need to place into the data part of your script?
Sorry I am not very good with javascript
Thanks
1. Do i place the script that you have supplied into the new web page?
2. Do I need to place the cookie javascript into the new page as well?
3. What code do i actually need to place into the data part of your script?
Sorry I am not very good with javascript
Thanks
The script should be placed in a page where you want to print from. If it is a checkout page - it should be there, and some "Print order" button should activate it:
<input type="button" value="print order" onclick="writeCheckout()">
The script should be in the <head> of this page. The "new" page (i.e. popup window) with all it's data will be created automatically.
This script should contain the code for cookie processing, looking like smth like this (without "data" parameter, it will be done internally):
function writeCheckout() {
// [ code for cookie processing ]
// let's assume that all data will be stored in a variable that you will print then:
var data = xxx; // something taken from the cookie
a = window.open("","","width=200,height=200,toolbar=no,...."
a.document.open();
a.document.write("<html><head></head><body onload='print()'>"
a.document.write(data);
a.document.write("</body></html>"
a.document.close();
}
I think this is the most simple way I could explain this.
<input type="button" value="print order" onclick="writeCheckout()">
The script should be in the <head> of this page. The "new" page (i.e. popup window) with all it's data will be created automatically.
This script should contain the code for cookie processing, looking like smth like this (without "data" parameter, it will be done internally):
function writeCheckout() {
// [ code for cookie processing ]
// let's assume that all data will be stored in a variable that you will print then:
var data = xxx; // something taken from the cookie
a = window.open("","","width=200,height=200,toolbar=no,...."
a.document.open();
a.document.write("<html><head></head><body onload='print()'>"
;a.document.write(data);
a.document.write("</body></html>"
;a.document.close();
}
I think this is the most simple way I could explain this.
- Thread starter
- #9
- Thread starter
- #10
Starway, I have a couple of questions about the script you have suggested.
var data = xxx; What text do I need to type in the 'XXX' part above?
a.document.write(data); Do I need to type anything between the brackets in the (data) section above?
var data = xxx; What text do I need to type in the 'XXX' part above?
a.document.write(data); Do I need to type anything between the brackets in the (data) section above?
- Status
Similar threads
- Locked
- Question