Not signed in (Sign In)

Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.

    •  
      CommentAuthorxiphias
    • CommentTimeFeb 7th 2017 edited
     
    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
    Thankful People: edwink
    • CommentAuthoredwink
    • CommentTimeDec 28th 2017 edited
     
    Very old (almost year old) post, but just noticed it.

    Am a bit confused at where to place what exactly. Esp. this part:

    <code>
    <!-- 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></code>

    This goes in footer.php as well? Or some place else?
    •  
      CommentAuthorxiphias
    • CommentTimeJan 2nd 2018
     
    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.
    • CommentAuthoredwink
    • CommentTimeFeb 1st 2018
     
    Got it working, kind off ;)

    Now I'm just fighting with some CSS stuff, to make the background less black. There are so many CSS-files to look at. So, if you have any idea on this, you would be making mevery happy.

    (Also looking to replace the icon-file
    •  
      CommentAuthorxiphias
    • CommentTime4 days ago
     
    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.