• Home
  • Guide
  • JavaScript examples
  • Reference
  • Download
  • Demo Store
  • GitHub

Product forms

Liquid Ajax Cart ajaxifies Shopify product forms once it is loaded. When a user submits a product form, Liquid Ajax Cart intercepts the submission and sends a Shopify Cart API “Add to cart” request.

The form remains inactive when the “Add to cart” request is in progress and Liquid Ajax Cart adds the js-ajax-cart-form-in-progress CSS class to the form.

Add a container with the data-ajax-cart-messages attribute with the form value within product forms to show error messages.


Reference

  • Ajaxified sections
    • data-ajax-cart-section
    • data-ajax-cart-static-element
    • data-ajax-cart-section-scroll
    • subscribeToCartSectionsUpdate()
  • Product Forms
    • .js-ajax-cart-form-in-progress
  • Controls
    • data-ajax-cart-request-button
    • data-ajax-cart-toggle-class-button
    • data-ajax-cart-quantity-input
    • data-ajax-cart-property-input
  • Messages
    • data-ajax-cart-messages
  • Body CSS classes
    • .js-ajax-cart-set
    • .js-ajax-cart-empty
    • .js-ajax-cart-not-empty
    • .js-ajax-cart-request-in-progress
    • .js-ajax-cart-not-compatible
  • State
    • data-ajax-cart-initial-state
    • data-ajax-cart-bind-state
    • getCartState()
    • subscribeToCartStateUpdate()
  • Cart Ajax API requests
    • cartRequestGet()
    • cartRequestUpdate()
    • cartRequestAdd()
    • cartRequestChange()
    • cartRequestClear()
    • subscribeToCartAjaxRequests()
    • Request state
    • Queues
  • Configuration
    • productFormsFilter
    • messageBuilder
    • stateBinderFormatters
    • addToCartCssClass
    • updateOnWindowFocus
    • lineItemQuantityErrorText
    • requestErrorText
  • Ajaxified sections
    • data-ajax-cart-section
    • data-ajax-cart-static-element
    • data-ajax-cart-section-scroll
    • subscribeToCartSectionsUpdate()
  • Product Forms
    • .js-ajax-cart-form-in-progress
  • Controls
    • data-ajax-cart-request-button
    • data-ajax-cart-toggle-class-button
    • data-ajax-cart-quantity-input
    • data-ajax-cart-property-input
  • Messages
    • data-ajax-cart-messages
  • Body CSS classes
    • .js-ajax-cart-set
    • .js-ajax-cart-empty
    • .js-ajax-cart-not-empty
    • .js-ajax-cart-request-in-progress
    • .js-ajax-cart-not-compatible
  • State
    • data-ajax-cart-initial-state
    • data-ajax-cart-bind-state
    • getCartState()
    • subscribeToCartStateUpdate()
  • Cart Ajax API requests
    • cartRequestGet()
    • cartRequestUpdate()
    • cartRequestAdd()
    • cartRequestChange()
    • cartRequestClear()
    • subscribeToCartAjaxRequests()
    • Request state
    • Queues
  • Configuration
    • productFormsFilter
    • messageBuilder
    • stateBinderFormatters
    • addToCartCssClass
    • updateOnWindowFocus
    • lineItemQuantityErrorText
    • requestErrorText
  • GitHub
  • Contact form
Created by Evgeniy Mukhamedjanov
Licensed under MIT License, documentation under CC BY 3.0