Tuesday, March 7, 2017

[SOLVED] Ubercart's Quirky Treatment of Checkout Buttons - A Translation Puzzle (D6U2)

It seems to me that Ubercart 2.x on Drupal 6.x (D6U2) has serious legacy UX issues. 

I recently spent hours trying to accomplish the translation of elements of the Checkout and Checkout Review screens. The buttons Review Order, Back and Submit Order needed different treatment to accomplish a complete translation exercise. Here's how I did it:

Via Code?

The code in modules/ubercart/uc_cart/uc_cart.pages.inc (around line 484) features the following, which I have added a couple of explanatory comments to, to help with comprehension:

 * Gives customers the option to finish checkout or go revise their information.
 * @see uc_cart_checkout_review_form_back()
 * @see uc_cart_checkout_review_form_submit()
 * @ingroup forms
function uc_cart_checkout_review_form() {
  // Set the session variable to pass the redirect check on the pageload.
  if (isset($_POST['op']) && $_POST['op'] == t('Back')) {
    $_SESSION['do_review'] = TRUE;

/* ----------------------------------------------------------------------- */
/*                                                                         */
/* GL    2017-03-07    This is the text that is placed on the LEFT         */
/*                     (Back) button on the order review form              */
/*                                                                         */
/* ----------------------------------------------------------------------- */
   $form['back'] = array(
    '#type' => 'submit',
    '#value' => t('Back'),
    '#submit' => array('uc_cart_checkout_review_form_back'),

/* ----------------------------------------------------------------------- */
/*                                                                         */
/* GL    2017-03-07    This is the text that is placed on the RIGHT        */
/*                     (Submit order) button on the order review form      */
/*                     The #value setting is ignored by Ubercart, and      */
/*                     Translate Interface as well                         */
/*                                                                         */
/*                     Go to:  /admin/store/settings/payment/edit/methods  */
/*                     Expand: PayPal Website Payments Standard settings   */
/*                     Open:   Order review submit button text             */
/*                                                                         */
/* ------------------------------------------------------------------------*/
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit order'),
    '#submit' => array('uc_cart_checkout_review_form_submit'),

  return $form;

Unfortunately, changing the value of Submit order in the above code has zero effect on the behavior of the Checkout Review Page (/cart/checkout/review). This somewhat inexplicable phenomena led to me having to mess around in the Ubercart 2.x code and administration interface for hours until I  figured out what was going on.

Via the Translate Interface?

The Translate Interface (/admin/build/translate/search) is a powerful tool when it comes to developing multi-lingual websites. This is where the text for the Review Order button located at the first Checkout screen (/cart/checkout) and the Back button located at the Checkout Review screen (/cart/checkout/review) were both made to dynamically change when different languages were selected.

So, I was able to translate Review Order and Back using the Translate Interface. But, no matter how I tried, the Submit Order button refused to translate, despite the fact that it seems to be a translate-able string. This is indicated by the t in the following code snippet:

'#value' => t('Submit order'),

As it turns out, the button text for Submit order cannot be translated using the Translate Interface function, even though the variable in question is bounded by the translate function (t), a real wild goose chase.

Via the Ubercart Store Administration Interface?

After a lot of set-test cycles, I turned to the Internet and this is where I found some clues.  In one posting, someone mentioned that the string for the Submit Order appeared in the Ubercart administration extension to the Drupal administration interface.  I eventually found the setting here:

Home » Dashboard » Store administration » Configuration » Payment settings » Payment Methods » PayPal Website Payment Standard Settings » Order review submit button text

This posting, or another temporally proximate to it, mentioned that the field was translatable, which is indicated by the field having the notation This is a multilingual variable appear beneath it. To translate these fields, the user interface must be switched to the target language (I clicked on the icon for the language I wanted to translate to from the English interface) and the fields magically changed to the target language - but NOT the string in question, which appeared in English! To change it, I needed to replace the English field contents with the necessary translation, and the final piece of the checkout process fell into place, and the checkout-related buttons that were so much trouble before now behave as desired.

No comments:

Post a Comment