Made during the BigCommerce #BigHackathon: Summer 22, Commerce Blocks is an App that lets you create grids or carousels of products to showcase on any website.
Why not checkout the demos on our website or our BigCommerce store blog.
- Choose between a grid or carousel layout
- Show search, categories and filters
- Sort by a-z, price, best selling, relevance etc
- Select individual products, categories or specify a search term
- Install the app on your bigcommerce store
- Add a new block and configure your product options
- Copy the provided snippet and paste it into your website
- See the results
- Built in checkout so users don't have to navigate to your BigCommerce store
- Improved quick view with product options and quantity fields
- Addition layout and product configuration options
This app was built using the new BigCommerce Laravel/React starter kit, available here.
To get the app running locally, clone the repo and run:
composer install
npm install
Create a .env file by copying the env.example and amending for your local environment setup.
If using Laravel Sail then use sail artisan instead of php artisan going forward, and run:
./vendor/bin/sail up
Then:
php artisan migrate
npm run dev
Next, if you haven’t already, create an app on your Bigcommerce developer account. You’ll need to populate the following fields under the technical tab, to match your local development domain.
- Auth Callback URL: https://your-local-domain.com/bc/install
- Load Callback URL: https://your-local-domain.com/bc/load
- Uninstall Callback URL: https://your-local-domain.com/api/bc/uninstall
- Remove User Callback URL: https://your-local-domain.com/api/bc/remove-user
You’ll also need to set the following OAuth scopes:
- Information & Settings: READ-ONLY
- Products: READ-ONLY (this can be removed later, if it’s not required)
Once the app has been saved, copy the following details into the .env file:
BIGCOMMERCE_APP_ID=<shown in the URL when editing your app>
BIGCOMMERCE_CLIENT_ID=<shown via View Client ID>
BIGCOMMERCE_CLIENT_SECRET=<shown via View Client ID>
BIGCOMMERCE_WEBHOOK_SECRET=<Generate a unique code for this>
You’re now ready to install the app on your store.
The database is used to manage the job queue.
Run the workers with:
php artisan queue:work high,low
Tests can be ran via:
php artisan test
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.