Listing the contents of the cart on the receipt template, in javascript

OrthiasOrthias Member
in Help edited December 2013
I have a tracking code that i have to put on the receipt template. The problem is that it has to contain an array of all purchased products, like this:
..... some code .....

_mTrack.push(['addTrans', {
    currency :'USD',
    items : [
      {
        orderId : '@ORDER-ID@',
        convType : 'Sale',
        price :    '@PRICE@', 
        quantity: ‘@QUANTITY@’,
        product :  '@PRODUCT-SKU/NAME@'
     },
     {
        orderId : '@ORDER-ID@',
        convType : 'Sale',
        price :    '@PRICE@', 
        quantity: ‘@QUANTITY@’,
        product :  '@PRODUCT-SKU/NAME@'
      }
     /// and so on for each item in the cart
   ]
}]);

..... more code....

... where i have to replace @ORDER-ID@, @PRICE@,@QUANTITY@ and @PRODUCT-SKU/NAME@ with the info from each item in the cart.

Any suggestions on how to best achieve this?

Thanks!
Comments
  • fredfred FoxyCart Team
    edited December 2013
    Hey @Orthias, two approaches you can take here.

    1. Write some Javascript to build up the tracking array and call _mTrack.push() from your custom code.
    2. Use Twig (assuming this is a 1.0+) store to customize your receipt template.

    We do support Google Analytics' ecommerce tracking out of the box, but it's not something that you can really customize.

    I think I'd favor approach #1 over the other approach, the fc_json Javascript object has all that you need to build that array. Just be sure to put wrap your custom code on the receipt template like this:
    ^^receipt_only_begin^^
    <script type="text/javascript>
      // ...
    </script>
    ^^receipt_only_end^^
    

    Or, for Twig templates:
    {% if first_receipt_display %}
    <script type="text/javascript>
      // ...
    </script>
    {% endif %}
    

    That will make sure that your JS code pings your tracking system ONCE only. Hope that helps!
  • @fred - where can I find the tags available? I looked at the cheat sheet and don't see that there is any product/item info available on the receipt page - nor does it list first_receipt_display tag
  • fc_adamfc_adam FoxyCart Team
    @happycloud,

    The first_receipt_display tag is a Twig tag, and we don't currently have a list available of all of the available placeholders. That said though, you can view the different Twig templates from our wiki and see all of the different placeholders within those templates, and how to use them. Links to those templates can be found here: http://wiki.foxycart.com/static/redirect/templates - and that's also how you'd get the product information as well. Or alternatively, you could get the product info from the fc_json javascript object - which you'd access using javascript.
  • FYI ^^receipt_only_begin^^ and ^^receipt_only_end^^ tags made the code not appear on the receipt page!

    I had to take those tags out to make the code contained in them appear. Is this a bug or was i doing something wrong?
  • fredfred FoxyCart Team
    I just tested this out, and using the example with ^^receipt_only_begin^^…^^receipt_only_end^^ I posted above I got the script tag once and only once.

    We use this ourselves for pinging our affiliate tracking system.

    One thought — rather than using "view source" try inspecting the DOM. In Chrome I did not see the script tag in the source code of the page, but with the DOM inspector it was definitely there. I had the script add some text to the DOM so I could see it run and find it with the Web Inspector:
       <div class="receipt-begin-end">
          <h4>Receipt Begin-End</h4>
          ^^receipt_only_begin^^
           <script type="text/javascript">
               $('.receipt-begin-end').append('script is working!')
           </script>
          ^^receipt_only_end^^
       </div>
    
    
  • fc_adamfc_adam FoxyCart Team
    Yeah - that's a key thing to note. Chrome will reload the page when you view the source. That means that when you view the source, you've already viewed the receipt when the page initially loaded. So the source page is technically the second time it has been loaded - so the info between receipt_only_begin/receipt_only_end tags wouldn't display.
  • @fred you mention " the fc_json Javascript object has all that you need to build that array" but when I dump it to console in my receipt it doesn't have any transaction info such as amount, transaction ID etc.. Seems to be just the cart (coupons, products and custom vars). Are the transaction fields avail in a js object?
  • fc_adamfc_adam FoxyCart Team
    @happycloud,

    You're right - the fc_json object is only the cart data. You could still get the other data from the page by using javascript though if you'd prefer the javascript approach.
Sign In or Register to comment.