Archived topic
How to widgetize an area with a hook
10 replies · Started by Benedikt on November 27, 2018
Hey fellow GPressers!
Currently, I’m trying to build a flyout menu cart like this one here:
https://www.templatemonster.com/blog/demos/hidden-flyout-shopping-cart-menu-with-css3/demo/index.html
… to get rid of too many plugins bulking up the shop site. So the plan is to build the HTML and CSS exactly like in the example above while feeding the contents from the cart widget.
Now, I asked myself if it’s possible to widgetize an area with a hook. I tried to do it after this tutorial (as the code mentioned in the codex returned an error): https://buckleupstudios.com/add-a-new-widget-area-to-a-wordpress-theme/
But somehow, I can’t register the widget properly. Does this have to do something with the hook or am I just doing it wrong? :)
This is the code I put in the function.php:
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Flyout Cart',
'id' => 'flyout-cart',
'before_widget' => '<div class = "flyoutcart">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
)
);And this is what I put into the hook so far:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Flyout Cart") ) : ?>
<?php endif;?>Any help appreciated! :)
Thanks!
Bene
Oooo I'd love to know how to widgetise a hook too!
Hi there,
you are missing the action that registers the widget, this topic here, the user provides the correct code:
Let me know
David, you’re awesome! Thanks a bunch!
As soon as I found out how to call the cart button with the cart sum (as is appended to the nav menu via customizer) in a custom location (naming the flyout cart button), I’ll have a super slick solution for a css3 flyout cart I’m happy to share :) Do you maybe have any hints for me? I don’t want to register this field as main menu.
See how far I’ve gotten already (The “$22.00 2 items“ is static ATM):
https://staging.kasnudl.com/shop/#
So to be clear, you want to display the cart total in the navigation, and on hover the shopping cart widget ( off canvas ) will slide into view?
Yep, exactly. The visible part shows the cart icon and total and the widget slides into view on hover. You can check https://staging.kasnudl.com/ to see how far I've gotten already.
Thanks! :)
Hmmmm....
Is the cart icon going to remain in the navigation or be part of the slideout?
I would hide it in the navigation and just put it in the slideout to have it cleaner. So I’d put it next to the total. What do you think?
https://www.templatemonster.com/blog/demos/hidden-flyout-shopping-cart-menu-with-css3/demo/index.html
Personally i would look at add the Cart Widget to your widget area. Positioning that off canvas. And keep the current Nav Cart, then a simple jQuery could detect its being hovered and bring the Cart Widget into display.
Okay, that sounds good as well … will definitely try this one (though I tried to avoid JS for this totally).
I thought it was better to use the built in cart nav, as works really well, otherwise you would need to hook your own cart nav, add ajax so it updates without refresh etc.
You're running jQuery already, so might as well take advantage of it :)
