5.6 Product Ordering

An ordering interface for products

List of example pages
<nav class="navigation">
    <ul class="navigation__nav">
        <li><a href="#0" class="button"><span class="fa fa-plus"></span> Add a custom product</a></li>
    </ul>
    <div class="navigation__nav">
        <form class="navigation__form" action="javascript:void(0);">
            <select id="option" name="supplier">
                <option value="1">Tesco</option>
                <option value="2">Waitrose</option>
                <option value="3">Iceland</option>
            </select>
            <input name="q" type="search" placeholder="Product"/>
            <button type="submit" class="button button--secondary"><span class="fa fa-search"></span> Search</button>
        </form>
    </div>
</nav>

<div class="sidebar-wrapper">
    <nav class="sidebar" data-sidebar>
        <h3 class="card-heading">Your order</h3>
        <ul class="card-list">
            <li class="card-section">
                <button class="button button--primary button--block">Go to checkout</button>
            </li>
            <li class="card-section">
                <span class="badge pull-right">2</span> Cheap wine (5 x 2l)
            </li>
            <li class="card-section">
                <span class="badge pull-right">1</span> Good wine (2 x 2l)
            </li>
            <li class="card-section">
                <span class="badge pull-right">20</span> 6K unsalted butter (24x250gm)
            </li>
            <li class="card-section">
                <span class="badge pull-right">8</span> ALPRO SOYA (1ltr)
            </li>
            <li class="card-section">
                <span class="badge pull-right">50</span> Bagels - plain (each)
            </li>
        </ul>
        <div class="card-footer">
            Total value of 156.85 GBP
        </div>
    </nav>
    <button class="button button--secondary sidebar-toggle" data-sidebar-toggle>View order <span class="fa fa-shopping-cart"></span></button>
    <div class="sidebar-content" data-sidebar-content>
        <nav class="pagination">
            <p class="pagination__label">Showing 50 to 100 of 350 results</p>
            <ul class="pagination__list">
                <li class="pagination__previous">
                    <a href="#0" rel="prev">Previous</a>
                </li>
                <li>
                    <a href="#0">1</a>
                </li>
                <li class="pagination__active">
                    2
                </li>
                <li>
                    <a href="#0">3</a>
                </li>
                <li>
                    <a href="#0">4</a>
                </li>
                <li class="pagination__divider">
                    &hellip;
                </li>
                <li>
                    <a href="#0">7</a>
                </li>
                <li class="pagination__next">
                    <a href="#0" rel="next">Next</a>
                </li>
            </ul>
        </nav>

        <ul class="product-list">
            <li class="product">
                <div class="product__details">
                    <img src="https://placeimg.com/80/80/tech/grayscale" class="product__image">
                    <h3 class="product__name">Red apples (1kg)</h3>
                    <dl class="product__info">
                        <dt>Your SKU</dt>
                        <dd>TRZ-142</dd>
                    </dl>
                    <dl class="product__info">
                        <dt>Supplier SKU</dt>
                        <dd>W12-JC</dd>
                    </dl>
                    <dl class="product__tags">
                        <dt>Tags</dt>
                        <dd><span class="badge">Fruit</span> <span class="badge">Fresh</span></dd>
                    </dl>
                </div>
                <div class="product__actions">
                    <div class="product__input input-overlay-right">
                        <label for="price">Unit price</label>
                        <input name="price" type="text" value="9.99"/>
                        <div class="overlay">GBP</div>
                    </div>
                    <div class="product__input">
                        <label for="quantity">Quantity</label>
                        <input class="product__quantity" type="number" name="quantity" placeholder="0">
                    </div>
                </div>
            </li>
            <li class="product">
                <div class="product__details">
                    <h3 class="product__name">Green apples (500g)</h3>
                    <dl class="product__info">
                        <dt>Your SKU</dt>
                        <dd>GEZ-142</dd>
                    </dl>
                    <dl class="product__info">
                        <dt>Supplier SKU</dt>
                        <dd>GE2-JC</dd>
                    </dl>
                    <dl class="product__tags">
                        <dt>Tags</dt>
                        <dd><span class="badge">Fruit</span> <span class="badge">Fresh</span></dd>
                    </dl>
                </div>
                <div class="product__actions">
                    <div class="product__input input-overlay-right">
                        <label for="price">Unit price</label>
                        <input name="price" type="text" value="10.99"/>
                        <div class="overlay">GBP</div>
                    </div>
                    <div class="product__input">
                        <label for="quantity">Quantity</label>
                        <input class="product__quantity" type="number" name="quantity" placeholder="0">
                    </div>
                </div>
            </li>
            <li class="product">
                <div class="product__details">
                    <h3 class="product__name">Apple sauce (750ml)</h3>
                    <dl class="product__info">
                        <dt>Your SKU</dt>
                        <dd>APS142</dd>
                    </dl>
                    <dl class="product__info">
                        <dt>Supplier SKU</dt>
                        <dd>W18-JZ</dd>
                    </dl>
                    <dl class="product__tags">
                        <dt>Tags</dt>
                        <dd><span class="badge">Condiments</span></dd>
                    </dl>
                </div>
                <div class="product__actions">
                    <div class="product__input input-overlay-right">
                        <label for="price">Unit price</label>
                        <input name="price" type="text" value="18.99"/>
                        <div class="overlay">GBP</div>
                    </div>
                    <div class="product__input">
                        <label for="quantity">Quantity</label>
                        <input class="product__quantity" type="number" name="quantity" placeholder="0">
                    </div>
                </div>
            </li>
            <li class="product">
                <div class="product__details">
                    <h3 class="product__name">Apple juice (10 x 50ml)</h3>
                    <dl class="product__info">
                        <dt>Your SKU</dt>
                        <dd>AJ62</dd>
                    </dl>
                    <dl class="product__info">
                        <dt>Supplier SKU</dt>
                        <dd>W18-Y</dd>
                    </dl>
                    <dl class="product__tags">
                        <dt>Tags</dt>
                        <dd><span class="badge">Beverage</span> <span class="badge">Fresh</span></dd>
                    </dl>
                </div>
                <div class="product__actions">
                    <div class="product__input input-overlay-right">
                        <label for="price">Unit price</label>
                        <input name="price" type="text" value="5.99"/>
                        <div class="overlay">GBP</div>
                    </div>
                    <div class="product__input">
                        <label for="quantity">Quantity</label>
                        <input class="product__quantity" type="number" name="quantity" placeholder="0">
                    </div>
                </div>
            </li>
        </ul>

        <nav class="pagination">
            <p class="pagination__label">Showing 50 to 100 of 350 results</p>
            <ul class="pagination__list">
                <li class="pagination__previous">
                    <a href="#0" rel="prev">Previous</a>
                </li>
                <li>
                    <a href="#0">1</a>
                </li>
                <li class="pagination__active">
                    2
                </li>
                <li>
                    <a href="#0">3</a>
                </li>
                <li>
                    <a href="#0">4</a>
                </li>
                <li class="pagination__divider">
                    &hellip;
                </li>
                <li>
                    <a href="#0">7</a>
                </li>
                <li class="pagination__next">
                    <a href="#0" rel="next">Next</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<script>
    // Sidebar js
    $(document).ready(function(){
        var $sidebar = $('[data-sidebar]');
        var $sidebarButton = $('[data-sidebar-toggle]');
        var $sidebarContent = $('[data-sidebar-content]');

        var sidebar = {
            toggle: function() {
                if ($('body').hasClass('modal-open')) {
                    sidebar.close();
                } else {
                    sidebar.open();
                }
            },

            open: function() {
                $sidebar.addClass('is-open');
                $('body').addClass('modal-open');
                $('body').append('<div class="sidebar-backdrop"></div>')
                $sidebarButton.html('Close this menu <span class="fa fa-times"></span>');
            },

            close: function() {
                $sidebar.removeClass('is-open');
                $('body').removeClass('modal-open');
                $('.sidebar-backdrop').remove();
                $sidebarButton.html('View your order <span class="fa fa-shopping-cart"></span>');
            },

            affix: function() {
                if ($sidebarContent.innerHeight() > $sidebar.innerHeight()) {
                    $sidebar.affix({
                        offset: {
                            top: $sidebar.offset().top
                        }
                    })
                }
            },

            reset: function() {
                if ($(document).width() > 767) {
                    sidebar.close();
                    sidebar.affix();
                }
            }
        }

        // Sidebar button click event
        $sidebarButton.click(function() {
            sidebar.toggle();
        });

        // Reset sidebar when sizing back to desktop with a timeout
        $(window).resize(function() {
            clearTimeout(sidebar.reset);
            resizeTimer = setTimeout(sidebar.reset, 250);
        });

        // Initialise
        sidebar.reset();
    });
</script>