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?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

no2e’s picture

A 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?

pompetardo’s picture

I had the same problem and I just commented the '#prefix' => t('or').
Is the fastest thing until a better solution.

http://drupal.org/files/error_checkout.png

pompetardo’s picture

Version: 7.x-1.x-dev » 7.x-1.3
$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'),     // <=== That's it.
      );
pompetardo’s picture

FileSize
4.94 KB
rszrama’s picture

Version: 7.x-1.3 » 7.x-1.x-dev
Category: task » feature

I'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.

vasike’s picture

Status: Active » Needs review
FileSize
1.67 KB

here is a patch for adding a span wrapper for the "or" between checkout buttons.

rszrama’s picture

Status: Needs review » Needs work

I think we should look for a better class name if possible. Any feedback from the original posters?

netsensei’s picture

How 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.

vasike’s picture

i also can not see why this "or" (button "prefix") was added in the commerce checkout core.

rszrama’s picture

The 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.

quiptime’s picture

Please take a look at the Commerce Checkout Buttons module.

rszrama’s picture

Status: Needs work » Fixed

I'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

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.