Tons of fixes and improvements!

interface/resources/qml/hifi/commerce/Checkout.qml

@@ -24,6 +24,7 @@ Rectangle {
     HifiConstants { id: hifi; }
 
     id: checkoutRoot;
+    property string itemId; 
     // Style
     color: hifi.colors.baseGray;
 
@@ -241,7 +242,7 @@ Rectangle {
             width: parent.width/2 - anchors.leftMargin*2;
             text: "Cancel"
             onClicked: {
-                sendToScript({method: 'checkout_cancelClicked'});
+                sendToScript({method: 'checkout_cancelClicked', params: itemId});
             }
         }
 
@@ -258,7 +259,7 @@ Rectangle {
             width: parent.width/2 - anchors.rightMargin*2;
             text: "Buy"
             onClicked: {
-                sendToScript({method: 'checkout_buyClicked'});
+                sendToScript({method: 'checkout_buyClicked', params: itemId});
             }
         }
     }
@@ -285,6 +286,7 @@ Rectangle {
     function fromScript(message) {
         switch (message.method) {
             case 'updateCheckoutQML':
+                itemId = message.params.itemId;
                 itemNameText.text = message.params.itemName;
                 itemAuthorText.text = message.params.itemAuthor;
                 itemPriceText.text = message.params.itemPrice;

scripts/system/html/js/marketplacesInject.js

@@ -67,7 +67,7 @@
 
         // Footer actions.
         $("#back-button").on("click", function () {
-            (window.history.state != null) ? window.history.back() : window.location = "https://metaverse.highfidelity.com/marketplace?";
+            (document.referrer !== "") ? window.history.back() : window.location = "https://metaverse.highfidelity.com/marketplace?";
         });
         $("#all-markets").on("click", function () {
             EventBridge.emitWebEvent(GOTO_DIRECTORY);
@@ -89,35 +89,45 @@
         });
     }
 
-    function buyButtonClicked(name, author, price) {
+    function buyButtonClicked(id, name, author, price) {
         EventBridge.emitWebEvent(JSON.stringify({
             type: "CHECKOUT",
+            itemId: id,
             itemName: name,
             itemAuthor: author,
             itemPrice: price
         }));
     }
 
+    function injectBuyButtonOnMainPage() {
+        $('.grid-item').find('#price-or-edit').find('a').attr('href', '#');
+        $('.grid-item').find('#price-or-edit').find('.price').text("BUY");
+        $('.grid-item').find('#price-or-edit').find('a').on('click', function () {
+            buyButtonClicked($(this).closest('.grid-item').attr('data-item-id'),
+                $(this).closest('.grid-item').find('.item-title').text(),
+                $(this).closest('.grid-item').find('.creator').find('.value').text(),
+                10);
+        });
+    }
+
     function injectHiFiCode() {
         if (confirmPurchases) {
             var target = document.getElementById('templated-items');
             // MutationObserver is necessary because the DOM is populated after the page is loaded.
             // We're searching for changes to the element whose ID is '#templated-items' - this is
-            // the element that gets filled in by the AJAX.
+            //     the element that gets filled in by the AJAX.
             var observer = new MutationObserver(function (mutations) {
                 mutations.forEach(function (mutation) {
-                    console.log(mutation.type);
-                    $('.grid-item').find('#price-or-edit').find('a').attr('href', '#');
-                    $('.grid-item').find('#price-or-edit').find('.price').text("BUY");
-                    $('.grid-item').find('#price-or-edit').find('a').on('click', function () {
-                        buyButtonClicked($(this).closest('.grid-item').find('.item-title').text(), $(this).closest('.grid-item').find('.creator').find('.value').text(), 10);
-                    });
+                    injectBuyButtonOnMainPage();
                 });
-
                 //observer.disconnect();
             });
             var config = { attributes: true, childList: true, characterData: true };
             observer.observe(target, config);
+
+            // Try this here in case it works (it will if the user just pressed the "back" button,
+            //     since that doesn't trigger another AJAX request.
+            injectBuyButtonOnMainPage();
         }
     }
 
@@ -126,7 +136,10 @@
             $('#side-info').find('.btn').attr('href', '#');
             $('#side-info').find('.btn').html('<span class="glyphicon glyphicon-download"></span>Buy Item  ');
             $('#side-info').find('.btn').on('click', function () {
-                buyButtonClicked($('#top-center').find('h1').text(), $('#creator').find('.value').text(), 10);
+                buyButtonClicked(window.location.pathname.split("/")[3],
+                    $('#top-center').find('h1').text(),
+                    $('#creator').find('.value').text(),
+                    10);
             });
         }
     }

scripts/system/marketplaces/marketplaces.js

@@ -192,10 +192,13 @@
     function fromQml(message) {
         switch (message.method) {
             case 'checkout_cancelClicked':
-                tablet.popFromStack();
+                tablet.gotoWebScreen(MARKETPLACE_URL + '/items/' + message.params, MARKETPLACES_INJECT_SCRIPT_URL);
+                // TODO: Make Marketplace a QML app that's a WebView wrapper so we can use the app stack.
+                // I don't think this is trivial to do since we also want to inject some JS into the DOM.
+                //tablet.popFromStack();
                 break;
             case 'checkout_buyClicked':
-                tablet.popFromStack();
+                //tablet.popFromStack();
                 break;
             default:
                 print('Unrecognized message from Checkout.qml: ' + JSON.stringify(message));