Another Idea

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta charset="utf-8" /><meta name="description" content="" /><meta name="author" content="" /><link rel="stylesheet" type="text/css" href="assets/css/tango/skin.css" /> <link rel="stylesheet" type="text/css" href="assets/css/editpattern.css" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,600,300,700" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,500,700" rel="stylesheet" type="text/css" /> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" /> <title>ATAC Sportswear - The WyZ - 2018</title><link href="assets/css/bootstrap.css" rel="stylesheet" /> <link href="assets/css/wyz2_styles.css" rel="stylesheet" /> <link href="assets/css/gradient-styles.css" rel="stylesheet" /><script> if(document.images){ myimage0 = new Image(); myimage0.src = "assets/images/canvasgrid50.png"; myimage2 = new Image(); myimage2.src = "assets/css/tango/next-horizontal.png"; myimage3 = new Image(); myimage3.src = "assets/css/tango/prev-horizontal.png"; myimage7 = new Image(); myimage7.src = "assets/css/i/485.gif"; myimage8 = new Image(); myimage8.src = "assets/images/cyo-arrow.png"; } </script><style> *{ padding: 0; margin: 0; border: 0; } body{ overflow: hidden; } #canvas-container { position: relative; width: 790px; height: 610px; margin: 0; border: 4px solid #666; /* background: rgba(170,142,195,0.75); */ background: rgba(66,90,113,0.55); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } </style></head><body onload="init()" class="img-responsive"> <div class="row"> <div class="col-xs-2"></div> <div class="col-xs-8"> <div id="canvas-container"><canvas id="canvas" width="780" height="600"></canvas></div> </div> </div> <div class="row"> <div class="col-xs-2"></div> <div class="col-xs-10"></div> </div> <div class="row"> <div class="col-xs-2"></div> <div class="col-xs-8"></div> <div class="col-xs-2"></div> </div> <script src="assets/js/jquery.js"></script><script src="assets/js/bootstrap.min.js"></script><script src="assets/js/wyz2018/fabric2018.js"></script><script src="assets/js/wyz/thewyz_master5.js"></script><script src="assets/js/wyz2018/atac_master_products_new.js"></script><script src="assets/js/wyz/wyz_master_app_loader25.js"></script><!-- <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="assets/js/wyz/jquery.browser.js"></script> --><script> function init(){ var canvas = new fabric.Canvas('canvas'); // canvas.add( // new fabric.Rect({ // width: 100, height: 200, // left: 100, top: 100, // fill: 'yellow', // angle: 30 // })); canvas.renderAll(); canvas.calcOffset(); } using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Newtonsoft.Json; using Newtonsoft.Json.Linq; using RestSharp; public class EndpointZakekeController : Controller { [HttpPost] [Route("zakeke/addtocart")] public JsonResult AddProductToCart(string jsonInput) { // Deserialize JSON and get relative properties JObject jsonObj = JObject.Parse(jsonInput); string productid = (string)jsonObj["productid"]; string designid = (int)jsonObj["designid"]; int quantity = (int)jsonObj["quantity"]; Dictionary selectedattributes = ((IDictionary<string, string>)jsonObj["selectedAttributes"]).ToDictionary(p => p.Key, p => p.Value); // Get User shopping cart // <string,string> ShoppingCartEntity cart = null; // Code to get user shopping cart .... // Get Design information via Zakeke API Rest using RestSharp (see API reference for details) Design designinfo = null; var client = new RestClient("https://api.zakeke.com/v1/designs/" + designid); var request = new RestRequest() { Method = Method.GET }; request.AddHeader("Authorization", "Bearer " + "Your OAuth Token S2S"); try{ var response = client.Execute(request); if (response != null && response.StatusCode == System.Net.HttpStatusCode.OK) { design = new ZakekeDesign(); JObject responseJson = JsonConvert.DeserializeObject<JObject>(response.Content); string urlPreviewImage = responseJson["tempPreviewImageUrl"].ToString(); decimal designUnitPrice = decimal.Parse(responseJson["designUnitPrice"].ToString()); decimal designUnitPercentagePrice = decimal.Parse(responseJson["designUnitPercentagePrice"].ToString()); decimal priceToAdd = ((design.designUnitPercentagePrice / 100) * prodotto.PrezzoUnitarioScontato) + design.designUnitPrice; cart.Add(productid, designid, pricetoadd, quantity, urlPreviewImage); return Json(new { returnurl = "http://your.store.com/shopping-cart" }); } } catch (Exception ex) { return(false); } } } // Callback edit product into shopping cart function callback(jsonInput) { // callback code to handle edit customized product event return(false); } // Customizer config var config = {editshoppingcartcallback : callback} // Product config var productJson = { responseJson["tempPreviewImageUrl"].ToString() } var customizer = new zakekeDesigner(config, productJson); catch (Exception ex){ return(false); } JObject responseJson = JsonConvert.DeserializeObject (response.Content); string urlPreviewImage = responseJson["tempPreviewImageUrl"].ToString(); decimal designUnitPrice = decimal.Parse(responseJson["designUnitPrice"].ToString()); decimal designUnitPercentagePrice = decimal.Parse(responseJson["designUnitPercentagePrice"].ToString()); decimal priceToAdd = ((design.designUnitPercentagePrice / 100) * prodotto.PrezzoUnitarioScontato) + design.designUnitPrice; // Remove from cart, customized product with the old design cart.Remove(productid, quantity, designid); // Add to cart, customized product with the new design cart.Add(productid, designid, pricetoadd, quantity, urlPreviewImage); var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self, call) {if (!self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call && (typeof call === "object" || typeof call === "function") ? call : self;}function _inherits(subClass, superClass) {if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;}var Square = function (_React$Component) {_inherits(Square, _React$Component);function Square() {_classCallCheck(this, Square);return _possibleConstructorReturn(this, (Square.__proto__ || Object.getPrototypeOf(Square)).apply(this, arguments));}_createClass(Square, [{ key: "render", value: function render() { return ( React.createElement("button", { className: "square" }, this.props.value)); } }]);return Square;}(React.Component); var Board = function (_React$Component2) {_inherits(Board, _React$Component2);function Board() {_classCallCheck(this, Board);return _possibleConstructorReturn(this, (Board.__proto__ || Object.getPrototypeOf(Board)).apply(this, arguments));}_createClass(Board, [{ key: "renderSquare", value: function renderSquare( i) { return React.createElement(Square, { value: i }); } }, { key: "render", value: function render(){ var status = 'Next player: X'; return ( React.createElement("div", null, React.createElement("div", { className: "status" }, status), React.createElement("div", { className: "board-row" }, this.renderSquare(0), this.renderSquare(1), this.renderSquare(2)), React.createElement("div", { className: "board-row" }, this.renderSquare(3), this.renderSquare(4), this.renderSquare(5)), React.createElement("div", { className: "board-row" }, this.renderSquare(6), this.renderSquare(7), this.renderSquare(4)))); } }]);return Board;}(React.Component); var Game = function (_React$Component3) {_inherits(Game, _React$Component3);function Game() {_classCallCheck(this, Game);return _possibleConstructorReturn(this, (Game.__proto__ || Object.getPrototypeOf(Game)).apply(this, arguments));}_createClass(Game, [{ key: "render", value: function render() { return ( React.createElement("div", { className: "game" }, React.createElement("div", { className: "game-board" }, React.createElement(Board, null)), React.createElement("div", { className: "game-info" }, React.createElement("div", null), React.createElement("ol", null)))); } }]);return Game;}(React.Component); // ======================================== ReactDOM.render( React.createElement(Game, null), document.getElementById('root')); </script></body></html>