Print the shopping cart summary as a Quote using javascript and a button

[greenpesto]

Hi,

 

I've been working for a while now to implement a feature on one of my e-boutique (ps 1.6) which is quite simple although very useful : giving to your customer the ability to print the content of its shopping cart as a quote, fill it manually with contact details etc, and send it back later by email or even airmail (the old fashion way) to validate an order.

 

I needed this because most of the visitors on my website don't have a registered account / don't want to bother creating one, thus 90% of the quote modules that actually require the client to be logged in did not suit this basic requirement for me.

Please just bear in mind that this is a humble contribution and not a professional solution/developement at all. it's simply a useful tweak i'd say.

 

Step 1.
Open your shopping-cart.tpl file (themes/default-bootstrap/shopping-cart.tpl for me since i use the vanilla 1.6 ps theme)

 

Step 2.

Insert this code where you want.

<script language="javascript">
function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;
     var logoImg = '<p><img src="http://www.yourdomain.com/img/yourlogo.jpg"</p>';
     var textBefore = '<p><table style="width:100%"><tr><th style="width:50%"><h1 style="color:black;">Hey this is a QUOTE</h1></p><p><h4 style="color:#000000;"> Phone : <br><br> Email : <br><br> Person in charge :<br><br> Company :<br><br></h4></th><th style="color:#000000;text-align:right;"> <h3> YOUR COMPANY NAME </h3><br><h4>Address line 1 <br> Zip Code <br> City <br> Phone <br> Fax <br> [email protected]</th></tr></table>';
     var textAfter = '<p><table style="width:100%;border: 1px solid black;"><tr style="color:#000000;"><th><h3>Shipping Address :</h3></th><th><h3>Billing Address :</h3></th></tr><tr><th><br><br><br><br><br></th><th><br><br><br><br><br></th></tr></table></p><p style="color:#000000;"><h4 style="color:#000000;"><br> Any other useful info to your client. Ex: we accept credit cards, bankwire etc.</p>';

     document.body.innerHTML = logoImg + textBefore + printContents + textAfter;

     window.print();

     document.body.innerHTML = originalContents;
}
</script>

Step 3.

Still in shopping-cart.tpl, just before the table id="cart_summary" block, insert this div tag :
 

<div id="printableArea">

Don't forget to close this new div after the </table> of the cart_summary !

 

Step 4.

All the way down in shopping-cart.tpl, just after the Proceed to checkout button {/if} block, insert this :

<input type="button" class="button btn btn-default standard-checkout button-medium" onclick="printDiv('printableArea')" value="Print this Quote" style="float: right;right: 20px;height: 50px;padding: 5px;background: rgb(246, 247, 0);color: black;border-color: rgb(177, 177, 0);" />

Save and check, now you should have a mustard-yellow button next to your Checkout button on the cart page (please check attachment). Click it and it should open the modal Printer view of your browser. From here you can select to print a hard copy of this quote, or choose to save it as .pdf file (at least with Chrome).

 

 

PROS :

* Printing the shopping cart product list as a Quote

* 1 click-to-print process via a "Print" button added on the shopping cart page (next to the checkout button)

* No login required, any visitor can add products to the cart and print it

* "Light" solution : you only need to add a couple of code lines into a .tpl file, no module installation is required.

* it's using javascript capability included in your browser which should ensure a good compatibilty (personnaly tested with IE and Chrome, all good)

* Well it's free ;-)

 

CONS :

* Generated quotes aren't stored or saved at all since no log in requirement. Which means that you don't have any track record of who quoted what until that client actually sends you back the filled-in quote by email or airmail (= again, my personnal core-customer profile)

* You don't get any notification when someone is creating a quote on your front office (same reason than previous point)

* It is possible to customise the template of the form, however the way i did it is very basic but I think there is room for improvements here

* I tested it with only 2 browsers so far

 

Any questions, suggestions or critics are more than welcome.

 

Edited July 10, 2014 by greenpesto (see edit history)

[GPS ARAB]

Thank you very much
This was very useful to me

[Ramio]

Thank you very much

[VicB]

Any way to set the size of the printout without having to go into printer settings?

[polykodesas]

Hi, thanks for this tips, it's working fine on presta 1.6.1.4

 

Here is another tips to hide (on the print output) the quantity buttons (+ | -) and the trash icons to remove products:

 

Just add the following code in your global.css file:

 

	@media print 
		{   
	    .cart_quantity_button
			{ 
			display: none; 
			}  
			
	    .cart_delete
			{ 
			display: none; 
			}  						
		}

it will only hide elements on the print but not it the web page.

 

hopes it will help.

[culex]

Thank you, very useful !!

 

There is any way to make smaller tables, 

to print more products in one page ??

[Petrostro]

I´m looking the same than culex... if somebody knows how to do it will be appreciated