Animated cart for Shopify.com templates. This plugin is made for Shopify.com but It should not be problem convert it to other e-commerce, if you want fork this repo. :)
####Demos
Download [this repo](dist/ https://github.com/greenwoodents/quickbeam.js/archive/master.zip).
Import dist/quickbeam.min.js
and dist/quickbeam.scss
files to your Shopify assets/
folder.
File dist/quickbeam.liquid
import in to templates/
folder.
Add this <script>
tag before closing </body>
tag in your layout/template.liquid
file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
{{ 'quickbeam.min.js' | asset_url | script_tag }}
<script>
var cart = Quickbeam.init({
'animationLib': 'gsap',
'variantSelector': function () {
// Return selected variant
}
});
</script>
All of available options.
{
'animationLib': 'gsap',
'variantSelector': function () {
// Return selected variant
}
}
If you are using GSAP, you can use this animation library with Quickbeam. Pass this parameter to init function. If not vanilla javascript animation is used.
'animationLib': 'gsap' //Or falling to vanilla js animation.
If you have special selector of variant type in your e-commerce and default function is not able to select variant for you. You can make your own selector and return variant.
Expecting string
in return
;
'variantSelector': function () {
// Return selected variant in string.
}
Quickbeam depends on the following browser APIs:
- classList
- ES5 array methods: forEach
- requestAnimationFrame
It supports the following natively:
- Chrome 24+
- Firefox 23+
- Safari 6.1+
- Opera 15+
- Edge 12+
- IE 10+
- iOS Safari 7.1+
- Android Browser 4.4+
To support older browsers, consider including polyfills/shims for the APIs listed above. There are no plans to include any in the library, in the interest of file size.
Install development dependencies
npm install
Run gulp.js
gulp
Feel free to open pull request.
- Filip Danisko - Rework - filipdanisko
- Petr Goca - Initial work and demo page - petr-goca
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details