Announcement

Collapse
No announcement yet.

Email shopping cart

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Email shopping cart

    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!
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    #2
    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.
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


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

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

      Code:
      <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:

      Code:
      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   &lt;. You can see it at, https://www.webeg.co.uk/ukps/cgi/ca000001.pl?ACTION=SHOWCART
      How to get some line beaks?!
      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment


        #4
        Getting there:

        Code:
        <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>
        Code:
        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   &lt;. You can see it at, https://www.webeg.co.uk/ukps/cgi/ca000001.pl?ACTION=SHOWCART
        Jonathan Chappell
        Website Designer
        SellerDeck Website Designer
        Actinic to SellerDeck upgrades
        Graphicz Limited - www.graphicz.co.uk

        Comment


          #5
          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:
          Code:
          <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:
          Code:
          $( "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.
          Norman - www.drillpine.biz
          Edinburgh, U K / Bitez, Turkey

          Comment


            #6
            Wow. Thank you Norman

            Best wishes
            Jonathan Chappell
            Website Designer
            SellerDeck Website Designer
            Actinic to SellerDeck upgrades
            Graphicz Limited - www.graphicz.co.uk

            Comment


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

              Code:
              <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>
              Jonathan Chappell
              Website Designer
              SellerDeck Website Designer
              Actinic to SellerDeck upgrades
              Graphicz Limited - www.graphicz.co.uk

              Comment


                #8
                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.
                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>
                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.
                Norman - www.drillpine.biz
                Edinburgh, U K / Bitez, Turkey

                Comment


                  #9
                  Try amending line
                  Code:
                         lines += $( ".cpdname", $(this) ).text()
                  To be
                  Code:
                          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.
                  Norman - www.drillpine.biz
                  Edinburgh, U K / Bitez, Turkey

                  Comment


                    #10
                    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.
                    Jonathan Chappell
                    Website Designer
                    SellerDeck Website Designer
                    Actinic to SellerDeck upgrades
                    Graphicz Limited - www.graphicz.co.uk

                    Comment


                      #11
                      This alert displays the alert box with the correct content but incorrectly on the live site:
                      Code:
                      <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>
                      Click image for larger version

Name:	alert.jpg
Views:	49
Size:	19.7 KB
ID:	552147

                      This code
                      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:
                      Code:
                      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
                      Jonathan Chappell
                      Website Designer
                      SellerDeck Website Designer
                      Actinic to SellerDeck upgrades
                      Graphicz Limited - www.graphicz.co.uk

                      Comment


                        #12
                        I had the wrong instance of ProductNameOnLine, corrected now. Just the Qty to fix! And the rendering of the
                        Jonathan Chappell
                        Website Designer
                        SellerDeck Website Designer
                        Actinic to SellerDeck upgrades
                        Graphicz Limited - www.graphicz.co.uk

                        Comment


                          #13
                          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
                          Code:
                          $( "input[name^='Q_'" ).addClass( "cpdqty" );
                          Jonathan Chappell
                          Website Designer
                          SellerDeck Website Designer
                          Actinic to SellerDeck upgrades
                          Graphicz Limited - www.graphicz.co.uk

                          Comment


                            #14
                            Code:
                            $( ".cpdprice", $(this) ).text().replace("", "GBP ")
                            Jonathan Chappell
                            Website Designer
                            SellerDeck Website Designer
                            Actinic to SellerDeck upgrades
                            Graphicz Limited - www.graphicz.co.uk

                            Comment


                              #15
                              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:
                              Code:
                              $( ".cpdqty", $(this) ).find('input').val()
                              Norman - www.drillpine.biz
                              Edinburgh, U K / Bitez, Turkey

                              Comment

                              Working...
                              X