~ For custom engineering solutions, please contact our firm get-magic.com ~
This repository contains a modified version of the Shopify Buy Button library that allows developers to add custom attributes to product line items. While the default Buy Button library does not support this functionality, our implementation enables sending additional data from external applications to Shopify, facilitating the creation of custom retail functionality.
- Add custom attributes to product line items during checkout
- Attributes are visible to customers during the checkout process
- Attributes are accessible in the Shopify admin panel and through webhooks as metadata
- Custom attributes are not displayed in the cart before checkout, which may cause confusion for customers with bulk orders. However, this should not be an issue for small orders.
- mocha test framework is purged
- After compiling the library, you will need to manually merge your bits with the live shopify bits. We have provided our compiled minified version in ./latest folder.
This project is shared for educational purposes and is provided without warranty under the MIT license.
Use and self-host at your own risk.
To build and run the project, we recommend using a Linux environment.
For reference, we keep a copy of the code we compiled before and after merging it.
/dist-compiled/[date]/github-dist - this is the original github compiled dist /dist-compiled/[date]/customattributes-dist - this is the updated code compiled dist /dist-compiled/[date]/shopify-live - this is a reference copy of the live library hosted by shopify /dist-compiled/[date]/release - this is the minified source
/latest - this is the latest minified source with custom attribute functionality.
- Install nvm
- Install build essentials and python 2
sudo apt-get install -y build-essential g++ python2 - Set project to use NodeJS 15
nvm use 15 - Install yarn
npm install yarn -g - Remove from package.json file 'wdio-mocha-framework' which contains the unsupported npm 'fibers' dependency. Its used for test automation.
- Run
yarn install - Run
yarn build
Happy building!!!
BuyButton.js is a highly customizable UI library for adding ecommerce functionality to any website. It allows you to create interactive UI components such as product listings and shopping carts with minimal configuration, while allowing you to easily customize the appearance and behaviour of the components. It uses the JS Buy SDK to connect to your Shopify store, giving you access to your products and collections.
To get started, take a look at the documentation. For questions, suggestions and feeback, please create an issue.
yarn
cp index.example.html index.html
- Add your API key and shop domain to index.html
- Set a product ID in index.html
yarn run start
Will watch for changes, compile src/ to tmp/ using babel & browserify, and run a server on port 8080.
yarn run test
will run full test suite locally
yarn run test-dev
Will watch for changes and run test suite.
To run docs locally, install jekyll:
gem install jekyll
yarn run docs
Doc server will run at http://localhost:4000/buy-button-js/ Docs source files are located in /docs. Docs are automatically deployed to gh-pages from master.