This component shows the cart with the following features:
- shows cart positions and can render many item and car position attributes
- offers in-cart manipulation if the amount
- display items and grouped items (such as boxes and recipe positions TBD)
- links back to the original items (or grouped items)
- renders all summary information
- manipulates action buttons depending on the order state. This includes primary buttons (e.g. the very visible „send“ button) and secondary buttons (such as a smaller „cancel all“ button).
- allows to add a note about the cart
- shows a duplicate indicator
One page can have only one cart component.
Example# #
<!DOCTYPE html>
<html>
<body>
<h1>Navi Test </h1>
<div id="oo-navi"></div>
...
<div id="oo-cart" data-oo-shop-page="shop.html"></div>
...
</body>
</html>
Attributes# #
| oo-shop-page=“<rel-path>“ | Points to the page within the website, that hosts the main shop component. Clicks will lead to it. If not provided, the current page is not left when clicked. |
| oo-date-page=“<rel-path>“ | Points to the page that hosts the date component |
| oo-logon-page=“<rel-path>“ | Points to the page that hosts the logon component |
| oo-thankyou-page=“<rel-path>“ | optional, points to a thank-you page. Note, this page must host a cart component too! Dont use this if we stay on the same page. |
| oo-thankyou-new-page=“<rel-path>“ | optional, points to a thank-you page for new customers |
| oo-cart-cnote=“false“ | disables open-on-demand logic for the cart note area, and leaves the field always visible. Note: Its enabled only when the cart is ready to be sent. |
| oo-profile-page=“<rel-path>“ | path to the page hosting the profile component |
| oo-cartmode=“cart“ | if given and „cart“, the cart is cleared right after submitting and not offered for re-editing. Instead a new order (for the selected day) can be started. May be used independently from oo-cart-oneperday=“false“. Default is „order“ (stay on order, always show order). It makes sense to use a dedicated oo-thankyou-page in this scenario. See also the counterpart on the logon-component. Best set globally ! |
| oo-oneperday=“false“ | REMOVED! (its an configurable setting in the Backend now) allows multiple orders per tour(== day, default is true, allow only one order per day ). Adds a new option in the cart button area and date selection. |
| oo-neworderpage=“<rel-path> | if oo-oneperday=“false“ is used, this option can be used to change the link to a new order, which is otherwise oo-shop-page. |
| oo-cart-emptyurl=“<rel-path> | if given, the cart will dispatch to this page as soon as it becomes empty (by removing positions or the cart-clear button). |
| oo-cart-summary: true | always show summary, even as registered user. Otherwise shown only during registration with oo-profile-quickorder:true |
External control# #
Design Hints# #
- The sample page set has cart.html and cart1.html. The latter has a date component too, so users can change the cart’s date right away.
- You may assign a separate thank-you page, especially if you use the cart1.html style. Otherwise your thank-you screen is polluted by the date selector
Server Side Template Structure # #
<div class="oo-cart-cart">
..regular cart information
<div>
<div class="oo-cart-info-osh">
...Information Section
</div>
<table >
<tbody id="oo-cart-pane">
<tr id="oo-cart-tpl" class="oo-cart-pos clearfix">
...Repeated Cart Positions
<tbody class="oo-cart-delivercost">
..information about Delivery costs
</tbody>
<tbody id="oo-cart-vat-pane">
...vat information
<tbody id="oo-cart-sum">
..summaries
</tbody>
</table>
<button class="oo-cart-submit" >Checkout</button>
...Buttons and Controls
<div class="oo-cart-info-mbw">
...more informational messages
</div>
<div class="oo-cart-empty">
.section that is displayed if the cart is emptry
</div>
<div class="oo-cart-sent">
..section that is displayed once th cart was sent successfully (or not)
</div>
CSS # #
Cart Status
| .oo-cart-cart | Elements shown when cart is in „regular“ state |
| .oo-cart-sent | Elements shown when cart is in „sent“ state |
| .oo-cart-empty | Elements shown when cart is in „empty“ state |
| HTML.oo-cart-state-register | assigned, when the cart is in register mode |
| HTML.oo-cart-state-sent | assigned, when the cart was just sent |
Cart Positions
| #oo_cart_pane | Area that holds all cart item positions. Events (listed below) are triggered onto that element. |
| #oo-cart-pane > #oo-cart-tpl | Template Fragment which is repeated for each item position |
| #oo-cart-pane > #oo-cart-tpl img | one image to be loaded with item’s iconic image |
| #oo-cart-pane > #oo-cart-tpl oo-cart-pos-* | Position Values, documented here |
| .oo-sub-period-<n> | assigned to the row, if thats a periodic subscription |
| #oo-cart-pane TR.oo-sub-mark-due | subscription row, is valid an due |
| #oo-cart-pane TR.oo-sub-mark-undue | subscription row, is not due |
| #oo-cart-pane TR .oo-cart-pos-abodates | enabled, if this row is a subscription |
| #oo-cart-pane TR .oo-cart-pos-abodates .oo-sub-period-<n> | notes on this subscription’s details, n is for periodicy |
VAT summary
| #oo-cart-vat-pane | Area that holds all cart vat positions (a list of itemcount vs. vat) |
| #oo-cart-vat-pane > #oo-cart-vat-tpl | Fragment which is repeated for each vat position |
| #oo-cart-vat-pane > #oo-cart-vat-tpl .oo-cart-vat-pos-vat | vat rate |
| #oo-cart-vat-pane > #oo-cart-vat-tpl .oo-cart-vat-pos-cnt | number of items for this vat rate |
| #oo-cart-vat-pane > #oo-cart-vat-tpl .oo-cart-vat-pos-sum | total vat for this vat rate |
Cart Summary
| .oo-cart-sum | this element encloses all summary information (enabled/disabled at times) |
| .oo-cart-sum > .oo-cart-sum-val | total value of this cart (includes delivery) |
| .oo-cart-delivercost-note | Note about extra delivery costs |
| .oo-cart-delivercost-note-val | delivery costs (todo: automatic) |
| .oo-cart-info-osh | info about final order closing date time |
| .oo-cart-info-osh-val | the date time value (todo: automatic) |
| .oo-cart-info-mbw | Note about minimum delivery value |
| .oo-cart-info-mbw-val | the value itself (todo: automatic) |
| .oo-cart-info-late | Note about exceeded order stop |
| .oo-cart-info-late-latest | when that was (todo: automatic) |
| .oo-cart-info-late-ddate | for this giove delivery date (todo: automatic) |
Action Buttons
| .oo-cart-submit-auth | submit button. enabled/disabled at times. Used in case ordering a new Order. |
| .oo-cart-submit-change | submit button. enabled/disabled at times. Used in case changing a, existing Order. |
| .oo-cart-submit-located | submit button. enabled/disabled at times. Used if a visitor in located state goes into the checkout process (registration) |
| .oo-cart-submit-anon | submit button. enabled/disabled at times. Used if a visitor in located state goes into the checkout process (date selecton, then registration) |
| .oo-cart-cancel | cancel button. enabled/disabled at times |
| .oo-cart-cancel-alt | alternative, not so visible second cancel option (more available than cart-cancel) |
| .oo-cart-clear | clears all items from cart (enabled for new orders) |
| .oo-cart-revert | revert all changes (enabled for modified orders) |
| .oo-cart-revert-alt | revert all changes (enabled for modified orders, but only when empty as alt to cancel) |
Cart Note
| .oo-cart-cnote | Holds all elements related to the cart note function |
Cart Sent Section
| .oo-cart-info-XX | Elements that are of interest in a thank-you page. |
| .oo-cart-info-ddate | Selected delivery date |
