Maar toen kwamen we achter een probleem: het wijzigen van de adresgegevens op de account-pagina werkt niet. Het wordt alleen opgeslagen als je op de checkout.php zit.
Zoeken in de Shopp forums hielp ook niet, daar bleek dat dit al sinds het begin zo is (en er erg veel mensen zijn die dit wel graag willen).

Het enige dat ik dacht was: “maar zo moeilijk kan het toch niet zijn?” En inderdaad: zo moeilijk was het ook niet

De code

De volgende code zet je in de functions.php van je theme (of in een aparte plugin -> aangeraden!):

function save_address_info()
{
  global $Shopp;
  
  $Order =& $Shopp->Order;
  
  if ( isset($_GET['acct']) && ( $_GET['acct'] == 'account' ) )
  {
    if ( isset($_POST['billing']) && isset($_POST['shipping']) )
    {
      // Shipping address
      $Order->Shipping->address  = $_POST['shipping']['address'];
      $Order->Shipping->xaddress  = $_POST['shipping']['xaddress'];
      $Order->Shipping->city    = $_POST['shipping']['city'];
      $Order->Shipping->state    = $_POST['shipping']['state'];
      $Order->Shipping->country  = $_POST['shipping']['country'];
      
      $Order->Shipping->save();
      
      // Billing address
      $Order->Billing->address  = $_POST['billing']['address'];
      $Order->Billing->xaddress  = $_POST['billing']['xaddress'];
      $Order->Billing->city    = $_POST['billing']['city'];
      $Order->Billing->state    = $_POST['billing']['state'];
      $Order->Billing->country  = $_POST['billing']['country'];
      
      $Order->Billing->save();
    }
  }
} // end save_address_info
add_action('shopp_init','save_address_info');

En je moet natuurlijk niet vergeten om de velden daadwerkelijk aan je account.php toe te voegen

Print PDF

In dit deel van de “Shopp: maatwerk product in winkelwagen”-serie laat ik zien hoe je met een eigen formulier een product aan de winkelwagen kan toevoegen. Met deze code kun je dan inhaken op andere plugins.

Het formulier

Als eerste maken we het formulier. Je kunt hier het beste een aparte pagina-template voor gebruiken.

<form action="" method="post">
  <input type="hidden" name="ProductName" value="Naam van Product" >
  <input type="hidden" name="ProductPrice" value="10.00" >

  <h2>Naam van Product</h2>

  <big>Prijs: <php echo money(10.00); ?></big>

  <p><label for="ProductQuantity">Aantal</label><input type="text" name="ProductQuantity" id="ProductQuantity" value="1" /></p>
  <p><input type="submit" name="addtocart" value="In winkelwagen" /></p>
</form>

Uitleg formulier code

Zoals je kan zien is de action van dit formulier leeg, hierdoor wordt het formulier verzonden naar de huidige pagina. Vandaar de aparte pagina-template, je kunt de code voor het afhandelen van het verzonden formulier dan bij het formulier zelf houden.

<input type="hidden" name="ProductName" value="Naam van Product" >
  <input type="hidden" name="ProductPrice" value="10.00" >

Deze verborgen velden zijn voor het opgeven van de benodigde gegevens, de naam en de prijs. De prijs wordt hier niet “op z’n Nederlands” neergezet, maar met een punt als scheiding tussen de decimalen en hele getallen. Dit om te verzekeren dat het bedrag juist wordt overgenomen als het product in de winkelwagen wordt gestopt.

<h2>Naam van Product</h2>

Dit lijkt me voor zich spreken. Je geeft de naam van het product wel mee in een verborgen veld, maar voor je bezoekers/klanten is het ook wel zo handig om te weten hoe het product heet.

<big>Prijs: <php echo money(10.00); ?></big>

Je klanten willen natuurlijk ook wel graag weten wat een product dan kost, voor ze het in de winkelwagen stoppen. De money() functie is een Shopp-functie die ervoor zorgt dat de weergave van het bedrag overeenkomt met de valuta van je webshop. In Euro’s wordt dit dan €10,00.

<p><label for="ProductQuantity">Aantal</label><input type="text" name="ProductQuantity" id="ProductQuantity" value="1" /></p>

Een invoerveld voor het aantal dat toegevoegd moet worden aan de winkelwagen. Hier kun je uiteraard ook een verborgen veld voor gebruiken waarmee je het aantal dat wordt toegevoegd vastzet.

<p><input type="submit" name="addtocart" value="In winkelwagen" /></p>

De button die het formulier verzend.

Aan winkelwagen toevoegen

Met bovenstaande code heb je een leuk formuliertje, maar verder eigenlijk ook niet. We hebben nog code nodig die de verzonden gegevens gaan verwerken.

<?php

// is het formulier gepost?
if ( isset($_POST['addtocart']) )
{
  global $Shopp;
  $Order  =&#038; ShoppOrder();
  $Cart  =&#038; $Order->Cart;
  
  $Product          = new Product((time()-1));
  $NewProduct    = new Item($Product,time());

  $NewProduct->name  = esc_attr($_POST['ProductName']); // productnaam
  $NewProduct->unitprice  = intval($_POST['ProductPrice']); // de prijs per product
  $NewProduct->quantity  = intval($_POST['ProductQuantity']); // aantal van het product
  $NewProduct->taxrate  = shopp_taxrate(); // haal het BTW-percentage uit de Shopp instellingen
  $NewProduct->taxable  = true; // of het product met BTW belast moet worden of niet (true|false)

  $Cart->contents[]  = $NewProduct; // voeg het nieuwe product aan de winkelwagen toe
  $Cart->changed(true); // laat Shopp weten dat de winkelwagen is verandert
}

?>

Shopp heeft ook een speciale functie om producten aan de winkelwagen toe te voegen, Adam heeft daar een voorbeeld van in een van zijn tutorials, maar ik vind deze manier zelf fijner. Zo heb je meer controle over waar het item in de winkelwagen geplaatst wordt.

Custom data per product

Wil je graag custom data toevoegen aan je product(en)? Dat kan uiteraard en dat doe je zo (moet boven $Cart->contents[] = $NewProduct; geplaatst worden):

<?php
  $NewProduct->data['Naam specifiek veld 1'] = esc_attr($_POST['SpecificField1']);
  $NewProduct->data['Naam specifiek veld 2'] = esc_attr($_POST['SpecificField2']);
?>

Vergeet niet om de inputs voor deze velden ook toe te voegen aan het formulier (al dan niet met verborgen velden).

Verwijderen uit winkelwagen

Om het product uit de winkelwagen te verwijderen heb je geen extra code nodig, hier zorgt Shopp zelf voor.

Print PDF

Dynamische sidebars per taal

<?php

/*
 Register sidebars
*/
if ( function_exists('register_sidebars') )
{
    // WPML is active
    if ( function_exists('icl_get_languages') )
    {
        foreach ( icl_get_languages('skip_missing=0&orderby=name&order=asc') as $lang )
        {
            register_sidebar( array(
                'name'          => __(sprintf('%s Sidebar',strtoupper($lang['language_code']))),
                'id'            => 'sidebar-'.$lang['language_code'],
                'before_widget' => '<li id="%1$s">',
                'after_widget'  => '</li>',
                'before_title'  => '<h4>',
                'after_title'   => '</h4>'
            ) );
        }
    }
    // WPML is not active
    else
    {
        register_sidebar( array(
            'name'          => __('Sidebar'),
            'id'            => 'sidebar-default',
            'before_widget' => '<li id="%1$s">',
            'after_widget'  => '</li>',
            'before_title'  => '<h4>',
            'after_title'   => '</h4>'
        ) );
    } // end if/else
} // end if

?>

Meerdere sidebars

<?php

/*
 Register sidebars
*/
if ( function_exists('register_sidebars') )
{
    // WPML is active
    if ( function_exists('icl_get_languages') )
    {
        foreach ( icl_get_languages('skip_missing=0&orderby=name&order=asc') as $lang )
        {
            register_sidebar( array(
                'name'          => __(sprintf('%s Sidebar | Default',strtoupper($lang['language_code']))),
                'id'            => 'sidebar-default-'.$lang['language_code'],
                'before_widget' => '<li id="%1$s">',
                'after_widget'  => '</li>',
                'before_title'  => '<h4>',
                'after_title'   => '</h4>'
            ) );

            register_sidebar( array(
                'name'          => __(sprintf('%s Sidebar | Blog',strtoupper($lang['language_code']))),
                'id'            => 'sidebar-blog-'.$lang['language_code'],
                'before_widget' => '<li id="%1$s">',
                'after_widget'  => '</li>',
                'before_title'  => '<h4>',
                'after_title'   => '</h4>'
            ) );
        }
    }
    // WPML is not active
    else
    {
        register_sidebar( array(
            'name'          => __('Sidebar | Default'),
            'id'            => 'sidebar-default',
            'before_widget' => '<li id="%1$s">',
            'after_widget'  => '</li>',
            'before_title'  => '<h4>',
            'after_title'   => '</h4>'
        ) );

        register_sidebar( array(
            'name'          => __('Sidebar | Blog'),
            'id'            => 'sidebar-blog',
            'before_widget' => '<li id="%1$s">',
            'after_widget'  => '</li>',
            'before_title'  => '<h4>',
            'after_title'   => '</h4>'
        ) );
    } // end if/else
} // end if

?>

Sidebar laden

<?php

if ( function_exists('dynamic_sidebar') )
{
    // WPML is active
    if ( function_exists('icl_get_languages') )
    {
        // only load sidebar if it is active
        if ( is_active_sidebar('sidebar-'.ICL_LANGUAGE_CODE) ) dynamic_sidebar('sidebar-'.ICL_LANGUAGE_CODE);
    }
    // WPML is not active
    else
    {
        dynamic_sidebar('sidebar-default');
    }
}

?>

Print PDF

/*
 * Desc: add current language to the body_class
 */
function language_body_class($classes)
{
    if ( function_exists('icl_get_languages') )
        $classes[] = 'lang-'.ICL_LANGUAGE_CODE;

    return $classes;
} // end language_body_class
add_filter('body_class','language_body_class');

Bovenstaande code voegt een class lang-XX toe aan de body-tag. Het XX staat dan voor de taalcode van de huidige taal (bijv. nl voor Nederlands, en voor Engels etc.).

Waar kan ik dit voor gebruiken?

Hiermee kun je gemakkelijk via CSS de stijling voor bepaalde talen aanpassen. Bijvoorbeeld de achtergrond-afbeelding anders maken per taal, of wat je maar wil veranderen in de CSS (op taal-basis)

Print PDF

Type menu

Het soort menu dat we gaan gebruiken is de [wp]wp_nav_menu[/wp], met andere woorden: het type menu dat je makkelijk kunt aanmaken/aanpassen via Weergave -> Menu’s (mits je theme dit ondersteund).

Menu aanmaken

Als je er zeker van bent dat je theme deze menu’s ondersteund kun je een nieuw menu aanmaken. Als je al een menu hebt kun je die ook gebruiken natuurlijk.

Als je het menu hebt aangemaakt moet deze gekoppeld worden aan een thema locatie. Ik gebruik de theme Twenty Ten op mijn dev-installatie, deze heeft maar 1 thema-locatie.

Menu items aanmaken

Als het menu is opgeslagen en gekoppeld aan een thema locatie kunnen we beginnen met items toevoegen aan het menu. Ik heb in dit geval de pagina’s About, Shop, Cart, Checkout en Your Account toegevoegd.

Schermopties aanpassen

Wat je zo op het eerste gezicht niet ziet is dat de menu mogelijkheden in WordPress nog leuker zijn dan ze zo al lijken Als je bovenin op schermopties klikt krijg je onderstaande onderdelen te zien. Vink CSS classes en Beschrijving aan.

Na het aanvinken van deze twee eigenschappen krijg je twee extra invulvelden bij de menu-items (klik op een item om deze uit te klappen):

Je kunt nu dus een CSS class en beschrijving voor dat specifieke menu-item opgeven. Hier onder kun je zien wat ik heb ingevuld voor het menu-item Cart:

Vul de velden in voor alle menu-items (waar nodig/gewenst).

Weergave menu

Op dit moment hebben we een standaard uitklapmenu, mits de CSS in je theme dit ondersteund. Er is nog niks bijzonders aan en de extra informatie is nog niet te zien.

Om die info weer te geven maken we gebruik van de $walker die [wp]wp_nav_menu[/wp] heeft.

Open je header.php en zoek de code waarmee het menu wordt toegevoegd. In TwentyTen is dat de volgende regel:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

Vervang dat met de volgende regel:

<?php
    $walker = new My_Walker_Nav_Menu;
    wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'walker' => $walker ) );
?>

Als je geen custom theme gebruikt/aan het maken bent kun je het beste gebruik maken van een child theme, maar daar ga ik nu verder niet op in.

De walker aanmaken

Om de walker te kunnen gebruiken voor het customizen van de menu-weergave moeten we deze ook aanmaken natuurlijk. Voeg de volgende code toe aan de functions.php van je theme (heb je die niet, maak het bestand dan aan):

<?php
class My_Walker_Nav_Menu extends Walker_Nav_Menu
{
    function end_el(&$output, $item, $depth)
    {
    $output .= "</li>\n";
    } // end end_el

    function start_lvl(&$output, $depth)
    {
        $indent = str_repeat("t", $depth);
        
        $level = $depth+1;
        $output .= "n$indent<ul class="children level-$level">n"; // add level-X as a class for complex CSS possibilities
    } // end start_lvl

    function end_lvl(&$output, $depth)
    {
        $indent = str_repeat("t", $depth);
        $output .= "$indent</ul>\n";
    } // end end_lvl

    function start_el(&$output, $item, $depth, $args)
    {
        global $wp_query;
        
        $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names .'>';
        
        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        
        // only display the description if we're not in the toplevel
        if ( $depth != 0 )
        {
          $item_output .= '<div class="desc">' . $item->description . '</div>';
        }
        
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    } // end start_el
} // end class My_Walker_Nav_Menu
?>

Er is niet zo heel veel anders, ten opzichte van de default walker. Ik heb twee dingen toegevoegd:

<?php
        $output .= "n$indent
<ul class="children level-$level">n"; // add level-X as a class for complex CSS possibilities
?>

level-X class toegevoegd, waarbij X het niveau is van het submenu, dit geeft je meer mogelijkheden met CSS.

<?php
        // only display the description if we're not in the toplevel
        if ( $depth != 0 )
        {
          $item_output .= '
<div class="desc">' . $item->description . '</div>

';
        }
?>

De beschrijving van het item alleen weergeven als we niet in het hoogste niveau van het menu zitten.

Stijling

Als je nu de site ververst zul je zien dat het menu er nog niet helemaal geweldig uitziet, dit gaan we aanpassen met CSS. Onderstaande CSS heb ik gekopieerd uit mijn Dropdown navigatie 2.0 tutorial.

/* dropdown 2.0 */
ul#menu-2-0-navigatie li:hover { background:url('arrow-top.png') 10px 30px no-repeat; }
ul#menu-2-0-navigatie li a { color:#bbb; font-weight:bold; }
/* subitems - default */
ul#menu-2-0-navigatie li ul { display:none; position:absolute; top:35px; left:0; width:190px; background-color:#fff; border:1px solid #bbb; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px; -moz-box-shadow: 0 0 .5em #bbb; -webkit-box-shadow: 0 0 .5em #bbb; box-shadow: 0 0 .5em #bbb; /* >= IE8 */ }
ul#menu-2-0-navigatie li:hover ul { display:block; }
ul#menu-2-0-navigatie li ul li { padding:5px; display: block; line-height:normal; height:auto; border-bottom: 1px dotted #bbb; }
ul#menu-2-0-navigatie li ul li:last-child { border: 0; }
ul#menu-2-0-navigatie li ul li a,
ul#menu-2-0-navigatie li ul li:hover a { display:block; background: none; color: #000; }
ul#menu-2-0-navigatie li ul li a { padding: 5px 0;  }
ul#menu-2-0-navigatie li ul li a:hover { text-decoration:underline; }
ul#menu-2-0-navigatie li ul li .desc { font-style: italic; font-family: serif; }
ul#menu-2-0-navigatie li ul li ul { border:0; position:inherit; top:0; box-shadow:0 0 0; -moz-box-shadow:0 0 0; -webkit-box-shadow:0 0 0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; }

Bovenstaande CSS is voor het menu in TwentyTen, gebruik jij een ander theme? Pas dan de CSS aan aan de ID/classname van je menu. Gebruik voor zulke specifieke CSS (voor een specifiek item) liever niet de standaard .menu class die WP meegeeft.

Met bovenstaande CSS krijg je het volgende resultaat in TwentyTen, nog steeds een redelijk ‘basic’ uitklapmenu:

Customizen

Nu is het tijd om de item-specifieke CSS toe te gaan voegen. In mijn geval gaat het om de items met de volgende classes: .cart, .checkout en orders.

body ul#menu-2-0-navigatie .cart,
body ul#menu-2-0-navigatie .checkout,
body ul#menu-2-0-navigatie .orders {
  padding-left: 40px;
  min-width: 140px;
  min-height: 32px;
}
ul#menu-2-0-navigatie .cart,
ul#menu-2-0-navigatie .cart:hover { background: url('images/shopping_cart.png') 0 7px no-repeat; }
ul#menu-2-0-navigatie .checkout,
ul#menu-2-0-navigatie .checkout:hover { background: url('images/next.png') 0 7px no-repeat; }
ul#menu-2-0-navigatie .orders,
ul#menu-2-0-navigatie .orders:hover { background: url('images/user.png') 0 7px no-repeat; }

body ul#menu-2-0-navigatie .cart a,
body ul#menu-2-0-navigatie .checkout a,
body ul#menu-2-0-navigatie .orders a {
  width: 145px;
}

De icons die ik gebruikt heb komen uit het Iconika Red pakket van DryIcons.com

Veel meer mogelijk

Er zijn nog veel meer dingen mogelijk met de [wp]wp_nav_menu[/wp] en ook de stijling. Vandaar dat ik besloten heb om hier een serie aan toe te wijden.

Print PDF

Het is niet zo heel moeilijk, het enige dat je hoeft te doen is de volgende code aan je functions.php toevoegen:

<?php
if ( is_plugin_active('shopp/Shopp.php') )
{
    shopp_deregister_script('colorbox'); // het script niet meer laden
    wp_deregister_style('shopp.colorbox'); // het css bestand is dan uiteraard ook niet meer nodig
}
?>

Print PDF

Een tijdje geleden wilde ik dit ook bij een klant en dit is de code dat ik ervoor gebruikt heb:

<?php
add_filter( "the_content", "add_date_content" );
function add_date_content ( $content )
{
  if (is_single())
  {
    $content = '<p><span class="date">'.get_the_date(get_option('date_format')).'</span>' . substr($content, 3);
  }  
  return $content;
}
?>

De substr functie haalt de eerste drie chars weg, wat over het algemeen de p tag is. Vandaar dus ook de p tag voor de span voor de datum.

De [wp]get_option[/wp]('date_format') functie zorgt ervoor dat de datum die wordt weergegeven het format gebruikt dat in de WordPress instellingen is opgegeven.

Print PDF

Gegevens plugin

Eigenlijk is dit het enige dat je nodig hebt om een plugin te schrijven:

<?php
/*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin's Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
License: A "Slug" license name e.g. GPL2
*/
?>

Als je bovenstaande kopieert, in een .php bestand zet en upload in je plugins map kun je ‘m al kiezen bij de Plugins in je WordPress admin

Als je deze plugin dan activeert zul je zien dat er helemaal niks gebeurd. Niet zo heel vreemd, want de plugin heeft totaal geen inhoud

Extra informatie

Queries

Als je een plugin gaat schrijven is het belangrijk dat je de code zo veilig mogelijk gebruikt, als je bijvoorbeeld gebruik maakt van de <a href="http://codex.wordpress.org/Function_Reference/wpdb_Class">$wpdb</a> class vergeet dan niet om de query ook voor te bereiden.

Meertaligheid

Naast je themes beschikbaar maken in meerdere talen kun je ook je plugins ‘localizen’. Hoe je dat doet kun je in deze post lezen.

De mogelijkheden

De mogelijkheden die je hebt met plugins (lees: wat voor soort plugins je kan maken) zijn praktisch eindeloos. Dit is ook wel te zien in het aanbod dat reeds in de WordPress Plugin Directory staat.

Vergeet niet dat je nog wel eens bedolven zou kunnen worden onder support-requests als je je plugin aan de WordPress Plugin Directory toevoegt (voor feature requests, bug reports etc.).

Meer weten over plugins schrijven?

Wil je meer weten over het schrijven van je eigen plugin? Dan kan ik je de volgende resources aanraden:

• Writing a Plugin – WordPress Codex
• Coen Jacobs zijn presentatie tijdens WordCampNL 2010 (over het schrijven van een plugin)
• Yoast – op de website van Joost staan erg veel tips voor het schrijven van (o.a.) plugins
• Smashing Magazine over WordPress
• Deze post van Freelance Folder met links naar 13 sites die over WordPress schrijven (o.a. tips etc)

Print PDF

De manier van vertalen is hetzelfde als bij WordPress themes, het enige verschil is de manier waarop je WordPress laat weten dat er vertaalmogelijkheden zijn en waar het bestand staat. Dit doe je met [wp]load_plugin_textdomain[/wp]:

<?php load_plugin_textdomain( $domain, $abs_rel_path, $plugin_rel_path ) ?>

Uitleg functie

• $domain – een unieke identifier, bijvoorbeeld de mapnaam van je plugin (ie. mijn_plugin)
• $abs_rel_path – het relatieve pad (vanaf ABSPATH bekeken) naar de map waar het taalbestand in zit – werkt tot WP2.7
• $plugin_rel_path – het relatieve pad (vanaf WP_PLUGIN_DIR, de map waar alle plugins in staan). Deze dient vanaf WP2.7 gebruikt te worden.

Een voorbeeld van de toepassing:

<?php load_plugin_textdomain( 'mijn_plugin', false, dirname( plugin_basename( __FILE__ ) ) ) ) ?>

Onderstaande code heeft de mapnaam van het huidige bestand als output en daarom wordt deze gebruikt als opgaaf voor de $plugin_rel_path.

<?php dirname( plugin_basename( __FILE__ ) ) ) ) ?>

Het vertalen

Het vertalen zelf doe je met een programma als Poedit. Hoe je deze gebruikt kun je lezen in mijn Poedit gebruiken post.

Vertaalbestand

Het vertaalbestand moet als volgt genoemd worden: $domain-{langcode}.mo, wat bijvoorbeeld uitkomt op het volgende: mijn_plugin-nl_NL.mo.

Bij $domain gebruik je dus dezelfde unieke identifier als dat je hebt gebruikt om de te vertalen strings mee op te geven (en die je opgeeft in de load_plugin_textdomain functie).

Print PDF

In deze post ga ik uitleggen hoe je je winkelwagen in een Lightbox variant kunt maken.

Lightbox variant kiezen

Allereerst moet je een Lightbox variant kiezen waar de winkelwagen in weergegeven wordt. Net als mijn quick preview tutorial maak ik nu gebruik van Shadowbox.

CODE

Hier onder de CODE voor de winkelwagen, dit stop je in de header.php van je WordPress theme:

<div id="cart" style="display:none">
<?php include('shopp/sidecart.php') ?>
</div>

In bovenstaande code wordt de sidecart.php (template van Shopp) geïnclude, hiervoor is het dan wel nodig dat je custom templates hebt geactiveerd.

De stijling kun je het beste in een apart CSS bestand zetten (shopp.css of die van je theme bijvoorbeeld), maar voor dit voorbeeld zet ik het in de HTML.

Links naar winkelwagen

Je winkelwagen in een Lightbox variant neerzetten is dus niet zo heel moeilijk, je moet alleen niet vergeten ook de links naar de winkelwagen aan te passen op de Lightbox variant en hiervoor zul je de templates aan moeten passen. De links moeten er (bijvoorbeeld) zo uit te komen zien:

<a href="#cart" rel="shadowbox;width=300;height=300">Bekijk mijn winkelwagen</a>

Stijling

De weergave van de sidecart kun je uiteraard aanpassen met behulp van CSS, hou er in dit geval ook rekening mee dat je de stijling van de Lightbox variant eventueel aan moet passen.

AJAX

Het is natuurlijk het mooist als je AJAX gebruikt om de winkelwagen mee te updaten, dit zal ik in een volgende tutorial behandelen.

Online demo

Op mijn Shopp demo-website heb ik hier een online demo van gemaakt, de link naar de winkelwagen heb ik in een tekstwidget in de sidebar gezet.

Print PDF