Webwinkel integratie algemeen / Wordpress

Nadat je in het menu onder het kopje 'Fotomappen' hebt gekozen voor de optie 'integratie in eigen website' kun je klikken je op de button 'aanmaken'. Daarna verschijnt dit scherm.

Kies als eerste een naam voor je integratie. Zorg ervoor dat deze herkenbaar is (helemaal als je per map een aparte integratie wilt aanmaken). Deze naam is niet zichtbaar op je website. 

Maak daarna meteen een taalkeuze voor de webintegratie. Je kunt kiezen uit Nederlands, Duits, Engels en Frans. 

Je kunt vervolgens kiezen wat je op de pagina wilt laten zien; Een mappenoverzicht van alle mappen, een specifieke map of het inlogscherm voor het inloggen middels een code en wachtwoord. 

Heb je een pro account en de white label optie actief?
Dan kan je hier een aantal white label gerelateerde instellingen doen.

Na het aanvinken van "White label instellen" verschijnen een aantal opties;

• De eerste is een selectievakje, waarin je de actieve white label kan kiezen voor deze webintegratie. Dit is enkel zinvol als je meerdere white labels actief hebt onder hetzelfde account.
• Eigen logo. Hier kan je een eigen logo uploaden dat weergegeven wordt in je de webintegratie.
  Dit is vooral nuttig als je je klanten naar je webwinkel stuurt via de directe link van de integratie. Zo kan je de webwinkel toch nog een beetje personaliseren, ondanks dat je webwinkel in dat geval onder het oypo.nl domein geopend wordt.
• Vrij tekstveld. Dit is een tekst welke weergegeven wordt in je de webintegratie.

De hiernaast weergegeven opties stellen je in staat om enkel elementen op het scherm te verbergen.

Foldernaam. De naam van de map die wordt weergegeven

Mapomschrijving. De omschrijving van de map (indien je deze hebt ingevuld)

"U bent nu hier". Hiermee kan je het kruimelpad van de mappen (waaraan de tekst "U bent nu hier" aan vooraf gaat) zichtbaar wilt hebben.

Mapattributen. Hiermee kan je het aantal foto's, fotograafnaam, data van opnames desgewenst verbergen. Deze gegevens staan normaal gesproken direct boven het overzicht van thumbnails op een pagina.

Vervolgens kun je kiezen voor een kleurenschema. Als je deze op "Standaard" laat staan, verschijnt de pagina in de OYPO-kleuren op jouw website. Kies voor 'eigen kleuren' als je je eigen huisstijl wilt doorvoeren.

Vervolgens verschijnen de kleuren in beeld zoals ze standaard staan ingesteld. Als je klikt op de blokjes verschijnt er een kleurenpallet en kun je je eigen kleuren kiezen. Dit kan ook door middel van het invoeren van een kleurcode.

Op deze manier is het mogelijk om de webintegratie overeen te laten komen met de huisstijl van jouw website. 

Wil je een eigen stylesheet gebruiken om je webwinkel te personaliseren, dan kan dat ook. Lees hier meer over hoe je dat kunt doen.

Wil je de kleuren van je eigen logo gebruiken, maar weet je de kleurcodes niet, maak dan gebruik van de mogelijkheid om met een pipet precies de juiste kleur te prikken. Dit doe je als volgt: 

• Zet op je beeldscherm ook een afbeelding van je logo of website open
• Klik op 'eigen kleuren kiezen' en klik op een gekleurd vlak. De kleurenwaaier verschijnt. Onderin staat een pipetje, klik deze aan. Er verschijnt vervolgens een rondje met in de midden een punt. Met dit puntje in het midden kun je de gewenste kleur prikken. Het rondje eromheen toont deze kleur. Als je erop klikt zet je de kleur vast, de juiste kleur verschijnt in het vakje. 
• Zo ga je te werk met alle kleuren uit je logo, maar het kan ook met de kleuren van bijvoorbeeld je website. 

De directe link

Deze link kan je gebruiken om je klanten door te sturen naar dezelfde "integratie", maar dan niet op je eigen website, maar op de website van OYPO.

Deze manier raden we aan te gebruiken, aangezien vele browsers tegenwoordig standaard zgn. "third party cookies" blokkeren welke nodig zijn voor het goed functioneren van de integratie in je eigen website m.b.v. de embed code.

De "Embed code" is een stukje javascript. Deze coderegel heb je nodig als je de webwinkel in je eigen website wilt integreren.
Kopieer dan deze regel.

Let op: Zie de opmerking bij "de directe link" hierboven. Deze methode raden we niet meer aan om te gebruiken.

Onderaan de pagina verschijnt na een klik op de "Opslaan" knop een voorvertoning van hoe de webwinkel eruit zal gaan zien.
Zo kan je eenvoudig een aanpassing aan de kleuren doorvoeren en opnieuw bekijken.
Telkens als je op de "Opslaan" knop klikt, wordt de voorvertoning opnieuw weergegeven.

BELANGRIJK: Als je eigen kleuren hebt ingesteld, controleer dan goed of de gekozen kleuren goed leesbaar zijn op je beeldscherm, en loop het gehele(!) bestelproces even door.

De integratie invoegen op je Wordpress website.

Maak op je site een nieuwe pagina aan, of voeg het stukje script toe aan een bestaande pagina. Let erop dat je dit in de "Tekst" modus doet of bij sommige websites wordt het aangegeven met "<>". Alleen op deze pagina's kun je een stukje script invoeren. 

Na publiceren van het document is de webwinkel zichtbaar. 

Noot: De getoonde schermafbeelding hiernaast is van het Wordpress CMS

Sommige fotografen vinden het fijn om na een evenement een aparte pagina te maken voor dat evenement en tevens daarop de webwinkel te integreren van enkel de fotomap van dat evenement. Dit kan er in de praktijk toe leiden dat je in je account wel tientallen integraties moet aanmaken waarin je ook elke keer weer je huiskleuren juist moet instellen.

Het kan echter ook handiger gelukkig met de volgende truuk;
Het is van belang dat je bij het aanmaken van de integratie bij "opmaak" kiest voor een specifieke map (dus niet voor een mappenoverzicht of inlogkaartje) Welke map je kiest voor deze integratie is nu niet van belang, je kan dus ook de hoofdmap kiezen.
Na het aanmaken van de integratie in je account, wordt de integratie code weergegeven, globaal ziet deze er zo uit:

<script src="https://www.oypo.nl/embed-UNIEKE_CODE" class="js--oypo-script"></script>

(in plaats van UNIEKE_CODE staat er dan een lange code, hiermee hoef je niets te doen)

Als je een integratie in je website wil plaatsen van een specifieke map, dan kan je de integratie-code gebruiken van de (enige?) integratie in je account, met de volgende toevoeging:

?folderGuid=MAP_ID

..waarin je MAP_ID vervangt door het ID van de te integreren map (te vinden onder 'mapbeheer' bij de betreffende map)
Bovenstaande regel plaats je dan direct na de UNIEKE_CODE, zodat de integratieregel die je opneemt in je website er zo uit komt te zien:

<script src="https://www.oypo.nl/embed-UNIEKE_CODE?folderGuid=MAP_ID" class="js--oypo-script"></script>

Ook in de bovenstaande regel blijft in plaats van UNIEKE_CODE die lange, onleesbare code staan. Dus je wijzigt deze niet in "UNIEKE_CODE"!
Telkens als je op de website een nieuwe pagina met een integratie van een map wil plaatsen, kan je eerder gebruikte integratieregel gebruiken waarin je dan enkel het MAP_ID hoeft te wijzigen naar het ID van de nieuwe map.