Giter VIP home page Giter VIP logo

requestautocomplete-magento-extension's Introduction

What

This is an extension to integrate requestAutocomplete into Magento's checkout flow.

To enable this extension, copy all directories into the root of your Magento installation.

You can install with modman or via these shell commands if you're on a POSIX system:

git clone https://github.com/chromium/requestautocomplete-magento-extension.git /tmp/rac-magento-ext/
mv -i /tmp/rac-magento-ext/ $MAGENTO_DIR && rm -rf /tmp/rac-magento-ext/

How

Integrating into the existing Magento checkout flow

To enable the requestAutocomplete enhanced checkout flow on your store, you need to add this JavaScript to your one page checkout:

requestAutocomplete.enable();

This should automatically integrate requestAutocomplete into your checkout flow. Your shipping, billing, and payment checkout steps should now be hidden, effectively replaced by the requestAutocomplete dialog.

When the user selects "Checkout as guest" and clicks "Continue", a native browser UI should show asking for their payment/shipping details.

Creating your own custom requestAutocomplete flow

If you'd like to trigger requestAutocomplete in a custom way (e.g., directly from the cart page when the user presses "Checkout Now"). The code might look like this:

function success(result) {
  // Success! The user gave us their payment info in the form of:
  //   result = {
  //     'cc-name': 'Big Spenda',
  //     'billing postal-code': '90210',
  //     'shipping city': 'Hollywood',
  //     ... and many more ...
  //   }
}

function failure(reason) {
  // Oh no! The user cancelled the requestAutocomplete UI or it wasn't
  // shown in the right way. The reason parameter can be:
  //   'cancel' => user cancelled
  //   'disabled' => see the development console for more details
  //   'unsupported' => the current browser doesn't support requestAutocomplete
}

var types = [
  'cc-csc',
  'cc-name',
  'cc-number'
];

requestAutocomplete.run(success, failure, types);

Docs

boolean requestAutocomplete.enable()

Integrates requestAutocomplete into the Magento checkout flow if supported. Returns a boolean indicating whether the Magento requestAutocomplete flow is now enabled. Returns false if the Magento version isn't supported or if the user's browser doesn't have requestAutocomplete.


requestAutocomplete.run(success, failure, types)

A way to manually trigger requestAutocomplete for customized checkout flows.

Parameter Type Description
success function(Object) Callback for successful requestAutocomplete runs. Receives a result map of autocomplete type => value.
failure function(string) An optional callback for requestAutocomplete` errors. Receives a string reason for the failure (e.g., "cancel").
types !Array. A list of [autocomplete] types to request.

boolean requestAutocomplete.isBrowserSupported()

Whether the current browser supports requestAutocomplete.


boolean requestAutocomplete.isMagentoSupported()

Whether the current Magento environment supports the requestAutocomplete enhanced checkout flow. This depends on whether parts of Magento's JavaScript API are present on the checkout page.


requestAutocomplete.disable()

Disables the requestAutocomplete Magento flow and unhides all checkout sections. Does not hide any currently showing requestAutocomplete UI.

requestautocomplete-magento-extension's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

requestautocomplete-magento-extension's Issues

Script error on some magento sites with customized flows

We should null check every time we do $('id-name'). Some folks are getting:

Uncaught TypeError: Cannot read property 'contains' of null
checkout.js:407window.requestAutocomplete.MagentoFlow.onClick_
checkout.js:407(anonymous function)
prototype.js:391

Incorporate transaction amount/currency

We should automatically pass along transaction amount/currency in the supported Magento flow and allow users to pass this info to requestAutocomplete.run().

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.