Oypo

Oypo orderbutton demo

Methode om de Oypo winkelwagen op je eigen site te integreren, waarbij de highres-foto's nog niet naar Oypo zijn gestuurd. Die worden door Oypo automatisch gedownload zodra iemand ze bestelt.

De uitleg van de werking staat hieronder. Probeer alles gerust op je eigen site uit. De scripts zijn getest op IE, Firefox PC + Mac, Safari en Opera.

Vragen en/of opmerkingen en/of suggesties: mail naar nic@oypo.nl

Nic Limper.

update
Op deze pagina staat een modernere/verbeterde versie van de scripts, die ook werkt als u de orderbutton dynamisch wilt genereren

Deze elementen zijn apart ergens op je website te plaatsen:

aantal foto's in winkelwagen:





Uitleg

Aantal foto's in de winkelwagen

PixxerSelectionCount bevat het aantal foto's in de winkelwagen (optioneel). Dit element wordt automatisch gevuld en geactualiseerd. 
	aantal foto's in winkelwagen: <span id="PixxerSelectionCount"></span>

Kleine winkelwagen-thumbnails

Het element PixxerSelection wordt gevuld met kleine thumbs van 30x30 pixels met de inhoud van de winkelwagen. (optioneel, het element wordt alleen gevuld als het id bestaat) 
	<div id="PixxerSelection"></div><br clear=all>

Stylesheet

Deze stijl wordt gebruikt voor de kleine thumbnailtjes (30x30 pixels) die de geselecteerde foto's weergeven. Ze worden als volgt neergezet door de Oypo-scripts in de DIV met id=PixxerSelection: 
<ul class="PixxerThumbs"><li><img></li>...</ul>

	<style>
		.PixxerThumbs {
			list-style-type: none;
			padding-left: 0px;
			margin-left: 0px;
		}
		.PixxerThumbs LI {
			margin: 0px 3px 3px 0px;
			float: left;
		}
	</style>

Foto toevoegen aan winkelwagen

Het stukje code om het 'voeg toe aan winkelwagen'-knopje te tonen 
		
	<script language="JavaScript" src="http://www.oypo.nl/pixxer/api/orderbutton.asp?
		foto=00973968.jpg&
		thumb=http://www.kijk.us/00973968-thumb.jpg&
		profielid=DA358423DA5FF67C&
		buttonadd=http://www.kijk.us/selectionadd.gif&
		buttondel=http://www.kijk.us/selectiondel.gif
	"></script>

Parameters:

Link naar de winkelwagen

Je moet zelf zorgen dat je naar de winkelwagen toe kan dmv een link naar http://www.oypo.nl/winkelwagen . Op die plek kan de afnemer de formaten kiezen en de order verder invoeren en bevestigen. Als er een element met id PixxerBestelKnop bestaat (optioneel) wordt die vanzelf verborgen als de winkelwagen leeg is en getoond zodra er iets in geplaatst wordt. Optioneel: retourlink=<url> : url van de knop 'foto's toevoegen' in de eerste stap van de winkelwagen (let op: url encoded) 
	<p id="PixxerBestelknop" style="display:none">
		checkout via de Oypo-site: 
		<a href="javascript:document.location='http://www.oypo.nl/winkelwagen/?cart='+winkelwagen+'&retourlink=http://www.kijk.us/en/'">checkout</a>
	</p>
of, checkout via een iframe en eigen css: vul voor WL= en CSS= en de retourlink de juiste waardes in (of laat ze leeg) 
	<p id="PixxerBestelknop" style="display:none">
		<a href="javascript:document.location='http://www.oypo.nl/pixxer/api/winkelwageniframe.asp?cart='+winkelwagen+'&css=http://www.link2party.nl/App_Themes/classic/stylesheet.css&wl=xxxx&retourlink=http://www.kijk.us'">test</a>
	</p>

Initialisatie

deze is belangrijk: dit script bevat de gezamelijke functies en alle JSON aanroepen enzo. Die moet op iedere pagina ingevoegd worden waar je Oypo-elementen gebruikt. Ook wordt op deze plek een Oypo-logootje toegevoegd. :-) 
	<script language="JavaScript" src="http://www.oypo.nl/pixxer/api/pixxerinit.asp?
		buttonadd=http://www.kijk.us/selectionadd.gif&
		buttondel=http://www.kijk.us/selectiondel.gif">
	</script>

Parameters:

LET OP: de verwijzingen naar buttonadd en buttondel moeten in alle links hetzelfde zijn.