Email shopping cart

[graphicz]

Customer wishes his customers to be able to print the basket and to email it before going through checkout.

Has anyone any idea how this might be done?

Thank you!

[NormanRouxel]

If it's to be emailed to the site owner then a hidden copy of the Contact Us form on Checkout page 0. An "Email" button that fires of some JavaScript that copies fields from the Cart Summary, etc to the BODY of the Contact Us form and submits form.

[graphicz]

Thank you Norman, he wants it from the Shopping Basket.

I have got as far as this in the View Cart Bulk Area RWD

<script language="javascript">
<!--
function mailpage()
{
var cart_div = document.getElementById("thisone");
  mail_str = "mailto:?subject=" + escape ("Have a look at this: ");
  mail_str += "&body=" + escape("I thought you might like this " + cart_div.innerHTML.replace(/\n|<.*?>/g,''));
  mail_str += escape (". You can see it at, " + location.href);
  location.href = mail_str;
}
// -->
</script>
<a href="javascript:mailpage()"><img src="emailafriend.png" width="25" height="25" align="absmiddle" border="0"/>&nbsp;&nbsp;Email to a friend</a>
                <div id="thisone" style="display:none;"><actinic:variable name="ShoppingCartGrid" value="Small Checkout Shopping Cart Grid Bare" /></div>

The email it yields is this though which is not very readable - the email has the diamond question marks:

I thought you might like this Shopping CartProductQUANTITYPRICECOSTRemove  Plaster Cornice Small Ogee CN101QUANTITY �25.50 �102.00  Wall Panel Shape WP243QUANTITY �38.00 �38.00  Subtotal�140.00  Shipping (Default delivery)�60.00VAT�40.00Total�240.00Checkout   <. You can see it at, https://www.webeg.co.uk/ukps/cgi/ca000001.pl?ACTION=SHOWCART

How to get some line beaks?!

[graphicz]

Getting there:

<script language="javascript">
<!--
function mailpage()
{
var cart_div = document.getElementById("thisone");
    var str  = cart_div.innerHTML;
    str = str.replace(/<br>/gi, "\n");
    str = str.replace(/<(?:.|\s)*?>/g, "");
    cart_div.innerHTML = str;
  mail_str = "mailto:?subject=" + escape ("Have a look at this: ");
  mail_str += "&body=" + escape("I thought you might like this \n\n" + cart_div.innerHTML);
  mail_str += escape (". You can see it at, " + location.href);
  location.href = mail_str;
}
// -->
</script>

<a href="javascript:mailpage()"><i class="fa fa-envelope"></i>&nbsp;&nbsp;Email basket</a>
                <div id="thisone" style="display:none;"><actinic:variable name="ShoppingCartGrid" value="Small Checkout Shopping Cart Grid Bare" /></div>

I thought you might like this

Shopping CartProductQUANTITYPRICECOSTRemove  Plaster Cornice Small Ogee CN101QUANTITY
 �25.50 �102.00
 Wall Panel Shape WP243QUANTITY
 �38.00 �38.00
 Subtotal�140.00  Shipping (Default delivery)�60.00VAT�40.00Total�240.00Checkout   <. You can see it at, https://www.webeg.co.uk/ukps/cgi/ca000001.pl?ACTION=SHOWCART

[NormanRouxel]

The Cart has product quantities in INPUT fields and copying the innerHTML won't get you everything you need. And it's all a big mess.

jQuery is a much better way to go. Edit layout Product Line Row In Cart and change the first line to be:

<tr class="cartprodlinerow">

Edit the Shopping Cart Product Details layout that you're using and add unique classnames to the items you need to extract data from. Put a span with a classname around the price in Product Line Row In Cart.
Now jQuery like:

$( "tr.cartprodlinerow" ).each(function(){
    var name = $( ".cpdname", $(this) ).text();
    var price = $( ".cpdprice", $(this) ).text();
    alert (name + ': ' + price);
});

gets the text you need on a line by line basis and can be amended to pass the text into the email body.

[graphicz]

Wow. Thank you Norman

Best wishes

[graphicz]

I cannot get the 'each' functions picked up by the mailpage function: I have truied several cinfigurations, one function withinthe other for example

<script language="javascript">

$( "tr.cartprodlinerow" ).each(function(){
    var name = $( ".cpdname", $(this) ).text();
    var price = $( ".cpdprice", $(this) ).text();
    var quantity =  $( ".cpdqty", $(this) ).text();
});
function mailpage() {
  mail_str = "mailto:?subject=" + escape ("Have a look at this: ");
  mail_str += "&body=" + escape("I thought you might like this \n\n " + name + ': ' + price + ' ' + "Qty: "  + quantity + "\n\n");
  mail_str += escape (". You can see it at, " + location.href);
  location.href = mail_str;
};

</script>

[NormanRouxel]

Variables name, price and quantity are local to the function they are declared in so you can't get them from anywhere else.
Also there could be more than one line in the Cart and you've not dealt with that.

This (UNTESTED) code attempts to fix these.

<script language="javascript">
function mailpage() {
    var lines = "I thought you might like this \n\n ";
    $( "tr.cartprodlinerow" ).each(function(){
        lines += $( ".cpdname", $(this) ).text()
         + ' ' + $( ".cpdprice", $(this) ).text()
         + ' Qty: ' + $( ".cpdqty", $(this) ).val() + "\n\n";
    });
    mail_str = "mailto:?subject=" + escape ("Have a look at this: ");
    mail_str += "&body=" + escape(lines + "\n\n");
    mail_str += escape (". You can see it at, " + location.href);
    location.href = mail_str;
};
</script>

However that ". You can see it at, " + location.href will be telling whoever gets the email to look at a non-existent Shopping Cart page. Find another way!

Also, my initial example code did a simple alert() statement so you could see what's happening (even in Design Preview). Best try that before diving into firing up email clients.

[NormanRouxel]

Try amending line

       lines += $( ".cpdname", $(this) ).text()

To be

        lines += $( ".cpdname", $(this) ).html()

This should make each name in the email click-able. Then you can lose the You can see it at..." stuff.

[graphicz]

Thank you so much Norman. I had got the alert working and was trying to combine with the mailpage which you have done beautifully. I am very grateful.

[graphicz]

This alert displays the alert box with the correct content but incorrectly on the live site:

<script>
$( "tr.cartprodlinerow" ).each(function(){
    var name = $( ".cpdname", $(this) ).text();
    var price = $( ".cpdprice", $(this) ).text();
    var quantity = $( ".cpdqty", $(this) ).text();
    alert (name + ': ' + price + ': ' + ' Qty: ' + quantity);
});
</script>

This code

<script language="javascript">
function mailpage() {
    var lines = "I thought you might like this \n\n ";
    $( "tr.cartprodlinerow" ).each(function(){
        lines += $( ".cpdname", $(this) ).text() + ' ' + $( ".cpdprice", $(this) ).text() + ' Qty: ' + $( ".cpdqty", $(this) ).val() + "\n\n";
    });
    mail_str = "mailto:?subject=" + escape ("Have a look at this: ");
    mail_str += "&body=" + escape(lines + "\n\n");
    mail_str += escape (". You can see it at, " + location.href);
    location.href = mail_str;
};
</script>
<a class="btn btn-secondary" href="javascript:mailpage()"><i class="fa fa-envelope"></i>&nbsp;Email the basket</a>

yields the following email:

I thought you might like this

  �25.50 Qty:

 �6.90 Qty:



. You can see it at, https://www.webeg.co.uk/ukps/cgi/ca000001.pl?ACTION=SHOWCART

[graphicz]

I had the wrong instance of ProductNameOnLine, corrected now. Just the Qty to fix! And the rendering of the £

[graphicz]

Removing the span class="cpdqty" from the Cart Product Details line and then adding the following to the javascript footer functions fixes it in the email although the test still does not display the qty. value

$( "input[name^='Q_'" ).addClass( "cpdqty" );

[graphicz]

$( ".cpdprice", $(this) ).text().replace("£", "GBP ")

[NormanRouxel]

You're using Swift! Would have been useful to know this at the beginning.

Undo your post #13 and use this to get at the Quantity:

$( ".cpdqty", $(this) ).find('input').val()