Ecommerce basket summary

This widget is only compatible with Editor version 7.32 and above.

IMPORTANT: This widget will only work as expected when the ecommerce plugin is activated on the user’s account.

Examples

Example usage

{{widget('ecombasketsummary', 'basketsummary', {})|raw}}

Resulting HTML:

<div id="page-zones__main-widgets__basketsummary" data-name="ecombasketsummary" class="widget  widget--zone-widget">
  <div class="bk-ecombasketsummary  ecombasketsummary  widget__ecombasketsummary">
    <section class="summary-section  ecombasketsummary__summary-section">
      <h2 class="summary-title  ecombasketsummary__summary-title">Basket Summary</h2>
      <table class="summary-table  table  ecombasketsummary__summary-table">
        <tbody class="summary-body  ecombasketsummary__summary-body">
          <tr class="table-row  table-row--heading  ecombasketsummary__table-row">
            <th class="cell  cell--header  ecombasketsummary__cell" scope="col" colspan="2">Item</th>
            <th class="cell  cell--header  ecombasketsummary__cell" scope="col" colspan="1">Quantity</th>
            <th class="cell  cell--header  ecombasketsummary__cell" scope="col" colspan="1">Price</th>
            <th class="cell  cell--header  ecombasketsummary__cell" scope="col" colspan="1">Subtotal</th>
          </tr>
          <tr class="table-row  ecombasketsummary__table-row">
            <td class="cell  cell--image  ecombasketsummary__cell">
              <a class="summary-item-link  ecombasketsummary__summary-item-link" href="/store/product/Bag" style="background-repeat: no-repeat;background-image:url('//placehold.it/2250x800')">
              <img class="image  image--thumb  ecombasketsummary__image" src="//placehold.it/2250x800" alt="Donec id elit non sapien tincidunt">
              </a>
            </td>
            <td class="cell  cell--title  ecombasketsummary__cell">
              <p class="summary-item-title  ecombasketsummary__summary-item-title">
                <a class="summary-item-link  ecombasketsummary__summary-item-link" href="/store/product/Bag">Donec id elit non sapien tincidunt</a>
              </p>
            </td>
            <td class="cell  cell--quantity  ecombasketsummary__cell">
              <div class="quantity-wrap  ecombasketsummary__quantity-wrap">
                <input class="quantity-minus  button  button--quantity  ecombasketsummary__quantity-minus  js-remove" type="button" value="-" data-ref="1">
                <span class="quantity-field  ecombasketsummary__quantity-field">1</span>
                <input class="quantity-plus  button  button--quantity  ecombasketsummary__quantity-plus  js-add" type="button" value="+" data-ref="1">
              </div>
            </td>
            <td class="cell  cell--price  ecombasketsummary__cell">
              <p class="summary-item-price  ecombasketsummary__summary-item-price">£12.00</p>
            </td>
            <td class="cell  cell--total  ecombasketsummary__cell">
              <p class="summary-item-total  ecombasketsummary__summary-item-total">£12.00</p>
            </td>
          </tr>
          <tr class="table-row  ecombasketsummary__table-row">
            <td class="cell  cell--image  ecombasketsummary__cell">
              <a class="summary-item-link  ecombasketsummary__summary-item-link" href="/store/product/Bag" style="background-repeat: no-repeat;background-image:url('//placehold.it/300x100')">
              <img class="image  image--thumb  ecombasketsummary__image" src="//placehold.it/300x100" alt="Donec id elit non sapien tincidunt">
              </a>
            </td>
            <td class="cell  cell--title  ecombasketsummary__cell">
              <p class="summary-item-title  ecombasketsummary__summary-item-title">
                <a class="summary-item-link  ecombasketsummary__summary-item-link" href="/store/product/Bag">Donec id elit non sapien tincidunt</a>
              </p>
            </td>
            <td class="cell  cell--quantity  ecombasketsummary__cell">
              <div class="quantity-wrap  ecombasketsummary__quantity-wrap">
                <input class="quantity-minus  button  button--quantity  ecombasketsummary__quantity-minus  js-remove" type="button" value="-" data-ref="2">
                <span class="quantity-field  ecombasketsummary__quantity-field">1</span>
                <input class="quantity-plus  button  button--quantity  ecombasketsummary__quantity-plus  js-add" type="button" value="+" data-ref="2">
              </div>
            </td>
            <td class="cell  cell--price  ecombasketsummary__cell">
              <p class="summary-item-price  ecombasketsummary__summary-item-price">£11.00</p>
            </td>
            <td class="cell  cell--total  ecombasketsummary__cell">
              <p class="summary-item-total  ecombasketsummary__summary-item-total">£11.00</p>
            </td>
          </tr>
          <tr class="table-row  table-row--order-total  ecombasketsummary__table-row">
            <td colspan="5" class="cell  cell--order-total  ecombasketsummary__cell">
              <h4 class="order-total  ecombasketsummary__order-total">Subtotal <span class="total-value  ecombasketsummary__total-value">£22.00</span></h4>
            </td>
          </tr>
        </tbody>
      </table>
      <form class="summary-form  form  ecombasketsummary__summary-form" action="" method="post">
        <input type="hidden" name="cartId" value="">
        <input type="hidden" name="storeRef" value="18">
        <input type="hidden" name="storeUrl" value="http:///store">
        <input class="input  button  button--submit  ecombasketsummary__input" type="submit" value="Proceed to checkout">
      </form>
    </section>
  </div>
</div>

Widget options

Currently this widget does not have any options.