Support

Home Forums Event Espresso Premium Change the way promotions are being displayed on the checkout page

Change the way promotions are being displayed on the checkout page

Posted: March 21, 2017 at 7:41 am


Elnino

March 21, 2017 at 7:41 am

Hi there,

I want to add this class to the tr tag that’s wrapping the discounts on the checkout page:

https://www.screencast.com/t/ngTrLXR0NrPh

By default the class is just “item”. I want it to be “item sub-item-row”. How is this possible?

Also in EED_Promotions.module.php, I’ve changed the function to this:

	public static function adjust_SPCO_line_item_display( $line_item_name, EE_Line_Item $line_item ) {
		// is this a promotion ?
		if ( $line_item->OBJ_type() === 'Promotion' ) {
			$line_item_name = "<span class=\"sub-item-row-bullet dashicons dashicons-arrow-right\"></span>".sprintf( __( 'Discount: %1$s', 'event_espresso' ), $line_item->name() );
		}
		return $line_item_name;
	}

How can I use such a change in my theme function.php? I know public function are hard to overwrite. Thanks for your help.


Josh

  • Support Staff

March 21, 2017 at 9:39 am

Hi there,

The approach you’re taking isn’t going to work and changing the markup doesn’t seem even necessary. May I ask what exactly is the end result that you are looking to accomplish with your change?


Elnino

March 21, 2017 at 10:13 am

Sure I just want to display the “Promotion code line” exactly like the other two items above which could be labeled: “discount details for the ticket”.


Josh

  • Support Staff

March 21, 2017 at 1:10 pm

I’m sorry I’m not clear on what your goal is. What is it about the display of the Promotion code line that you want to be like the other two items above in? They have the same text color, same indentation. What’s different now that you want to make the same?


Elnino

March 21, 2017 at 1:56 pm

Yeah you see them exactly the same because menawhile I’ve found this workaround and replace the following function:

	public static function adjust_SPCO_line_item_display( $line_item_name, EE_Line_Item $line_item ) {
		// is this a promotion ?
		if ( $line_item->OBJ_type() === 'Promotion' ) {
			$line_item_name = "<span class=\"sub-item-row-bullet dashicons dashicons-arrow-right\" style=\"font-size:0.9em;\"></span><span style=\"font-size:0.9em\">".sprintf( __( 'Discount: %1$s', 'event_espresso' ), $line_item->name() )."</span>";
		}
		return $line_item_name;
	}

so that the promotion line looks exactly the same as the two lines above. Only issue is I need to replace this function on each update. Would you know how to declare it in my theme function.php? Thanks.


Josh

  • Support Staff

March 21, 2017 at 3:54 pm

You have more than the issue of replacing the function on each update. If Event Espresso’s Promotions plugin gets an update, that method could get a few changes and you’ll end up with a few other issues.

Since this is purely a presentational change you could use CSS or even jQuery to accomplish this. For example, you can add something like this to your theme’s functions.php file:

function my_ee_change_table_row_promotions() {
  wp_add_inline_script( 
    'single_page_checkout',
    'jQuery( document ).ready(function($) {
      $("#spco-payment-info-table")
      .find("tr.item:last")
      .addClass("sub-item-row")
      .find("td.item_l:first")
      .addClass("sub-item")
      .prepend("<span class=\'sub-item-row-bullet dashicons dashicons-arrow-right\'></span>");
    } );'
  );
}
add_action( 'wp_enqueue_scripts', 'my_ee_change_table_row_promotions', 11 );


Elnino

March 22, 2017 at 2:56 am

That’s what I thought at first but I have no way of knowing dynamically if tr.item:last is actually a promotion line or a regular ticket line given that the CSS class applied to both is the same: “item”. Therefore I can’t use your function as it may apply this styling to “regular ticket line” and I want it only for Promotion line.
Unless you have another idea I’ll stick my core function tweak then.
Thanks for your help.


Josh

  • Support Staff

March 22, 2017 at 11:52 am

Your core function tweak is going to break things. You can use the contains selector to make sure you’re only targeting the row that has Promotions information:

https://api.jquery.com/contains-selector/


Elnino

March 22, 2017 at 3:17 pm

This works great indeed. Thanks for the tip. How can I load a JS file with the same function for the Order Confirmation/Invoice Page?


Josh

  • Support Staff

March 22, 2017 at 4:16 pm

wp_add_inline_script() can be used for inline scripts. If you want to load a whole file, then wp_enqueue_script() can be used.

e.g.

function your_conditional_script_loading() {
    if ( is_page('123') { // your confirmation page ID
        wp_enqueue_script('your-registered-script');
    } 
}
add_action('wp_enqueue_scripts', 'your_conditional_script_loading');

The support post ‘Change the way promotions are being displayed on the checkout page’ 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