Generic HTML/LESS Block Product/Carousel

Version

version 1.0.0

Documentation

Require files:

[blocks-foundation.less](less/blocks-foundation.less) - base file for magento, should be in (skin\frontend\base\default\css\catalog) - don't change this file
[blocks-variables.less](less/blocks-variables.less) - you can edit variables for block products/carousel and generic HTML (we can't change this html, only add class to container "product-block"):

Optional files:

for Pagination

[pagination.less](less/pagination.less) - base file for magento, don't change this file
[pagination-variables.less](less/pagination-variables.less) - and the local file variables

Block description


HTML Structure

```html

BLOCK TITLE

BLOCK SUB-TITLE

• 1

  Caption

  Product name

  Product category

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  Previous price: 4,39 €

  Special price: 3,90 €

  Add to cart Add to wishlist

VIEW MORE

• «
• 1
• 2
• ...
• 158
• »

```

Block products

We just add class to html .product-block for display:

.display-column - In Column (set default)

Example :

    <!-- Wrapper Product Block -->
    <div class="product-block display-column">
        ...
    </div>

.display-list - In List

Example :

    <!-- Wrapper Product Block -->
    <div class="product-block display-list">
        ...
    </div>

.display-grid
2columns
Example:

    <div class="product-block display-grid">
        ...
    </div>

3columns
We need to add class '.grid-3columns' to block
Example:

    <div class="product-block grid-3columns display-grid">
        ...
    </div>

Block Product With Pagination

Bottom pagination


Top Pagination


Top and Bottom Pagination

 Example HTML : ```html

• «
• 1
• 2
• ...
• 158
• »

```

Simple block product carousel

 

Carousel products

To run carousel just add class:

.display-carousel (you must set js)

You can use carouFredSel or jCarousel 0.3 carousels

If you want multiple carousels you can add new class to container (.block-product) and add custom styles for example:

    <!-- Wrapper Product Block -->
    <div class="product-block display-carousel custom-styles">
        ...
    </div>

Structure to show pagination, next & prev buttons you must set in javascript!

    <!-- Control -->
    <div class="control-wrap">
        <a class="control carousel-prev" href="#"><span>prev</span></a>
        <a class="control carousel-next" href="#"><span>next</span></a>
    </div>
    <!-- Pagination -->
    <div class="carousel-pagination"></div>

and javascript code example to run carousel:

    /* ----- carouFredSel default ----- */
    // Create Pagination
    $('.custom-styles .product-stage').after('<div class="carousel-pagination pages"></div>');
    // Create Prev & Next Button
    $('.custom-styles .product-stage').after('<div class="control-wrap"><a class="control carousel-prev" href="#"><span>prev</span></a> <a class="control carousel-next" href="#"><span>next</span></a></div>');

    // Run the carouFredSel
    $(".custom-styles .product-clip").carouFredSel({
        responsive  : false,
        circular    : false,
        infinite    : true,
        auto        : true,
        direction   : "left",
        scroll      : {
                        fx              : "scroll",
                        easing          : "cubic",
                        duration        : 700,
                        pauseOnHover    : true
                    },
        prev        : ".custom-styles .carousel-prev",
        next        : ".custom-styles .carousel-next",
        pagination  : ".custom-styles .pages"
    });

How it works

You can see how it works here.

It also works on IE7+