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