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
<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
版权声明:
作者:Joe.Ye
链接:https://www.appblog.cn/index.php/2023/03/26/bigcommerce-custom-cashier/
来源:APP全栈技术分享
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论