Hiranthi's weblog

Deze tutorial is hetzelfde idee als de “Product slider voor je webshop” tutorial, alleen dan met jCaroussel Lite in plaats van s3Slider.

Een voordeel van je product slider/carrousel in jCarrousel Lite zetten, in plaats van s3Slider, is dat je buttons toe kan voegen om de bezoeker zelf te laten ‘browsen’ door de producten heen. Daarnaast kun je er ook een scroll event opzetten, zodat ze door de carrousel heen kunnen scrollen.

jQuery

We gaan de benodigde scripts op dezelfde manier als in de s3Slider versie inladen:

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

Deze code voegen we toe aan de <a title="Zie ook Header van hiranthi.nl" href="http://hiranthi.nl/tutorials/header-van-hiranthi-nl/">header</a>.<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>, boven de html:

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

Onderstaande code voeg je aan de header van je pagina toe (dus tussen de head-tags). Het werkt ook als je ‘t in de template zelf plaatst.

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".products").jCarouselLite({
            btnNext: ".products .next",
            btnPrev: ".products .prev",
      visible: 1,
      speed: 800,
      easing: "backout"
        });
    });
</script>

Basis HTML

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

<div class="products">
    <button class="prev">&laquo;</button>
    <button class="next">&raquo;</button>
<div class="carrousel">
<ul>
<li><a href="#pagina"><img src="#url" width="X" alt="" />
<div class="info">
<h4>Naam product</h4>

Korte omschrijving

<a href="#pagina">Bekijk product &raquo;</a>
</div>
</li>
</ul></div>
</div>

Shopp integratie

Dan gaan we nu de Shopp tags integreren met bovenstaande HTML:

<?php shopp('catalog','random-products','title=&#038;controls=off&#038;show=3&#038;load=true');
if (shopp('category','has-products')) : ?>
<div class="products">
    <button class="prev">&laquo;</button>
    <button class="next">&raquo;</button>
<div class="carrousel">
<ul>
            <?php while (shopp('category','products')): ?>
<li><a href="<?php shopp('product','link'); ?>"><?php shopp('product','thumbnail'); ?></a>
<div class="info">
<h4><?php shopp('product','name'); ?></h4>

<?php shopp('product','summary'); ?>

<a href="<?php shopp('product','link'); ?>">Bekijk product &raquo;</a>
</div>
</li>

            <?php endwhile; ?>
        </ul>
</div>
</div>

<?php endif; ?>

Stijling

De onderstaande stijling kun je uiteraard geheel naar wens aanpassen.

.products { position:relative; width:138px; margin:20px auto 0; display:block; clear:both; z-index:1; }
.products button { position:absolute; top:40px; display:block; <a title="Zie ook Meerdere achtergronden" href="http://hiranthi.nl/tutorials/meerdere-achtergronden/">background</a>-color:#ccc; border:2px solid #fff; z-index:8!important; padding:0 5px; color:#fff; font-weight:bold; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:5px; font-size:200%; line-height:normal; }
.products button.prev { left:-15px; }
.products button.next { right:-15px; }
.products button:hover { background-color:#000; color:#fff; cursor:pointer; }
.products .carrousel {}
.products .carrousel ul { width:138px; display:block; float:left; }
.products .carrousel ul li { padding:10px; margin:0 5px; display:block; background-color:#efefef; text-align:center; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:5px; }
.products .carrousel ul li img { border:2px solid #fff; }
.products .carrousel ul li .info {}
.products .carrousel ul li .info h4 { margin:10px 0 0; padding:0; font-size:110%; text-transform:uppercase; }
.products .carrousel ul li .info p { margin:0 0 10px; padding:0; font-size:90%; }
.products .carrousel ul li .info a { font-weight:bold; }

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!