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 |