The restaurant has quite a few categories of menu items, however, it seems that when scrolling down the page (on a page where the page content is not longer than the category menu), the footer overlaps the categories section Any suggestions?

Same problem here but issue I am most concerned about is that it overlaps the order screen! I am not sure what to do either

eko I solved that by removing the affix-cart class and use sticky instead themes/yourtheme/_partials/cartBox/default.php https://developer.mozilla.org/en-US/docs/Web/CSS/position https://css-tricks.com/position-sticky-2/

I am sorry but in the specified file (latest beta) is no mention of affix-cart so nothing to edit

mlattke I am sorry but in the specified file (latest beta) is no mention of affix-cart so nothing to edit

I did just do a mock-up change with the inspector in browser but noted that the beauty of staying fixed when scrolling through items is that the customer can keep watching what they put in the order and the total funds they are about to spend so far. Maybe there is an elegant way of keeping the footer down. So far your quickfix would work but probably customers would prefer the annoyance of having to scroll back up to see their order than having to do that in any case when wanting to see it

eko Sorry should have tried sticky, I just disabled affix-cart. Will try

eko sorry I forgot about the new version. I’ll check the files of Orange Theme and let you know. The sticky option will follow the user scroll but won’t overlap with other elements such as the footer.

eko I did eliminate the cart-affix class and added a new one, in my case cart-sticky .cart-sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } Hope this can help you and anybody who wants to change the behavior of the cart.

Footer Overlaps Side Menu

eko

mlattke That would be great , but more guidance appreciated if at all possible. Guess many would benefit from a fix 😆

mlattke

eko I did eliminate the cart-affix class and added a new one, in my case cart-sticky

.cart-sticky {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0; }

Hope this can help you and anybody who wants to change the behavior of the cart.

eko

mlattke Somewhat more elegant is an interface that takes the whole screen and can eliminate or put on top and bottom the categories with on the right column from top to bottom a fixed order overview such as at Netherlands https://www.thuisbezorgd.nl/frituur-sansa-maastricht. It will prompt for location enter some address in Maastricht such as Akerstraat 25D, 6221CL, Maastricht. The current interface could be simpeler.

eko

mlattke Read that sticky does not seem to work with IE, is that true?

eko

mlattke I checked app.css but can not find cart-affix so do not know where to replace it. Any hint?

mlattke

eko cart-affix comes from a JS file. Just remove the class from the cart component and create the new one.

eko

mlattke is this what you replaced:
CartBox.prototype.initAffix = function () {
var $affixEl = this.$el.closest(‘.affix-cart’),
offsetTop = $(‘.navbar-top’).height(),
offsetBottom = $(‘footer.footer’).outerHeight(true),
cartWidth = $affixEl.parent().width()

    $affixEl.affix({
        offset: {top: offsetTop, bottom: offsetBottom}
    })

    $affixEl.on('affixed.bs.affix', function () {
        $affixEl.css('width', cartWidth)
    })
}

mlattke

eko That’s the affix-cart class but I didn’t modify that.
Just remove that class from the php file and add your own class with the sticky.

eko

mlattke themes/yourtheme/_partials/cartBox/default.php has the following code:
<div
data-control=“cart-box”
data-load-item-handler=“<?= $loadCartItemEventHandler; ?>”
data-update-item-handler=“<?= $updateCartItemEventHandler; ?>”
data-apply-coupon-handler=“<?= $applyCouponEventHandler; ?>”
data-apply-tip-handler=“<?= $applyTipEventHandler; ?>”
data-remove-item-handler=“<?= $removeCartItemEventHandler; ?>”
data-remove-condition-handler=“<?= $removeConditionEventHandler; ?>”
data-refresh-cart-handler=“<?= $refreshCartEventHandler; ?>”

<div id="cart-box" class="module-box">
    <div id="cart-items">
        <?= partial('@items'); ?>
    </div>

    <div id="cart-coupon">
        <?= partial('@coupon_form'); ?>
    </div>

	<?php if ($__SELF__->tippingEnabled()) { ?>
    <div id="cart-tip">
        <?= partial('@tip_form'); ?>
    </div>
    <?php } ?>

    <div id="cart-totals">
        <?= partial('@totals'); ?>
    </div>

    <div id="cart-buttons" class="mt-3">
        <?= partial('@buttons'); ?>
    </div>
</div>

</div>

There is no affix-cart class in there.

eko

I decided to follow Walter’s approach (https://forum.tastyigniter.com/d/1896-cart-checkout-on-menu-page-size-issue) and also did some more css styling changes to make better use of screen space (mainly reducing padding here and there and reducing footer spaces). Works now fine on PCs and mobile phones. Thanks you both!!

reesalumasa

Go to yourdomain/admin/themes/edit/tastyigniter-orange
then add the following under custom CSS

.affix {
  position:relative !important;
}

mlattke

reesalumasa breaksecurity There’s a fix already.

tastyigniter/TastyIgniter461

I’ll send the PR in a moment.

breaksecurity

Can you guys open a PR on https://github.com/tastyigniter/ti-theme-orange

To solve this tastyigniter/ti-theme-orange19

Thanks @reesalumasa @eko @mlattke