gistfile1.md

Styling the Drupal Commerce Shopping Cart Block

This block is provided by a view. Note how the markup changes when cart is empty vs not empty. This stuff is very tricky to style.

Cart Empty

<div id="block-views-shopping-cart-zz-block" class="block block-views contextual-links-region">

  <!-- contextual-links removed for brevity -->
  
  <div class="view view-shopping-cart-zz view-id-shopping_cart_zz view-display-id-block view--cart-block view-dom-id-8f33cf8d3fd1b1e8a2ec26cfcc1d342a">

    <div class="view-empty">
      <p>Empty</p>
      <div class="line-item-summary">
        <div class="line-item-total">
          <span class="line-item-total-label">Total:</span>
          <span class="line-item-total-raw">$0.00</span>
        </div>
        <ul class="links inline">
          <li class="line-item-summary-checkout first last">
            <a href="/checkout" rel="nofollow">Checkout</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
</div>

Cart has items (not empty)

<div id="block-views-shopping-cart-zz-block" class="block block-views contextual-links-region">

  <!-- contextual-links removed for brevity -->
  
  <div class="view view-shopping-cart-zz view-id-shopping_cart_zz view-display-id-block view--cart-block view-dom-id-16d2596f838d822774fc701cf169075a">

    <div class="view-content">
      <div class="views-row views-row-1 views-row-odd views-row-first views-row-last">

        <div class="views-field views-field-nothing">
          <span class="field-content"></span>
        </div>
      </div>
    </div>

    <div class="view-footer">
      <div class="line-item-summary">
        <div class="line-item-quantity">
          <span class="line-item-quantity-raw">1</span>
          <span class="line-item-quantity-label">item</span>
        </div>
        <div class="line-item-total">
          <span class="line-item-total-label">Total:</span>
          <span class="line-item-total-raw">$1,680.00</span>
        </div>
        <ul class="links inline">
          <li class="line-item-summary-checkout first last">
            <a href="/checkout" rel="nofollow">Checkout</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
</div>

SASS for displaying everything in one line.

/* Shopping Cart Block View */

.view-shopping-cart-zz {
  text-align: right;
  
  .view-empty {
    display: inline-block;
    margin: $pad 0; // Override module styles
    > p {
      display: inline-block;
      margin-right: .5em
    }
  }
  .view-footer {
    display: inline-block;
    margin: $pad 0; // Override module styles
  }
  
  // Both contain..
  .line-item-summary {
    display: inline-block;
    .line-item-quantity {
      display: inline-block; 
      margin-right: .5em;
    } // e.g. "2 items"
    .line-item-total {
      display: inline-block;
      margin-right: .5em;
    } // e.g. "$400.69"

    ul.links.inline {
      display: inline-block;
      list-style-type: none;
      margin: 0 0 0 0;
      li.line-item-summary-view-cart { // View Cart
        display: inline-block;
        a {
          display: inline-block;
          margin-right: .5em;
        } 
      }
      li.line-item-summary-checkout { // Checkout
        display: inline-block;
        a {
          display: inline-block;
          margin-right: .5em;
        } 
      }
    }
  } 
}