Optimized One-Page Checkout\uff1ahttps:\/\/support.bigcommerce.com\/s\/article\/Optimized-Single-Page-Checkout<\/a> <\/p>\n Optimized One-Page Checkout is BigCommerce\u2019s default checkout and order confirmation page.<\/p>\n The Storefront Checkout API surfaces the business logic of the backend ecommerce application \u2014 retrieving customer information, fetching available shipping methods, and calculating discounts and sales tax.<\/p>\n<\/blockquote>\n Advanced Settings (\u9ad8\u7ea7\u8bbe\u7f6e) \u203a Checkout (\u7ed3\u7b97) \u203a select Optimized one-page checkout (Recommended)<\/p>\n Form\u8868\u5355\u7f16\u8f91: https:\/\/support.bigcommerce.com\/s\/article\/Editing-Form-Fields#advanced-settings<\/a><\/p>\n \u5e97\u94fa\u914d\u7f6e: https:\/\/developer.bigcommerce.com\/stencil-docs\/store-design\/configuring-store-design<\/a><\/p>\n Stencil templates: https:\/\/developer.bigcommerce.com\/stencil-docs\/template-files\/customize-stencil-checkout\/multi-language-checkout#multi_browsing<\/a><\/p>\n optimized-checkout.scss: https:\/\/developer.bigcommerce.com\/stencil-docs\/template-files\/customize-stencil-checkout\/optimized-one-page-checkout<\/a><\/p>\n Script Manager(\u6ce8\u5165\u811a\u672c): https:\/\/support.bigcommerce.com\/s\/article\/Using-Script-Manager<\/a> BigCommerce surfaces APIs that cover the full checkout process end-to-end, which means that you can build a fully custom checkout either on top of the native storefront, or on a remote platform.<\/p>\n Headless means that the front-end presentation layer has been decoupled from the backend platform that powers it<\/p>\n Checkout JS SDK: https:\/\/github.com\/bigcommerce\/checkout-sdk-js<\/a> Checkout pages built with the SDK are considered headless because you\u2019re replacing the native presentation layer with one that\u2019s custom-built on another framework. The Checkout SDK can also provide a checkout solution for remote headless storefronts, if you redirect back to the BigCommerce domain for the checkout step.<\/p>\n Embedded checkout is a great solution for a remote headless storefront, because shoppers can complete their purchase in-context, without being redirected to a BigCommerce domain.<\/p>\n BigCommerce for WordPress: https:\/\/github.com\/bigcommerce\/bigcommerce-for-wordpress<\/a><\/p>\n
\nCustomizing Checkout: https:\/\/developer.bigcommerce.com\/stencil-docs\/customizing-checkout<\/a>
\nInstalling a Custom Checkout\uff1ahttps:\/\/developer.bigcommerce.com\/stencil-docs\/customizing-checkout\/installing-custom-checkouts<\/a>
\nFile Access (WebDAV)\uff1ahttps:\/\/support.bigcommerce.com\/s\/article\/File-Access-WebDAV<\/a>
\nThe Complete Guide to Checkout Customization on BigCommerce\uff1ahttps:\/\/medium.com\/bigcommerce-developer-blog\/the-complete-guide-to-checkout-customization-on-bigcommerce-6b566bc36fa9<\/a>
\nStorefront Checkout API\uff1ahttps:\/\/developer.bigcommerce.com\/api-reference\/cart-checkout\/storefront-checkout-api<\/a>
\ncheckout-sdk-js\uff1ahttps:\/\/github.com\/bigcommerce\/checkout-sdk-js<\/a><\/p>\n\n
\u81ea\u5b9a\u4e49\u6536\u94f6\u53f0\u8bbe\u7f6e<\/h2>\n
\u53ef\u5b9a\u5236\u9009\u9879<\/h2>\n
\u81ea\u5b9a\u4e49\u8868\u5355\u5b57\u6bb5<\/h3>\n
\u5e97\u94fa\u8bbe\u7f6e<\/h3>\n
\u591a\u8bed\u8a00\u6536\u94f6\u53f0<\/h3>\n
\u81ea\u5b9a\u4e49CSS<\/h3>\n
\u81ea\u5b9a\u4e49JavaScript<\/h3>\n
\nScripts API(\u811a\u672cAPI): https:\/\/developer.bigcommerce.com\/api-reference\/storefront\/content-scripts-api<\/a>
\n\u4f7f\u7528 setInterval()\u8f6e\u8be2 DOM\uff0c\u4ee5\u786e\u4fdd\u8981\u76ee\u6807\u7684\u5143\u7d20\u5df2\u7ecf\u52a0\u8f7d: https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MutationObserver<\/a><\/p>\n<script>\n(function(win) {\n 'use strict';\n\n var listeners = [], \n doc = win.document, \n MutationObserver = win.MutationObserver || win.WebKitMutationObserver,\n observer;\n\n function ready(selector, fn) {\n \/\/ Store the selector and callback to be monitored\n listeners.push({\n selector: selector,\n fn: fn\n });\n if (!observer) {\n \/\/ Watch for changes in the document\n observer = new MutationObserver(check);\n observer.observe(doc.documentElement, {\n childList: true,\n subtree: true\n });\n }\n \/\/ Check if the element is currently in the DOM\n check();\n }\n\n function check() {\n \/\/ Check the DOM for elements matching a stored selector\n for (var i = 0, len = listeners.length, listener, elements; i < len; i++) {\n listener = listeners[i];\n \/\/ Query for elements matching the specified selector\n elements = doc.querySelectorAll(listener.selector);\n for (var j = 0, jLen = elements.length, element; j < jLen; j++) {\n element = elements[j];\n \/\/ Make sure the callback isn't invoked with the \n \/\/ same element more than once\n if (!element.ready) {\n element.ready = true;\n \/\/ Invoke the callback with the element\n listener.fn.call(element, element);\n }\n }\n }\n }\n \/\/ Expose `ready`\n win.ready = ready;\n\n})(this);\n\nready('#checkoutBillingAddress', function(element) {\n \/\/ do something\n alert("You're on the billing step!");\n}); \n<\/script><\/code><\/pre>\nHeadless Checkout<\/h2>\n
Checkout JS SDK<\/h3>\n
\nmethods: https:\/\/github.com\/bigcommerce\/checkout-sdk-js\/blob\/master\/docs\/classes\/checkoutservice.md<\/a><\/p>\nEmbedded Checkout<\/h3>\n
Server-to-Server Checkout API<\/h3>\n