Support

Home Forums Event Espresso Premium change layout of mini cart widget

change layout of mini cart widget

Posted: April 10, 2019 at 3:56 am


lhammond

April 10, 2019 at 3:56 am

I see in this post how to specify a custom template for the mini cart widget, but inside the mini cart templates it simply calls the variable $event_cart – and that’s the part that actually contains the content I want to change.

I don’t see an easy way to do it with CSS, because there are two table columns that apply the class “jst-right” but I only want to hide the first one. Basically, I want a tiny version of the mini cart, that displays only the first x characters of the event title, the qty and the total price for each item on a single line. How can I accomplish this?

I have created a new widget_minicart_tiny.template.php file in my theme, and updated my functions.php file to add that as a template option for the widget, but I’m struggling as to how to finish customizing the template. Thanks!


Tony

  • Support Staff

April 12, 2019 at 9:58 am

Hi there,

The cart uses a ‘Line item display strategy’ to build out the content of ‘event_cart’ using the line items and you can see that HERE.

So to completely customize the output, you’d need to register your own display strategy and set the widget to use it, you can see an example of one here.

Or, completely ignore $event_cart and generate your own output from scratch within your custom template using the grand totle line item object passed to the cart currently:

EE_Registry::instance()->CART->get_grand_total()

Other than the above, you may be able to get most of what your looking for using CSS, do you have an example of the output you want? You could use Chrome dev tools to remove the elements you don’t want from the page, then screenshot that and add it here for us to view.


lhammond

April 18, 2019 at 6:08 am

I might be able to use the list layout version if I can hide the ticket type, and just display the event title and the qty and price for each li item. For example, if my mini-cart list looked like this:

> My Event Title
     2 x $12.00 = $24.00
> My Other Event Title
     1 x $10.00 = $10.00
         > Total: $34.00

But when I look at how the HTML and divs are defined, I don’t see an obvious way to use CSS to make it work. Can you help?


Josh

  • Support Staff

April 18, 2019 at 9:45 am

Hi,

You can hide the ticket type with the following CSS:

.mini-cart-ul li[id^="event-cart-ticket-list"]{
  text-indent: -9999px;
}

The support post ‘change layout of mini cart widget’ 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.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  Josh 2 months ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!