Quickbeam.js

Quickbeam.js

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

Sooo animated

Installation on Shopify.com

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>

Options

All of available options.

{
  'animationLib': 'gsap',
  'variantSelector': function () {
    // Return selected variant
  }
}

animationlibrary

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.

variantSelector

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.
  }

Browser Support

Quickbeam depends on the following browser APIs:

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.

Development

Install development dependencies

npm install

Run gulp.js

gulp

Contributing

Feel free to open pull request.

Authors

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Logo

New
(50)
• Released: May 21, 2020, 05:04 AM

Quickbeam.js

Author: greenwoodents
Item was Featured Author was Featured Bought between 100 and 500 items Referred more than 1000 members Author had a Free File of the Month Contributed a Blog Post Helped protect FrontendFun against copyright violations Reviewer FrontendFun Developer Site Administrator Moderator Blog Editor
FREE
Animated cart for Shopify.com templates. size
git clone https://github.com/greenwoodents/quickbeam.js.git