How to add a new category?


To add a new category item, find category-list block and copy a list item.

<li class="category-item js-catItem" data-category="category-name" data-path="categories/category-name.html">Category name</li>

Next, create a new html file and name it the same as data-category content(it is required for category html to have the name exactly the same as data-category content)

In your new category html file paste following markup and start adding product items

<li class="product-page-item js-product-page" data-category="category-name">
    <div class="prod-page-view">
        <ul class="prod-page-list">
            <li class="cat-products-list prod-page">
                <div class="order-block">
                    <p class="added-products l-dis-ib">Added products <span class="products-number"><span class="js-products-counter"></span></span></p>
                    <span class="order-now-btn js-order-btn l-dis-ib">Pre-Order Now</span>
                </div>
                <div class="products-list-block">
                    <ul class="products-list js-products-list">
                        <li class="products-item js-product-item">
                            <div class="product-view l-dis-ib">
                                <a href="large image path" class="js-imagelightbox">
                                    <span class="hover-view" data-icon=""></span>
                                    <img src="small image path" alt="Product description">
                                </a>
                            </div>
                            <div class="product-short-info l-dis-ib">
                                <p class="prod-name js-prod-title">Product name</p>
                                <p class="prod-code js-prod-code">Product code</p>
                            </div>
                            <div class="prod-price-block l-dis-ib">
                                <span class="add-prod-btn js-add-to-card product-control-btn l-dis-ib">+</span>
                                <p class="prod-price js-prod-price l-dis-ib">Product price<span class="curency"></span></p>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="cat-products-desc prod-page">
                <article>
                    <div class="category-image-block"><img src="category image" alt=""></div>
                    <div class="category-description-block js-description-block">
                        <h3 class="category-title">Category name</h3>
                        <p class="category-description">
                            Category short history or description
                        </p>
                    </div>
                </article>
            </li>
        </ul>
    </div>
</li>

Last update:
2014-11-20 09:09
Author:
Daniel Verejan
Revision:
1.0
Average rating:0 (0 Votes)