One-Page Checkout [Support Thread]

[lat9]

Ok I see the Github instructions do say that. It was just that the Change History tab says

Thanks, I'll get the docs updated the next go-round.

[JboyJW]

Is there a demo site or screenshots of what the One-Page Checkout looks like? We're upgrading to 1.5.6 and would rather not figure out how get the old COWOA plugin to work with 1.5.6... So I'd love to sell my client on using this One-Page Checkout, but I need to give them a feel of what the updated layout will look like. Thanks.

[dbltoe]

The demo site is located at https://vinosdefrutastropicalesDOTcom/demo. You can guest checkout some item to get a quick view.
Remember that, as in all things open source, you can make it "look" any way you want.

[lat9]

The demo site is located at https://vinosdefrutastropicalesDOTcom/demo. You can guest checkout some item to get a quick view.
Remember that, as in all things open source, you can make it "look" any way you want.

Additional documentation, over-and-above that in the readme, is also online at the OPC GitHub repository: https://github.com/lat9/one_page_checkout/.

Just click the links associated with "Storefront Considerations" and/or "Admin Considerations" and follow the included links for additional documentation and screenshots.

[JboyJW]

Perfect, thank you both. I had clicked on the Storefront Considerations page but didn't click further, didn't realize there were screenshots there. :) Cheers.

[lat9]

I've just submitted v2.1.5 of One-Page Checkout to the Zen Cart moderators for review and will post back here when it's available for download.

This release contains changes associated with the following GitHub issues:

#213: Use 'TEXT_OPTION_DIVIDER' when displaying the shopping-cart.
#214: Correct 'zen_get_tax_locations' override when guest's billing=shipping.
#215: Use 'zen_is_logged' in when checking customer login status on the checkout_one_confirmation page.
#216: Enable integration with Gateway Processing Services (gps) payment method.

[lat9]

I've just submitted v2.1.5 of One-Page Checkout to the Zen Cart moderators for review and will post back here when it's available for download.

This release contains changes associated with the following GitHub issues:

#213: Use 'TEXT_OPTION_DIVIDER' when displaying the shopping-cart.
#214: Correct 'zen_get_tax_locations' override when guest's billing=shipping.
#215: Use 'zen_is_logged' in when checking customer login status on the checkout_one_confirmation page.
#216: Enable integration with Gateway Processing Services (gps) payment method.

Now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2095

[balihr]

Interesting "bug" with Guest Checkout - when using Chrome autofill, you just enter your email address and Chrome fills everything else, allowing Billing Address to become visible at the same time as Contact Information. If you click the "Save" button for the billing address, billing address gets saved, but contact information doesn't and is reset to blank. Extremely confusing.

My workaround was to disable the billing "save" button if the contact "save" is visible by modifying the saveBilling() function:
includes/modules/pages/checkout_one/jquery.checkout_one.js

if (jQuery('#checkoutOneGuestInfo .opc-buttons').is(":visible")) {
            alert('Please save your Contact Information first. Thank you!');
            jQuery('#checkoutOneGuestInfo .opc-buttons #opc-guest-save .cssButton').css({ border: "2px solid red" });
            jQuery("body,html").animate(
                {
                  scrollTop: $("#checkoutOneGuestInfo .opc-buttons #opc-guest-save .cssButton").offset().top
                },
                800 //speed
              );
            
        } else {
            saveAddressValues('bill', '#checkoutOneBillto');
        }

This is a bull in a china shop type of solution, and definitely still confusing because it clears the billing details after saving contact details, but it's better than nothing - at least there was a warning indicating you need to save contact details first...

Would there happen to be a Cindy-style (beautiful) solution?

[lat9]

@balihr, try this. Edit your copy of /includes/classes/OnePageCheckout.php, finding the formatAddressElement method and apply the following changes:

    public function formatAddressElement($which, $field_name, $field_value, $field_text, $db_table, $db_fieldname, $min_length, $placeholder)
    {
        $this->inputPreCheck($which);
        
        $field_id = str_replace('_', '-', $field_name) . "-$which";
        $field_name .= "[$which]";
        $field_len = zen_set_field_length($db_table, $db_fieldname, '40');
        $field_required = (((int)$min_length) > 0) ? ' required' : '';
        $autocomplete = ($this->guestIsActive && empty($this->customerInfoOK)) ? 'autocomplete="off"' : '';
        
        return
            '<label class="inputLabel" for="' . $field_id . '">' . $field_text . '</label>' . PHP_EOL .
            zen_draw_input_field($field_name, $field_value, "$field_len id=\"$field_id\" placeholder=\"$placeholder\" $field_required $autocomplete") . PHP_EOL .
            '<br class="clearBoth" />';
    }

Don't forget the space between $field_required and $autocomplete!

[balihr]

Thank you!

Close, but... This disables autofill on the billing address, forcing the customer to type it, which is quite bad for those who are used to using autofill. It does work on Contact Information, you save it but then all other billing fields need to be populated manually.
BTW, autocomplete="off" is ignored by Chrome (see SO) so I put autocomplete="new-password"

If you manually fill in the form and jump inputs using Tab key, you can get to billing address and type in your name and remove the overlay.

I think the perfect scenario would be to keep the overlay active until Contact Information is saved. Is that possible?