[Resolved] Switching the cart icon's location without displacing in mobile

Home Forums Support [Resolved] Switching the cart icon's location without displacing in mobile

Home Forums Support Switching the cart icon's location without displacing in mobile

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #916623
    toasterpc

    Hey there, so this is part two of out current issues list:

    To replicate the desired behaviour of this picture: Sampling
    I managed to change the cart location to the secondary menu, which I then placed alongside the search bar using a Hooks element with after_header like this:

    <div class="second-nav grid-container">
    	<?php generate_secondary_navigation_position(); ?>	
    </div>

    with a priority of 15.

    Yet, after the change, it seems that the cart icon and submenu have stopped functioning when the width equals the mobile layout, which has kind of hindered our ability to perform business for the moment.

    If anyone could help us sort this out, it would be truly a blessing.

    #916710
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The cart sub-menu isn’t designed to work on mobile at the moment. We decided it was better UX to just go to the cart page.

    We can manually hook the icon into the Mobile Header if you’d like?

    Let me know πŸ™‚

    #918886
    toasterpc

    Hi Tom,

    Sure, that’d be lovely.

    #918976
    Tom
    Lead Developer
    Lead Developer

    Try this function:

    add_action( 'generate_inside_mobile_header', function() {
        if ( ! function_exists( 'generatepress_wc_get_setting' ) ) {
            return;
        }
    
        if ( ! generatepress_wc_get_setting( 'cart_menu_item' ) ) {
            return;
        }
    
        $has_items = false;
    
        if ( ! WC()->cart->is_empty() ) {
            $has_items = ' has-items';
        }
        ?>
            <div class="mobile-bar-items wc-mobile-cart-items<?php echo $has_items; ?>">
                <?php do_action( 'generate_mobile_cart_items' ); ?>
                <?php if ( function_exists( 'generatepress_wc_cart_link' ) ) {
                    echo generatepress_wc_cart_link(); 
                } ?>
            </div><!-- .mobile-bar-items -->
        <?php
    } );

    Let me know πŸ™‚

    #919994
    toasterpc

    Great! It worked. Thanks for the help.

    Though the icon on both locations seems to be displaced. Would increasing padding help in this case?

    #920095
    Tom
    Lead Developer
    Lead Developer

    You can try adjusting your positioning like this:

    .secondary-navigation a.cart-contents:before {
        position: relative;
        top: 5px;
    }
    
    #mobile-header a.cart-contents:before {
        position: relative;
        top: 10px;
    }
    #922087
    toasterpc

    All right! It worked perfectly on desktop, though on mobile there were no results.

    Also, I just got orders to create Mega Menus with QuadMenu, and it seems using the plugin leads to both the secondary menu disappearing and to the primary menu behaving erratically on mobile.

    I believe this may fall a little bit outside the scope of the current issue, so please let me know if I should open another thread and continue the troubleshooting there.

    #922132
    Tom
    Lead Developer
    Lead Developer

    I just adjusted the CSS.

    I think you would need a cart feature built into the mega menu plugin, unfortunately.

    #922133
    toasterpc

    Alright then, I’ll look into it. Thanks for the help!

    #922137
    Tom
    Lead Developer
    Lead Developer

    No problem πŸ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.