|
John Fineberg
|
June 12, 2015 at 2:49 pm
I need a thorough review of my site-specific code to see if there is anything at all, big or small, that could — conceivably — be causing problems for people trying to sign up for classes.
Here it is, in its entirety:
<?php
/*
Plugin Name: Site plugin for aslan-editing-plugin
Description: Site specific code for cpr-twincities.com
*/
/* Begin Adding Functions Below This Line; Do not include an opening PHP tag as this sample code already includes one! */
//* Change messaging for ticket to registration
function ee_change_ticket_messaging_registration( $translated, $original, $domain ) {
$strings = array(
‘View Details’ => ‘Begin Registration’,
‘Proceed to Payment Options’ => ‘Choose Your Payment Option’,
‘Available Tickets’ => ‘Available Registrations’,
‘Ticket Details’ => ‘Registration Details’,
‘Event’ => ‘Class’,
‘Events’ => ‘Classes’,
‘Upcoming Events’ => ‘Upcoming Classes’,
‘Event Location’ => ‘Class Location’,
‘Ticket’ => ‘Registration’,
‘Ticket’ => ‘Registration’,
‘Tickets’ => ‘Registrations’,
‘This ticket is required and must be purchased.’ => ‘Class registration is required and must be purchased.’,
‘Please note that a maximum number of %d tickets can be purchased for this event per order.’ => ‘Please note that a maximum number of %d registrations can be purchased for this class per order.’,
‘You need to select a ticket quantity before you can proceed.’ => ‘You need to select a quantity before you can proceed.’,
‘No tickets were added for the event.’ => ‘No registrations were added for the class.’,
‘Ticket Name and Description’ => ‘Class and Description’,
‘The following checkboxes allow you to use the above information for only the selected additional tickets/attendees.’ => ‘The following checkboxes allow you to use the above information for only the selected additional registrants/attendees.’,
‘In order to process your registration, we ask you to provide the following information.%1$sPlease note that all fields marked with an asterisk (%2$s) are required.’ => ‘In order to process your registration, we ask you to provide the following information. Please note that, although all fields marked with an asterisk (%2$s) are required, if you have only one phone, type N/A (for not applicable) into either the Home Phone or the Cell Phone field.’,
);
if ( isset( $strings[$original] ) ) {
$translations = get_translations_for_domain( $domain );
$translated = $translations->translate( $strings[$original] );
}
return $translated;
}
add_filter( ‘gettext’, ‘ee_change_ticket_messaging_registration’, 10, 3 );
//* Additional changes to messaging for ticket to registration
add_action( ‘FHEE__ticket_selector_chart_template__ticket_details_price_breakdown_heading’, ‘ee_additional_change_ticket_messaging_registration_a’ );
function ee_additional_change_ticket_messaging_registration_a() {
return ‘Registration Price Breakdown’;
}
//* Additional changes to messaging for ticket to registration
add_action( ‘FHEE__ticket_selector_chart_template__ticket_details_event_access_message’, ‘ee_additional_change_ticket_messaging_registration_b’ );
function ee_additional_change_ticket_messaging_registration_b() {
return ‘This registration allows access to the following class dates and times.’;
}
//* Additional changes to messaging for ticket to registration
add_action( ‘FHEE__registration_page_attendee_information__attendee_info_not_required_pg’, ‘ee_additional_change_ticket_messaging_registration_c’ );
function ee_additional_change_ticket_messaging_registration_c() {
return ‘This registration type does not require any information for additional attendees, so attendee #1\’s information will be used for registration purposes.’;
}
//* Additional changes to messaging for ticket to registration
add_action( ‘FHEE__registration_page_attendee_information__auto_copy_attendee_pg’, ‘ee_additional_change_ticket_messaging_registration_d’ );
function ee_additional_change_ticket_messaging_registration_d() {
return ‘The above information will be used for any additional registrants/attendees.’;
}
//* Additional changes to messaging for ticket to registration
add_action( ‘FHEE__ticket_selector_chart_template__ticket_details_total_price’, ‘ee_additional_change_ticket_messaging_registration_e’ );
function ee_additional_change_ticket_messaging_registration_e() {
return ‘Total Price’;
}
/* Stop Adding Functions */
|
|
Josh
|
June 12, 2015 at 3:31 pm
Hi John,
A thorough review of your code reveals that it will result in changing the phrasing, wording, or verbiage of some of the text that appears on Event Espresso pages. Most of the changes have to do with changing phrases to say “classes” where they would normally say “events” and “registration” where it normally says “tickets”.
Will changing the wording of some phrases that appear the registration pages cause problems for people trying to sign up for classes? Absolutely not. The changes you made will only help clarify things for your intended use case of Event Espresso because you’re not using Event Espresso to sell tickets to events, you’re using it to sell registrations for classes. I’d say it was a job well done, nice work John.
It may help to reach out to some of the folks that register for your classes and ask them if they’ve had any trouble with registering.
|
|
John Fineberg
|
June 12, 2015 at 3:43 pm
Thanks, Josh. The structure of the code was set up by EE staff, and I just tried to follow their example, changing words as necessary for my specific audience.
I’m trying to leave no stone unturned in my search for what’s caused my business to nose-dive since upgrading to EE4 last December. What other stones would you recommend that I turn over and have a look-see?
One thing I have been told by those I’ve asked to test out the operation is that the “Proceed to Payment Options” is so placed so far down the page that they don’t see it — unless they consciously go looking for it. So I could see some people getting frustrated because they can’t see what’s left to do, giving up on the registration, or thinking that they’re done and that there’s nothing left to do. I’d love to see that button raised to a more obvious position.
|
|
Josh
|
June 12, 2015 at 4:03 pm
Hi John,
Is this the button that you’d love to see raised to a more obvious position?
https://www.evernote.com/shard/s4/sh/366fb654-d6d1-4933-b79e-a6200306aacd/ce0c7709e397833b9cd9be3540568f6b
I want to make sure we’re talking about the same thing here. While I can advise not to raise it because studies show submit buttons should appear after a form, it may help to align them to the left side. Another thing you can do is use a bit of custom CSS to make the button bigger and more colorful. It will be easier to see that way.
Here is some example CSS that I can share with you that you’re welcome to test out and tweak to fit to your needs. It can be added to your custom stylesheet and it will align the recaptcha and next step button to the left and change the color of the button:
.spco-whats-next-buttons {
text-align: left;
}
#espresso-recaptcha-dv {
float: left;
}
.spco-whats-next-buttons input {
color: red;
border-width: 2px;
border-color: red;
padding: 1em;
background: #fff;
}
|
|
John Fineberg
|
June 12, 2015 at 7:20 pm
Looks like progress, Josh. Is there code to make it look more like a traditional, rounded-corner button? The same size as you’ve made it, more or less, just more of a button than a rectangle. And what would it take to make the page just previous to it in the registration process look the same (except with different words, as in “Register Now,” as it currently reads)?
|
|
Josh
|
June 13, 2015 at 7:18 am
Hi John,
You can make the button more round, and apply the same button styles to the Register Now button by modifying the last CSS rule I shared with you. Here’s the modification:
.spco-whats-next-buttons input,
.ticket-selector-submit-btn {
color: red;
border-width: 2px;
border-color: red;
padding: 1em;
background: #fff;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
cursor: pointer;
}
|
|
John Fineberg
|
June 13, 2015 at 8:45 am
Outstanding, Josh!
I can appreciate the uniformity of the rectangle you originally used, as it matches all of the fields on the page. But the rounded corners make the buttons stand apart and call attention to the fact that you need to click on it. I’m always operating from the perspective of hurried and/or not very computer-experienced people, and the “Don’t make me think” web design point-of-view. This is truly an improvement in that regard.
One very curious thing happened when transitioning from the rectangle button to the rounded button. With the rectangle, the pointer cursor never changed into a hand cursor when hovering over it, while it does change when hovering over the the rounded corner button. Isn’t that odd? So, in the transition from one version to the next, it’s now even more obvious that you need to “click here.”
Thanks so much for your help!
|
|
Josh
|
June 13, 2015 at 9:18 am
Hi John,
Re:
One very curious thing happened when transitioning from the rectangle button to the rounded button. With the rectangle, the pointer cursor never changed into a hand cursor when hovering over it, while it does change when hovering over the the rounded corner button. Isn’t that odd?
It’s not due to the corners being rounded. The reason that the cursor changes to a hand pointer now is because I added cursor: pointer; to the CSS styles I shared with you.
|
|
John Fineberg
|
June 13, 2015 at 10:00 am
Ah, not curious at all, then. Very intentional … and appreciated.
What would it take to make it look like the “SUBMIT” button on this Event Espresso forum page, with a gradated 3-D-ish look, except in red, rather than blue? Is that simple CSS code, too?
|
|
Josh
|
June 13, 2015 at 10:26 am
It’s CSS code, but not super simple. Here’s our button code, you’re more than welcome to re-use and adapt it:
background: -webkit-gradient(linear, 0% 50%, 0% 31%, from(#25A2F1), to(#3DB8FE), color-stop(.9,#3DB8FE));
background: -moz-linear-gradient(24% 21% 270deg,#3DB8FE, #3DB8FE, #25A2F1 50%);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4);
box-shadow: 0 1px 1px rgba(0,0,0,.4);
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
border: 1px solid #25A2F1;
To change the above from blue to red, you swap in the hex code (#123456) values for variations of red. Along with that, you’ll need to make sure the button text color is set to white instead of red (otherwise you’ll end up with red text on a red background and that’s not readable).
Here’s a link to a handy tool that you can use to work out the variations of red and get the corresponding hex codes:
http://www.0to255.com/
|
|
John Fineberg
|
June 13, 2015 at 11:09 am
Blue is okay, too. At least for now.
Not sure if I have this code placed right, as all it did was change the outside line to blue, but inside the button remained white:
.spco-whats-next-buttons {
text-align: left;
}
#espresso-recaptcha-dv {
float: left;
}
.spco-whats-next-buttons input,
.ticket-selector-submit-btn {
color: red;
border-width: 2px;
border-color: red;
padding: 1em;
background: #fff;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
cursor: pointer;
background: -webkit-gradient(linear, 0% 50%, 0% 31%, from(#25A2F1), to(#3DB8FE), color-stop(.9,#3DB8FE));
background: -moz-linear-gradient(24% 21% 270deg,#3DB8FE, #3DB8FE, #25A2F1 50%);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4);
box-shadow: 0 1px 1px rgba(0,0,0,.4);
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
border: 1px solid #25A2F1;
}
|
|
Josh
|
June 15, 2015 at 8:19 am
Hi John,
You missed a few changes and left the backticks, which is preventing the code from working. I made some notes on a screenshot of your code with some suggestions on how to fix:
https://www.evernote.com/shard/s4/sh/1280888c-45dc-45d2-8ac6-f98ee8545d8a/748b008f867ca6ba0030264d4415a136
|
|
John Fineberg
|
June 16, 2015 at 9:57 am
Josh, I like how it looks now, though I failed at making the button red (ff0000) and the letters white. I can’t figure out what I’m doing wrong, but if I could end up with a blue button (to stand out from all of the red on the page) and white letters, I’d be very happy. In fact, the “SUBMIT” button I’m just about to press below on this forum would be fabulous, if I could achieve that size, that shape and that color combination.
Here’s what I currently have:
.spco-whats-next-buttons input,
.ticket-selector-submit-btn {
color: fff;
border-width: 2px;
border-color: ff0000;
padding: 1em;
background: #ffffff;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
cursor: pointer;
background: -webkit-gradient(linear, 0% 50%, 0% 31%, from(#25A2F1), to(#3DB8FE), color-stop(.9,#3DB8FE));
background: -moz-linear-gradient(24% 21% 270deg,#3DB8FE, #3DB8FE, #25A2F1 50%);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4);
box-shadow: 0 1px 1px rgba(0,0,0,.4);
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
border: 1px solid #25A2F1;
}
|
|
Josh
|
June 16, 2015 at 12:23 pm
Hi John,
I spot an error in your code:
color: fff;
is missing the #, it needs to read like this:
color: #fff;
That will make it so the text is white.
You can make the corners of the button less round (like here on ee.com) by changing your code where it says:
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
you change it to this:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
|
|
John Fineberg
|
June 16, 2015 at 12:41 pm
That’s outstanding! Very clear and looks great with other patches of blue elsewhere on the page. Thanks very much for guiding me through this, Josh!!!
|
|
John Fineberg
|
June 18, 2015 at 8:53 am
Josh, I called PayPal yesterday to ask them about testing their part of class registration transactions and was informed by the rep that all she could see of the button was a blue line, but no color and no words within the outline. She was using Internet Explorer. I’ve tested it and the new button looks great in Safari, Chrome and Firefox. But, as a Mac user, I don’t have access to IE, which is a PC-only browser. My wife just tried an experiment from work, also using IE, and got the same result. (She sent me a screen shot, so now I can see it with my own eyes.) Any suggestions for fixing this, without reverting back to the original button?
|
|
John Fineberg
|
June 18, 2015 at 9:28 am
Followup: My wife not only got this problem in her Internet Explorer, she also encountered it in her Firefox for PC (where I saw it correctly in my Firefox for Mac). Curious, I also see in her screenshots that the page title (as in “CPR/AED for the general public”) is turning to all gray, with no words: http://www.cpr-twincities.com/upcoming/cpr/. Now I’m guessing that that’s a theme problem, not an EE problem. But, back to the button, could your CSS code be somehow conflicting with the theme parameters?
|
|
Josh
|
June 18, 2015 at 10:08 am
It’s possible. One thing to keep in mind is we made the CSS for our theme. You’re more than welcome to borrow our CSS and use it on your theme, but it really needs to be tested to make sure it works for all browsers.
Looking over your CSS I can spot another problem that you should fix: You have the background still set to #fffff (or white). That really should be changed to blue. If you look at our css, it has this style rule:
background-color: #29aac0;
where your’s has this:
background: #ffffff;
So the reason you’re seeing a different button color on some browsers is because webkit browsers like Safari and Chrome will pick up the background: -webkit-gradient(linear, 0% 50%, 0% 31%, from(#25A2F1), to(#3DB8FE), color-stop(.9,#3DB8FE)); rule, but IE will ignore it.
|
|
John Fineberg
|
June 18, 2015 at 10:40 am
So, to be clear, should I also change background to background-color?
|
|
Josh
|
June 18, 2015 at 11:34 am
You can. Since background is the CSS shorthand for all background values it will work for setting a background color value, but background-color will only set the background color value.
https://developer.mozilla.org/en-US/docs/Web/CSS/background
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
|
