Adjusting the look for Shopping Cart and steps 1 thru 3 of the Standard Checkout

[dbltoe]

Not a bug, but an omission in the checkout files for anyone still using the three-step checkout built in to 1.5.6c. It may be there for earlier versions as well, but we have not tested it.

Scenario, using responsive_classic clone and standard checkout steps 1 thru 3.

The Continue button at the bottom of each of the three pages (buttonRow forward) is associated with an ID on page 2 (#paymentSubmit) and a class on page 3 (.buttonRow.forward.confirm-order) of checkout. It has no associated ID on page 1 which makes trying to modify the button with CSS also effect every other buttonRow throughout the cart.

Suggested changes are:

In includes/templates/YOUR_TEMPLATE/templates/tpl_checkout_shipping_default.php on line 142 change

<div class="buttonRow forward"><?php echo zen_image_submit(BUTTON_IMAGE_CONTINUE_CHECKOUT, BUTTON_CONTINUE_ALT); ?></div>

to

<div class="buttonRow forward"  id="setShipping"><?php echo zen_image_submit(BUTTON_IMAGE_CONTINUE_CHECKOUT, BUTTON_CONTINUE_ALT); ?></div>

You could also take the time to modify the includes/templates/YOUR_TEMPLATE/templates/tpl_ajax_checkout_confirmation_default.php to change

<div class="buttonRow forward confirm-order"><?php echo zen_image_submit(BUTTON_IMAGE_CONFIRM_ORDER, BUTTON_CONFIRM_ORDER_ALT, 'name="btn_submit" id="btn_submit"') ;?></div>

to

<div class="buttonRow forward" id="confirmOrder"><?php echo zen_image_submit(BUTTON_IMAGE_CONFIRM_ORDER, BUTTON_CONFIRM_ORDER_ALT, 'name="btn_submit" id="btn_submit"') ;?></div>

These two changes would provide consistency in controlling the look of the Continue buttons on each of the three checkout pages.

NOTE 1: Changing the id to #confirmOrder in the checkout confirmation file would mean that it MAY need to be added to the CSS for control. It made no difference in our template when we changed the file. Had it made a difference, we use and recommend stylesheet_zcustom.css for our changes to easily find them in the future. We did not use the same settings for this button as it "looks" better where it is.

NOTE 2: The same principle can be applied to the Checkout button on the shopping cart page. In includes/YOUR_TEMPLATE/templates/tpl_shopping_cart_default.php. Find

<!--bof shopping cart buttons-->
<div class="buttonRow forward"><?php echo '<a href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) . '</a>'; ?></div>

and change to

<!--bof shopping cart buttons--><div class="buttonRow forward" id="checkoutContinue"><?php echo '<a href="' . zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHECKOUT, BUTTON_CHECKOUT_ALT) . '</a>'; ?></div>

This will allow all the Checkout/Continue buttons from the Shopping Cart thru Page 3 of Checkout to be individually controlled. Again, tagging the Checkout button with the #checkoutContinue ID did not change the "look" on our template but will allow individual changes in the future.

All of this makes for much better control of the pages that confuse customers the most. These buttons and the instructions for them are spread out differently on each page. Consistency assists the customer in navigation.

[RixStix]

My update frustration is at its limit for today.... db collation issues has me fearing a complete redo from scratch. I hope to not abandon the 156c update like I did 156a and 156b after a week's frustration. It helps to tell people that someone fixed something that wasn't broken or changed functionality from previous versions.

In includes/templates/YOUR_TEMPLATE/templates/tpl_checkout_shipping_default.php on line 142 change

do you mean includes/templates/template_default/templates/tpl_checkout_shipping_default.php on line 133 because the file only has 137 lines or a different filename?

I don't see that file in .../responsive_classic or .../MYCLONE_responsive_classic

[dbltoe]

Apologies,

You will need to find the correct line. Other mods (multiship) have extended the number of lines in the file.

The lines surrounding the fix are

</fieldset> 
<div class="buttonRow forward"  id="setShipping"><?php echo zen_image_submit(BUTTON_IMAGE_CONTINUE_CHECKOUT, BUTTON_CONTINUE_ALT); ?></div>
<div class="buttonRow back"><?php echo '<strong>' . TITLE_CONTINUE_CHECKOUT_PROCEDURE . '</strong><br />' . TEXT_CONTINUE_CHECKOUT_PROCEDURE; ?></div>