What is it?

What is it?

LFS Carousel is pluggable carousel/slider application for use with LFS (Lighting Fast Shop).

If you're not sure what Carousel/slider is then take a look at: http://workshop.rs/projects/coin-slider/ and imagine that you have it attached to your Shop and you can upload slider items from management panel

It is intended to integrate seamlessly with LFS management. It can be used to add carousel to shop itself (eg. to main shop page) or even to specific categories.

How it works

LFS Carousel defines CarouselItem model that uses generic realtions to attach itself to Shop instance or Category instance (or others).

You attach CarouselItem to shop or category by using templatetags. There are only two of them:

carousel_management template tag renders management interface for specific object (shop in example below) and allows users to add CarouselItems that are bound to this object

    {% carousel_management shop %}

carousel_show templatetag renders carousel itself and is intended to be used eg. on main shop/category page.

   {% carousel_show shop %}

Basic usage

• add lfs_carousel to INSTALLED_APPS in your settings.py
• add lfs_carousel urls to your site urls.py like:

from lfs_carousel import carousel
urlpatterns += patterns("",
    (...)
    (r'^carousel/', include(carousel.urls)),  # include carousel.urls
    (...)
)

• add LFS Carousel to management panel at Shop -> Settings page (as new tab):

Copy lfs/templates/manage/shop/shop.html to your theme and modify it by adding:

  <!-- Load lfs_carousel tags -->
  {% load lfs_carousel_tags %}
  ( ... )
  <div id="manage-tabs">
    <ul>
        (...)
        <!-- Define new tab. You have to use #carousel-items here! -->
        <li class="ui-tabs-nav-item"><a href="#carousel-items">{% trans 'Carousel' %}</a></li>
    </ul>
  (...)
  <div id="portlets">
    {{ portlets|safe }}
  </div>
  <!-- Render tab contents - carousel management page -->
  {% carousel_management shop %}

• add carousel to your shop's Start page

By default lfs_carousel uses coin-slider (slightly modified to support translation of prev/next buttons) but you can use anything you want.

First: Add necessary JavaScript and CSS files either to base.html (or to shop.html):

  <link rel="stylesheet" href="{{ STATIC_URL }}coin-slider/coin-slider-styles.css" type="text/css" />
  <script type="text/javascript" src="{{ STATIC_URL }}coin-slider/coin-slider.min.js"></script>
  <script type="text/javascript">
        $(document).ready(function() {
            $('#coin-slider').coinslider({ width: 400, navigation: true, delay: 10000, hoverPause: true, prev_text: '{% trans "prev" %}', next_text: '{% trans "next" %}' });
        });
  </script>

Second: copy lfstheme/templates/lfs/shop/shop.html to your theme and add:

    {% load lfs_carousel_tags %}
    (...)
    {% carousel_show shop %}  <!-- shop is name of object that carousel images will be attached to -->

• dont' forget to run syncdb

Customizing

LFS Carousel is class based and should be easy to customize if it doesn't fit your needs. Currently it assumes that each carousel item ( CarouselItem model) might use image, title, text and link attributes, but if you need more then you can use different model with some extra attributes.

Using another carousel script

If you want to use another carousel library (different than coin-slider) then in your base.html include JS and CSS libraries from carousel library of your choice.

You'll also need another way of rendering carousel items. To change it overwrite lfs_carousel/items.html in your theme. For each item you can use: image, title, text, link attributes.

Advanced customization

LFS Carousel views are class based so you can create your own class that inherits from LFSCarouselView and customize it like:

# in your views.py
class MyLFSCarouselView(LFSCarouselView):
    def get_item_cls(self):
        """ Use another model for carousel items """
        return MyCarouselItem
my_carousel = MyLFSCarouselView()

# in urls.py
from my_app import views
urlpatterns += patterns("",
    (...)
    (r'^mycarousel/', include(views.my_carousel.urls)),
    (...)
)

# templatetags
# unfortunately you have to write your own ones that make use of my_carousel but these are very easy