Bigcommerce自定义收银台

参考文档

Optimized One-Page Checkout:https://support.bigcommerce.com/s/article/Optimized-Single-Page-Checkout
Customizing Checkout: https://developer.bigcommerce.com/stencil-docs/customizing-checkout
Installing a Custom Checkout:https://developer.bigcommerce.com/stencil-docs/customizing-checkout/installing-custom-checkouts
File Access (WebDAV):https://support.bigcommerce.com/s/article/File-Access-WebDAV
The Complete Guide to Checkout Customization on BigCommerce:https://medium.com/bigcommerce-developer-blog/the-complete-guide-to-checkout-customization-on-bigcommerce-6b566bc36fa9
Storefront Checkout API:https://developer.bigcommerce.com/api-reference/cart-checkout/storefront-checkout-api
checkout-sdk-js:https://github.com/bigcommerce/checkout-sdk-js

Optimized One-Page Checkout is BigCommerce’s default checkout and order confirmation page.

The Storefront Checkout API surfaces the business logic of the backend ecommerce application — retrieving customer information, fetching available shipping methods, and calculating discounts and sales tax.

自定义收银台设置

Advanced Settings (高级设置) › Checkout (结算) › select Optimized one-page checkout (Recommended)

可定制选项

自定义表单字段

Form表单编辑: https://support.bigcommerce.com/s/article/Editing-Form-Fields#advanced-settings

店铺设置

店铺配置: https://developer.bigcommerce.com/stencil-docs/store-design/configuring-store-design

多语言收银台

Stencil templates: https://developer.bigcommerce.com/stencil-docs/template-files/customize-stencil-checkout/multi-language-checkout#multi_browsing

自定义CSS

optimized-checkout.scss: https://developer.bigcommerce.com/stencil-docs/template-files/customize-stencil-checkout/optimized-one-page-checkout

自定义JavaScript

Script Manager(注入脚本): https://support.bigcommerce.com/s/article/Using-Script-Manager
Scripts API(脚本API): https://developer.bigcommerce.com/api-reference/storefront/content-scripts-api
使用 setInterval()轮询 DOM,以确保要目标的元素已经加载: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script>
(function(win) {
'use strict';

var listeners = [],
doc = win.document,
MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
observer;

function ready(selector, fn) {
// Store the selector and callback to be monitored
listeners.push({
selector: selector,
fn: fn
});
if (!observer) {
// Watch for changes in the document
observer = new MutationObserver(check);
observer.observe(doc.documentElement, {
childList: true,
subtree: true
});
}
// Check if the element is currently in the DOM
check();
}

function check() {
// Check the DOM for elements matching a stored selector
for (var i = 0, len = listeners.length, listener, elements; i < len; i++) {
listener = listeners[i];
// Query for elements matching the specified selector
elements = doc.querySelectorAll(listener.selector);
for (var j = 0, jLen = elements.length, element; j < jLen; j++) {
element = elements[j];
// Make sure the callback isn't invoked with the
// same element more than once
if (!element.ready) {
element.ready = true;
// Invoke the callback with the element
listener.fn.call(element, element);
}
}
}
}
// Expose `ready`
win.ready = ready;

})(this);

ready('#checkoutBillingAddress', function(element) {
// do something
alert("You're on the billing step!");
});
</script>

Headless Checkout

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.

Headless means that the front-end presentation layer has been decoupled from the backend platform that powers it

Checkout JS SDK

Checkout JS SDK: https://github.com/bigcommerce/checkout-sdk-js
methods: https://github.com/bigcommerce/checkout-sdk-js/blob/master/docs/classes/checkoutservice.md

Checkout pages built with the SDK are considered headless because you’re replacing the native presentation layer with one that’s 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.

Embedded Checkout

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.

BigCommerce for WordPress: https://github.com/bigcommerce/bigcommerce-for-wordpress

Server-to-Server Checkout API

Server-to-Server (S2S) Checkout API: https://developer.bigcommerce.com/api-reference/cart-checkout/server-server-checkout-api