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