In Magento 1.7 is de optie Cash on delivery toegevoegd aan de betaalmethoden, bij ons beter bekend als Rembours zending. Geweldig want dat scheelt weer een extensie van een externe partij! Er is alleen 1 kleine maar…

En die maar is dat je geen toeslag in kunt vullen voor de betaalmethode ‘Cash on delivery’ en dat is jammer want daardoor wordt de betaalmethode een stuk minder bruikbaar. Een rembours zending kost hier in NL namelijk (zo even uit het blote hoofd) een kleine 13 euro en om die kosten nou geheel voor eigen rekening te nemen als webshop…

Toch is er een oplossing in de vorm van standaard Magento prijsregels en wat code modificatie. Wanneer je onderstaand exact opvolgt zul je aan het eind de beschikking hebben over de mogelijkheid om negatieve waarden in te voeren bij een kortingsregel. Een -15,00 als opgegeven korting binnen de prijsregel wordt dan dus een toeslag van 15 euro!

LET OP: we kopieren files van app/code/core naar app/etc/local om te voorkomen dat bij de eerste de beste Magento upgrade onze gemodificeerde files worden overgeschreven.

Open de file: app/code/core/Mage/rule/model/Abstract.php

Zoek de regel:

1
2
3
4
5

if ($this->hasDiscountAmount()) {
	if ((int)$this->getDiscountAmount() < 0) {
		Mage::throwException(Mage::helper('rule')->__('Invalid discount amount.'));
	}
}

Vervang deze door:

1
2
3
4
5
6
7

/*
if ($this->hasDiscountAmount()) {
	if ((int)$this->getDiscountAmount() < 0) {
		Mage::throwException(Mage::helper('rule')->__('Invalid discount amount.'));
	}
}
*/

Sla deze file nu op en plaats hem in app/code/local/Mage/rule/model/rule.php

Open nu de file: app/code/core/Mage/Adminhtml/Block/Promo/Quote/Edit/Tab/Actions.php

Zoek regel:

1
2
3
4
5
6

$fieldset->addField('discount_amount', 'text', array(
            'name' => 'discount_amount',
            'required' => true,
            'class' => 'validate-not-negative-number',
            'label' => Mage::helper('salesrule')->__('Discount Amount'),
        ));

Vervang door:

1
2
3
4
5
6

$fieldset->addField('discount_amount', 'text', array(
            'name' => 'discount_amount',
            'required' => true,
            //'class' => 'validate-not-negative-number',
            'label' => Mage::helper('salesrule')->__('Discount Amount'),
        ));

Sla de file op en plaats hem onder app/code/local/Mage/Adminhtml/Block/Promo/Quote/Edit/Tab/Actions.php

Open nu de file: app/code/core/Mage/SaleRule/Model/Validator.php

Zoek regel:

1
2

if ($cartRules[$rule->getId()] > 0) {
$quoteAmount        = $quote->getStore()->convertPrice($cartRules[$rule->getId()]);

Vervang door (alleen een < toevoegen, rond regel 28):

1
2

if ($cartRules[$rule->getId()] <> 0) {
$quoteAmount        = $quote->getStore()->convertPrice($cartRules[$rule->getId()]);

Sla de file nu op onder: app/code/local/Mage/SaleRule/Model/Validator.php

Nu is het mogelijk om een ‘negatieve’ waarde in te voeren binnen een prijsregel in Magento. Hier onder een voorbeeld van hoe ik dat gedaan heb voor een klant van ons,

Iedereen die wel eens bezig is geweest met het maken van een WordPress template en het installeren van modules weet dat er nogal wat scripts ingeladen worden. Het gros van de scripts gebruik je echter maar sporadisch op een bepaald type pagina. Zo hoef je de scripts van ContactForm7 alleen te laden op pagina’s waar je de formulieren ook daadwerkelijk gebruikt.

Tijd voor een bezem…

Voorbeeldje,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<link href="/wp-content/themes/yoo_quantum_wp/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
<link rel='stylesheet' id='contact-form-7-css'  href='http://www.x-studios.nl/wp-content/plugins/contact-form-7/styles.css?ver=3.1.2' type='text/css' media='all' />
<script type='text/javascript' src='http://www.x-studios.nl/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<link rel="stylesheet" href="/wp-content/plugins/widgetkit1/cache/widgetkit-ff66d4ea.css" />
<script type="text/javascript" src="/wp-content/plugins/widgetkit1/cache/widgetkit-7dbe2392.js"></script>
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/base.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/layout.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/menus.css" />
<style>.wrapper { width: 980px; }
#maininner { width: 980px; }
#menu .dropdown { width: 250px; }
#menu .columns2 { width: 500px; }
#menu .columns3 { width: 750px; }
#menu .columns4 { width: 1000px; }</style>
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/modules.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/tools.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/system.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/extensions.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/custom.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/color/orange.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/font1/droidsans.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/font2/droidsans.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/font3/droidsans.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/style.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/css/print.css" />
<link rel="stylesheet" href="/wp-content/themes/yoo_quantum_wp/fonts/droidsans.css" />
<script type="text/javascript" src="/wp-content/themes/yoo_quantum_wp/warp/js/warp.js"></script>
<script type="text/javascript" src="/wp-content/themes/yoo_quantum_wp/warp/js/accordionmenu.js"></script>
<script type="text/javascript" src="/wp-content/themes/yoo_quantum_wp/warp/js/dropdownmenu.js"></script>
<script type="text/javascript" src="/wp-content/themes/yoo_quantum_wp/js/template.js"></script>

Dat kan dus beter want het gros van de scripts zal maar op een bepaald aantal pagina’s gebruikt worden. Zo installeren een hoop mensen ContactForm7 maar is het echt niet nodig de CSS en Javascripts op iedere pagina in te laden.

Sleutel voor de oplossing is handig gebruik maken van de ‘conditional tags’ die WordPress je biedt. Hier vind je een complete lijst van de mogelijke tags.

Wanneer je alle mogelijkheden in je header.php op gaat zitten nemen wordt die echter weer een zooitje dus heb ik er in dit geval voor gekozen om een aparte header file te maken waar alle extra jQuery scriptjes in geladen worden middels de ‘conditional tags’.

Om deze te includen kan er gebruik gemaakt worden van de “get_header(‘scripts’)” waarbij de waarde “scripts” staat voor het laatste deel van de file naam, in dit geval heet mijn file dus “header-scripts.php” welke naast de standaard header.php geplaatst is in de template directory.

header.php,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php if (is_page('contact')) {
	// Lets add some scripts for the contact page
	if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
		wpcf7_enqueue_scripts();
		wpcf7_enqueue_styles();
	}
}?>
<!-- Wordpress generated code -->
<?php wp_enqueue_script("jquery"); ?>
<?php if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );
		wp_head();
?>
<!-- Custom jQuery library includes -->
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.fancybox.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.js"></script>
<?php if (is_single() && in_category('gallery')) { // To check if we need Masonry... it's only needed in category's listed below ?>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.masonry.js"></script>
<?php } ?>
<!-- Some other jQuery stuff, tools document etcetera -->
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.tools.js"></script>
<?php get_header('scripts') ?>

header-scripts.php,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php // Only load this if needed, on single pages!
	if (is_single()) { ?>
    <!-- Single page so add the jQuery stuff we need -->
	<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(function () {
			$("#content_post_info").stickySidebar({
        });
      });
 
	  <?php if (in_category('gallery')) { ?>
	  <!-- Since we are on a gallery page, add the masonry stuff
	  $('.gallery').masonry({
			columnWidth: 5,
			itemSelector: '.gallery-item'
		});
	<?php } ?>
 
	 });
    </script>
<?php } ?>

Opgeruimd staat netjes!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script type='text/javascript' src='http://www.vout.nl/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<!-- Custom jQuery library includes -->
<script src="http://www.vout.nl/wp-content/themes/vout/js/jquery.fancybox.js"></script>
<script src="http://www.vout.nl/wp-content/themes/vout/js/jquery.easing.js"></script>
<!-- Some other jQuery stuff, tools document etcetera -->
<script src="http://www.vout.nl/wp-content/themes/vout/js/jquery.tools.js"></script>
<!-- Google Analytics code -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24468173-2']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

Overigens kan bovenstaand ook nog ontdaan worden van de Fancybox en Easing library’s op de frontpage op deze website. Het is dus een beetje puzzelen om te zien wat je wel en niet nodig hebt op bepaalde pagina’s maar wanneer dat eenmaal gebeurd is houd je pagina’s over waarbij geen onnodige scripts geladen worden en dus kleiner zijn.

Wanneer je binnen WordPress een afbeelding invoegt koppelt het CMS daar in de meeste gevallen ook een link aan. Deze link leid naar de afbeelding op volledige grote in het huidige browser venster… leuk en aardig maar je bezoeker is wel van de pagina weg geleid.

Dat kan beter!
Het is namelijk helemaal niet nodig om een afbeelding in een nieuw venster te openen. In het gros van de gevallen kan dat namelijk prima in een lightbox waardoor je bezoeker niet van de pagina weg wordt geleid.

Nu kun je voor bovenstaand ongewtijfeld een plug-in installeren echter ben ik persoonlijk niet zo van het installeren van plug-ins voor simpele zaken als deze. Handmatig toevoegen is namelijk helemaal niet zo moeilijk.

Let wel, enige kennis van HTML is vereist!

Fancybox.
Er vanuit gaande dat men standaard jQuery al laadt binnen WordPress hoeven we alleen nog maar een lightbox script toe te voegen. Ik gebruik zelf altijd FancyBox. Een lightbox script waar je eigenlijk alles in kunt weergeven. Van Youtube filmpje tot aan een collectie van product images.

Voor het gemak heb ik even een uitgeklede download gemaakt van Fancybox en deze is hier te downloaden.

Na het downloaden en extracten van de zip file is het tijd om zaken toe te gaan voegen aan de template. Plaats de files in de juiste directory’s en controleer in het geval van de afbeeldingen of de paden nog wel correct zijn in de CSS.

Na het uploaden wordt het tijd om de files daadwerkelijk te gaan laden. Open als eerste de header.php van je template (er vanuit gaande dat deze aanwezig is, anders uitzoeken waar de <head> </head> in gegenereerd wordt) en voeg daar de volgende regels aan toe,

1
2
3
4
5
6
7

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/css/fancybox.css">" />
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.fancybox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
	$(".fancybox").fancybox();
});
</script>

Het kan zijn dat je de regels een beetje moet ordenen, css regels bij elkaar, js regels bij elkaar etcetera (ik houd van netjes ;) ) maar in de basis zou bovenstaand gewoon prima moeten werken.

Uploaden en controleren of alles netjes geladen wordt door de pagina bron te bekijken. Je zult daarin nu links naar de CSS, het Fancybox script + de trigger tegen moeten komen.

Functions.php
Nu wordt het tijd om wanneer er een afbeelding + link naar grotere afbeelding ingevoegd wordt deze automatisch te openen in een Fancybox. Open de functions.php van je template, helemaal onderaan in de functions.php voeg je de volgende regels toe,

1
2
3
4
5
6
7
8
9
10

// Add automated fancybox support
add_filter('the_content', 'addfancyboxclass', 12);
add_filter('get_comment_text', 'addfancyboxclass');
function addfancyboxclass ($content) {
	global $post;
	$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
	$replacement = '<a$1href=$2$3.$4$5 class="fancybox"$6>$7</a>';
	$content = preg_replace($pattern, $replacement, $content);
	return $content;
}

Upload de functions.php en test nu of de functie werkt door een nieuwe pagina aan te maken in de backend, een afbeelding in te voegen + link naar de volledige afbeelding, zie afbeelding hiernaast.

Sla de pagina vervolgens op en bekijk deze aan de frontend van de website. Wanneer alles goed is gegaan opent een image link nu niet zoals normaal in hetzelfde venster maar in een lightbox window… zoals het plaatje hiernaast.

Wat hebben we nu exact gedaan? Eigenlijk is het heel simppel, binnen de pagina gaan we op zoek naar een bepaald patroon (in dit geval een image link), voegen daar een class aan toe (fancybox) en krijgen als resultaat een image wat klikbaar is, opent in een lightbox en dat allemaal zonder dat we er bij na hoeven denken.

Google Shopping draait inmiddels al weer een poosje in Nederland en kort na de Nederlandse introductie heb ik het voor een aantal van onze Magento klanten (welke de data op orde hadden) een feed aangemaakt welke wekelijks ‘gesubmit‘ wordt bij Google Shopping… tijd om eens te zien of het ook daadwerkelijk iets brengt.

Wat is Google Shopping?
Eigenlijk niet veel meer dan een simpele vorm van websites zoals we die al een eeuwigheid kennen in de vorm van een beslist of kieskeurig.nl. Google shopping is echter wat simpeler van opzet en richt zich vooral op ‘waar koop ik het product voor de laagste prijs’. Daarbij verzamelt Google Shopping data bij externe partijen als bijvoorbeeld een Beslist of Trustpilot om de product data aan te vullen met shop reviews.

Waarom zou je in Google Shopping willen staan?
Behalve dat het je (na een initiële setup van de feed) niets kost vergroot het je bereik binnen Google. Bij het maken van een zoekopdracht waar ook ‘Shopping’ resultaten voor te vinden zijn worden deze weer gegeven tussen de organische resultaten. Iemand die zoals op onderstaande afbeelding te zien is zoekt op ‘nike air max ltd‘ krijgt als eerste de Google Shopping resultaten te zien.

Resultaten van Google Shopping staan in dit geval dus nog boven de organische resultaten en direct onder de betaalde advertenties van Google. Doordat men er een plaatje aan toe heeft gevoegd trekt het Google Shopping resultaat flink de aandacht en is de kans vrij groot aanwezig dat iemand als eerste op 1 van deze resultaten zal klikken.

Wanneer we naar ‘Shopping’ zelf gaan en daar dezelfde zoekopdracht uitvoeren + sorteren op prijs (van laag naar hoog, we blijven tenslotte Hollanders) krijgen we onderstaande afbeelding als resultaat (klikbaar voor een groter formaat).

Rood omcirkelde items zijn van de shop waar ik de feed voor heb gemaakt en zoals te zien op het screenshot… van de eerste 12 items zijn 11 directe productlinks naar de website van Athleticshop of Sneakertom. Wanneer we de standaard sortering ‘relevantie’ overigens toe passen scoort men nog steeds goed. Van de 20 items op een pagina gaan er 6 naar Athleticshop of Sneakertom, not bad en een resultaat wat je nooit van zijn levensdagen gaat behalen binnen de organische resultaten.

Maar wordt er ook op geklikt?
Natuurlijk heeft een Google Shopping pas een toegevoegde waarde wanneer mensen er ook echt gebruik van maken, oftewel klikken mensen er ook op? Het antwoord is JA. Onderstaande afbeelding is nog niet een heel representatieve grafiek aangezien we nog met wat ‘hickups’ zaten in het begin en er aardig wat producten afgekeurd werden. De laatste 2 weken is er flink geoptimaliseerd in de feed en zijn de fouten er uit gesloopt met als gevolg een feed kwaliteit ‘goed’ volgens Google.

Resultaat zijn per dag zo’n 50 á 60 clicks van mensen die  op zoek waren naar een product via Google en uiteindelijk via Google Shopping zijn beland op de website van Athleticshop of Sneakertom.

Lang niet slecht als je het mij vraagt, helemaal omdat je er relatief weinig werk aan hebt… mits je netjes je data submit bij Google.

Deel 2, “De Google Shopping basics” volgt later.

Kwam toevallig via via dit tegen op de website van Wegener, een package deal waarbij je een aantal keywords op kan geven welke dan vervolgens gelinkt worden aan jouw website. Nu klopt het dat inkomende links nog altijd waardevol zijn als het gaat om SEO echter is er in dit geval een hele grote maar…

En die hele grote ‘maar‘ is dat Google het niet heel erg ‘tof’ vind wanneer er betaald wordt voor dergelijke links. Google (en alle andere zoekmachines voor zover mij bekend) wil namelijk zijn organische resultaten baseren op relevante data en wil voorkomen dat deze data vervuild wordt middels pakketten zoals Wegener ze verkoopt. Vandaar dat Google ook handige formulieren als deze heeft waarmee men zaken als deze onder de aandacht kan brengen van de zoekmachine gigant.

Links ‘kopen’ is dus een no-go en zal misschien op korte termijn een resultaat geven, op lange termijn werkt het in het gros van de gevallen averechts en is het ook nog eens verdomd lastig om de gevolgen ervan weer weg te poetsen.