Themes: Oypo integrated into plogger

NO LONGER SUPPORTED BY OYPO

I've been running Plogger for years now. To bad development is at a stand still so I pretty much have my personal "fork" now.

Oypo, the dutch printing service, has updated their integration possibility with a jQuery version.

I've altered my theme to include this new code.

theme/footer.php: Added Oypo basket stuff
<!-- *** BEGIN OYPO WINKELWAGEN *** -->
<div class="row">
<div class="col-xxs-3 col-sm-2">
<div class="OypoCart">
<span class="OypoSelectionCount"></span>
<i class="fa fa-shopping-cart fa-4x OypoCartIcon"></i>
</div>
<button type="button" class="OypoBestelknop priority" onclick="checkout(jQuery('.OypoSelectionCount').text());">Bestel</button><br />
</div>
<div class="col-xxs-6 col-sm-10">
<div id="oypo-container">
<div class="OypoSelection"></div>
</div>
</div>
</div>
<!-- *** EINDE OYPO WINKELWAGEN *** -->

And at the bottom added the Oypo Init script and extra code for my checkout if loaded via iframe. This also includes Google Universal Analytics event triggers to track checkouts,
<!-- Initialize oypo scripts. Depends on jquery -->
<!--script src=&quot;//www.oypo.nl/pixxer/api/oypo-ext-201503.asp&quot;&gt;&lt;/script-->
<script src="<?php echo THEME_URL ?>jscss/oypo-ext-201503.min.js"></script>
<script type="text/javascript">
function checkout(amount)
{
try {
if (amount > 0)
value = amount * 0.77;
ga('send', {
'hitType': 'event',
'eventCategory': 'Webshop',
'eventAction': 'Checkout',
'eventLabel': 'Winkelwagen: ' + winkelwagen + ', ' + amount + ' items.',
'eventValue': value
});
} catch (e) {
console.log(e);
ga('send', {
'hitType': 'event',
'eventCategory': 'Errors',
'eventAction': 'Checkout',
'eventLabel': e
});
}

var returnLink = 'https://degroteprijs.xiphias.net/';
if (window.location != window.parent.location)
{
try {
returnLink = window.parent.location;
} catch (e) {
returnLink = 'http://www.degroteprijs.nl/fotos-de-grote-prijs-bestellen/';
console.log(e);
}
window.parent.location.href = 'https://www.oypo.nl/winkelwagen/?cart=' + winkelwagen + '&css=&wl=&retourlink=' + returnLink;
} else {
window.location.href = 'https://www.oypo.nl/winkelwagen/?cart=' + winkelwagen + '&css=&wl=&retourlink=' + returnLink;
}
}
</script>
I put the extenal init script in my theme folder so it could be minimized. After optiomization my Plogger gallery scores 96/100 on the Google PageSpeed index.

theme/picture.php: Get original highres URL, pretty custom since it only works with my photo naming convention.
<?php
$strImage = plogger_get_picture_thumb(THUMB_LARGE);
$strHires = basename($strImage);
$strHires = substr($strHires, strpos($strHires, "-")+1);
?>

And at the spot where I want my order button I've placed this.
<button id="button<?php echo plogger_get_picture_id(); ?>" class="OypoAddToBasket" data-img="<?php echo $strHires; ?>"></button><span id="text<?php echo plogger_get_picture_id(); ?>"> bestellijst</span>
Oypo only supports images for add and remove buttons so use the test in span and some jQuery to merge them into the button.

At the bottom below: <?php plogger_get_footer(); ?> this has been added, it also includes Google Universal Analytics code to register the add and remove clicks. On creation of the add/remove button the text span is added to the button.
<script type="text/javascript">
// jQuery mag het $-teken niet meer gebruiken, maar moet gebruik maken van jQuery als aanroep
jQuery.noConflict();
jQuery(function() {
/*
Add photo to oypo and display order button
Parameters:
element: DOM element where the orderbutton should be placed
foto: last part of url to the highres photo (first part is defined in the 'verkoopprofiel')
thumb: full url to thumbnail preferably 800 px long side; width/height ratio should be the same as highres photo, so no cropping to square!
profielid: id of the 'verkoopprofiel'
buttonadd: url of image for 'add to cart' icon
buttondel: url of image for 'delete from cart' icon
onload: function that fires after successful loading of orderbutton
onshop: function that fires after photo is added or deleted to/from shopping cart
*/
try {
OypoButton({
element:jQuery('#button<?php echo plogger_get_picture_id(); ?>'),
foto:'<?php echo $strHires; ?>',
thumb:'<?php echo $strImage; ?>',
profielid:'5760715B6F2B43F7',
buttonadd:'<?php echo THEME_URL ?>images/dgp-oypo-add.png',
buttondel:'<?php echo THEME_URL ?>images/dgp-oypo-del.png',
onload:function(data) {
//optioneel, event na laden
//data.guid: guid van de foto, data.selected: true/false
//console.log(data);
imgId = jQuery('#OypoImg'+data.guid).closest('.OypoAddToBasket').attr('id').substr(6);
//console.log(imgId);
jQuery('#text'+imgId).appendTo('#button'+imgId+' > a');
},
onshop:function(data) {
//optioneel, event fired na selecteren/deselecteren
//data.guid: guid van de foto, data.selected: true/false
ga('send', {
'hitType': 'event',
'eventCategory': 'Webshop',
'eventAction': (data.selected ? 'Add to basket' : 'Remove from basket'),
'eventLabel': window.self.location
});
}
})
} catch(e) {
console.log(e);
}
})
</script>

theme/album.php: Added pretty much the same code as above only the OypoButton() function is called in a for each loop to loop through all the images visible. This replace the need of including the script below every image like the old pre 2015 Oypo code.
The button and highres stuff used above is also used in the album.php but the javascript is a bit different.
<script type="text/javascript">
// jQuery mag het $-teken niet meer gebruiken, maar moet gebruik maken van jQuery als aanroep
//jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('.OypoAddToBasket').each(function() {
/*
Add photo to oypo and display order button
Parameters:
element: DOM element where the orderbutton should be placed
foto: last part of url to the highres photo (first part is defined in the 'verkoopprofiel')
thumb: full url to thumbnail preferably 800 px long side; width/height ratio should be the same as highres photo, so no cropping to square!
profielid: id of the 'verkoopprofiel'
buttonadd: url of image for 'add to cart' icon
buttondel: url of image for 'delete from cart' icon
onload: function that fires after successful loading of orderbutton
onshop: function that fires after photo is added or deleted to/from shopping cart
*/
try {
OypoButton({
element: jQuery(this),
foto: jQuery(this).attr('data-img'),
thumb: jQuery('#thumb-'+jQuery(this).attr('id').substr(6)).attr('src'),
profielid: '5760715B6F2B43F7',
buttonadd: '<?php echo THEME_URL ?>images/dgp-oypo-add.png',
buttondel: '<?php echo THEME_URL ?>images/dgp-oypo-del.png',
onload: function(data) {
//optioneel, event na laden
//data.guid: guid van de foto, data.selected: true/false
// console.log(data);
imgId = jQuery('#OypoImg'+data.guid).closest('.OypoAddToBasket').attr('id').substr(6);
// console.log(imgId);
jQuery('#text'+imgId).appendTo('#button'+imgId+' > a');
},
onshop: function(data) {
//optioneel, event fired na selecteren/deselecteren
//data.guid: guid van de foto, data.selected: true/false
ga('send', {
'hitType': 'event',
'eventCategory': 'Webshop',
'eventAction': (data.selected ? 'Add to basket' : 'Remove from basket'),
'eventLabel': jQuery('#button'+imgId).attr('data-img')
});
}
})
} catch(e) {
console.log(e);
}
});
});
</script>

This album can be viewed on https://degroteprijs.xiphias.net

Questions? Ask!


-XiP

I've placed it after <?php echo plogger_download_selected_form_end(); ?> in footer.php

Don't forget to alter the checkout URLs, you could just set the retunLink, I just check if the site is loaded in an iframe and if so I alers the retunlink.

Only file needed is gallery.css but I've minified it. So change to regular file in footer.php or also minify .css and .js after editing.

Most of my view come from the events page where my gallery is shown in an iframe. The gallery has a transparent background by default but in the gallery.js on the bottom there is a bit of script to find out if the gallery is in an iframe and if not the a background is set.
I think that is the issue.