Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • September 15, 2020 at 11:05 pm #1246127
    kevinmcgillivray

    I know you’re probably going to say I have to submit this as a feature request but…

    I’ve been trying to replicate the shopping cart, account, wishlist, etc header icons that are very popular on e-commerce websites these days. Here’s an example from Fashion Nova but there are LOTS of other sites that use a similar layout:

    Header Layout

    In looking at the code for the header and mini cart in Enfold, there doesn’t appear to be a way to do this easily. Sure, I could create a header widget area and fiddle with CSS to get the items to align properly. But the better solution would be to add <li></li> items to the mini cart’s parent UL. When I test this in the code inspector, though, hovering over any <li></li> in that group triggers the mini cart. As a fallback I could add another <ul></ul> set right before the mini cart using the ava_before_bottom_main_menu hook and style it to look like part of the mini cart but as far as I can tell, this requires me to wrap those two ULs in a div using jquery. This seems clunky to say the least. I even thought about overriding the avia_woocommerce_cart_dropdown function with my own but decoupling that functionality from Enfold seems dangerous.

    With all this said, I’m hoping I’ve just overlooked a simpler solution. Is there some way for me to add more icons to the mini cart area like in the example above?

    Also, after looking at the header layouts that are available in other themes quite a bit, I have to say (respectfully and with a massive amount of love for Enfold) that I think it’s time for the development team to take a hard look at how the header options work and consider how to make them more functional and extensible to keep up with popular layouts.

    September 20, 2020 at 8:01 pm #1247182
    Mike

    Hey Kevin,
    Sorry for the late reply, one way to add more items to the cart UL is to edit:
    \wp-content\themes\enfold\config-woocommerce\config-356.php around line 1866 you will find this code:

    	$output = "";
	$output .= "<ul {$id} class = 'menu-item cart_dropdown {$trigger}' data-success='".__('was added to the cart', 'avia_framework')."'><li class='cart_dropdown_first'>";
	$output .= "<a class='cart_dropdown_link' href='".$link."'><span ".av_icon_string('cart')."></span><span class='av-cart-counter'>0</span><span class='avia_hidden_link_text'>".__('Shopping Cart','avia_framework')."</span></a><!--<span class='cart_subtotal'>".$cart_subtotal."</span>-->";
	$output .= "<div class='dropdown_widget dropdown_widget_cart'><div class='avia-arrow'></div>";
	$output .= '<div class="widget_shopping_cart_content"></div>';
	$output .= "</div>";
	$output .= "</li></ul>";

    Perhaps a simpler solution would be to add your other icons to the social icons profiles and then append the cart menu with these with jQuery. Or you can add your other icons to the social icons profiles and then adjust with css so it looks like they are in the same container, like your screenshot.

    Best regards,
    Mike

    September 21, 2020 at 12:39 pm #1247319
    Mike

    Hi,
    Sorry, the “config-356.php” is a fallback for older WC versions (< 3.5.6) only, please see: \wp-content\themes\enfold\config-woocommerce\config.php around line 2213

    		$output  = '';
		$output .= "<ul {$id} class = 'menu-item cart_dropdown {$trigger}' data-success='" . __( 'was added to the cart', 'avia_framework' ). "'>";
		$output .=		"<li class='cart_dropdown_first'>";
		$output .=			"<a class='cart_dropdown_link' href='" . $link . "'>";
		$output .=				'<span ' . av_icon_string( 'cart' ) . '></span>';
		$output .=				"<span class='av-cart-counter {$active}'>{$cart_items}</span>";
		$output .=				"<span class='avia_hidden_link_text'>" . __( 'Shopping Cart', 'avia_framework' ) . '</span>';
		$output .=			'</a>';
		$output .=			"<!--<span class='cart_subtotal'>{$cart_subtotal}</span>-->";
		$output .=			"<div class='dropdown_widget dropdown_widget_cart'>";
		$output .=				"<div class='avia-arrow'></div>";
		$output .=				'<div class="widget_shopping_cart_content"></div>';
		$output .=			'</div>';
		$output .=		'</li>';
		$output .= '</ul>';

    Best regards,
    Mike

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