From 517128a939763e48a2e81723f80f23c83668b088 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Mon, 7 Aug 2017 16:03:42 -0700 Subject: [PATCH] More steps --- .../resources/qml/hifi/commerce/Checkout.qml | 225 ++++++++++++++++++ scripts/system/html/js/marketplacesInject.js | 6 +- scripts/system/marketplaces/marketplaces.js | 10 +- 3 files changed, 234 insertions(+), 7 deletions(-) create mode 100644 interface/resources/qml/hifi/commerce/Checkout.qml diff --git a/interface/resources/qml/hifi/commerce/Checkout.qml b/interface/resources/qml/hifi/commerce/Checkout.qml new file mode 100644 index 0000000000..9f689bd349 --- /dev/null +++ b/interface/resources/qml/hifi/commerce/Checkout.qml @@ -0,0 +1,225 @@ +// +// Checkout.qml +// qml/hifi/commerce +// +// Checkout +// +// Created by Zach Fox on 2017-08-07 +// Copyright 2017 High Fidelity, Inc. +// +// Distributed under the Apache License, Version 2.0. +// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html +// + +import Hifi 1.0 as Hifi +import QtQuick 2.5 +import QtQuick.Controls 1.4 +import "../../styles-uit" +import "../../controls-uit" as HifiControlsUit +import "../../controls" as HifiControls + +// references XXX from root context + +Rectangle { + HifiConstants { id: hifi; } + + id: checkoutRoot; + // Style + color: hifi.colors.baseGray; + + // + // TITLE BAR START + // + Item { + id: titleBarContainer; + // Size + width: checkoutRoot.width; + height: 50; + // Anchors + anchors.left: parent.left; + anchors.top: parent.top; + + // Title Bar text + RalewaySemiBold { + id: titleBarText; + text: "Checkout"; + // Text size + size: hifi.fontSizes.overlayTitle; + // Anchors + anchors.fill: parent; + anchors.leftMargin: 16; + // Style + color: hifi.colors.lightGrayText; + // Alignment + horizontalAlignment: Text.AlignHLeft; + verticalAlignment: Text.AlignVCenter; + } + + // Separator + HifiControlsUit.Separator { + anchors.left: parent.left; + anchors.right: parent.right; + anchors.bottom: parent.bottom; + } + } + // + // TITLE BAR END + // + + // + // ITEM DESCRIPTION START + // + Item { + id: itemDescriptionContainer; + // Size + width: checkoutRoot.width; + height: 150; + // Anchors + anchors.left: parent.left; + anchors.top: titleBarContainer.bottom; + + // Item Name text + RalewaySemiBold { + id: itemNameTextLabel; + text: "Item Name:"; + // Text size + size: 16; + // Anchors + anchors.top: parent.top; + anchors.topMargin: 4; + anchors.left: parent.left; + anchors.leftMargin: 16; + // Style + color: hifi.colors.lightGrayText; + // Alignment + horizontalAlignment: Text.AlignHLeft; + verticalAlignment: Text.AlignVCenter; + } + RalewayRegular { + id: itemNameText; + // Text size + size: itemNameTextLabel.size; + // Anchors + anchors.top: itemNameTextLabel.top; + anchors.topMargin: itemNameTextLabel.anchors.topMargin; + anchors.left: itemNameTextLabel.right; + anchors.leftMargin: 16; + // Style + color: hifi.colors.lightGrayText; + // Alignment + horizontalAlignment: Text.AlignHLeft; + verticalAlignment: Text.AlignVCenter; + } + + // Item Author text + RalewaySemiBold { + id: itemAuthorTextLabel; + text: "Item Author:"; + // Text size + size: 16; + // Anchors + anchors.top: itemNameTextLabel.bottom; + anchors.topMargin: 4; + anchors.left: parent.left; + anchors.leftMargin: 16; + // Style + color: hifi.colors.lightGrayText; + // Alignment + horizontalAlignment: Text.AlignHLeft; + verticalAlignment: Text.AlignVCenter; + } + RalewayRegular { + id: itemAuthorText; + // Text size + size: itemAuthorTextLabel.size; + // Anchors + anchors.top: itemAuthorTextLabel.top; + anchors.topMargin: itemAuthorTextLabel.anchors.topMargin; + anchors.left: itemAuthorTextLabel.right; + anchors.leftMargin: 16; + // Style + color: hifi.colors.lightGrayText; + // Alignment + horizontalAlignment: Text.AlignHLeft; + verticalAlignment: Text.AlignVCenter; + } + + // Item Price text + RalewaySemiBold { + id: itemPriceTextLabel; + text: "Item Price:"; + // Text size + size: 16; + // Anchors + anchors.top: itemAuthorTextLabel.bottom; + anchors.topMargin: 4; + anchors.left: parent.left; + anchors.leftMargin: 16; + // Style + color: hifi.colors.lightGrayText; + // Alignment + horizontalAlignment: Text.AlignHLeft; + verticalAlignment: Text.AlignVCenter; + } + RalewayRegular { + id: itemPriceText; + // Text size + size: itemPriceTextLabel.size; + // Anchors + anchors.top: itemPriceTextLabel.top; + anchors.topMargin: itemPriceTextLabel.anchors.topMargin; + anchors.left: itemPriceTextLabel.right; + anchors.leftMargin: 16; + // Style + color: hifi.colors.lightGrayText; + // Alignment + horizontalAlignment: Text.AlignHLeft; + verticalAlignment: Text.AlignVCenter; + } + + // Separator + HifiControlsUit.Separator { + anchors.left: parent.left; + anchors.right: parent.right; + anchors.bottom: parent.bottom; + } + } + // + // ITEM DESCRIPTION END + // + + // + // FUNCTION DEFINITIONS START + // + // + // Function Name: fromScript() + // + // Relevant Variables: + // None + // + // Arguments: + // message: The message sent from the JavaScript, in this case the Marketplaces JavaScript. + // Messages are in format "{method, params}", like json-rpc. + // + // Description: + // Called when a message is received from a script. + // + function fromScript(message) { + console.log("ZRF:", JSON.stringify(message)); + switch (message.method) { + case 'updateCheckoutQML': + console.log("ZRF:", JSON.stringify(message)); + itemNameText.text = message.itemName; + itemAuthorText.text = message.itemAuthor; + itemAuthorText.text = message.itemPrice; + break; + default: + console.log('Unrecognized message from marketplaces.js:', JSON.stringify(message)); + } + } + signal sendToScript(var message); + + // + // FUNCTION DEFINITIONS END + // +} diff --git a/scripts/system/html/js/marketplacesInject.js b/scripts/system/html/js/marketplacesInject.js index 61c421f96b..068625b792 100644 --- a/scripts/system/html/js/marketplacesInject.js +++ b/scripts/system/html/js/marketplacesInject.js @@ -97,7 +97,6 @@ } function injectHiFiCode() { - console.log("ZRF INJECTING HIFI CODE"); $('.item-footer').find('#price-or-edit').find('a').attr('href', '#') $('.item-footer').find('#price-or-edit').find('a').on('click', function () { buyButtonClicked("TEST ITEM", "Zach Fox", 10); @@ -105,10 +104,9 @@ } function injectHiFiItemPageCode() { - console.log("ZRF INJECTING HIFI ITEM PAGE CODE"); $('#side-info').find('.btn').attr('href', '#') $('#side-info').find('.btn').on('click', function () { - buyButtonClicked("TEST ITEM", "Zach Fox", 10); + buyButtonClicked($('#top-center').find('h1').text(), $('#creator').find('.value').text(), 10); }); } @@ -344,9 +342,11 @@ var DIRECTORY = 0; var HIFI = 1; var CLARA = 2; + var HIFI_ITEM_PAGE = 3; var pageType = DIRECTORY; if (location.href.indexOf("highfidelity.com/") !== -1) { pageType = HIFI; } + if (location.href.indexOf("highfidelity.com/marketplace/items/") !== -1) { pageType = HIFI_ITEM_PAGE; } if (location.href.indexOf("clara.io/") !== -1) { pageType = CLARA; } injectCommonCode(pageType === DIRECTORY); diff --git a/scripts/system/marketplaces/marketplaces.js b/scripts/system/marketplaces/marketplaces.js index c06192c9a4..19d66b7418 100644 --- a/scripts/system/marketplaces/marketplaces.js +++ b/scripts/system/marketplaces/marketplaces.js @@ -19,6 +19,7 @@ var MARKETPLACE_URL_INITIAL = MARKETPLACE_URL + "?"; // Append "?" to signal injected script that it's the initial page. var MARKETPLACES_URL = Script.resolvePath("../html/marketplaces.html"); var MARKETPLACES_INJECT_SCRIPT_URL = Script.resolvePath("../html/js/marketplacesInject.js"); + var MARKETPLACE_CHECKOUT_QML_PATH = Script.resourcesPath() + "qml/hifi/commerce/Checkout.qml"; var HOME_BUTTON_TEXTURE = "http://hifi-content.s3.amazonaws.com/alan/dev/tablet-with-home-button.fbx/tablet-with-home-button.fbm/button-root.png"; // var HOME_BUTTON_TEXTURE = Script.resourcesPath() + "meshes/tablet-with-home-button.fbx/tablet-with-home-button.fbm/button-root.png"; @@ -58,10 +59,11 @@ UserActivityLogger.openedMarketplace(); tablet.gotoWebScreen(MARKETPLACE_URL_INITIAL, MARKETPLACES_INJECT_SCRIPT_URL); tablet.webEventReceived.connect(function (message) { - - if (message.type === "CHECKOUT") { - console.log("ZRF: Buy Button Clicked: ", JSON.stringify(message)); - //tablet.pushOntoStack(""); + var parsedJsonMessage = JSON.parse(message); + if (parsedJsonMessage.type === "CHECKOUT") { + console.log("ZRF: Buy Button Clicked: " + JSON.stringify(parsedJsonMessage)); + tablet.pushOntoStack(MARKETPLACE_CHECKOUT_QML_PATH); + tablet.sendToQml({ method: 'updateCheckoutQML', params: message }); } if (message === GOTO_DIRECTORY) {