Git Product home page Git Product logo

shopify-ajaxify-cart's Introduction

Shopify Ajaxify Cart (Shopify Add to Cart Ajax)

You need to download ajaxify-cart.liquid and upload your snippets folder then include the ajaxify-cart snippet in your theme by copy and paste the code below in your theme.liquid file right above your closing </body> tag:

{% include 'ajaxify-cart' %}

How to configure (optional)

No configuration is necessary, but if you want to change a few things, go your ajaxify-cart.liquid and find Shopify.AjaxifyCart and var _config = {} you will changes your Text and Selection id or Shopify.AjaxifyCart.init() method is called, by passing to it a configuration object.

Things you can change:

Things you can change:

  • addToCartBtnLabel

    Final label on add that cart button after the ajax request, so that you can add more. You could change that to 'Added to bag' for example. Default is Add to cart.

  • addedToCartBtnLabel

    Label on add to cart button that shows for howLongTillBtnReturnsToNormal milliseconds after item has been added to the cart. Default is Thank you!.

  • addingToCartBtnLabel

    Label on add to cart button while item is being added to the cart. Default is Adding....

  • soldOutBtnLabel

    Label on add to cart button when all of the item's stock is in the cart. Default is Sold Out.

  • howLongTillBtnReturnsToNormal

    Time during which the add to cart button label is addedToCartBtnLabel. Default is 2000. In milliseconds.

  • cartCountSelector

    CSS selector for the element on the page that contains the cart count to update after Ajax request.

  • cartTotalSelector

    CSS selector for the element on the page that contains the cart total to update after Ajax request.

  • feedbackPosition

    Where to position the feedback after the Ajax request. There are 3 possible values:

    • aboveForm for top of add to cart form,
    • belowForm for below the add to cart form, and
    • nextButton for next to add to cart button.

    The default is nextButton.

The configuration object can contain any of the above.

Example, Also you use this thing like button text changes wish to use 'Added to bag' as button label when the item has been added to the cart, use the following code:

Shopify.AjaxifyCart.init({ 
  addedToCartBtnLabel: 'Added to bag' 
});

shopify-ajaxify-cart's People

Contributors

mdraselhossain69 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.