Mirrors/overte-lubosz
3
0
Fork 0
mirror of https://github.com/lubosz/overte.git synced 2025-04-17 20:26:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #11143 from zfox23/commerce_CheckoutQMLInvestigation

Browse source 
Add skeleton "Checkout" page for Marketplace items
This commit is contained in:
Howard Stearns 2017-08-09 09:58:21 -07:00 committed by GitHub
commit afbe35a2fe
4 changed files with 423 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

303
interface/resources/qml/hifi/commerce/Checkout.qml Normal file
View file

@ -0,0 +1,303 @@
//
// 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;
property string itemId;
// 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: childrenRect.height + 20;
// Anchors
anchors.left: parent.left;
anchors.top: titleBarContainer.bottom;
// Item Name text
Item {
id: itemNameContainer;
// Anchors
anchors.top: parent.top;
anchors.topMargin: 4;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: childrenRect.height;
RalewaySemiBold {
id: itemNameTextLabel;
text: "Item Name:";
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
width: paintedWidth;
// Text size
size: 16;
// Style
color: hifi.colors.lightGrayText;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
RalewayRegular {
id: itemNameText;
// Text size
size: itemNameTextLabel.size;
// Anchors
anchors.top: parent.top;
anchors.left: itemNameTextLabel.right;
anchors.leftMargin: 16;
width: paintedWidth;
// Style
color: hifi.colors.lightGrayText;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
}
// Item Author text
Item {
id: itemAuthorContainer;
// Anchors
anchors.top: itemNameContainer.bottom;
anchors.topMargin: 4;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: childrenRect.height;
RalewaySemiBold {
id: itemAuthorTextLabel;
text: "Item Author:";
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
width: paintedWidth;
// Text size
size: 16;
// Style
color: hifi.colors.lightGrayText;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
RalewayRegular {
id: itemAuthorText;
// Text size
size: itemAuthorTextLabel.size;
// Anchors
anchors.top: parent.top;
anchors.left: itemAuthorTextLabel.right;
anchors.leftMargin: 16;
width: paintedWidth;
// Style
color: hifi.colors.lightGrayText;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
}
// Item Price text
Item {
id: itemPriceContainer;
// Anchors
anchors.top: itemAuthorContainer.bottom;
anchors.topMargin: 4;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: childrenRect.height;
RalewaySemiBold {
id: itemPriceTextLabel;
text: "Item Price:";
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
width: paintedWidth;
// Text size
size: 20;
// Style
color: hifi.colors.lightGrayText;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
RalewayRegular {
id: itemPriceText;
// Text size
size: itemPriceTextLabel.size;
// Anchors
anchors.top: parent.top;
anchors.left: itemPriceTextLabel.right;
anchors.leftMargin: 16;
width: paintedWidth;
// Style
color: hifi.colors.lightGrayText;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
}
}
//
// ITEM DESCRIPTION END
//
//
// ACTION BUTTONS START
//
Item {
id: actionButtonsContainer;
// Size
width: checkoutRoot.width;
height: 40;
// Anchors
anchors.left: parent.left;
anchors.top: itemDescriptionContainer.bottom;
// "Cancel" button
HifiControlsUit.Button {
color: hifi.buttons.black;
colorScheme: hifi.colorSchemes.dark;
anchors.top: parent.top;
anchors.topMargin: 3;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 3;
anchors.left: parent.left;
anchors.leftMargin: 20;
width: parent.width/2 - anchors.leftMargin*2;
text: "Cancel"
onClicked: {
sendToScript({method: 'checkout_cancelClicked', params: itemId});
}
}
// "Buy" button
HifiControlsUit.Button {
color: hifi.buttons.black;
colorScheme: hifi.colorSchemes.dark;
anchors.top: parent.top;
anchors.topMargin: 3;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 3;
anchors.right: parent.right;
anchors.rightMargin: 20;
width: parent.width/2 - anchors.rightMargin*2;
text: "Buy"
onClicked: {
sendToScript({method: 'checkout_buyClicked', params: itemId});
}
}
}
//
// ACTION BUTTONS 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) {
switch (message.method) {
case 'updateCheckoutQML':
itemId = message.params.itemId;
itemNameText.text = message.params.itemName;
itemAuthorText.text = message.params.itemAuthor;
itemPriceText.text = message.params.itemPrice;
break;
default:
console.log('Unrecognized message from marketplaces.js:', JSON.stringify(message));
}
}
signal sendToScript(var message);
//
// FUNCTION DEFINITIONS END
//
}

3
interface/src/ui/overlays/ContextOverlayInterface.cpp
View file

@ -250,7 +250,8 @@ void ContextOverlayInterface::openMarketplace() {
auto tablet = dynamic_cast<TabletProxy*>(_tabletScriptingInterface->getTablet("com.highfidelity.interface.tablet.system"));
// construct the url to the marketplace item
QString url = MARKETPLACE_BASE_URL + _entityMarketplaceID;
tablet->gotoWebScreen(url);
QString MARKETPLACES_INJECT_SCRIPT_PATH = "file:///" + qApp->applicationDirPath() + "/scripts/system/html/js/marketplacesInject.js";
tablet->gotoWebScreen(url, MARKETPLACES_INJECT_SCRIPT_PATH);
_hmdScriptingInterface->openTablet();
_isInMarketplaceInspectionMode = true;
}

62
scripts/system/html/js/marketplacesInject.js
View file

@ -25,6 +25,8 @@
var canWriteAssets = false;
var xmlHttpRequest = null;
var isPreparing = false; // Explicitly track download request status.
var confirmAllPurchases = false; // Set this to "true" to cause Checkout.qml to popup for all items, even if free
function injectCommonCode(isDirectoryPage) {
@ -65,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);
@ -87,8 +89,59 @@
});
}
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() {
// Nothing to do.
if (confirmAllPurchases) {
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.
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
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();
}
}
function injectHiFiItemPageCode() {
if (confirmAllPurchases) {
$('#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(window.location.pathname.split("/")[3],
$('#top-center').find('h1').text(),
$('#creator').find('.value').text(),
10);
});
}
}
function updateClaraCode() {
@ -323,9 +376,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);
@ -336,6 +391,9 @@
case HIFI:
injectHiFiCode();
break;
case HIFI_ITEM_PAGE:
injectHiFiItemPageCode();
break;
case CLARA:
injectClaraCode();
break;

59
scripts/system/marketplaces/marketplaces.js
View file

@ -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,6 +59,11 @@
UserActivityLogger.openedMarketplace();
tablet.gotoWebScreen(MARKETPLACE_URL_INITIAL, MARKETPLACES_INJECT_SCRIPT_URL);
tablet.webEventReceived.connect(function (message) {
var parsedJsonMessage = JSON.parse(message);
if (parsedJsonMessage.type === "CHECKOUT") {
tablet.sendToQml({ method: 'updateCheckoutQML', params: parsedJsonMessage });
tablet.pushOntoStack(MARKETPLACE_CHECKOUT_QML_PATH);
}
if (message === GOTO_DIRECTORY) {
tablet.gotoWebScreen(MARKETPLACES_URL, MARKETPLACES_INJECT_SCRIPT_URL);
@ -124,7 +130,8 @@
}
function onScreenChanged(type, url) {
onMarketplaceScreen = type === "Web" && url === MARKETPLACE_URL_INITIAL
onMarketplaceScreen = type === "Web" && url === MARKETPLACE_URL_INITIAL;
wireEventBridge(type === "QML" && url === MARKETPLACE_CHECKOUT_QML_PATH);
// for toolbar mode: change button to active when window is first openend, false otherwise.
marketplaceButton.editProperties({ isActive: onMarketplaceScreen });
if (type === "Web" && url.indexOf(MARKETPLACE_URL) !== -1) {
@ -147,4 +154,54 @@
Entities.canWriteAssetsChanged.disconnect(onCanWriteAssetsChanged);
});
// Function Name: wireEventBridge()
//
// Description:
// -Used to connect/disconnect the script's response to the tablet's "fromQml" signal. Set the "on" argument to enable or
// disable to event bridge.
//
// Relevant Variables:
// -hasEventBridge: true/false depending on whether we've already connected the event bridge.
var hasEventBridge = false;
function wireEventBridge(on) {
if (!tablet) {
print("Warning in wireEventBridge(): 'tablet' undefined!");
return;
}
if (on) {
if (!hasEventBridge) {
tablet.fromQml.connect(fromQml);
hasEventBridge = true;
}
} else {
if (hasEventBridge) {
tablet.fromQml.disconnect(fromQml);
hasEventBridge = false;
}
}
}
// Function Name: fromQml()
//
// Description:
// -Called when a message is received from Checkout.qml. The "message" argument is what is sent from the Checkout QML
// in the format "{method, params}", like json-rpc.
function fromQml(message) {
switch (message.method) {
case 'checkout_cancelClicked':
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();
break;
default:
print('Unrecognized message from Checkout.qml: ' + JSON.stringify(message));
}
}
}()); // END LOCAL_SCOPE