Sending Simplecart data via email: A working solution here

[coldes]

Here is a working solution for anybody wanting to send cart data via email. Full credit to Adamedoe for solving this.

++++++++++++++++++++++++ HTML FORM ++++++++++++++++++++++++

First Name Last Name Email Phone Comment

Send Order ++++++++++++++++++++ SIMPLECARTJS SCRIPT
 ++++++++++++++++++++ simpleCart({ //Setting the Cart Columns for the sidebar cart display. cartColumns: [ //{ attr: "image", label: false, view: "image"}, //Name of the item { attr: "name" , label: "Item" }, //Quantity displayed as an input { attr: "quantity", label: "Qty", view: "input"}, ``` //Built in view for a remove link { view:'remove', text: "X", label: "Del"}, //Price of item //{ attr: "price", label: "Price", view: "currency"}, //Subtotal of that row (quantity of that item * the price) { attr: "total" , label: "SubTot", view: "currency" } ], cartStyle: "table" , checkout: { type: "SendForm" , url: "sendcart.php" , method: "POST" , success: "success.html" , cancel: "cancel.php" , extra_data: { first_name: document.getElementById("first_name").value, last_name: document.getElementById("last_name").value, email: document.getElementById("email").value, email: document.getElementById("phone").value, email: document.getElementById("comments").value, cartid: "12321321" } ``` } }); simpleCart.bind( 'beforeCheckout' , function( data ){ data.first_name = document.getElementById("first_name").value; data.last_name = document.getElementById("last_name").value; data.email = document.getElementById("email").value; data.phone = document.getElementById("phone").value; data.comments = document.getElementById("comments").value; }); ++++++++++++++ sendcart.php ++++++++++++++

[drivebass]

BIG BIG THANKS coldes! Maybe the plugin's developers can take your code now and release the long awaited Mail Check feature. Maybe they've been waiting for something like this:) I haven't tried your code yet but i was wondering if there is some kind of validation possible for the Email field of the customer. Maybe with the real time form validation jquery plugin but in case the customer overlooks the email validation error the form will be submitted with that error. So i guess it has to be implemented in the check out function?

[drivebass]

Also another question. How do you setup your html form. Do you assign the correspondng id''s to every input field?

[drivebass]

I think that the validation would be achieved with a validation function before the checkout. The function will check if the email address field is valid or empty (the function could extend for other required fields too). If there are validation errors the customers will see the fields with the error notice and the checkout will not proceed. If everything is ok the checkout function with all the awesomeness from coldes will be fired and the customer will see the success html.

$('#btn-submit').click(function() {  

                $(".error").hide();
                var hasError = false;
                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

                var emailaddressVal = $("#UserEmail").val();
                if(emailaddressVal == '') {
                    $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
                    hasError = true;
                } else if(!emailReg.test(emailaddressVal)) {    
                    $("#UserEmail").after('<span class="error">Enter a valid email address.</span>');
                    hasError = true;
                } 

                if(hasError == true) { return false; }
                else {
                    // coldes CHECKOUT FUNCTION HERE
                }
    }); 
});

Simple Validation code from: http://www.designchemical.com/blog/index.php/jquery/email-validation-using-jquery/

[coldes]

Hello drivebass - good to see someone has taken notice, the world was looking very lonely, anyway, yes to ids if you want those fields inputs to be in the email php file, and of course added to the "extra_data" and "beforeCheckout" in simplecart

On Sat, Nov 24, 2012 at 10:38 PM, drivebass notifications@github.comwrote:

Also another question. How do you setup your html form. Do you assign the correspondng id''s to every input field?

— Reply to this email directly or view it on GitHubhttps://github.com/wojodesign/simplecart-js/issues/323#issuecomment-10676783.

[coldes]

not sure about this, but hey what do I know, except, simple cart handles the cart data and form input data collection and triggers the email php, so I am wondering would it be better to have some email php code handle any email or any other form input validation? Getting the "working solution" was a task in its self, but if someone can add/improve to all or any aspects of it then fantastic. If you can get something working...

On Sun, Nov 25, 2012 at 4:24 AM, drivebass notifications@github.com wrote:

I think that the validation would be achieved with a validation function before the checkout. The function will check if the email address field is valid or empty (the function could extend for other required fields too). If there are validation errors the customers will see the fields with the error notice and the checkout will not proceed. If everything is ok the checkout function with all the awesomeness from coldes will be fired and the customer will see the success html.

$('#btn-submit').click(function() {

            $(".error").hide();
            var hasError = false;
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

            var emailaddressVal = $("#UserEmail").val();
            if(emailaddressVal == '') {
                $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
                hasError = true;
            } else if(!emailReg.test(emailaddressVal)) {
                $("#UserEmail").after('<span class="error">Enter a valid email address.</span>');
                hasError = true;
            }

            if(hasError == true) { return false; }
            else {
                // coldes CHECKOUT FUNCTION HERE
            }
});

});

— Reply to this email directly or view it on GitHubhttps://github.com/wojodesign/simplecart-js/issues/323#issuecomment-10679866.

[drivebass]

I can't think of a solution with php, because in this case php is involved after the form is submitted to sendcart.php. So i don't think the validation can be done afterwards and it's easier with jquery before the checkout. I'll try something and post here if i have results. coldes your solution is lifesaver but i think the validation is not the extra mile but a necessity and the most important part of the email checkout as a fully working solution, otherwise unexpected results might occur with forms containing errors, offering a poor online shopping experience.

[coldes]

totally agree, look forward to what you come up with

On Tue, Nov 27, 2012 at 12:22 AM, drivebass notifications@github.comwrote:

I can't think of a solution with php, because in this case php is involved after the form is submitted to sendcart.php. So i don't think the validation can be done afterwards and it's easier with jquery before the checkout. I'll try something and post here if i have results. coldes your solution is lifesaver but i think the validation is not the extra mile but a necessity and the most important part of the email checkout as a fully working solution, otherwise unexpected results might occur with forms containing errors, offering a poor online shopping experience.

— Reply to this email directly or view it on GitHubhttps://github.com/wojodesign/simplecart-js/issues/323#issuecomment-10715026.

[udhichaalu]

Pleace give me a ssample of form action..

[DahmaniAdame]

@drivebass Your best shot is jQuery validation when firing the checkout. Using php as a validation medium will be more complicated since SimpleCart uses arrays stored into the browsers' cache, and php handles server side requests. Doesn't fit :) unless you change the whole logic, and store everything into a database table and then play with it using php.

@udhichaalu SimpleCart doesn't use a form. Use this link to ignite the checkout :

<a href="javascript:;" class="simpleCart_checkout">Checkout</a>

[udhichaalu]

Then, how do we know that the data buyer? I have tried the script above, but it is happening is the payment via paypal.

Can you give me a full tutorial or sample site use this method?

[DahmaniAdame]

Sorry buddy, I couldn't understand your question.

• the script is reported to be working by 3 persons :) You must have done something wrong.

[udhichaalu]

How do we know the buyer's name, address and telephone number??? This is all kept under the head> ? simpleCart({ //Setting the Cart Columns for the sidebar cart display. cartColumns: [ //{ attr: "image", label: false, view: "image"}, //Name of the item { attr: "name" , label: "Item" }, //Quantity displayed as an input { attr: "quantity", label: "Qty", view: "input"},

    //Built in view for a remove link
    { view:'remove', text: "X", label: "Del"},

    //Price of item
    //{ attr: "price", label: "Price", view: "currency"},
    //Subtotal of that row (quantity of that item * the price)
    { attr: "total" , label: "SubTot", view: "currency"  }
],
cartStyle: "table" ,
checkout: {
type: "SendForm" ,
url: "sendcart.php" ,
method: "POST" ,
success: "success.html" ,
cancel: "cancel.php" ,
extra_data: {
    first_name: document.getElementById("first_name").value,
    last_name: document.getElementById("last_name").value,
    email: document.getElementById("email").value,
    email: document.getElementById("phone").value,
    email: document.getElementById("comments").value,
cartid: "12321321"

}

}

});

simpleCart.bind( 'beforeCheckout' , function( data ){ data.first_name = document.getElementById("first_name").value; data.last_name = document.getElementById("last_name").value; data.email = document.getElementById("email").value; data.phone = document.getElementById("phone").value; data.comments = document.getElementById("comments").value; });

[drivebass]

@udhichaalu I was wondering myself too, why putting the buyer's info in the mail header. $email_message is indeed info placed in the header of the message and I guess it's useless to put anything there. You can put all the information from the submitted customer's form in the body instead of email. For example if you need the buyers name in the body of the message change

This:

$email_message .= "First Name: ".$content[$firstname]."\n";

To This:

$body .= "First Name: ".$content[$firstname]."\n";

An so on for all the fields you want to appear in the message body.

[coldes]

nice one, sometime it's not seeing the wood from the trees ;)

My revised code that also renders nicely [err plainly] in iPhone email

<?php $to = 'order@myshop.com'; $subject = 'Simple Cart Order';

$content = $_POST; $email_message = '';

$firstname = 'first_name'; $lastname = 'last_name'; $email_from = 'email'; $phone = 'phone'; $comments = 'comments';

$body .= '=================================='."\n"; $body .= "First Name: ".$content[$firstname]."\n"; $body .= "Last Name: ".$content[$lastname]."\n"; $body .= "Email: ".$content[$email_from]."\n"; $body .= "Phone: ".$content[$phone]."\n"; $body .= 'Has placed the following order:'."\n"; $body .= "\n"; $body .= '=================================='."\n";

for($i=1; $i < $content['itemCount'] + 1; $i++) { $name = 'itemname'.$i; $quantity = 'itemquantity'.$i; $price = 'itemprice'.$i; $total = $content[$quantity]*$content[$price]; $grandTotal += $total; $body .= 'Order #'.$i.': '.$content[$name]."\n".'Qty x '.$content[$quantity].' --- Unit Price $'.number_format($content[$price], 2, '.', '')."\n".'Subtotal $'.number_format($total, 2, '.', '')."\n"; $body .= '=================================='."\n"; }

$body .= 'Order Total: $'.number_format($grandTotal, 2, '.', '')."\n"; $body .= '=================================='."\n"; $body .= "\n"; $body .= "Comments: ".$content[$comments]."\n";

$headers = 'From: '.$email_from."\r\n". 'Reply-To: webmaster@example.com' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); mail($to, $subject, $body, $email_message, $headers);
Header('Location: success.html'); ?>

Anybody having any results with email validation?

[coldes]

nice one, here is my code revised based upon the above comments. Also email info fits nicely on iPhone screen

<?php $to = 'order@myshop.com'; $subject = 'Simple Cart Order';

$content = $_POST; $email_message = '';

$firstname = 'first_name'; $lastname = 'last_name'; $email_from = 'email'; $phone = 'phone'; $comments = 'comments';

$body .= '=================================='."\n"; $body .= "First Name: ".$content[$firstname]."\n"; $body .= "Last Name: ".$content[$lastname]."\n"; $body .= "Email: ".$content[$email_from]."\n"; $body .= "Phone: ".$content[$phone]."\n"; $body .= 'Has placed the following order:'."\n"; $body .= "\n"; $body .= '=================================='."\n";

for($i=1; $i < $content['itemCount'] + 1; $i++) { $name = 'itemname'.$i; $quantity = 'itemquantity'.$i; $price = 'itemprice'.$i; $total = $content[$quantity]*$content[$price]; $grandTotal += $total; $body .= 'Order #'.$i.': '.$content[$name]."\n".'Qty x '.$content[$quantity].' --- Unit Price $'.number_format($content[$price], 2, '.', '')."\n".'Subtotal $'.number_format($total, 2, '.', '')."\n"; $body .= '=================================='."\n"; }

$body .= 'Order Total: $'.number_format($grandTotal, 2, '.', '')."\n"; $body .= '=================================='."\n"; $body .= "\n"; $body .= "Comments: ".$content[$comments]."\n";

$headers = 'From: '.$email_from."\r\n". 'Reply-To: webmaster@example.com' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); mail($to, $subject, $body, $email_message, $headers);
Header('Location: success.html'); ?>

BTW, anybody having success with email validation?

[DahmaniAdame]

@drivebass @udhichaalu The mail function should't get that much parameters. Actually,

mail($to, $subject, $body, $headers);

To fit @coldes model, it should look like :

mail($to, $subject, $email_message, $headers);

Headers are necessary to set properly the correspondence emails and add support to HTML rendering.

@udhichaalu How do we know the buyer's name, address and telephone number??? You need to add the appropriate HTML input fields on your checkout page. @coldes would you please share your checkout page so @udhichaalu can understand how to use the extra fields? Thanks!

[coldes]

My checkout page - form code

        <div id="contact-form"> 
        <form id="contact" method="post" action="" >
        <fieldset>  

        <label for="firstname">First Name</label>
        <input type="text" name="firstname" placeholder="First Name" title="Enter your First Name" class="required" id="first_name">

        <label for="lastname">Last Name</label>
        <input type="text" name="lastname" placeholder="Last Name" title="Enter your Last Name" class="required" id="last_name">

        <label for="email">Email</label>
        <input type="email" name="email" placeholder="yourname@domain.com" title="Enter your e-mail address" class="required email" id="email">

        <label for="phone">Phone</label>
        <input type="tel" name="phone" placeholder="Optional" id="phone">

        <label for="message">Comment</label>
        <textarea name="message" placeholder="Optional" id="comments"></textarea>

        <!--<input type="submit" name="submit" class="button" id="submit" value="Send Message" />-->

        </fieldset>
        </form>
        </div><!-- /end #contact-form -->

        <a href="javascript:;" class="simpleCart_checkout"><span class="checkout_btn">Send Order</span></a

[coldes]

My checkout page html:

First Name Last Name Email Phone Comment

Send Order @drivebass https://github.com/drivebass @udhichaaluhttps://github.com/udhichaalu > The mail function should't get that much parameters. Actually, > > mail($to, $subject, $body, $headers); > > To fit @coldes https://github.com/coldes model, it should look like : > > mail($to, $subject, $email_message, $headers); > > Headers are necessary to set properly the correspondence emails and add > support to HTML rendering. > > @udhichaalu https://github.com/udhichaalu > How do we know the buyer's name, address and telephone number??? > You need to add the appropriate HTML input fields on your checkout page. > @coldes https://github.com/coldes would you please share your checkout > page so @udhichaalu https://github.com/udhichaalu can understand how to > use the extra fields? Thanks! > > — > Reply to this email directly or view it on GitHubhttps://github.com/wojodesign/simplecart-js/issues/323#issuecomment-10975279.

[coldes]

Plus my current email SENDCART.PHP

<?php $to = 'order@myshop.com'; $subject = 'Simple Cart Order';

$content = $_POST; $email_message = '';

$firstname = 'first_name'; $lastname = 'last_name'; $email_from = 'email'; $phone = 'phone'; $comments = 'comments';

$body .= '=================================='."\n"; $body .= "First Name: ".$content[$firstname]."\n"; $body .= "Last Name: ".$content[$lastname]."\n"; $body .= "Email: ".$content[$email_from]."\n"; $body .= "Phone: ".$content[$phone]."\n"; $body .= 'Has placed the following order:'."\n"; $body .= "\n"; $body .= '=================================='."\n";

for($i=1; $i < $content['itemCount'] + 1; $i++) { $name = 'itemname'.$i; $quantity = 'itemquantity'.$i; $price = 'itemprice'.$i; $total = $content[$quantity]*$content[$price]; $grandTotal += $total; $body .= 'Order #'.$i.': '.$content[$name]."\n".'Qty x '.$content[$quantity].' --- Unit Price $'.number_format($content[$price], 2, '.', '')."\n".'Subtotal $'.number_format($total, 2, '.', '')."\n"; $body .= '=================================='."\n"; }

$body .= 'Order Total: $'.number_format($grandTotal, 2, '.', '')."\n"; $body .= '=================================='."\n"; $body .= "\n"; $body .= "Comments: ".$content[$comments]."\n";

$headers = 'From: '.$email_from."\r\n". 'Reply-To: webmaster@example.com' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); mail($to, $subject, $body, $email_message, $headers); Header('Location: success.html'); ?>

[image: Inline image 3]

On Tue, Dec 4, 2012 at 9:36 AM, Collis Design Mobile coldesmob@gmail.comwrote:

My checkout page html:

First Name Last Name Email Phone Comment

Send Order @drivebass https://github.com/drivebass @udhichaaluhttps://github.com/udhichaalu > The mail function should't get that much parameters. Actually, > > mail($to, $subject, $body, $headers); > > To fit @coldes https://github.com/coldes model, it should look like : > > mail($to, $subject, $email_message, $headers); > > Headers are necessary to set properly the correspondence emails and add > support to HTML rendering. > > @udhichaalu https://github.com/udhichaalu > How do we know the buyer's name, address and telephone number??? > You need to add the appropriate HTML input fields on your checkout page. > @coldes https://github.com/coldes would you please share your checkout > page so @udhichaalu https://github.com/udhichaalu can understand how > to use the extra fields? Thanks! > > — > Reply to this email directly or view it on GitHubhttps://github.com/wojodesign/simplecart-js/issues/323#issuecomment-10975279.

[DahmaniAdame]

@coldes I commented each part and corrected mail function. Also added HTML recognition if using HTML tags on mail ~

<?php
$to = 'order@myshop.com'; /* your shop's email */
$subject = 'Simple Cart Order'; /* your desired subject to be displayed on the sent email */

$content = $_POST; /* receiving SimpleCart order array */
$body = ''; /* declaring the email body */

$firstname = 'first_name'; /* extra field variable */
$lastname = 'last_name'; /* extra field variable */
$email_from = 'email'; /* extra field variable */
$phone = 'phone'; /* extra field variable */
$comments = 'comments'; /* extra field variable */

$body .= '=================================='."\n";
$body .= "First Name: ".$content[$firstname]."\n"; /* using extra field variable */
$body .= "Last Name: ".$content[$lastname]."\n"; /* using extra field variable */
$body .= "Email: ".$content[$email_from]."\n"; /* using extra field variable */
$body .= "Phone: ".$content[$phone]."\n"; /* using extra field variable */
$body .= 'Has placed the following order:'."\n";
$body .= "\n";
$body .= '=================================='."\n";

/* starting the loop to get all orders from the stored array */

for($i=1; $i < $content['itemCount'] + 1; $i++) {
$name = 'item_name_'.$i; /* product name variable */
$quantity = 'item_quantity_'.$i; /* product quantity variable */
$price = 'item_price_'.$i; /* product price variable */
$total = $content[$quantity]*$content[$price]; /* product total price variable (price*quantity) */
$grandTotal += $total; /* accumulating the total of all items */
$body .= 'Order #'.$i.': '.$content[$name]."\n".'Qty x '.$content[$quantity].' --- Unit Price $'.number_format($content[$price], 2, '.', '')."\n".'Subtotal $'.number_format($total, 2, '.', '')."\n"; /* creating a semantic format for each ordered product */
$body .= '=================================='."\n";
}

/* ending the loop to get all orders from the stored array */

$body .= 'Order Total: $'.number_format($grandTotal, 2, '.', '')."\n"; /* total amount of the order */
$body .= '=================================='."\n";
$body .= "\n";
$body .= "Comments: ".$content[$comments]."\n"; /* using extra field variable */
$headers = 'From: ' . $email_from . "\r\n" .
'Reply-To: ' . $email_from."\r\n" .
'X-Mailer: PHP/' . phpversion() .
'MIME-Version: 1.0\r\n'.
'Content-Type: text/html; charset=ISO-8859-1\r\n'; /* essential if you're using HTML tags on your mail */

mail($to, $subject, $body, $headers); /* building the mail() function */

Header('Location: success.html'); /* declaring the page to redirect if the mail is sent successfully */
?>

[drivebass]

@adamedoe Brilliant! But i guess the only issue is that the 'from mail' shouldn't be the customers email but something with the website's domain in the form of "orders@shop.com"?

[DahmaniAdame]

SimpleCart is basically a minimalist shopping cart system that doesn't have a CRM or a management console behind it. All the relationship is maintained through emails and phone calls.

I did put the customer's email their to make it easy to reply. Though, you can put anything your want :)

[drivebass]

Something like this could send an order confirmation to the customers email too?

$headers = 'From: ' . $email_from . "\r\n" .
'Reply-To: ' . $email_from."\r\n" .
'X-Mailer: PHP/' . phpversion() .
'MIME-Version: 1.0\r\n'.
'Content-Type: text/html; charset=ISO-8859-1\r\n'; /* essential if you're using HTML tags on your mail */

mail($to, $subject, $body, $headers); /* building the mail() function */

$body2 = "Thank you for your order text."
$headers = 'From: ' . $email_from . "\r\n" .
'Reply-To: ' . $email_from."\r\n" .
'X-Mailer: PHP/' . phpversion() .
'MIME-Version: 1.0\r\n'.
'Content-Type: text/html; charset=ISO-8859-1\r\n'; /* essential if you're using HTML tags on your mail */

mail(" . $_SESSION[$email_from] . ", $subject, $body2, $body, $headers); /* building the mail() function */

Header('Location: success.html'); /* declaring the page to redirect if the mail is sent successfully */

[DahmaniAdame]

Sure. Still, you won't be able to reply directly :) If you need to communicate with your customer regarding the order.

Anyway, the main thing is : the script is working, you can do whatever makes you happy and fits your needs :) each user have their own understanding of how to treat orders. Leave this part open :)

[drivebass]

I absolutely understand your point, but the scope of this discussion in the first place is to discuss ideas between us due to the lack of documentation or details on the mail check part of the simplecart plugin. So i posted an idea on this just like you posted your code for the mail check out in case people are wondering how to get it to work. Cheers

EDIT: And i still think that javascript mail validation is an important part to implement in the order form because users that fill in wrong emails might think that their orders are successfully sent ending up with a bad shopping experience.

[Uzer1]

No luck with this. It redirects to PayPal as soon as you add extra_data, etc. Any ideas?

[coldes]

Uzer1 - Looking at your post, ensure you are using one of the derived "email".php's for the checkout url. If your "checkout.php" is as per one of the working examples ie like my "sendcart.php", the url should be "checkout.php" and not "http://localhost/shop/..". Also, I presume your server can process php scripts.

FYI I notice in my top post the sample FORM info is missing.

[coldes]

Uzer1 - make sure checkout.php is like my sendcart.php and your server can process php scripts. Also URL should be "checkout.php" or " http://www.websitename.com/checkout.php" and not http://localhost/shop/http://localhost/shop/checkout.php ...

Any errors will default to paypal redirect

hope this helps

On Mon, Jan 14, 2013 at 4:15 PM, Uzer1 notifications@github.com wrote:

No luck with this. It redirects to PayPal as soon as you add extra_data, etc. Any ideas? simpleCart({ checkout : { type : "SendForm", url : " http://localhost/shop/checkout.php", method: "POST" , success: "success.php" , cancel: "cancel.php" , extra_data: { name: document.getElementById("name").value, telefon: document.getElementById("telefon").value, adres: document.getElementById("adres").value, email: document.getElementById("email").value, comment: document.getElementById("comment").value, cartid: "12321321" } } }); simpleCart.bind( 'beforeCheckout' , function( data ){ data.name = document.getElementById("name").value; data.telefon = document.getElementById("telefon").value; data.adres = document.getElementById("adres").value; data.email = document.getElementById("email").value; data.comment = document.getElementById("comment").value; });

— Reply to this email directly or view it on GitHubhttps://github.com/wojodesign/simplecart-js/issues/323#issuecomment-12207106.

[coldes]

SAMPLE FORM that should have shown on top of post 323

First Name Last Name Email Phone Comment

Send Order

On Mon, Jan 14, 2013 at 5:14 PM, Collis Design Mobile coldesmob@gmail.comwrote: > Uzer1 - make sure checkout.php is like my sendcart.php and your server can > process php scripts. Also URL should be "checkout.php" or " > http://www.websitename.com/checkout.php" and not http://localhost/shop/http://localhost/shop/checkout.php > ... > > Any errors will default to paypal redirect > > hope this helps > > On Mon, Jan 14, 2013 at 4:15 PM, Uzer1 notifications@github.com wrote: > > > No luck with this. It redirects to PayPal as soon as you add extra_data, > > etc. Any ideas? > > simpleCart({ checkout : { type : "SendForm", url : " > > http://localhost/shop/checkout.php", method: "POST" , success: > > "success.php" , cancel: "cancel.php" , extra_data: { name: > > document.getElementById("name").value, telefon: > > document.getElementById("telefon").value, adres: > > document.getElementById("adres").value, email: > > document.getElementById("email").value, comment: > > document.getElementById("comment").value, cartid: "12321321" } } }); > > simpleCart.bind( 'beforeCheckout' , function( data ){ data.name = > > document.getElementById("name").value; data.telefon = > > document.getElementById("telefon").value; data.adres = > > document.getElementById("adres").value; data.email = > > document.getElementById("email").value; data.comment = > > document.getElementById("comment").value; }); > > > > — > > Reply to this email directly or view it on GitHubhttps://github.com/wojodesign/simplecart-js/issues/323#issuecomment-12207106.

[chikitsakgupta]

grate work! , and i want ask one questio that is this possible to add hidden fields in form contaning store data i.e payment mode etc and ,the value of those hidden fields through php goes to visitors email in body alongwith my message like a notification email ,

actuaaly i manged to do this , i am getting email with the visitors data , but visitors are getting onlymy message and the values of hidden fields are not displayed in visitors email , i dont know where i am missing , please help gygs

you can look at my form and php at this link

http:// pastebin.com/eXcUMBVc

[netlabsrl]

Hello, I need to add only two extra fields but if I add the code for extra data it ignores all setting like cartStyle, checkout type, url etc...instead if I remove the code about extra data it works fine...here my code:

[michael10]

@ Coldes -> My Email Checkout is working but I enter in every input field my name/phone number etc. but in the mail i dont see this fields and I copied your entire code!

It looks like this:

First Name: Last Name: Email: Phone: Has placed the following order:

Order #1: test Qty x 3 --- Unit Price $10.00 Subtotal $30.00

Order #2: Engerl Silber Qty x 1 --- Unit Price $10.00 Subtotal $10.00

Order Total: $40.00

Hope someone can help me

[Uzer1]

You must learn the basics of using forms to collect your data and send it through a php-file. The templates will not save you the trouble.

You must learn to create forms and make it send its data through a java command onClick="Ready(this.form) to a php-file that will send your emails eventually.

If you know how to do it you will customize it easily.

Don't look for easy ways. You will only lose your time.

Samples: (the code won't get posted...)

fo_r m name="form1" id='form' action="php/checkout.php" method="post">

                            <input id="name" type="text" name="name1" size="150">

                            <h4></h4>
                            <input id="telefon" type="text" name="telefon" size="150">

                            <h4></h4>
                            <input id="adres" name="adres" size="150">

                            <h4></h4>
                            <input id="email" type="text" name="email" size="70">

                            <h4></h4>
                            <input id="time" name="time" size="150">

                            <h4></h4>
                            <textarea id="comment" rows="4" name="comment" cols="75">

/f o_r m>

---

php/checkout.php

---

<?php

$to = ''; $to2 = '';

$headers = "From: $to2 \r\n";

$headers .= "Reply-To: $to \r\n";

$headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8\r\n";

$name = $_POST['name1']; $telefon = $_POST['telefon']; $adres = $_POST['adres']; $email = $_POST['email']; $comment = $_POST['comment']; $time = $_POST['time']; $subject = ""; $subject2 = ""; $message = "

MESSAGE HERE

"; mail($email, $subject, $message, $headers); mail($to, $subject2, $uved, $headers);

header("Location: http://www.yoursite.com/welldone.php"); ?>
TO SEND FORM:

in_put type="button" class="button" value="Отправить" name="submit1" onClick="Ready(this.form)">

[michael10]

Hi Uzer1 - this is the part of my sendcart.php that isn't working:

$content = $POST; /* receiving SimpleCart order array / $body = ''; /_ declaring the email body */

$firstname = 'firstname'; /* extra field variable / $lastname = 'lastname'; / extra field variable _/ $emailfrom = 'email'; / extra field variable / $phone = 'phone'; / extra field variable / $comments = 'comments'; / extra field variable */

$body .= '=================================='."\n"; $body .= "First Name: ".$Post[$firstname]."\n"; /* using extra field variable / $body .= "Last Name: ".$content[$lastname]."\n"; / using extra field variable / $body .= "Email: ".$content[$emailfrom]."\n"; / using extra field variable / $body .= "Phone: ".$content[$phone]."\n"; / using extra field variable */ $body .= 'Has placed the following order:'."\n"; $body .= "\n"; $body .= '=================================='."\n";

It just doenst show the name/email/phone that I enter in my form.

[Uzer1]

I am not a professional programmer and don't see how you relay what gets into fields.
I use the command

$_POST['field name']

To extract from the post array I use simple variables and commands:

$name = $_POST['name1']; $telefon = $_POST['telefon']; $adres = $_POST['adres']; $email = $_POST['email']; $comment = $_POST['comment'];

Then I put them into my email:

mail($email, $subject, $message, $headers); mail($to, $subject2, $uved, $headers);

Also, I don't break the main message into multiple lines.

Read about sending emails through a php file. You may see an alternative to what you are doing.

I would find a way to simplify or rewrite your form and your php-commands.

This code is not from the simplecart, but I used to deal with it in the same manner.

[michael10]

If you have a working code that extracts the user form and the simplecart data into an email i would appreciate it if you could post it or send me a mail?!

[Uzer1]

What's your email?

NOTE: I'm no longer sending the file myself.

http://bit.ly/smplcart

Download the file here, as repeated in my new message.

[michael10]

michael.stemmer@hotmail.com

[mischuw]

Hello Uzer1 and michael10 I have the same problem with the email like michael10. I've tryed it for days but could not get it to work. Could you send me the code in a mail or post it, that would be very helpful? misch.das.brot@gmail.com thank you

[Uzer1]

I will send you the website to run on an apache server and see how it works. It has a form capture independent from simplecart mostly, but it`s very simple and works.

[sil-mika]

Could you also send files to me also?

siltek.mika@gmail.com

Thanks!

[gabydevdev]

Hi,

I've been reading this and other threads about SendForm Checkout, but i can't seem to find a way to: a) Work with SendForm and PayPal checkouts, or b) Sending an e-mail w/cart information when someone checkouts to PayPal.

Also, do you know how to add shipping and tax rate info from the cart to the e-mail?

[Uzer1]

In short, SImpleCart built-in checkout system is not perfect. On its own, it will let you down most of the times. You should use generic php-processed forms to fix this and send emails this way, not through simplecart. Simplecart is only used to collect order info that you send in separate forms and forget about simplecart.

[pavlovv]

I used simpleCart library for one of my project with wordpress CMS. The client asked for email checkout functionality with a form to fill in name, surname, email phone,.. + items in cart and final price. I tried the code above, but I experienced the same result as michael10 - First name, Last name, Email, Phone fields were empty. So after reading other comments and websites I came up with solution which worked for me.

++++++++++++++++ In SimpleCart.js I changed only default checkout options: ++++++++++++++++

settings = {
       checkout             : { type: "SendForm", url: "#" },

++++++++++++++++ Header for the files where I used SimpleCart (I remove some settings to make it shorter) ++++++++++++++++

            simpleCart({
                // how simpleCart should checkout, see the 
                // checkout reference for more info 
                checkout: { 
                    type: "SendForm" , 
                    url: "#" ,
                    method: "POST" ,
                    success: "success.html" ,
                    cancel: "cancel.php"
                },
            });         

++++++++++++++++ I have a separate page to display the content of the cart. I use $_POST['itemCount'] to determine if I dipslay items of the cart or the form for sending order. In the form for sending order I have hidden textarea with the content of the cart ++++++++++++++++

    <?php                 
                if (!isset($_POST['itemCount'])) {
                ?>
                        <div class="simpleCart_items"></div>
                        <div id="cartTotal">
                            <strong>Price: </strong><span class="simpleCart_total"></span>
                        </div> 

                        <form id="contact" method="post" action="#" >
                                <a href="javascript:;" class="simpleCart_checkout button"><span class="checkout_btn">Send order by email</span></a>
                        </form>

                <?php } else { ?> 
                    <?php if ($_POST['itemCount'] == 0) { ?>
                        <p>Empty cart. Its not possible to send order</p>

                    <?php } else { ?>

                        <div class="send-inventory">
                            <form name="send_inventory_form" id="send_inventory_form" action="">
                                        <label for="first_name">Name</label>
                                        <input id="first_name" type="text" name="first_name" title="Enter your First Name" /><br />

                                        <label for="last_name">Last Name</label>
                                        <input id="last_name" type="text" name="last_name" title="Enter your Last Name" /><br />

                                        <label for="email">Email</label>
                                        <input id="email" type="text" name="email" title="Enter your e-mail address" /><br />

                                        <label for="phone">Phone</label>
                                        <input id="phone" type="text" name="phone" /><br />

                                        <?php                    
                                        $content = $_POST;

                                        for($i=1; $i < $content['itemCount'] + 1; $i++) {
                                                $name = 'item_name_'.$i;
                                                $quantity = 'item_quantity_'.$i;
                                                $price = 'item_price_'.$i;
                                                $total = $content[$quantity]*$content[$price];
                                                $grandTotal += $total;
                                                $body .= 'Product #'.$i.': '.$content[$name]."\n".'Qty x '.$content[$quantity].' --- Unit Price '.number_format($content[$price], 2, '.', '')." €<br/>".'Subtotal '.number_format($total, 2, '.', '')." €<br/>"; 
                                                $body .= '=================================='."<br/>";
                                        }

                                        $body .= 'Total price: '.number_format($grandTotal, 2, '.', '')." €<br/>";
                                        $body .= '=================================='."<br/>";
                                        $body .= "<br/>";
                                        ?>

                                        <textarea id="order" name="order" rows="4" cols="50" style="display:none;" ><?php echo $body; ?></textarea><br />

                                        <input type="submit" value="Send"/>                                 
                                </form>
                            </div>

                    <?php } ?>

                <?php } ?>  

In the functions.php for wordpress I am checking if the data are correct and sending the email to the customer using PHPmailer.

[DumasAyala]

So anyone get this working out? Can somebody upload a demo version? Thank you in advance guys.

[coldes]

Link to a proof of concept of a web app where I have implemented SimpleCart3.05 You can place a mock up order by:

• Select "Category 1" - "Menu Item 1" and/or "Menu Item 2" - tap/click "Add to Order" button [note order qty changes at bottom of screen]
• To place order tap/click "My Order" [bottom of screen]
• Fill in Form then tap/click "Send Order"

I will receive the email with your mock order as the php file [sendcart] has my email. I will hit reply so you know that the mock order has been received

As this link is on a public server, a site I use for testing, obviously anyone can grab all files, so feel free. All I ask if any improvements/enhancements of Simplecart is shared

Best viewed on iPhone or iPad, however on desktop Chrome or Safari will be OK

http://members.westnet.com.au/collisdesign/app-cafe-order/index.html

[nolybom]

Hey Coldes, Amazing job! :-)

And thank you very much for responding to my test on your Test-WebApp.

One thing you might help me understand please:

I would like to know if it is possible to combinate this email-feature (-> the send order button in your webapp) with the paypal-checkout.

Scenario: User places an order, fills out the form, taps on the send order button and gets then redirected to the paypal-checkout. In the background....: An email is being sent to the seller (and maybe a confirmation to the buyer?!?)

I know, that Paypal actually does send an confirmation email after payment is done, but from the UX-point of view and regarding Corporate Identity and trust building it would in my opinion make sense to have a parallel process going on in the background like described above.

Thank you so much for your help. :-)

---

Oh...i got another thing which is also very important from the buying experience but maybe i will have to open a new threat for that:

Right now when you proceed to the paypal, finish payment and then come back to the WebApp, the cart still contains the products. I managed to add into my settings a url to which the user can navigate after payment:

checkout: { type: "PayPal", success: "http://_url_", email: "@" },

On that landing page i am saying "Thank you" and in the background deleting local storage:

var i = localStorage.length, key; while (i--) { key = localStorage.key(i); if (key.slice(0, 16) == "simpleCart_items") { // alert('This is the one'); // localStorage.clear(); // works also localStorage.removeItem(key); } }

But since there is a chance that the user doesn't click "go back to url", there is a risk, that the user gets to see a filled cart when he visits the Shop again. :-(

Best solution would be to somehow combinate

simpleCart_empty & simpleCart_checkout

so that when the user clicks on "Pay now with Paypal" the script automatically triggers the link to Paypal, but also emptys the cart.

What do you guys think of that? (of course there is a risk, that the user cancels payment and when he gets back to the shop he sees an empty cart..hmmm...but i think that s not that confusing like the first described scenario above)

If there was an email being send to the buyer, we could put a link into the email and say "Please go to url to confirm" and place the localStorage-emptying script into that page.

..so somehow these two topics are related to each other and i hope we can can all find a solution/best use case.

Thanks for reading. :-)

[coldes]

...OK had a play, in my web app model have added jquery form validation, code from jqueryvalidation.org

Below form is a button only showing "Validate" - so first three form fields must be completed. On successful validation, the button "Validate" will be replaced by a new button showing "Send Order" [just used simple jquery show/hide for this]

Now on "Send Order", you the customer will receive an email copy [cc] of order placed

What I can't figure out is how, if possible, to have the order sent as an email to customer AND trigger redirect to PayPal... the challenge ahead! Thoughts anybody?...

[nolybom]

Wonderful step into the right direction! Applause! :-) Hope we can move forward with everyones help and create something nice.

[nolybom]

Ps: i found another problem...you can reproduce it in your own app by changing the checkout: type to 'paypal'.

On iPhone (iOS7) when you start the WebApp and proceed to paypal, you get kicked out of the WebApp the second paypal-step (when you choose "i have a paypal account" or "proceed without account".

So your goal which you describe above... "if possible, to have the order sent as an email to customer AND trigger redirect to PayPal... "

...will be difficult to achieve. Here is why:

The problem is that the key (with the items in your cart) which is stored in your LocalStorage is NOT transferred from the WebApp to Safari. And thats why you get a error message from Paypal that your session has expired.

Try this: start the WebApp from your home screen (on iPhone) and add stuff your cart. 2.) open your Webapp from safari and add different amount of stuff to your cart. 3.) now compare the two carts! You will see that each 'version' of your demo has stored a different amount of items.

I have no idea how to transfer keys from Localstorage in WebApps into Localstorage in Safari and i don't think it is even possible (due to Apple restrictions).

That is exactly why we definitely need a customized solution here.

Maybe a better solution is the following scenario:

---

-Checkout via checkout-type: "SendForm" -(empty cart when user clicks on "send order") -send email to seller with details -send confirmation email to buyer WITH(!) PayPal Link

---

From the Buyer experience i think that is not the best solution because you have to first check your email as a buyer to proceed with payment which can cause some people to not proceed with payment (-email arrives in spam maybe?). But right now this seems to me the only (half)good solution.

Right now, i am kicking the user out of the app (jquery mobile -> rel="external") the moment he clicks on the "Shop"-Link in my WebApp. Can't think of a better way to handle the situation. :-/

If you can think of a backdoor my ears are wide open.