A mini cart shows the total and a Checkout button without leaving the catalog. It belongs to no page, so its markup sits in app.f7 after the views and renders from the Store's cart getters:
<div class="sheet-modal cart-sheet">
<div class="swipe-handler"></div>
<div class="sheet-modal-inner">
<div class="sheet-modal-swipe-step">
<div class="block cart-summary">
<div><b>${count.value} ${count.value === 1 ? 'book' : 'books'}</b>
<div class="cart-total">${money(total.value)}</div></div>
<a href="#" class="button button-fill" @click=${checkout}>Checkout</a>
</div>
<div class="block-footer text-align-center">Swipe up for details</div>
</div>A list of lines follows the step. A sheet-open link with data-sheet=".cart-sheet" in the catalog's navbar opens it, and checkout() closes it, shows the Cart tab and navigates that view to /checkout/. The instance is created in the root component's script:
// Create it once the app is ready: in $onMounted, app.el is still index.html's placeholder
$f7ready(() => {
cartSheet = $f7.sheet.create({
el: '.cart-sheet',
swipeToClose: true,
swipeToStep: true,
backdrop: true,
});
// The root component's markup is not a page, so no pageInit creates these widgets
$f7.range.create({ el: '.filter-panel .range-slider', label: true });
$f7.toggle.create({ el: '.filter-panel .toggle' });
});The comment records a real bug. Created in $onMounted, the sheet opened into nothing: a modal records app.$el as its container when it is created and moves itself there on open(), and at mount time app.$el was still the placeholder <div id="app"> from index.html, so the sheet vanished into a detached element. $f7ready runs once the app has switched to the mounted root. With three books in the cart, the sheet opened to its step (A below), and stepOpen() showed the lines (B).
