Support

Home Forums Event Espresso Premium Display Event cart ICON only when not empty

Display Event cart ICON only when not empty

Posted: May 8, 2018 at 12:40 am


Smartycat1

May 8, 2018 at 12:40 am

How do I display an html element – icon – only when cart is not empty? There was a post with title ‘Display Event Cart only when not empty?’ but that was only for the cart widget. Is it possible to convert this code and target a CSS Id? I have created an Id of #cart-row

How would we do this for an icon or button for example? See my page smartycat.tarahollander.com
where I have a specific row and link icon to access the cart.

Thanks in advance.


Tony

  • Support Staff

May 8, 2018 at 3:01 am

Hi there,

for the above you can use something like:

function tw_ee_add_custom_styles() {

  $cart = EE_Registry::instance()->SSN->cart();

  if( $cart instanceof EE_Cart && $cart->all_ticket_quantity_count() == 0 ) {
      echo '<style type="text/css">#cart-row{display:none}';
  }

}
add_action( 'wp_head', 'tw_ee_add_custom_styles', 10 );

Add that to a custom functions plugin on your site, we have some documentation on creating one (if you haven’t done so already) here:

https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/


Smartycat1

May 8, 2018 at 8:16 am

Great I’ll try that today or tomorrow. Why do you always recommend a plugin for the functions? To date, I’ve been making all changes in my functions.php file. Is that okay? Stay tuned on whether I get it to work.


Tony

  • Support Staff

May 8, 2018 at 8:43 am

Ok, let’s say you’re using a distributed theme, it could be any, say twentyseventeen or a theme from the dreaded Theme Forest.

You now add all your custom functions to functions.php and get the site all customized to work how you want, great!

2 weeks later the theme author releases ver 1.2 of your theme with a new kitchen sink feature and you update the theme.

What actually happens is WordPress deletes the current version of the theme (yes including your functions.php file) and extracts the new version in its place. So even if the theme has a single change in a completely unrelated file to where you have edited the whole theme is replaced (same with plugins)… you’ve now lost all those customizations and that’s no fun at all!

The way around that is to use a child theme or a custom functions plugin, if you create a child theme it overrides the parent’s files, so you can customize the child theme all you like (copying over files from the parent) and also update the ‘parent’ theme without causing problems.

A plugin is pretty much the same, so if you aren’t using a child theme already it’s easier to set up. Meaning we could ask a bunch of question on if you are using a child theme and if you don’t know, then how to find out but then you if didn’t know it’s unlikely you’ll know how to edit the child theme correctly etc…. or I can advise you to use a plugin which just works if you follow the documentation 🙂

—-

So is using the themes functions.php file ok?

Sure it is, if you know about the above and manage the updates correctly, or your already using a custom theme specific to the site, or a distributed theme and you’ve created a child theme.

A custom functions plugin doesn’t care what theme you’re using, it’ll just work with whatever functions you place into it (unless hooking into theme specific functions but that’s outside the scope of this). Not only that but load order can come into play, functions placed in your theme’s functions.php file may ‘fire’ too late to be able to make some changes.


Smartycat1

May 11, 2018 at 9:15 am

Thanks for the care in the detailed reply. I am using a child theme I created from Beaver Builder as I’ve changed more than just the functions.php but also some template files too. Most interesting is your last sentence:
“but load order can come into play, functions placed in your theme’s functions.php file may ‘fire’ too late to be able to make some changes.”
Because I am having some trouble with some of the Event Espresso functionality and I wonder if some of this firing ‘too late’ may be the reason? I’ll post my new issues as new posts. Thanks.


Josh

  • Support Staff

May 11, 2018 at 12:45 pm

Generally speaking if you add code to a functions.php file within a theme and adding the code there makes no difference, then that’s a good indication the window of opportunity for the customization has come and gone by the the time the functions.php file loaded.

The key thing to remember is plugins load before themes. So for example let’s say you want to customize something that happens with feature x. If feature x executes its code very early in the request, your custom code will need to be added to a plugin so your custom code will be ready when feature x does its thing.


Smartycat1

May 11, 2018 at 3:07 pm

Okay, I tried this code, but it is not working. See screenshots here:
https://www.dropbox.com/s/miifczq8n6dpva3/Screen%20Shot%202018-05-11%20at%202.02.43%20PM.png?dl=0
https://www.dropbox.com/s/wp4qi962m9cy986/Screen%20Shot%202018-05-11%20at%202.02.31%20PM.png?dl=0

Is there a way to fix this? Thanks.
Is this an indication that I should switch to placing all of my EE functions in the functions.php file over into a plugin? Thanks.


Smartycat1

May 11, 2018 at 3:14 pm

Also, I placed the cart in two places in 2 different ways, but it is not resolved in either locations. I would prefer to have the cart just in the main nav menu (rather than in a top row above the icon header). <i class=”fa fa-shopping-cart” aria-hidden=”true”></i>


Josh

  • Support Staff

May 11, 2018 at 8:39 pm

The code in Tony’s example is missing a closing </style> tag, this:
echo '<style type="text/css">#cart-row{display:none}';
should be changed to:
echo '<style type="text/css">#cart-row{display:none}</style>';

Another approach to this that you could take would be to hide the cart element (#cart-row) with CSS in your stylesheet, then reverse the conditional so when the cart isn’t empty it sets a style to display block when the cart isn’t empty:


function tw_ee_add_custom_styles() {

  $cart = EE_Registry::instance()->SSN->cart();

  if( $cart instanceof EE_Cart && $cart->all_ticket_quantity_count() != 0 ) {
      echo '<style type="text/css">#cart-row{display:block}</style>';
  }

}
add_action( 'wp_head', 'tw_ee_add_custom_styles', 99 );

The support post ‘Display Event cart ICON only when not empty’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso