Hiranthi's weblog

Een slider kun je niet alleen in je blogs goed gebruiken, ook voor je webshop is het een ideale manier om extra de focus te leggen op een aantal van je producten. Of je dit nu op de homepagina doet, of in een sidebar die continue weergegeven wordt: het effect is erg leuk en nog professioneel ook!

Allereerst moeten we besluiten welk script we gaan gebruiken voor het slider effect. Het is belangrijk dit vast te weten, in verband met de HTML (hoe het wordt opgebouwd, speciale classes/ID’s nodig etc.).
In deze tutorial maak ik gebruik van de s3Slider met behulp van jQuery.

jQuery

Allereerst moeten we het script voor de s3slider includen in de header. Dit kan door middel van het gewoon toevoegen van het <script></script> toevoegen in de header, maar dat doen we niet. We doen dit op een manier waarvan we zeker zijn dat het juist wordt geïnclude in de header en pas als de jQuery ook is ‘geïnclude’.

Voeg het volgende toe aan de functions.<a title="Zie ook PHP bestand voor afmelden e-mailadres" href="http://hiranthi.nl/freebies/php-bestand-voor-afmelden-e-mailadres/">php</a> van je theme:

<?php
wp_register_script('s3slider', get_bloginfo('stylesheet_directory').'/js/s3slider.js'); // het bestand zit in de map 'js' in je theme en heet s3slider.js
?>

Het volgende voeg je toe aan de header.<a title="Zie ook Maatwerk product aan winkelwagen toevoegen (Shopp 1.1.x)" href="http://hiranthi.nl/tutorials/maatwerk-product-aan-winkelwagen-toevoegen/">php</a> van je theme, boven het begin v/d pagina:

<?php
wp_enqueue_script('s3slider', array('jquery'));
?>

Je kunt hier eventueel ook conditional tags aan toevoegen, bijvoorbeeld:

<?php
if ( is_home() || is_front_page() ) { wp_enqueue_script('s3slider', array('jquery')); }
?>

In de header moet ook nog de volgende code worden toegevoegd, na de [wp]wp_head[/wp]. Zonder weet de s3Slider niet wat de slider is etc. De timeOut kun je eventueel aanpassen.

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#s3slider').s3Slider({
            timeOut: 3000
        });
    });
</script>

Basis HTML

De basis HTML voor de product slider ziet er zo uit:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
            <img src="#" />
            <span>Tekst</span>
        </li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Shopp integratie

Dan wordt het nu tijd om de Shopp code te implementeren in bovenstaande HTML. De tag die we gaan gebruiken om de producten te laden komt uit de Catalog tags, Smart categories. In dit geval gebruiken we de <a href="http://docs.shopplugin.net/Catalog_Tags#random-products">random-products</a>.

Met deze code laden we drie willekeurige producten uit de catalog:

<?php
shopp('catalog','random-products','title=&#038;controls=off&#038;show=3&#038;load=true');
?>

Nu gaan we de code implementeren met de basis HTML:

  <?php shopp('catalog','random-products','title=&#038;controls=off&#038;show=3&#038;load=true');
    if (shopp('category','has-products')) : ?>
<div id="s3slider">
<ul id="s3sliderContent">
        <?php while (shopp('category','products')): ?>
<li class="s3sliderImage">
              <a href="<?php shopp('product','link'); ?>">
          <?php #shopp('product','thumbnail');
          if(shopp('product','has-images')) : $i=1;
            while(shopp('product','images')) :
              if ( $i == 1 ) { ?><img src="<?php shopp('product','image','property=url'); ?>" width="400" alt="<?php shopp('product','image','property=title'); ?>" /><?php }
              $i++;
            endwhile;
          endif;
          ?><?php /* shopp('product','image','type=image&#038;width=400'); */ ?>
                <span><strong><?php shopp('product','name'); ?></strong> <?php shopp('product','summary'); ?></span>
                </a>
          </li>

      <?php endwhile; ?>
<div class="clear s3sliderImage"></div>
</ul>
</div>

  <?php endif; ?>

Stijling

We gebruiken nu de standaard CSS zoals die ook op de site van de s3Slider staat:

#s3slider {
   width: 400px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 400px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.s3sliderImage a { width:400px; position:absolute; top:0; left:0; }

.clear {
   clear: both;
}

Demo

Een live demo kun je op mijn Shopp demo website bekijken.

Print PDF

Ben je op zoek naar een makkelijke manier om je Shopp™ webshop uit te breiden? Dan is Shopplugin.nl voor jou het juiste adres!

Shopplugin.nl geeft jou de mogelijkheid om snel functionaliteiten aan je webshop toe te voegen. Of het nu voor het uitbreiden van je webwinkel is, of om je workflow te vereenvoudigen: het is allemaal mogelijk!

Bekijk snel de webshop – uiteraard ook gebaseerd op Shopp – om te zien wat we jou te bieden hebben!