AlexRiina/deeplink_buy_now.html

## deeplink_buy_now.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
        <script src="/deeplink_buy_now.js"></script>
        <link rel="stylesheet" href="//affil.walmart.com/buttons/styles/buynow.min.css" type="text/css"/>
    </head>

    <body>
        <!-- Knockout dynamically rewrites the button as the items change -->
        <div class="wm_bnow">
            <a data-bind="attr: { href: clickUrl }" class="btn btn-compact btn-primary" id="buybutton">
            <img src="//affil.walmart.com/buttons/assets/images/spark.png"/>
            Buy Now
          </a>
        </div>

        <p>
            <a data-bind="attr: { href: walmart_url }, text: walmart_url"></a>
        </p>

        <img data-bind="attr: { src: beaconUrl }" style="display:none;width:0px;height:0px;"/>

        <script>
            view_model = new BuyNowButton();
            ko.applyBindings(view_model);

            view_model.addItem(false, {id: "45698070", quantity: 2});
            view_model.addItem(false, {id: "45698070", quantity: 2});
            view_model.items.push({id: "631", quantity: 1});
        </script>
    </body>
</html>

## deeplink_buy_now.js
const WALMART_ADVERTISER_ID = 2149;
const GRAPEVINE_WALMART_PUBID = "3455596";
const GRAPEVINE_RAKUTEN_ID = "QwKsy297pCg";  // from their link builder

// Parameters I think we need to set
var u1 = "";
var tracking_id = "";

function encodeItems(items) {
  return items.map(item => `${item.id}|${item.quantity}`).join(',');
}

function BuyNowButton() {
  const _this = this;

  // with quantities
  this.addItem = function(is_upc, item_with_quantity) {
    let list = is_upc ? _this.upcs : _this.items;

    let index = list().findIndex(item => item.id == item_with_quantity.id);
    if (index >= 0) {
      let item = list()[index];
      item.quantity += item_with_quantity.quantity;
      list.notifySubscribers()
    } else {
      list.push(item_with_quantity);
    }
  };

  this.removeItem = function(is_upc, item_with_quantity) {
    let list = is_upc ? _this.upcs : _this.items;
    let index = list().findIndex(item => item.id == item_with_quantity.id);
    if (index >= 0) {
      let item = list()[index];
      item.quantity -= item_with_quantity.quantity;
      if (item.quantity <= 0) {
        list.slice(index, 1);
      }
      list.notifySubscribers()
    }
  };

  this.updateItem = function(is_upc, item_with_quantity) {
    let list = is_upc ? _this.upcs : _this.items;
    let index = list().findIndex(item => item.id == item_with_quantity.id);
    if (index >= 0) {
      let item = list()[index];
      item.quantity = item_with_quantity.quantity;
      list.notifySubscribers()
    } else {
      list.push(item_with_quantity);
    }
  };

  this.clearItem = function(is_upc, item) {
    let list = is_upc ? _this.upcs : _this.items;
    let index = list().findIndex(i => i.id == item.id);
    if (index >= 0) {
      list.slice(index, 1);
    }
  }

  this.clearAllItems = function() {
    this.items.removeAll();
    this.upcs.removeAll();
  }

  // hashes aren't observable :(
  this.items = ko.observableArray();  // {id, quantity}
  this.upcs = ko.observableArray();  // {id,  quantity}

  this.walmart_url = ko.computed(function() {
    return decodeURIComponent("http://affil.walmart.com/cart/buynow?" + $.param({
      items: encodeItems(_this.items()),
      upcs: encodeItems(_this.upcs()),
      affsdktrack: tracking_id,
      veh: "aff",
      affs: "sdk",
      affsdktype: "html",
      affsdkcomp: "buynowbutton",
      colorscheme: "orange",
      sizescheme: "compact",
    }));
  });

  this.clickUrl = ko.computed(function() {
    return "//linksynergy.walmart.com/deeplink?" + $.param({
      u1: u1,
      id: GRAPEVINE_RAKUTEN_ID,
      mid: WALMART_ADVERTISER_ID,
      murl: _this.walmart_url(),
    })
  });

  this.beaconUrl = "//beacon.walmart.com/vm/ttap.gif?" + $.param({
    affpublisherid: GRAPEVINE_WALMART_PUBID,
    affsdkaction: "buynow_button_impression",
    affsdktrack: tracking_id,
    veh: "aff",
    affs: "sdk",
    affsdktype: "html",
    affsdkcomp: "buynowbutton",
    colorscheme: "orange",
    sizescheme: "compact"
  });
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
	<script src="/deeplink_buy_now.js"></script>
	<link rel="stylesheet" href="//affil.walmart.com/buttons/styles/buynow.min.css" type="text/css"/>
	</head>

	<body>
	<!-- Knockout dynamically rewrites the button as the items change -->
	<div class="wm_bnow">
	<a data-bind="attr: { href: clickUrl }" class="btn btn-compact btn-primary" id="buybutton">
	<img src="//affil.walmart.com/buttons/assets/images/spark.png"/>
	Buy Now
	</a>
	</div>

	<p>
	<a data-bind="attr: { href: walmart_url }, text: walmart_url"></a>
	</p>

	<img data-bind="attr: { src: beaconUrl }" style="display:none;width:0px;height:0px;"/>

	<script>
	view_model = new BuyNowButton();
	ko.applyBindings(view_model);

	view_model.addItem(false, {id: "45698070", quantity: 2});
	view_model.addItem(false, {id: "45698070", quantity: 2});
	view_model.items.push({id: "631", quantity: 1});
	</script>
	</body>
	</html>
	const WALMART_ADVERTISER_ID = 2149;
	const GRAPEVINE_WALMART_PUBID = "3455596";
	const GRAPEVINE_RAKUTEN_ID = "QwKsy297pCg"; // from their link builder

	// Parameters I think we need to set
	var u1 = "";
	var tracking_id = "";

	function encodeItems(items) {
	return items.map(item => `${item.id}\|${item.quantity}`).join(',');
	}

	function BuyNowButton() {
	const _this = this;

	// with quantities
	this.addItem = function(is_upc, item_with_quantity) {
	let list = is_upc ? _this.upcs : _this.items;

	let index = list().findIndex(item => item.id == item_with_quantity.id);
	if (index >= 0) {
	let item = list()[index];
	item.quantity += item_with_quantity.quantity;
	list.notifySubscribers()
	} else {
	list.push(item_with_quantity);
	}
	};

	this.removeItem = function(is_upc, item_with_quantity) {
	let list = is_upc ? _this.upcs : _this.items;
	let index = list().findIndex(item => item.id == item_with_quantity.id);
	if (index >= 0) {
	let item = list()[index];
	item.quantity -= item_with_quantity.quantity;
	if (item.quantity <= 0) {
	list.slice(index, 1);
	}
	list.notifySubscribers()
	}
	};

	this.updateItem = function(is_upc, item_with_quantity) {
	let list = is_upc ? _this.upcs : _this.items;
	let index = list().findIndex(item => item.id == item_with_quantity.id);
	if (index >= 0) {
	let item = list()[index];
	item.quantity = item_with_quantity.quantity;
	list.notifySubscribers()
	} else {
	list.push(item_with_quantity);
	}
	};

	this.clearItem = function(is_upc, item) {
	let list = is_upc ? _this.upcs : _this.items;
	let index = list().findIndex(i => i.id == item.id);
	if (index >= 0) {
	list.slice(index, 1);
	}
	}

	this.clearAllItems = function() {
	this.items.removeAll();
	this.upcs.removeAll();
	}

	// hashes aren't observable :(
	this.items = ko.observableArray(); // {id, quantity}
	this.upcs = ko.observableArray(); // {id, quantity}

	this.walmart_url = ko.computed(function() {
	return decodeURIComponent("http://affil.walmart.com/cart/buynow?" + $.param({
	items: encodeItems(_this.items()),
	upcs: encodeItems(_this.upcs()),
	affsdktrack: tracking_id,
	veh: "aff",
	affs: "sdk",
	affsdktype: "html",
	affsdkcomp: "buynowbutton",
	colorscheme: "orange",
	sizescheme: "compact",
	}));
	});

	this.clickUrl = ko.computed(function() {
	return "//linksynergy.walmart.com/deeplink?" + $.param({
	u1: u1,
	id: GRAPEVINE_RAKUTEN_ID,
	mid: WALMART_ADVERTISER_ID,
	murl: _this.walmart_url(),
	})
	});

	this.beaconUrl = "//beacon.walmart.com/vm/ttap.gif?" + $.param({
	affpublisherid: GRAPEVINE_WALMART_PUBID,
	affsdkaction: "buynow_button_impression",
	affsdktrack: tracking_id,
	veh: "aff",
	affs: "sdk",
	affsdktype: "html",
	affsdkcomp: "buynowbutton",
	colorscheme: "orange",
	sizescheme: "compact"
	});
	}