JSFiddle - React, Tailwind, and code Playground

by Jonathan McGlone

HTML

<div>
    <div class="transaction">
    </div>
    <div class="items">
    </div>
   <div class="ContentContainer">
 <div class="Checkout">
 <div class="PageTitle"> Secure Checkout</div>
    <div class="Steps">
<span class="Passive"><span class="StepCount">1</span>
    Your Address</span>
<span class="Passive"><span class="StepCount"> 2</span>
   Order &amp; Payment</span>
<span class="Active"><span class="StepCount"> 3</span>
   Order Receipt</span>   
   </div>

</div>
<div class="shopping-receipt">
    <p>Please <a style="color:blue" onclick="window.print();return false;" href="#">print</a> this receipt for your reference.</p> 
   
    
<div class="OrderReceipt">
  <div class="receipt-container">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" class="ReceiptTable">
      <tbody><tr>
        <td colspan="5" valign="middle" height="25px;" style="border-bottom:1px #000 solid; font-weight:bold;"><div class="Head"> University of Michigan Press&nbsp;Customer Receipt</div></td>
      </tr>
      <tr>
        <td colspan="5" valign="middle" height="20px;"><div class="ReceiptText"> Thank you for your order.</div></td>
      </tr>
      <tr>
        <td colspan="5" valign="middle" height="20px;"><div class="Head"></div></td>
      </tr>
      <tr>
        <td align="left" nowrap="true" colspan="2" valign="middle" height="25px" style="color: #000;font-weight: bold; font-size: 13px;border-bottom: solid 1px #000066;"><div class="SubHead-left left"> Order Information</div></td>
        <td align="left" nowrap="true" colspan="2" valign="middle" height="25px" style="color: #000;font-weight: bold; font-size: 13px;border-bottom: solid 1px #000066;"><div class="SubHead"> Customer Service</div></td>
      </tr>
      <tr>
        <td align="left" nowrap="nowrap" valign="middle" height="5px;"></td>
        <td align="left" nowrap="nowrap" valign="middle" height="5px;"></td>
        <td align="left" nowrap="nowrap" valign="middle" height="5px;"></td>
        <td...

JavaScript

// set order variables
	// transaction
	var orderID = jQuery(".info-right").text();
	var affiliation = 'perseus';
    var shipping = jQuery("td:contains('Shipping Cost')").next().text();
    var tax = jQuery("td:contains('Sales Tax')").next().text();
    //revenue = jQuery("tr.white-row td:contains('Total')").next().text();
    var revenue = jQuery(".total").text();    

    // items
    //var category = jQuery("td:contains('Promotion Code')").next().text();
    //var quantity = jQuery("td.qty").text();
    //var sku = jQuery("td.item-no").text();
    //var name = jQuery("td.title").text();
    //var price = jQuery("td.price").text();

//ga('ecommerce:addTransaction', {
//   'id': orderID,
//   'affiliation': affiliation,
//   'revenue': revenue,
//   'shipping': shipping,
//   'tax': tax
// });

jQuery(".transaction").append('<p>Transaction<br/><br/>Order ID: ' + orderID + '<br/>Shipping: ' + shipping + '<br/>Tax: ' + tax + '<br/>Revenue: ' + revenue + '<br/>Affiliation: ' + affiliation + '</p>');

    
    if ( jQuery( ".Product tr.white-row td.qty" ).length ) { 
        
        var items = jQuery(".Product tr.white-row td.qty");
        
        jQuery(items).each(function ( i, item ) {
            
            // items
    var category = jQuery("td:contains('Promotion Code')").next().text();
    var quantity = $(item).text();
    var sku = $(item).siblings("td.item-no").text();
    var name = $(item).siblings("td.title").text();
    var price = $(item).siblings("td.price").text();
    
    //ga('ecommerce:addItem', {
      //  'id': orderID,
      //  'name': name,
      //  'sku': sku,
      //  'category': category,
      //  'price': price,
      //  'quantity': quantity
    // });
       
        
       jQuery(".items").append('<p>Item<br/>Order ID: ' + orderID + '<br/>Category: ' + category + '<br/>Quantity: ' + quantity + '<br/>SKU: ' + sku + '<br/>Name: ' + name + '<br/>Price: ' + price +'</p>');
        
        });
    }
    else { return false;
  ...