In commerce_checkout_form():
Line 185:
$form['buttons']['cancel'] = array(
'#type' => 'submit',
'#value' => t('Cancel'),
'#attributes' => array('class' => array('checkout-cancel')),
'#submit' => array('commerce_checkout_form_cancel_submit'),
'#limit_validation_errors' => array(),
'#prefix' => t('or'),
);
And again around line 195.
The output ends up being something along the lines of:
<div class="fieldset-wrapper">
<input id="edit-continue" class="checkout-continue form-submit checkout-processed" type="submit" value="Continue to next step" name="op">
or
<input id="edit-back" class="checkout-back form-submit" type="submit" value="Go back" name="op">
</div>
The use of #prefix to store a string is a posing problems for themers. Try to float the buttons to the right or toy around with position absolute: there's always the 'or' string that doesn't contain enough mark up. Then there's the case if clients actually 'do' want the 'or' between the two buttons. In the latest commerce project, I did receive a ticket to remove the 'or'.
I ended up doing this in a custom module:
function tic_form_alter(&$form, &$form_state, $form_id) {
switch ($form_id) {
case 'commerce_checkout_form_checkout' :
case 'commerce_checkout_form_review' :
foreach (element_children($form['buttons']) as $child) {
if (isset($form['buttons'][$child]['#prefix'])) {
unset($form['buttons'][$child]['#prefix']);
}
}
}
}
I would suggest either
1. Add extra markup (a span?) around the or in #prefix
2. Remove the 'or' all together.
Opinions?
Comment | File | Size | Author |
---|---|---|---|
#6 | markup_between_checkout_buttons-1363508-6.patch | 1.67 KB | vasike |
#4 | error_checkout.png | 4.94 KB | pompetardo |
Comments
Comment #1
no2e CreditAttribution: no2e commentedA
span
around it would be useful.I would like to see this configurable (whether or not to show it at all), but I have no idea what would be the best way. Maybe a new option at
/admin/commerce/config/checkout
?Comment #2
pompetardo CreditAttribution: pompetardo commentedI had the same problem and I just commented the '#prefix' => t('or').
Is the fastest thing until a better solution.
Comment #3
pompetardo CreditAttribution: pompetardo commentedComment #4
pompetardo CreditAttribution: pompetardo commentedComment #5
rszrama CreditAttribution: rszrama commentedI'm happy to put a span or inline div around this or if someone wants to provide the markup with a screenshot to make sure it gets implemented properly for themers. Remember, though, that this is a form that you can use hook_form_alter() on instead of relying on hacking the main module code.
Comment #6
vasikehere is a patch for adding a span wrapper for the "or" between checkout buttons.
Comment #7
rszrama CreditAttribution: rszrama commentedI think we should look for a better class name if possible. Any feedback from the original posters?
Comment #8
netsensei CreditAttribution: netsensei commentedHow about 'action-operator' or just 'operator'?
Then again, I'm wondering if we can't omit the 'or' completely? There are loads of use cases on the web where an action and a cancel button are placed next to each other without an operator between them. From an interactive design point of view, the architecture of the checkout page is quite context dependent (i.e. toy store vs. software licenses vs. magazine subscriptions vs. ....) I've found myself adapting the default checkout page to something completely different more often then not. I haven't met any designs or wireframes where the 'or' operator is included yet.
Comment #9
vasikei also can not see why this "or" (button "prefix") was added in the commerce checkout core.
Comment #10
rszrama CreditAttribution: rszrama commentedThe button text and "or" were directly influenced by Shopify, a fairly large and well-known eCommerce provider (at least in the U.S.). It's there because it makes the options read like a sentence, but there's no problem with disabling it, especially if it's awkward in other languages. We certainly can't remove it in 1.x, but it could be something to revisit in 2.x.
I'll think about operator classes.
Comment #11
quiptime CreditAttribution: quiptime commentedPlease take a look at the Commerce Checkout Buttons module.
Comment #12
rszrama CreditAttribution: rszrama commentedI've committed this using the class "button-operator". Sites that don't want this could also simply theme it out using a form alter hook in the theme's template.php, but now there's a class that can be used to hide it as well.
Commit: http://drupalcode.org/project/commerce.git/commitdiff/2be4798