Product carrousel voor je webshop
Gepost op 8 februari 2010 om 14:00u, door hiranthi | geen reacties | reageren
loading...
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 header.php, 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">«</button>
<button class="next">»</button>
<div class="carrousel">
<ul>
<li><a href="#pagina"><img src="#url" width="X" alt="" />
<div class="info">
<h4>Naam product</h4>
<p>Korte omschrijving</p>
<p><a href="#pagina">Bekijk product »</a></p>
</div>
</li>
</ul>
</div>
</div>Shopp integratie
Dan gaan we nu de Shopp tags integreren met bovenstaande HTML:
<?php shopp('catalog','random-products','title=&controls=off&show=3&load=true'); if (shopp('category','has-products')) : ?> <div class="products"> <button class="prev">«</button> <button class="next">»</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> <p><?php shopp('product','summary'); ?></p> <p><a href="<?php shopp('product','link'); ?>">Bekijk product »</a></p> </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; background-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.
Navigeer in deze serie
Laat een reactie achter
Advertenties
