Partials registration

JavaScript performance comparison

Test case created by JP and last updated

Info

Want to test registration speed between multiple class lookups and one data-attribute lookup.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
HTML not important to render. All hidden with display:none.
<div style="display: none;">
  <header class="comp-header" data-url-minicart="URL TO MINICART" data-partial="header">
    <div id="header">
      <div class="logo">
        <img src="http://placekitten.com/140/35" />
      </div>
      <div class="menu">
        <div class="top">
          <div class="language-selection">
            <a href="#">Change language</a>
          </div>
          <div class="tier">
            Get free shipping, buy for 67.90 EUR more.
          </div>
        </div>
        <nav>
          <!-- TODO: Join this search box with the one inside .nav -->
          <div class="search">
            <input type="text" placeholder="Search product, SKU, etc.." />
            <button>
              ?
            </button>
          </div>
          <ul class="nav">
            <li class="menu-search">
              <img class="icon" src="../../_ui/common/images/icon_search.gif" />
              <ul class="nav">
                <li class="search">
                  <input value="Search product, SKU, etc.." />
                  <button>
                    ?
                  </button>
                </li>
              </ul>
            </li>
            <li class="menu-sign-in">
              <a class="label" href="#">
              <i class="icon-user icon-large"></i> Sign in <i class="icon-angle-down icon-large"></i>
              </a>
              <ul class="nav">
                <li>
                  <a href="#">[Menu for Signed in]</a>
                  <!-- Menu to show when signed in -->
                  <ul class="nav">
                    <li class="signed-in">
                      <p class="username">
                        Josef Larsen (customer nr: 123456)
                      </p>
                      <ul>
                        <li>
                          <a href="#" class="my-papyrus">My Papyrus</a>
                        </li>
                        <li>
                          <a href="#">My Account</a>
                        </li>
                        <li>
                          <a href="#">My Shopping lists</a>
                          <span class="count">
                            2
                          </span>
                        </li>
                        <li>
                          <a href="#">My Orders</a>
                          <span class="count">
                            1
                          </span>
                        </li>
                        <li>
                          <a href="#">My Invoices</a>
                        </li>
                        <li>
                          <a href="#">My Messages</a>
                        </li>
                        <li>
                          <a href="#">My Pricefiles</a>
                        </li>
                        <li>
                          <a href="#">My Statistics</a>
                        </li>
                        <li>
                          <a href="#">My Support Agent</a>
                        </li>
                        <li>
                          <hr/>
                        </li>
                        <li>
                          <a href="#">User management</a>
                        </li>
                        <li>
                          <a href="#">Order management</a>
                        </li>
                        <li>
                          <hr/>
                        </li>
                        <li>
                          <a href="#">Sign out</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <!-- Menu to show when NOT signed in -->
                <li>
                  <a href="#">[Menu for Anonymous]</a>
                  <ul class="nav">
                    <li class="sign-in">
                      <h2>
                        Sign in
                      </h2>
                      <form name="sign-in">
                        <p>
                          E-mail or ID
                        </p>
                        <input type="text" name="username" />
                        <p>
                          Password
                        </p>
                        <input type="password" name="password" />
                        <div>
                          <input type="checkbox" />
                          <span>
                            Remember me
                          </span>
                        </div>
                        <input type="button" value="Secure sign in" />
                        <hr/>
                        <a href="#">Forgot your password?</a>
                        <br/>
                        <a href="#">Existing customer?</a>
                      </form>
                      <hr/>
                      <h2>
                        New customer?
                      </h2>
                      <a href="#">Register</a>
                      <p>
                        ...and start buying today!
                      </p>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="menu-catalog">
              <a class="label" href="#">
              <i class="icon-sitemap icon-large"></i> Catalog <i class="icon-angle-down icon-large"></i>
              </a>
              <ul class="nav">
                <li class="catalog">
                  <ul class="categories">
                    <li class="category">
                      <img src="http://placekitten.com/140/40" />
                      <h3>
                        <a href="#">Coated paper</a>
                      </h3>
                      <ul class="subcategories">
                        <li>
                          <a href="#">MultiArt</a>
                        </li>
                        <li>
                          <a href="#">LuxoArt</a>
                        </li>
                        <li>
                          <a href="#">Terraprint</a>
                        </li>
                      </ul>
                      <a class="more" href="#">More... (2)</a>
                    </li>
                    <li class="category">
                      <img src="http://placekitten.com/140/40" />
                      <h3>
                        <a href="#">Uncoated paper</a>
                      </h3>
                      <ul class="subcategories">
                        <li>
                          <a href="#">PakoPharm</a>
                        </li>
                        <li>
                          <a href="#">PlanoDynamic</a>
                        </li>
                        <li>
                          <a href="#">DigiGold</a>
                        </li>
                      </ul>
                      <a class="more" href="#">More... (7)</a>
                    </li>
                    <li class="category">
                      <img src="http://placekitten.com/140/40" />
                      <h3>
                        <a href="#">Envelopes</a>
                      </h3>
                      <ul class="subcategories">
                        <li>
                          <a href="#">Majestic</a>
                        </li>
                        <li>
                          <a href="#">Rives Dot</a>
                        </li>
                        <li>
                          <a href="#">Bier Papier</a>
                        </li>
                      </ul>
                    </li>
                    <li class="category">
                      <img src="http://placekitten.com/140/40" />
                      <h3>
                        <a href="#">Technical specialities</a>
                      </h3>
                      <ul class="subcategories">
                        <li>
                          <a href="#">Aquastrong</a>
                        </li>
                        <li>
                          <a href="#">JAC</a>
                        </li>
                        <li>
                          <a href="#">EnDuro</a>
                        </li>
                      </ul>
                    </li>
                    <li class="category">
                      <img src="http://placekitten.com/140/40" />
                      <h3>
                        <a href="#">Coated paper</a>
                      </h3>
                      <ul class="subcategories">
                        <li>
                          <a href="#">MultiArt</a>
                        </li>
                        <li>
                          <a href="#">LuxoArt</a>
                        </li>
                        <li>
                          <a href="#">Terraprint</a>
                        </li>
                      </ul>
                      <a class="more" href="#">More... (2)</a>
                    </li>
                    <li class="category">
                      <img src="http://placekitten.com/140/40" />
                      <h3>
                        <a href="#">Coated paper</a>
                      </h3>
                      <ul class="subcategories">
                        <li>
                          <a href="#">MultiArt</a>
                        </li>
                        <li>
                          <a href="#">LuxoArt</a>
                        </li>
                        <li>
                          <a href="#">Terraprint</a>
                        </li>
                      </ul>
                      <a class="more" href="#">More... (2)</a>
                    </li>
                    <li class="category">
                      <img src="http://placekitten.com/140/40" />
                      <h3>
                        <a href="#">Coated paper</a>
                      </h3>
                      <ul class="subcategories">
                        <li>
                          <a href="#">MultiArt</a>
                        </li>
                        <li>
                          <a href="#">LuxoArt</a>
                        </li>
                        <li>
                          <a href="#">Terraprint</a>
                        </li>
                      </ul>
                      <a class="more" href="#">More... (2)</a>
                    </li>
                    <li class="category">
                      <img src="http://placekitten.com/140/40" />
                      <h3>
                        <a href="#">Coated paper</a>
                      </h3>
                      <ul class="subcategories">
                        <li>
                          <a href="#">MultiArt</a>
                        </li>
                        <li>
                          <a href="#">LuxoArt</a>
                        </li>
                        <li>
                          <a href="#">Terraprint</a>
                        </li>
                      </ul>
                      <a class="more" href="#">More... (2)</a>
                    </li>
                  </ul>
                  <ul class="extras">
                    <li class="extra">
                      <h2>
                        My products
                      </h2>
                      <ul>
                        <li>
                          <a href="#">In my Contract</a>
                        </li>
                        <li>
                          <a href="#">Most ordered articles</a>
                        </li>
                      </ul>
                    </li>
                    <li class="extra category">
                      <h3>
                        <a href="#">Services</a>
                      </h3>
                      <ul class="subcategories">
                        <li>
                          <a href="#">Cutting</a>
                        </li>
                        <li>
                          <a href="#">Punching</a>
                        </li>
                        <li>
                          <a href="#">Wrapping</a>
                        </li>
                        <li>
                          <a href="#">Unwrapping</a>
                        </li>
                      </ul>
                      <p>
                        <a href="#">More... (3)</a>
                      </p>
                    </li>
                    <li class="extra">
                      <ul>
                        <li>
                          <a href="#">Outgoing articles</a>
                        </li>
                        <li>
                          <a href="#">Campaigns</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="menu-my-lists">
              <a class="label" href="#">
              <i class="icon-star icon-large"></i> My lists <i class="icon-angle-down icon-large"></i>
              </a>
              <ul class="nav">
                <li>
                  <a href="#">[Menu for Signed in]</a>
                  <!-- Menu to show when signed in -->
                  <ul class="nav">
                    <li class="my-lists">
                      <h2>
                        My shopping lists
                      </h2>
                      <table class="lists">
                        <tr class="list">
                          <td>
                            <a href="#">Paper materials</a>
                          </td>
                          <td>
                            17
                          </td>
                          <td class="add">
                            <a href="#">Add all to cart</a>
                          </td>
                        </tr>
                        <tr class="list">
                          <td>
                            <a href="#">Great food packaging stuff</a>
                          </td>
                          <td>
                            22
                          </td>
                          <td class="add">
                            <a href="#">Add all to cart</a>
                          </td>
                        </tr>
                        <tr class="list">
                          <td>
                            <a href="#">For head quarter office</a>
                          </td>
                          <td>
                            4
                          </td>
                          <td class="add">
                            <a href="#">Add all to cart</a>
                          </td>
                        </tr>
                        <tr class="list">
                          <td>
                            <a href="#">Regular fill</a>
                          </td>
                          <td>
                            16
                          </td>
                          <td class="add">
                            <a href="#">Add all to cart</a>
                          </td>
                        </tr>
                        <tr class="list">
                          <td>
                            <a href="#">Cleaning material start package</a>
                          </td>
                          <td>
                            3
                          </td>
                          <td class="add">
                            <a href="#">Add all to cart</a>
                          </td>
                        </tr>
                      </table>
                      <a href="#">Manage shopping lists</a>
                    </li>
                  </ul>
                </li>
                <!-- Menu to show when NOT signed in -->
                <li>
                  <a href="#">[Menu for Anonymous]</a>
                  <ul class="nav">
                    <li class="sign-in">
                      <h2>
                        MY SHOPPING LISTS
                      </h2>
                      <p>
                        Here you can save all your favorite articles!
                      </p>
                      <p>
                        <a href="#">Sign in</a>
                        or
                        <a href="#">register</a>
                        to use shopping lists.
                      </p>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="menu-cart">
              <a class="label" href="#">
              <i class="icon-shopping-cart icon-large"></i> Cart: 3 <i class="icon-angle-down icon-large"></i>
              </a>
              <ul class="nav">
                <li class="cart">
                  <table class="items">
                    <tr class="item">
                      <td>
                        <img src="../../_ui/common/images/placeholder_45x45.gif" />
                      </td>
                      <td>
                        <p>
                          88036955
                        </p>
                        <p class="title">
                          <a href="#">MultiArt Matt</a>
                        </p>
                        <p>
                          width 320 | height 450 | weight 115
                        </p>
                      </td>
                      <td>
                        <p class="quantity">
                          4 boxes (1000 sheets)
                        </p>
                        <p class="price">
                          43.47 EUR
                        </p>
                      </td>
                      <td class="remove">
                        <a href="#">Remove</a>
                      </td>
                    </tr>
                    <tr class="item">
                      <td>
                        <img src="../../_ui/common/images/placeholder_45x45.gif" />
                      </td>
                      <td>
                        <p>
                          533836
                        </p>
                        <p class="title">
                          <a href="#">Swep mop handle</a>
                        </p>
                        <p>
                          size 50 cm | material plastic
                        </p>
                      </td>
                      <td>
                        <p class="quantity">
                          1 carton (10 pcs)
                        </p>
                        <p class="price">
                          250.10 EUR
                        </p>
                      </td>
                      <td class="remove">
                        <a href="#">Remove</a>
                      </td>
                    </tr>
                    <tr class="item">
                      <td>
                        <img src="../../_ui/common/images/placeholder_45x45.gif" />
                      </td>
                      <td>
                        <p>
                          533174
                        </p>
                        <p class="title">
                          <a href="#">Mopp Swep Duo Microtech</a>
                        </p>
                        <p>
                          size 50 cm | material 100% polyester
                        </p>
                      </td>
                      <td>
                        <p class="quantity">
                          1 carton (10 pcs)
                        </p>
                        <p class="price">
                          178.29.10 EUR
                        </p>
                      </td>
                      <td class="remove">
                        <a href="#">Remove</a>
                      </td>
                    </tr>
                  </table>
                  <div class="more">
                    <p>
                      <a href="#">12 more items (View all)</a>
                    </p>
                  </div>
                  <div class="total-price">
                    <p>
                      Total (approximation)
                    </p>
                    <p class="price">
                      932.10 EUR
                    </p>
                  </div>
                  <div class="tier">
                    <img src="../../_ui/common/images/tier_bar.gif" />
                    <p>
                      Get free shipping, buy for 67.90 EUR more.
                    </p>
                  </div>
                  <div class="checkout">
                    <p>
                      <a href="#" class="button">Checkout</a>
                    </p>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
      <section class="comp-breadcrumbs full-width" data-partial="breadcrumbs">
        <ul>
          <li>
            <a href="#"><i class="icon-home icon-large"></i></a>
          </li>
          <li>
            <a href="#">Level 1</a>
          </li>
          <li>
            <a href="#">Level 2</a>
          </li>
          <li>
            <a href="#">Level 3</a>
          </li>
          <li>
            <a href="#">Level 4</a>
          </li>
        </ul>
        <h1 class="page-title">
          Checkout
        </h1>
      </section>
    </div>
    <!-- End #header -->
  </header>
  <div id="container" class="cf">
    <div class="page-checkout full-width">
      <section class="comp-checkout " data-url-delivery="URL TO checkoutFragment.tag"
     data-url-pickup="URL TO addressBox.tag" data-url-note-invoice="URL TO WEB API COST CENTER CODE"
     data-url-note-order="URL TO WEB API ORDER NOTE" data-url-note-transport="URL TO WEB API TRANSPORT NOTE"
     data-partial="checkout" data-url-address-invoice="URL TO WEB API INVOICE EDITED ADDRESS"
     data-url-address-transport="URL TO WEB API TRANSPORT EDITED ADDRESS" data-url-receipt="URL TO RECEIPT PAGE, WF-176"
     data-url-shipping="URL TO checkoutShipping.tag" data-url-summary="URL TO orderSummaryBox.tag">
        <div class="comp-alert-box alert alert-error full-width is-placed-order-failed is-hidden"
       data-partial="alert-box">
          <button type="button" class="close">
            ×
          </button>
          <div class="content">
            We're sorry, but there was an error processing your order.
          </div>
        </div>
        <article class="cart two-thirds-width first-col">
          <form class="comp-form delivery-options" commandName="" data-partial="form">
            <h2>
              Delivery options
            </h2>
            <div class="comp-tabular-view shipping-options" data-partial="tabular-view">
              <ul class="tab-navigation">
                <li>
                  <label>
                    <input type="radio" class="tab-nav" name="delivery-option" value="shipping" checked
                   required/>
                    <span class="type">
                      Shipping
                    </span>
                    <span class="info">
                      (delivered to you)
                    </span>
                  </label>
                </li>
                <li>
                  <label>
                    <input type="radio" class="tab-nav" name="delivery-option" value="pick-up" required/>
                    <span class="type">
                      Pick up
                    </span>
                    <span class="info">
                      (you pick up at one of our warehouses)
                    </span>
                  </label>
                </li>
                <li>
                  <label>
                    <input type="radio" class="tab-nav" name="delivery-option" value="split-shipping"
                   required/>
                    <span class="type">
                      Split shipping
                    </span>
                    <span class="info">
                      (delivered to you, in different shipments)
                    </span>
                  </label>
                </li>
              </ul>
              <div class="tab-views">
                <section id="shipping" class="tab-view">
                  <section class="comp-checkout-address " data-partial="checkout-address">
                    <fieldset class="is-selected-address">
                      <section class="comp-form-field comp-form-select " data-partial="form-field form-select">
                        <label for="">
                          Ship-to address
                        </label>
                        <select name="selectedaddress">
                          <option>
                            Volvo loading bay A
                          </option>
                          <option>
                            Volvo loading bay B
                          </option>
                          <option>
                            Volvo loading bay C
                          </option>
                        </select>
                        <span class="extra-info">
                          <i class='icon-search icon-large'>
                          </i>
                        </span>
                      </section>
                    </fieldset>
                  </section>
                  <fieldset>
                    <section class="comp-form-field comp-form-text-area " data-partial="form-field form-text-area">
                      <label for="">
                        Transport notes
                      </label>
                      <textarea id="" name="transportnote">
                      </textarea>
                      <span class="extra-info">
                      </span>
                    </section>
                  </fieldset>
                  <div class="shipping-conditions-placeholder">
                    <div class="comp-tabular-view comp-checkout-shipping delivery" data-partial="tabular-view checkout-shipping">
                      <ul class="tab-navigation">
                        <li>
                          <label>
                            <input type="radio" class="tab-nav" name="shipping-option" value="regular" checked/>
                            Regular shipping
                          </label>
                        </li>
                        <li>
                          <label>
                            <input type="checkbox" name="splitdelivery" />
                            Allow split deliveries
                          </label>
                        </li>
                      </ul>
                      <div class="tab-views">
                        <section id="regular" class="tab-view">
                          <section class="comp-form-field comp-form-date  " data-partial="form-field form-date">
                            <label for="">
                              Delivery date *
                            </label>
                            <input type="text" name="deliverydate" required />
                            <span class="extra-info">
                            </span>
                          </section>
                        </section>
                      </div>
                    </div>
                  </div>
                </section>
                <section id="pick-up" class="tab-view">
                  You can pick up your goods at:
                  <div class="is-location-placeholder">
                    Loading...
                  </div>
                </section>
                <section id="split-shipping" class="tab-view">
                  Split shipping
                </section>
              </div>
            </div>
          </form>
          <form class="comp-form payment-section" commandName="" data-partial="form">
            <h2>
              Payment options
            </h2>
            <div class="comp-tabular-view payment-option" data-partial="tabular-view">
              <ul class="tab-navigation">
                <li>
                  <label>
                    <input type="radio" class="tab-nav" name="payment-option" value="invoice" checked
                   required/>
                    <span class="type">
                      Invoice
                    </span>
                    <span class="info">
                    </span>
                  </label>
                </li>
                <li>
                  <label>
                    <input type="radio" class="tab-nav" name="payment-option" value="credit-card" required/>
                    <span class="type">
                      Credit card
                    </span>
                    <span class="info">
                    </span>
                  </label>
                </li>
              </ul>
              <div class="tab-views">
                <section class="tab-view" id="invoice">
                  <fieldset class="is-selected-invoice">
                    <section class="comp-form-field comp-form-select " data-partial="form-field form-select">
                      <label for="">
                        Invoice address
                      </label>
                      <select name="invoiceaddress" disabled>
                        <option>
                          Larsen Printshop CO
                        </option>
                      </select>
                      <span class="extra-info">
                        <a href='#'>Edit addresses</a>
                      </span>
                    </section>
                  </fieldset>
                  <fieldset>
                    <section class="comp-form-field comp-form-text " data-partial="form-field form-text">
                      <label for="">
                        Cost center code
                      </label>
                      <input type="number" name="costCenterCode" max="9999999999" />
                      <span class="extra-info">
                        For your cost center. Max 10 digits.
                      </span>
                    </section>
                  </fieldset>
                </section>
                <section class="tab-view" id="credit-card">
                  When you place the order you will be taken to our payment partner.
                </section>
              </div>
            </div>
          </form>
          <section class="order-deliveries">
            <div class="comp-alert-box alert alert-error is-update-failed is-hidden" data-partial="alert-box">
              <button type="button" class="close">
                ×
              </button>
              <div class="content">
                <strong>
                  Warning.
                </strong>
                Could not update cart. Please
                <a href="javascript:document.location.reload(true)">try
                again</a>
                .
              </div>
            </div>
            <section class="is-updating-delivery is-hidden">
              <span class="is-loading">
                Updating cart.
              </span>
            </section>
            <div class="is-delivery-placeholder">
              <section class="comp-checkout-delivery " data-partial="checkout-delivery">
                <section class="action-list">
                  <h2>
                    Your actions needed
                  </h2>
                  <table class="comp-article-list comp-article-action-list" data-partial="article-list article-action-list">
                    <thead class="head">
                      <tr class="list-options">
                        <td class="select-all">
                          <input type="checkbox" />
                        </td>
                        <td class="actions" colspan="2">
                          <span class="comp-ajax-action comp-ajax-tooltip-confirm delete" data-url-post=""
                         data-post-data="" data-url-delete="ADD URL TO WEB API HERE" data-delete-data="" data-partial="ajax-action ajax-tooltip-confirm">
                            <span class="comp-tooltip confirm is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  Are you sure?
                                  <a class='button yes' href='#'>Yes</a>
                                  <a class='cancel' href='#'>Cancel</a>
                                </span>
                              </span>
                            </span>
                            <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  Unknown error
                                </span>
                              </span>
                            </span>
                            <a href="#" class="action button">Delete</a>
                          </span>
                          <label class="views">
                            <input type="checkbox" />
                            <span class="checkbox-text">
                              Compact list
                            </span>
                          </label>
                        </td>
                      </tr>
                      <tr class="sort">
                        <td>
                        </td>
                        <td class="article">
                          <a href="#" class="not-linked">Article</a>
                        </td>
                        <td class="value">
                          <a href="#" class="not-linked">Value</a>
                        </td>
                      </tr>
                    </thead>
                    <tbody class="body">
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <span class="quantity">
                            1 carton (10 pcs)
                          </span>
                          <span class="price">
                            178.29 EUR
                          </span>
                        </td>
                      </tr>
                      <tr class="item-article-substitution">
                        <td>
                        </td>
                        <td class="substitution" colspan="2">
                          <span class="name">
                            533836 Mop Handle Swep has been discontinued, please make a choice:
                          </span>
                          <ul>
                            <li class="substitution-option">
                              <a class="change" href="#">Change to substitute article 623533 Mop Handle
                              Swep Pro</a>
                              <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                             data-get-url="URL TO GET SUBSTITION ARTICLE PRICE INFO" data-sku="" data-price-info="">
                                <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                                  <button type="button" class="close">
                                    ×
                                  </button>
                                  <div class="content">
                                    Connection problem. Please try again.
                                  </div>
                                </div>
                                <div class="body clearfix is-hidden">
                                  <form class="quantity-selection full-width validate loading">
                                    <label>
                                      Amount:
                                    </label>
                                    <!-- <div class="quantity-input">  -->
                                    <input type="number" min="1" name="quantity-value" class="quantity-value" required
                                   disabled>
                                    <select name="quantity-unit" class="quantity-unit" required disabled>
                                      <option value="" selected="selected">
                                      </option>
                                    </select>
                                    <!-- </div> -->
                                  </form>
                                  <section class="article-summary full-width is-hidden">
                                    <span class="sku-text">
                                      SKU:
                                      <span class="sku-id">
                                      </span>
                                    </span>
                                    <div class="extra">
                                      <i class="icon-time icon-large">
                                      </i>
                                      <i class="icon-star-empty icon-large">
                                      </i>
                                      <span class="in-contract badge is-hidden">
                                        In contract
                                      </span>
                                    </div>
                                  </section>
                                  <section class="article-price half-width first-col">
                                    <!--<span class="amount">2 pallets</span>-->
                                    &nbsp;
                                    <!-- HACK: Completely empty elements don't get any width/height and screws up the
                                   layout. This section starts empty. -->
                                    <span class="price is-hidden">
                                      <span class="price-number">
                                      </span>
                                      EUR
                                    </span>
                                    <span class="discount is-hidden">
                                      Save
                                      <span class="discount-amount">
                                      </span>
                                      EUR by ordering
                                      <span class="discount-next">
                                      </span>
                                      .
                                    </span>
                                  </section>
                                  <section class="article-shop buy half-width">
                                    <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                                   data-post-data="" data-partial="ajax-action ajax-simple-action">
                                      <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                        <span class="tooltip-wrapper">
                                          <span class="arrow">
                                          </span>
                                          <span class="content">
                                            Unknown error
                                          </span>
                                        </span>
                                      </span>
                                      <a href="#" class="action confirm button">Ok</a>
                                    </span>
                                    <a class="cancel clearfix" href="#">Cancel</a>
                                  </section>
                                </div>
                              </section>
                            </li>
                            <li class="substitution-option">
                              <span class="comp-ajax-action ajax-tooltip-confirm" data-partial=" ajax-action ajax-tooltip-confirm"
                             data-url-post="URL-TO-WEB-API-HERE should probably include needed info" data-post-data=""
                             data-url-delete="" data-delete-data="">
                                <span class="comp-tooltip confirm is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Are you sure?
                                      <a class='button yes' href='#'>Yes</a>
                                      <a class='cancel' href='#'>Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action ">Delete this order line</a>
                              </span>
                            </li>
                          </ul>
                        </td>
                      </tr>
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <span class="quantity">
                            1 carton (10 pcs)
                          </span>
                          <span class="price">
                            178.29 EUR
                          </span>
                        </td>
                      </tr>
                      <tr class="item-article-substitution">
                        <td>
                        </td>
                        <td class="substitution" colspan="2">
                          <span class="name">
                            533836 Mop Handle Swep has been discontinued, please make a choice:
                          </span>
                          <ul>
                            <li class="substitution-option">
                              <a class="change" href="#">Change to substitute article 623533 Mop Handle
                              Swep Pro</a>
                              <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                             data-get-url="URL TO GET SUBSTITION ARTICLE PRICE INFO" data-sku="" data-price-info="">
                                <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                                  <button type="button" class="close">
                                    ×
                                  </button>
                                  <div class="content">
                                    Connection problem. Please try again.
                                  </div>
                                </div>
                                <div class="body clearfix is-hidden">
                                  <form class="quantity-selection full-width validate loading">
                                    <label>
                                      Amount:
                                    </label>
                                    <!-- <div class="quantity-input">  -->
                                    <input type="number" min="1" name="quantity-value" class="quantity-value" required
                                   disabled>
                                    <select name="quantity-unit" class="quantity-unit" required disabled>
                                      <option value="" selected="selected">
                                      </option>
                                    </select>
                                    <!-- </div> -->
                                  </form>
                                  <section class="article-summary full-width is-hidden">
                                    <span class="sku-text">
                                      SKU:
                                      <span class="sku-id">
                                      </span>
                                    </span>
                                    <div class="extra">
                                      <i class="icon-time icon-large">
                                      </i>
                                      <i class="icon-star-empty icon-large">
                                      </i>
                                      <span class="in-contract badge is-hidden">
                                        In contract
                                      </span>
                                    </div>
                                  </section>
                                  <section class="article-price half-width first-col">
                                    <!--<span class="amount">2 pallets</span>-->
                                    &nbsp;
                                    <!-- HACK: Completely empty elements don't get any width/height and screws up the
                                   layout. This section starts empty. -->
                                    <span class="price is-hidden">
                                      <span class="price-number">
                                      </span>
                                      EUR
                                    </span>
                                    <span class="discount is-hidden">
                                      Save
                                      <span class="discount-amount">
                                      </span>
                                      EUR by ordering
                                      <span class="discount-next">
                                      </span>
                                      .
                                    </span>
                                  </section>
                                  <section class="article-shop buy half-width">
                                    <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                                   data-post-data="" data-partial="ajax-action ajax-simple-action">
                                      <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                        <span class="tooltip-wrapper">
                                          <span class="arrow">
                                          </span>
                                          <span class="content">
                                            Unknown error
                                          </span>
                                        </span>
                                      </span>
                                      <a href="#" class="action confirm button">Ok</a>
                                    </span>
                                    <a class="cancel clearfix" href="#">Cancel</a>
                                  </section>
                                </div>
                              </section>
                            </li>
                            <li class="substitution-option">
                              <span class="comp-ajax-action comp-ajax-tooltip-confirm " data-partial="ajax-action ajax-tooltip-confirm"
                             data-url-post="URL-TO-WEB-API-HERE should probably include needed info" data-post-data=""
                             data-url-delete="" data-delete-data="">
                                <span class="comp-tooltip confirm is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Are you sure?
                                      <a class='button yes' href='#'>Yes</a>
                                      <a class='cancel' href='#'>Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action ">Delete this order line</a>
                              </span>
                            </li>
                          </ul>
                        </td>
                      </tr>
                      <tr class="item-service" data-sku="SERVICE CODE HERE">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="service">
                          <article class="comp-service-box-landscape media" data-partial="service-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Service image">
                              <span class="article-id">
                                632423523
                              </span>
                              <span class="label">
                                Service
                              </span>
                            </div>
                            <div class="content">
                              <span class="article-id">
                                632423523
                              </span>
                              <a href="#">Repacking</a>
                              <span class="properties">
                                Repacking of the entire order
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <span class="type">
                            Service
                          </span>
                          <span class="price">
                            34.00 EUR
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </section>
                <section class="split-shipments">
                  <h2>
                    Orderlines that need ship-to and delivery date
                  </h2>
                  <table class="comp-article-list comp-article-list-edit" data-partial="article-list article-list-edit">
                    <thead class="head">
                      <tr class="list-options">
                        <td class="select-all">
                          <input type="checkbox" />
                        </td>
                        <td class="actions" colspan="2">
                          <span class="comp-ajax-action comp-ajax-tooltip-select" data-partial="ajax-action ajax-tooltip-select"
                         data-url-post="POST-SELECTED-SHOPPING-LIST-URL-HERE">
                            <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  <select name="">
                                  </select>
                                  <a class="button ok" href="#">Ok</a>
                                  <a class="cancel" href="#">Cancel</a>
                                </span>
                              </span>
                            </span>
                            <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  Unknown error
                                </span>
                              </span>
                            </span>
                            <a href="#" class="action button">Save to shopping list</a>
                          </span>
                          <span class="comp-ajax-action comp-ajax-tooltip-confirm delete" data-url-post=""
                         data-post-data="" data-partial="ajax-action ajax-tooltip-confirm" data-url-delete="URL HERE"
                         data-delete-data="">
                            <span class="comp-tooltip confirm is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  Are you sure?
                                  <a class='button yes' href='#'>Yes</a>
                                  <a class='cancel' href='#'>Cancel</a>
                                </span>
                              </span>
                            </span>
                            <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  Unknown error
                                </span>
                              </span>
                            </span>
                            <a href="#" class="action button">Delete</a>
                          </span>
                          <a href="#" class="button split-shipping">Set ship-to and date</a>
                          <form class="comp-form comp-form-submit is-hidden split-shipping-address" method="post"
                         commandName="" data-partial="form form-submit" data-url-post="URL TO SPLIT SHIP DELIVERY HERE AND INCLUDE NEEDED DATA">
                            <div class="comp-alert-box alert alert-warning submit-unsaved is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                <strong>
                                  Warning!
                                </strong>
                                You have unsaved changes.
                              </div>
                            </div>
                            <div class="comp-alert-box alert alert-info submit-saving is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                <strong>
                                  Saving...
                                </strong>
                              </div>
                            </div>
                            <div class="comp-alert-box alert alert-success submit-saved is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                <strong>
                                  Success!
                                </strong>
                                Your changes have been saved successfully.
                              </div>
                            </div>
                            <div class="comp-alert-box alert alert-error submit-error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                <strong>
                                  Error!
                                </strong>
                                An unknown error occurred. Please try again.
                              </div>
                            </div>
                            <section class="comp-checkout-address " data-partial="checkout-address">
                              <fieldset class="is-selected-address">
                                <section class="comp-form-field comp-form-select " data-partial="form-field form-select">
                                  <label for="">
                                    Ship-to address
                                  </label>
                                  <select name="selectedaddress">
                                    <option>
                                      Volvo loading bay A
                                    </option>
                                    <option>
                                      Volvo loading bay B
                                    </option>
                                    <option>
                                      Volvo loading bay C
                                    </option>
                                  </select>
                                  <span class="extra-info">
                                    <i class='icon-search icon-large'>
                                    </i>
                                  </span>
                                </section>
                              </fieldset>
                            </section>
                            <section class="comp-form-field comp-form-date  " data-partial="form-field form-date">
                              <label for="">
                                Delivery date *
                              </label>
                              <input type="text" name="deliverydate" required />
                              <span class="extra-info">
                              </span>
                            </section>
                            <div class="submit-wrapper">
                              <button type="submit" class="save-changes is-validated" disabled data-loading-text="Saving..."
                             data-unsaved-text="Save changes" data-idle-text="No changes">
                              </button>
                            </div>
                          </form>
                          <label class="views">
                            <input type="checkbox" />
                            <span class="checkbox-text">
                              Compact list
                            </span>
                          </label>
                        </td>
                      </tr>
                      <tr class="sort">
                        <td>
                        </td>
                        <td class="article">
                          <a href="#" class="not-linked">Article</a>
                        </td>
                        <td class="value">
                          <a href="#" class="not-linked">Value</a>
                        </td>
                      </tr>
                    </thead>
                    <tbody class="body">
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-service">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="service">
                          <article class="comp-service-box-landscape media" data-partial="service-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Service image">
                              <span class="article-id">
                                632423523
                              </span>
                              <span class="label">
                                Service
                              </span>
                            </div>
                            <div class="content">
                              <span class="article-id">
                                632423523
                              </span>
                              <a href="#">Repacking</a>
                              <span class="properties">
                                Repacking of the entire order
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <span class="type">
                            Service
                          </span>
                          <span class="price">
                            34.00 EUR
                          </span>
                        </td>
                      </tr>
                      <tr class="item-service">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="service">
                          <article class="comp-service-box-landscape media" data-partial="service-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Service image">
                              <span class="article-id">
                                632423523
                              </span>
                              <span class="label">
                                Service
                              </span>
                            </div>
                            <div class="content">
                              <span class="article-id">
                                632423523
                              </span>
                              <a href="#">Repacking</a>
                              <span class="properties">
                                Repacking of the entire order
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <span class="type">
                            Service
                          </span>
                          <span class="price">
                            34.00 EUR
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </section>
                <section class="delivery-package">
                  <h2>
                    Delivery: 2012-06-12
                  </h2>
                  <table class="comp-article-list comp-article-list-edit" data-partial="article-list article-list-edit">
                    <thead class="head">
                      <tr class="list-options">
                        <td class="select-all">
                          <input type="checkbox" />
                        </td>
                        <td class="actions" colspan="2">
                          <span class="comp-ajax-action comp-ajax-tooltip-select add-to-list" data-url-get="GET-SHOPPING-LIST-AJAX-URL"
                         data-partial="ajax-action ajax-tooltip-select" data-url-post="POST-SELECTED-SHOPPING-LIST-URL-HERE">
                            <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  <select name="">
                                  </select>
                                  <a class="button ok" href="#">Ok</a>
                                  <a class="cancel" href="#">Cancel</a>
                                </span>
                              </span>
                            </span>
                            <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  Unknown error
                                </span>
                              </span>
                            </span>
                            <a href="#" class="action button">Save to shopping list</a>
                          </span>
                          <span class="comp-ajax-action comp-ajax-tooltip-confirm delete" data-url-post=""
                         data-post-data="" data-partial="ajax-action ajax-tooltip-confirm" data-url-delete="URL HERE"
                         data-delete-data="">
                            <span class="comp-tooltip confirm is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  Are you sure?
                                  <a class='button yes' href='#'>Yes</a>
                                  <a class='cancel' href='#'>Cancel</a>
                                </span>
                              </span>
                            </span>
                            <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  Unknown error
                                </span>
                              </span>
                            </span>
                            <a href="#" class="action button">Delete</a>
                          </span>
                          <label class="views">
                            <input type="checkbox" />
                            <span class="checkbox-text">
                              Compact list
                            </span>
                          </label>
                        </td>
                      </tr>
                      <tr class="sort">
                        <td>
                        </td>
                        <td class="article">
                          <a href="#" class="not-linked">Article</a>
                        </td>
                        <td class="value">
                          <a href="#" class="not-linked">Value</a>
                        </td>
                      </tr>
                    </thead>
                    <tbody class="body">
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-service">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="service">
                          <article class="comp-service-box-landscape media" data-partial="service-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Service image">
                              <span class="article-id">
                                632423523
                              </span>
                              <span class="label">
                                Service
                              </span>
                            </div>
                            <div class="content">
                              <span class="article-id">
                                632423523
                              </span>
                              <a href="#">Repacking</a>
                              <span class="properties">
                                Repacking of the entire order
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <span class="type">
                            Service
                          </span>
                          <span class="price">
                            34.00 EUR
                          </span>
                        </td>
                      </tr>
                      <tr class="item-service">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="service">
                          <article class="comp-service-box-landscape media" data-partial="service-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Service image">
                              <span class="article-id">
                                632423523
                              </span>
                              <span class="label">
                                Service
                              </span>
                            </div>
                            <div class="content">
                              <span class="article-id">
                                632423523
                              </span>
                              <a href="#">Repacking</a>
                              <span class="properties">
                                Repacking of the entire order
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <span class="type">
                            Service
                          </span>
                          <span class="price">
                            34.00 EUR
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </section>
                <section class="delivery-package">
                  <h2>
                    Delivery: 2012-06-12
                  </h2>
                  <table class="comp-article-list comp-article-list-edit" data-partial="article-list article-list-edit">
                    <tbody>
                      <tr class="list-options">
                        <td class="select-all">
                          <input type="checkbox" />
                        </td>
                        <td class="actions" colspan="2">
                          <span class="comp-ajax-action comp-ajax-tooltip-select add-to-list" data-url-get="GET-SHOPPING-LIST-AJAX-URL"
                         data-partial="ajax-action ajax-tooltip-select">
                            <span class=" type">
                              Service
                            </span>
                            <span class="price">
                              34.00 EUR
                            </span>
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </section>
                <section class="delivery-package">
                  <h2>
                    Delivery: 2012-06-12
                  </h2>
                  <table class="comp-article-list comp-article-list-edit" data-partial="article-list article-list-edit">
                    <thead class="head">
                      <tr class="list-options">
                        <td class="select-all">
                          <input type="checkbox" />
                        </td>
                        <td class="actions" colspan="2">
                          <span class="comp-ajax-action comp-ajax-tooltip-select add-to-list" data-url-get="GET-SHOPPING-LIST-AJAX-URL"
                         data-url-post="POST-SELECTED-SHOPPING-LIST-URL-HERE">
                            <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  <select name="">
                                  </select>
                                  <a class="button ok" href="#">Ok</a>
                                  <a class="cancel" href="#">Cancel</a>
                                </span>
                              </span>
                            </span>
                            <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  Unknown error
                                </span>
                              </span>
                            </span>
                            <a href="#" class="action button">Save to shopping list</a>
                          </span>
                          <span class="comp-ajax-action comp-ajax-tooltip-confirm delete" data-url-post=""
                         data-post-data="" data-partial="ajax-action ajax-tooltip-confirm" data-url-delete="URL HERE"
                         data-delete-data="">
                            <span class="comp-tooltip confirm is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  Are you sure?
                                  <a class='button yes' href='#'>Yes</a>
                                  <a class='cancel' href='#'>Cancel</a>
                                </span>
                              </span>
                            </span>
                            <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                              <span class="tooltip-wrapper">
                                <span class="arrow">
                                </span>
                                <span class="content">
                                  Unknown error
                                </span>
                              </span>
                            </span>
                            <a href="#" class="action button">Delete</a>
                          </span>
                          <label class="views">
                            <input type="checkbox" />
                            <span class="checkbox-text">
                              Compact list
                            </span>
                          </label>
                        </td>
                      </tr>
                      <tr class="sort">
                        <td>
                        </td>
                        <td class="article">
                          <a href="#" class="not-linked">Article</a>
                        </td>
                        <td class="value">
                          <a href="#" class="not-linked">Value</a>
                        </td>
                      </tr>
                    </thead>
                    <tbody class="body">
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        <select name="">
                                        </select>
                                        <a class="button ok" href="#">Ok</a>
                                        <a class="cancel" href="#">Cancel</a>
                                      </span>
                                    </span>
                                  </span>
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-list disabled button">Add to list <i class='icon-share-alt'></i></a>
                                </span>
                              </section>
                            </div>
                          </section>
                        </td>
                      </tr>
                      <tr class="item-article-notices">
                        <td>
                        </td>
                        <td class="notices" colspan="2">
                          <span class="note">
                            Please note: This article is non-refundable.
                            <a href="#">More
                            info</a>
                          </span>
                          <td>
                      </tr>
                      <tr class="item-article-service">
                        <!-- Only render this article-service block if there is a service attached to the
                       above article -->
                        <td>
                        </td>
                        <td class="service" colspan="2">
                          <div class="wrapper">
                            <span class="name">
                              Added service: Cutting
                              <span class="properties">
                                : 322 mm x 442 mm, cross fiber
                              </span>
                            </span>
                            <span class="price">
                              2.00 EUR
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr class="item-article" data-articlecode="ARTICLE CODE" data-entrynr="ENTRY NUMBER">
                        <td>
                          <input type="checkbox" />
                        </td>
                        <td class="article">
                          <article class="comp-article-box-landscape media" data-partial="article-box-landscape">
                            <div class="img">
                              <img class="image" src="http://placekitten.com/80" alt="Product image">
                            </div>
                            <div class="content">
                              <a href="#" class="article-id">SKU: 88036955</a>
                              <span class="name">
                                MultiArt Matt
                              </span>
                              <span class="properties">
                                weight: 115 g/m2, size 320x450
                              </span>
                            </div>
                          </article>
                        </td>
                        <td class="value">
                          <ul class="actions-list hide-on-small">
                            <li>
                              Add:
                            </li>
                            <li>
                              <a href="#">Punching</a>
                            </li>
                            <li>
                              <a href="#">Renaming</a>
                            </li>
                            <li>
                              <a href="#">Repacking</a>
                            </li>
                            <li>
                              <a href="#">Cutting/slicing</a>
                            </li>
                            <li>
                              <span class="comp-ajax-action comp-ajax-tooltip-input " data-url-post="URL HERE TO WEB API, INCLUDE NEEDED INFO"
                             data-post-data="" data-partial="ajax-action ajax-tooltip-input">
                                <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      <input type="text" class="edit" name="" value="" />
                                      <a class="button ok" href="#">Ok</a>
                                      <a class="cancel" href="#">Cancel</a>
                                    </span>
                                  </span>
                                </span>
                                <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                  <span class="tooltip-wrapper">
                                    <span class="arrow">
                                    </span>
                                    <span class="content">
                                      Unknown error
                                    </span>
                                  </span>
                                </span>
                                <a href="#" class="action "> Note </a>
                              </span>
                            </li>
                          </ul>
                          <span class="quantity">
                            <i class="icon-edit">
                            </i>
                            <a href="#">4 boxes (1000 sheets)</a>
                          </span>
                          <span class="price">
                            <del>
                              46.52
                            </del>
                            43.47
                          </span>
                          EUR
                          <section class="comp-article-quantity-picker " data-partial="article-quantity-picker"
                         data-get-url="URL-TO-WEB-API-HERE (it should include needed info, like SKU)" data-sku=""
                         data-price-info="">
                            <div class="comp-alert-box alert alert-error error is-hidden" data-partial="alert-box">
                              <button type="button" class="close">
                                ×
                              </button>
                              <div class="content">
                                Connection problem. Please try again.
                              </div>
                            </div>
                            <div class="body clearfix is-hidden">
                              <form class="quantity-selection full-width validate loading">
                                <label>
                                  Amount:
                                </label>
                                <!-- <div class="quantity-input">  -->
                                <input type="number" min="1" name="quantity-value" class="quantity-value" required
                               disabled>
                                <select name="quantity-unit" class="quantity-unit" required disabled>
                                  <option value="" selected="selected">
                                  </option>
                                </select>
                                <!-- </div> -->
                              </form>
                              <section class="article-summary full-width is-hidden">
                                <span class="sku-text">
                                  SKU:
                                  <span class="sku-id">
                                  </span>
                                </span>
                                <div class="extra">
                                  <i class="icon-time icon-large">
                                  </i>
                                  <i class="icon-star-empty icon-large">
                                  </i>
                                  <span class="in-contract badge is-hidden">
                                    In contract
                                  </span>
                                </div>
                              </section>
                              <section class="article-price half-width first-col">
                                <!--<span class="amount">2 pallets</span>-->
                                &nbsp;
                                <!-- HACK: Completely empty elements don't get any width/height and screws up the
                               layout. This section starts empty. -->
                                <span class="price is-hidden">
                                  <span class="price-number">
                                  </span>
                                  EUR
                                </span>
                                <span class="discount is-hidden">
                                  Save
                                  <span class="discount-amount">
                                  </span>
                                  EUR by ordering
                                  <span class="discount-next">
                                  </span>
                                  .
                                </span>
                              </section>
                              <section class="article-shop buy half-width">
                                <span class="comp-ajax-action comp-ajax-simple-action clearfix" data-url-post="POST-URL-HERE"
                               data-post-data="" data-partial="ajax-action ajax-simple-action">
                                  <span class="comp-tooltip error is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span>
                                      <span class="content">
                                        Unknown error
                                      </span>
                                    </span>
                                  </span>
                                  <a href="#" class="action add-to-cart disabled button"><i class='icon-shopping-cart icon-large'></i> Add to cart</a>
                                </span>
                                <span class="comp-ajax-action comp-ajax-tooltip-select clearfix" data-url-get="ENTER-GET-SHOPPING-LIST-URL-HERE"
                               data-url-post="POST-URL-HERE" data-partial="ajax-action ajax-tooltip-select">
                                  <span class="comp-tooltip select is-hidden" data-partial="tooltip">
                                    <span class="tooltip-wrapper">
                                      <span class="arrow">
                                      </span&g