B2B Buyer Portal is a monorepo frontend application designed for the BigCommerce B2B Edition Buyer portal. The B2B Buyer Portal is built using Turborepo, TypeScript, and React.
By choosing to build on top of our Open Source B2B Buyer Portal, you'll have access to build on our B2B buyer portal application backed by a robust set of SaaS APIs. You can get straight to work building for your unique B2B business cases.
๐ B2B Edition โข ๐ค BigCommerce Developer Community โข ๐ B2B Edition API Reference โข
- Index
- โ Prerequisites
- ๐ Core Technologies
- ๐ฆ Workspaces
- ๐ Tools and Libraries
- ๐ System Setup
- โ Local Development
- Running Project Locally
- Deploying the project
- ๐ค Contribution
- ๐ Contact & Support
- License
If you do not have access to the B2B edition app please reach out to your account or partner manager
After installing the B2B Edition App, go to the app's dashboard and select the 'Storefronts' section.
Choose the channel where you wish to enable B2B functionality. Initially, B2B features can be activated on a single channel only.
For assistance with activating the remote buyer portal or to inquire about multi-storefront support, which allows you to utilize B2B features across multiple channels, please reach out to our team at [email protected], or raise an issue right here in this repository.
- Monorepo Management: Turborepo
- Type System: TypeScript
- Frontend Library: React 18
- Build Tool: Vite
- Application:
/apps/storefront
- A next-gen B2B Edition storefront application.- You can run multiple apps concurrently via turborepo tasks.
- Packages:
/packages/eslint-config-b3
- Shared ESLint configurations./packages/tsconfig
- Shared TypeScript configurations./packages/ui
- A collection of UI components built by B3./packages/store
- A collection of shared store logic./packages/b3global
- A collection of shared global logic.
- Linting: ESLint
- Commit Standards: commitlint
- Git Workflow Tools: Husky, lint-staged
- UI Framework: MUI 5
- Routing: React Router 6
- Node: Ensure you have Node.js version >=18.0.0.
- Package Manager: This project uses Yarn v1.22.17.
- Installation of Node and Yarn.
- For Node, we recommend using nvm.
- Once Node is installed, you can install Yarn by using
npm i -g yarn
.
- Clone the repository.
- Install dependencies using
yarn
. - Copy environment variables:
cp apps/storefront/.env-example apps/storefront/.env
. - Update the following values in
.env
:
-
VITE_ASSETS_ABSOLUTE_PATH
: For building for deployment, set this to the URL where the assets folder is hosted. Note that this refers to the absolute URL to the/assets
folder, NOT the root/base URL of the build. Remember to also include the trailing slash.For example, if you deploy the contents of the
dist
folder built by runningyarn build
and hosted it at https://my.custom.cdn/generated/b2b, the value you should put is https://my.custom.cdn/generated/b2b/assets/.
Environment variables have been updated so you can run your UI directly into production storefronts.
- Start the development server:
yarn dev
. - Access to the store through the url i.e: https://my-store.mybigcommerce.com/ or https://my-store.com/ not http://localhost:3001
- Activate store channel in the Channels Manager.
- Configure header and footer scripts:
- Navigate to Channels Manager -> Scripts.
- Delete first scripts:
B2BEdition Header Script
andB2BEdition Footer Script
, then - Add two scripts (e.g., B2BEdition-header, B2BEdition-footer). Ensure you set the correct port for your localhost in the script URLs. In the "Location" section make sure you check on "All pages".
- Edit the header script:
<script>
{{#if customer.id}}
{{#contains page_type "account"}}
var b2bHideBodyStyle = document.createElement('style');
b2bHideBodyStyle.id = 'b2b-account-page-hide-body';
b2bHideBodyStyle.innerHTML = 'body { display: none !important }';
document.head.appendChild(b2bHideBodyStyle);
{{/contains}}
{{/if}}
</script>
<script type="module">
import RefreshRuntime from 'http://localhost:3001/@react-refresh'
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
<script type="module" src="http://localhost:3001/@vite/client"></script>
- Edit the footer script:
<script type="module" src="http://localhost:3001/src/main.ts"></script>
<script>
window.B3 = {
setting: {
store_hash: '{{settings.store_hash}}',
channel_id: {{settings.channel_id}},
platform: 'bigcommerce', // override this depending on your store channel platform: https://developer.bigcommerce.com/docs/rest-management/channels#platform
},
}
</script>
-
For local debugging, set
VITE_LOCAL_DEBUG
tofalse
in .env. -
Enable
Custom (use for your self-hosted buyer portal)
, this will avoid the scripts mentioned on step 2 -> 2nd point
- In B2B Edition App dashboard -> Settings -> Buyer Portal for global config
- Or B2B Edition App dashboard -> Storefront -> Desired channel -> Buyer Portal for specific channel config
alt text
-
Visit the storefront and attempt to sign in.
-
For cross-origin issues, update URL variables in .env to use the tunnel URL with HTTPS.
Note: If linters aren't functional, run yarn prepare
first.
Building your buyer portal application requires you to run the yarn build:production
command. This command will generate a dist
folder in the apps/storefront
directory and inside an assets
folder containing the compiled assets.
Before building, make sure you have updated your VITE_ASSETS_ABSOLUTE_PATH
variable pointing to where the assets folder is hosted as we'll be using this to generate the correct asset paths for the application when its mounted.
Once you have uploaded the contents of the dist
folder to your hosting provider, you'll have to create a footer script in your BigCommerce storefront that points to the built files generated in the dist
folder. The contents of the script are the same as the footer script B2B Edition installs in your store, but with the updated paths. It should look something like this:
<script>
window.b3CheckoutConfig = {
routes: {
dashboard: '/account.php?action=order_status',
},
}
window.B3 = {
setting: {
store_hash: '<YOUR_STORE_HASH>',
channel_id: '<YOUR_CHANNEL_ID>',
platform: '<YOUR_STORE_PLATFORM>',
b2b_url: 'https://api-b2b.bigcommerce.com',
captcha_setkey: '6LdGN_sgAAAAAGYFg1lmVoakQ8QXxbhWqZ1GpYaJ',
},
'dom.checkoutRegisterParentElement': '#checkout-app',
'dom.registerElement':
'[href^="/login.php"], #checkout-customer-login, [href="/login.php"] .navUser-item-loginLabel, #checkout-customer-returning .form-legend-container [href="#"]',
'dom.openB3Checkout': 'checkout-customer-continue',
before_login_goto_page: '/account.php?action=order_status',
checkout_super_clear_session: 'true',
'dom.navUserLoginElement': '.navUser-item.navUser-item--account',
}
</script>
<script
type="module"
crossorigin=""
src="<YOUR_APP_URL_HERE>/index.*.js"
></script>
<script
nomodule=""
crossorigin=""
src="<YOUR_APP_URL_HERE>/polyfills-legacy.*.js"
></script>
<script
nomodule=""
crossorigin=""
src="<YOUR_APP_URL_HERE>/index-legacy.*.js"
></script>
Replace <YOUR_APP_URL_HERE>
with the URL where your build is hosted, <YOUR_STORE_HASH>
and <YOUR_CHANNEL_ID>
with its respective values. Replace the *
in the file names with the generated hash from the build step.
Also, you'll have to input the following header script:
<script>
var b2bHideBodyStyle = document.createElement('style')
b2bHideBodyStyle.id = 'b2b-account-page-hide-body'
const removeCart = () => {
const style = document.createElement('style')
style.type = 'text/css'
style.id = 'b2bPermissions-cartElement-id'
style.innerHTML =
'[href="/cart.php"], #form-action-addToCart, [data-button-type="add-cart"], .button--cardAdd, .card-figcaption-button, [data-emthemesmodez-cart-item-add], .add-to-cart-button { display: none !important }'
document.getElementsByTagName('head').item(0).appendChild(style)
}
removeCart()
</script>
- Stencil CLI We're working to bring full support to integrate buyer portal into stencil-cli, there are issues on logging out and cart management, if you find other problems feel free to open an issue report.
- Cross-Origin Issues: If you encounter cross-origin issues, ensure you have the correct URLs in your
.env
file and verify that your store's origin URL is allowed. You can use a tunnel service like ngrok to expose your local server to the internet. - Environment Variables: Ensure you have the correct environment variables set in your
.env
file. These variables are used to configure your application for different environments. - Header and Footer Scripts: Ensure you have the correct header and footer scripts set in your BigCommerce store. These scripts are used to load your application into the storefront.
- Build Errors: If you encounter build errors, ensure you have the correct dependencies installed and that your project is set up correctly. You can run
yarn prepare
to ensure all dependencies are installed and up to date.
For developers wishing to contribute, ensure all PRs meet the linting and commit message standards.
For queries, issues, or support, reach out to us at [email protected] or open an issue in this repository.
MIT