9 | A configuration parameter which sets the debounce time in milliseconds for
10 | the quantity controls built using the [`
9 | A CSS class which is appended to the `html` tag when the user cart is empty. 10 |
11 | 12 | ## Example 13 | 14 | Hiding the cart quantity number in the header not to show "(0)": 15 | 16 | {%- capture highlight_code -%} 17 | {% raw %} 18 | 19 | ( 20 | 21 | {{ cart.item_count }} 22 | 23 | ) 24 | 25 | {% endraw %} 26 | {%- endcapture -%} 27 | {% include v2/codeblock.html title="sections/header.liquid" language="liquid" code=highlight_code %} 28 | 29 | {%- capture highlight_code -%} 30 | html.js-ajax-cart-empty .header__cart-quantity { 31 | display: none; 32 | } 33 | 34 | {%- endcapture -%} 35 | {% include v2/codeblock.html title="assets/style.css" language="css" code=highlight_code %} -------------------------------------------------------------------------------- /docs/v2/request-error-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: requestErrorText 3 | layout: docs-v2 4 | --- 5 | 6 | # requestErrorText 7 | 8 |9 | A configuration parameter which sets the error message text 10 | that appears in [`data-ajax-cart-errors`](/v2/data-ajax-cart-errors/) containers 11 | when a Shopify Cart API Ajax request is failed and doesn't have any error description, 12 | or when the request is not performed at all due to the Internet connection. 13 |
14 | 15 | ## Code example 16 | 17 | By default, the text is "There was an error while updating your cart. Please try again.". 18 | 19 | Use the [`conf`](/v2/liquid-ajax-cart-conf/) method of the [`liquidAjaxCart`](/v2/liquid-ajax-cart/) object to set your value: 20 | {%- capture highlight_code -%} 21 | liquidAjaxCart.conf("requestErrorText", "My request error message"); 22 | {%- endcapture -%} 23 | {% include v2/codeblock.html language="javascript" code=highlight_code %} -------------------------------------------------------------------------------- /docs/v2/js-ajax-cart-not-empty.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: js-ajax-cart-not-empty 3 | layout: docs-v2 4 | --- 5 | 6 | # js-ajax-cart-not-empty 7 | 8 |9 | A CSS class which is appended to the `html` tag when the user cart is not empty. 10 |
11 | 12 | ## Example 13 | 14 | Showing the cart quantity number in the header: 15 | 16 | {%- capture highlight_code -%} 17 | {% raw %} 18 | 19 | ( 20 | 21 | {{ cart.item_count }} 22 | 23 | ) 24 | 25 | {% endraw %} 26 | {%- endcapture -%} 27 | {% include v2/codeblock.html title="sections/header.liquid" language="liquid" code=highlight_code %} 28 | 29 | {%- capture highlight_code -%} 30 | html.js-ajax-cart-not-empty .header__cart-quantity { 31 | display: inline-block; 32 | } 33 | 34 | {%- endcapture -%} 35 | {% include v2/codeblock.html title="assets/style.css" language="css" code=highlight_code %} -------------------------------------------------------------------------------- /docs/v2/js-ajax-cart-processing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: js-ajax-cart-processing 3 | layout: docs-v2 4 | --- 5 | 6 | # js-ajax-cart-processing 7 | 8 |9 | A CSS class which is appended to the `html` tag when there is a Shopify Cart API Ajax request in progress. 10 |
11 | 12 | ## How it works 13 | 14 | Under the hood Liquid Ajax Cart is keeping the `js-ajax-cart-processing` CSS class appended to the `html` tag 15 | when the [Queue of requests](/v2/queue-of-requests/) is not empty, 16 | which means that Liquid Ajax Cart is currently executing Shopify Cart API Ajax requests 17 | until the [Queue of requests](/v2/queue-of-requests/) is empty. 18 | 19 | ## Use case 20 | 21 | Use this CSS class to show a loading indicator for an Ajax cart section or make the ajaxified elements, 22 | such as a cart item quantity input, or a remove cart item button, look visually disabled. 23 | 24 | {% include v2/content/cart-loading-state-css-example.html %} -------------------------------------------------------------------------------- /docs/_includes/footer/scripts.html: -------------------------------------------------------------------------------- 1 |{{ article.title }} →
2 | {% if section.settings.blog_show_date or section.settings.blog_show_author %} 3 | 16 | {% endif %} 17 | 18 | {% if section.settings.blog_show_excerpt %} 19 |
20 | {{ article.excerpt_or_content | strip_html | truncatewords: 30 }}
21 |
22 | {% endif %}
23 |
--------------------------------------------------------------------------------
/docs/_includes/styles/masthead.scss:
--------------------------------------------------------------------------------
1 | .site-masthead {
2 | color: black;
3 | position: relative;
4 | padding: 64px 0 32px;
5 | }
6 |
7 | .site-masthead__title {
8 | font-family: 'Arial Black', 'Arial', sans-serif;
9 | font-weight: 900;
10 | font-size: 42px;
11 | line-height: 1;
12 | position: relative;
13 | z-index: 2;
14 |
15 | span {
16 | background: linear-gradient(104.39deg, #BAFF91 4.53%, #FFF6A4 73.74%);
17 | background-size: 100% 0.375em;
18 | background-repeat: repeat-x;
19 | background-position: left 0 bottom 0.15em;
20 | }
21 |
22 | @media (min-width: 410px) {
23 | font-size: 48px;
24 | }
25 |
26 | @media (min-width: 760px) {
27 | font-size: 56px;
28 | }
29 |
30 | @media (min-width: 1200px) {
31 | font-size: 60px;
32 | }
33 | }
34 |
35 | .site-masthead__npm {
36 | display: inline-block;
37 | border: none !important;
38 | vertical-align: 1em;
39 | font-size: 20px;
40 | line-height: 2;
41 | }
--------------------------------------------------------------------------------
/docs/v2/quantity-tag-allow-zero.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: quantityTagAllowZero
3 | layout: docs-v2
4 | ---
5 |
6 | # quantityTagAllowZero
7 |
8 |
9 | A configuration parameter which allows a user to remove a product from the cart by
10 | clicking the `data-ajax-cart-quantity-minus` button and reaching the "0" value in a
11 | quantity control built using the [`
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
15 |
16 |
17 |
22 |
23 | Package
18 |
19 |
20 |
21 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/docs/v2/liquid-ajax-cart-clear.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: liquidAjaxCart.clear()
3 | layout: docs-v2
4 | ---
5 |
6 | # liquidAjaxCart.clear()
7 |
8 | 9 | A method of the [`liquidAjaxCart`](/v2/liquid-ajax-cart/) object, 10 | which initiates an Ajax request to the Shopify Cart API `POST /cart/clear.js` endpoint. 11 |
12 | 13 | ## Structure 14 | 15 | The method takes a request body object as the first parameter, and an object with the request options as the second parameter. 16 | 17 | The request body object is passed to the Shopify Cart API endpoint as is, 18 | so read what data Shopify expects in the [`/cart/clear.js`](https://shopify.dev/docs/api/ajax/reference/cart#post-locale-cart-clear-js) documentation. 19 | 20 | {%- capture highlight_code -%} 21 | 22 | // Request body data you want to send to Shopify 23 | const body = {} 24 | 25 | {% include v2/content/request-options-object.html %} 26 | 27 | liquidAjaxCart.clear(body, options); 28 | 29 | {%- endcapture -%} 30 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 31 | 32 | {% include v2/content/request-options-text.html %} 33 | -------------------------------------------------------------------------------- /docs/v2/liquid-ajax-cart-conf.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: liquidAjaxCart.conf() 3 | layout: docs-v2 4 | --- 5 | 6 | # liquidAjaxCart.conf() 7 | 8 |9 | A method of the [`liquidAjaxCart`](/v2/liquid-ajax-cart/) object, which sets configuration parameter values. 10 |
11 | 12 | ## Code example 13 | 14 | The `conf` method takes a configuration parameter name and its new value: 15 | 16 | {%- capture highlight_code -%} 17 | 18 | liquidAjaxCart.conf("updateOnWindowFocus", false); 19 | liquidAjaxCart.conf("requestErrorText", "My request error message"); 20 | 21 | {%- endcapture -%} 22 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 23 | 24 | ## Configuration parameters 25 | 26 | {% for docs_section in site.links_v2.docs -%} 27 | {%- for docs_subsection in docs_section.subsections -%} 28 | {%- if docs_subsection.id == 'configuration-subsection' -%} 29 | {%- for docs_link in docs_subsection.links %} 30 | * [`{{ docs_link.title | escape }}`](/v2/{{ docs_link.file }}/) 31 | {%- endfor -%} 32 | {%- break -%} 33 | {%- endif -%} 34 | {%- endfor -%} 35 | {%- endfor -%} -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | var PACKAGE = require('./package.json'); 3 | 4 | module.exports = (env, argv) => { 5 | let folder = 'assets'; 6 | let filename = 'liquid-ajax-cart.js'; 7 | 8 | if ( argv.mode === 'production' ) { 9 | folder = 'docs/v2/releases'; 10 | filename = `liquid-ajax-cart-v${PACKAGE.version}.js`; 11 | 12 | if ( env.last ) { 13 | folder = 'docs/v2/releases/last'; 14 | } 15 | 16 | if ( env.npm ) { 17 | folder = '.'; 18 | filename = 'liquid-ajax-cart.js' 19 | } 20 | } 21 | 22 | return { 23 | mode: argv.mode, 24 | entry: './_src/index.ts', 25 | module: { 26 | rules: [ 27 | { 28 | test: /\.tsx?$/, 29 | use: 'ts-loader', 30 | exclude: /node_modules/, 31 | }, 32 | ], 33 | }, 34 | resolve: { 35 | extensions: ['.tsx', '.ts', '.js'], 36 | }, 37 | output: { 38 | filename, 39 | path: path.resolve(__dirname, folder), 40 | library: { 41 | type: 'module', 42 | }, 43 | }, 44 | experiments: { 45 | outputModule: true 46 | } 47 | }; 48 | } -------------------------------------------------------------------------------- /docs/v2/liquid-ajax-cart-update.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: liquidAjaxCart.update() 3 | layout: docs-v2 4 | --- 5 | 6 | # liquidAjaxCart.update() 7 | 8 |9 | A method of the [`liquidAjaxCart`](/v2/liquid-ajax-cart/) object, 10 | which initiates an Ajax request to the Shopify Cart API `POST /cart/update.js` endpoint. 11 |
12 | 13 | ## Structure 14 | 15 | The method takes a request body object as the first parameter, and an object with the request options as the second parameter. 16 | 17 | The request body object is passed to the Shopify Cart API endpoint as is, 18 | so read what data Shopify expects in the [`/cart/update.js`](https://shopify.dev/docs/api/ajax/reference/cart#post-locale-cart-update-js) documentation. 19 | 20 | {%- capture highlight_code -%} 21 | 22 | // Request body data you want to send to Shopify 23 | const body = { 24 | updates: [3, 2, 1] 25 | } 26 | 27 | {% include v2/content/request-options-object.html %} 28 | 29 | liquidAjaxCart.update(body, options); 30 | 31 | {%- endcapture -%} 32 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 33 | 34 | {% include v2/content/request-options-text.html %} 35 | -------------------------------------------------------------------------------- /docs/_sass/base/_anchor.scss: -------------------------------------------------------------------------------- 1 | a { 2 | /* 3 | @include themer(color, ( 4 | 'dark': $site-ui-brand-dark, 5 | 'light': $site-ui-brand-light, 6 | )); 7 | */ 8 | 9 | color: currentColor; 10 | border-bottom: 1px solid rgba(0, 0, 0, .2); 11 | text-decoration: none; 12 | 13 | transition: background-color .2s, border-color .2s; 14 | 15 | .scope-markdown &, 16 | .site-footer__summary & { 17 | background-color: rgba(#bfea52, .3); 18 | 19 | code { 20 | background-color: transparent; 21 | border: none; 22 | } 23 | } 24 | 25 | &:active, 26 | &:focus, 27 | &:hover { 28 | /* 29 | @include themer(color, ( 30 | 'dark': darken($site-ui-brand-dark, 10%), 31 | 'light': darken($site-ui-brand-light, 10%), 32 | )); 33 | */ 34 | 35 | color: currentColor; 36 | text-decoration: none; 37 | border-bottom-color: currentColor; 38 | 39 | .scope-markdown &, 40 | .site-footer__summary & { 41 | background-color: rgba(#bfea52, .4); 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /docs/assets/js/docs.js: -------------------------------------------------------------------------------- 1 | //$(function() { 2 | // $('html').toggleClass('no-js js'); 3 | 4 | // Update sidebar highlighting based on Scrollspy 5 | /*$(window).on('activate.bs.scrollspy', function () { 6 | const spyTarget = $('[data-spy="scroll"]').data('target'); 7 | const $activeSpy = $(spyTarget).find('.nav-link.active'); 8 | const $tree = $activeSpy.parentsUntil('.bs-docs-sidenav', 'li'); 9 | 10 | $tree.find('> a').addClass('active'); 11 | });/ 12 | 13 | // Toggleable mobile table of contents button 14 | /*$('.toggle-toc').on('click', function () { 15 | const $this = $(this); 16 | const $toc = $("#mobileTOC"); 17 | 18 | $toc.toggle(); 19 | $this.attr('aria-expanded', $toc.is(':visible')); 20 | 21 | const $btn = $this.find('[data-role="toggle"]'); 22 | 23 | if ($btn.text() === 'Hide') { 24 | $btn.text('Show'); 25 | } else { 26 | $btn.text('Hide'); 27 | } 28 | });*/ 29 | //}); 30 | 31 | document.querySelector('[data-nav-toggle]').addEventListener('click', function() { 32 | document.querySelector('[data-nav]').classList.toggle('show'); 33 | }); 34 | -------------------------------------------------------------------------------- /docs/v1/reference/data-ajax-cart-bind-state.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: data-ajax-cart-bind-state 3 | layout: page 4 | --- 5 | 6 | # data-ajax-cart-bind-state 7 | 8 | Add the `data-ajax-cart-bind-state` attribute to an HTML element, pass a [State object](/v1/reference/state/) property as the attribute's value and Liquid Ajax Cart will display the state property's value within the HTML element and refresh it when the cart gets updated. 9 | 10 | {% include code/data-ajax-cart-bind-state.html %} 11 | 12 | The attribute supports formatters and there is the `money_with_currency` formatter out of the box. The `money_with_currency` uses the `Intl` JavaScript object and `Shopify.locale` value: 13 | 14 | ```javascript 15 | return Intl.NumberFormat(window.Shopify.locale, { 16 | style: 'currency', 17 | currency: state.cart.currency 18 | }).format(value / 100); 19 | ``` 20 | 21 | If the `Shopify.locale` or the `Intl` are not available, the formatter will return the following: 22 | ```javascript 23 | // 100.00 USD 24 | return `${ (value / 100).toFixed(2) } ${ state.cart.currency }`; 25 | ``` 26 | 27 | You can define your own formatters using the [`stateBinderFormatters`](/v1/reference/stateBinderFormatters/) configuration parameter. -------------------------------------------------------------------------------- /docs/v2/data-ajax-cart-initial-state.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: data-ajax-cart-initial-state 3 | layout: docs-v2 4 | --- 5 | 6 | # data-ajax-cart-initial-state 7 | 8 |9 | An attribute which helps Liquid Ajax Cart find the user cart data during initialization. 10 |
11 | 12 | ## How it works 13 | 14 | Liquid Ajax Cart needs to know user cart state: what products are in the cart, what total price is, what discounts are applied etc. 15 | 16 | To provide this data, you should convert the Shopify [`cart`](https://shopify.dev/docs/api/liquid/objects/cart) object to JSON format 17 | and wrap it in the `script` tag with the `data-ajax-cart-initial-state` attribute. 18 | 19 | {%- capture highlight_code -%} 20 | {% raw %} 21 | {% comment %} Somewhere in layout/theme.liquid {% endcomment %} 22 | 23 | 26 | {% endraw %} 27 | {%- endcapture -%} 28 | {% include v2/codeblock.html title="layout/theme.liquid" language="liquid" code=highlight_code %} 29 | 30 | If Liquid Ajax Cart doesn't find the `data-ajax-cart-initial-state` script, 31 | it performs a Shopify Cart API Ajax request to get the cart state. 32 | 33 | -------------------------------------------------------------------------------- /docs/v2/liquid-ajax-cart-add.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: liquidAjaxCart.add() 3 | layout: docs-v2 4 | --- 5 | 6 | # liquidAjaxCart.add() 7 | 8 |9 | A method of the [`liquidAjaxCart`](/v2/liquid-ajax-cart/) object, 10 | which initiates an Ajax request to the Shopify Cart API `POST /cart/add.js` endpoint. 11 |
12 | 13 | ## Structure 14 | 15 | The method takes a request body object as the first parameter, and an object with the request options as the second parameter. 16 | 17 | The request body object is passed to the Shopify Cart API endpoint as is, 18 | so read what data Shopify expects in the [`/cart/add.js`](https://shopify.dev/docs/api/ajax/reference/cart#post-locale-cart-add-js) documentation. 19 | 20 | {%- capture highlight_code -%} 21 | 22 | // Request body data you want to send to Shopify 23 | const body = { 24 | items: [ 25 | { 26 | id: 40934235668668, 27 | quantity: 1 28 | } 29 | ] 30 | } 31 | 32 | {% include v2/content/request-options-object.html %} 33 | 34 | liquidAjaxCart.add(body, options); 35 | 36 | {%- endcapture -%} 37 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 38 | 39 | {% include v2/content/request-options-text.html %} 40 | -------------------------------------------------------------------------------- /docs/v2/liquid-ajax-cart-change.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: liquidAjaxCart.change() 3 | layout: docs-v2 4 | --- 5 | 6 | # liquidAjaxCart.change() 7 | 8 |9 | A method of the [`liquidAjaxCart`](/v2/liquid-ajax-cart/) object, 10 | which initiates an Ajax request to the Shopify Cart API `POST /cart/change.js` endpoint. 11 |
12 | 13 | ## Structure 14 | 15 | The method takes a request body object as the first parameter, and an object with the request options as the second parameter. 16 | 17 | The request body object is passed to the Shopify Cart API endpoint as is, 18 | so read what data Shopify expects in the [`/cart/change.js`](https://shopify.dev/docs/api/ajax/reference/cart#post-locale-cart-change-js) documentation. 19 | 20 | {%- capture highlight_code -%} 21 | 22 | // Request body data you want to send to Shopify 23 | const body = { 24 | id: '40934235668668:719bc4cb60310cbc4dee2ae38d8bf04c', 25 | quantity: 0 26 | } 27 | 28 | {% include v2/content/request-options-object.html %} 29 | 30 | liquidAjaxCart.change(body, options); 31 | 32 | {%- endcapture -%} 33 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 34 | 35 | {% include v2/content/request-options-text.html %} 36 | -------------------------------------------------------------------------------- /docs/_includes/v2/styles/tabs.scss: -------------------------------------------------------------------------------- 1 | .tabs { 2 | display: flex; 3 | overflow: auto; 4 | flex-wrap: wrap; 5 | 6 | input { 7 | display: none; 8 | } 9 | 10 | label { 11 | flex: 0 0 auto; 12 | font-size: .875rem; 13 | padding: .75rem 0; 14 | order: 0; 15 | cursor: pointer; 16 | position: relative; 17 | white-space: nowrap; 18 | font-weight: 600; 19 | 20 | &:after { 21 | content: ''; 22 | position: absolute; 23 | left: 0; 24 | width: 100%; 25 | bottom: 0; 26 | background-color: transparent; 27 | transition: background-color .15s; 28 | height: 1px; 29 | } 30 | 31 | &:hover:after { 32 | background-color: #0A7307; 33 | } 34 | } 35 | 36 | input:not(:first-child) + label { 37 | margin-left: 1.5rem; 38 | } 39 | 40 | input:checked + label { 41 | color: #35812F; 42 | 43 | &:after { 44 | background-color: #0A7307; 45 | height: 2px; 46 | } 47 | } 48 | 49 | label + * { 50 | width: 100%; 51 | flex: 0 0 100%; 52 | display: none; 53 | order: 1; 54 | padding-top: 1rem; 55 | border-top: 1px solid #bababa; 56 | } 57 | 58 | input:checked + label + * { 59 | display: block; 60 | } 61 | } -------------------------------------------------------------------------------- /_src/global-classes.ts: -------------------------------------------------------------------------------- 1 | import {getCartState} from './state'; 2 | import {EVENT_QUEUE_END_INTERNAL, EVENT_QUEUE_START_INTERNAL, EVENT_REQUEST_END_INTERNAL, getProcessingStatus} from "./ajax-api"; 3 | import {CSS_CLASS_PREFIX} from "./const"; 4 | 5 | const CSS_CLASS_INIT = `${CSS_CLASS_PREFIX}-init`; 6 | const CSS_CLASS_IN_PROGRESS = `${CSS_CLASS_PREFIX}-processing`; 7 | const CSS_CLASS_EMPTY = `${CSS_CLASS_PREFIX}-empty`; 8 | const CSS_CLASS_NOT_EMPTY = `${CSS_CLASS_PREFIX}-not-empty`; 9 | 10 | function updateClasses(): void { 11 | const $element = document.querySelector('html'); 12 | const state = getCartState(); 13 | $element.classList.toggle(CSS_CLASS_INIT, state.cart !== null); 14 | $element.classList.toggle(CSS_CLASS_IN_PROGRESS, getProcessingStatus()); 15 | $element.classList.toggle(CSS_CLASS_EMPTY, state.cart.item_count === 0); 16 | $element.classList.toggle(CSS_CLASS_NOT_EMPTY, state.cart.item_count > 0); 17 | } 18 | 19 | const cartGlobalClassesInit = () => { 20 | document.addEventListener(EVENT_QUEUE_START_INTERNAL, updateClasses); 21 | document.addEventListener(EVENT_REQUEST_END_INTERNAL, updateClasses); 22 | document.addEventListener(EVENT_QUEUE_END_INTERNAL, updateClasses); 23 | updateClasses(); 24 | } 25 | 26 | export {cartGlobalClassesInit} -------------------------------------------------------------------------------- /docs/v1/reference/data-ajax-cart-initial-state.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: data-ajax-cart-initial-state 3 | layout: page 4 | --- 5 | 6 | # data-ajax-cart-initial-state 7 | 8 | To do its job Liquid Ajax Cart needs to know current Shopify cart state: what products are in the cart, what total price is, what discounts are applied etc. This information is stored in the [`cart`](https://shopify.dev/api/liquid/objects/cart) liquid object. 9 | 10 | The shortest way to make the cart state accessible for JavaScript code is to convert the Shopify `cart` object to JSON and include it to the page content within the `script` tag. 11 | 12 | In order Liquid Ajax Cart to find the `script` tag with the cart state, it should have the `data-ajax-cart-initial-state` attribute. 13 | 14 | {% raw %} 15 | ```html 16 | {% comment %} Somewhere in layout/theme.liquid {% endcomment %} 17 | 18 | 21 | ``` 22 | {% endraw %} 23 | 24 | It is highly recommended to add the mentioned code to the `layout/theme.liquid` file so that the initial cart state data is accessible on all pages. 25 | 26 | If Liquid Ajax Cart doesn't find the `data-ajax-cart-initial-state` script, it will make an extra Shopify Cart API request to get the cart state. -------------------------------------------------------------------------------- /docs/_includes/internal/variables.html: -------------------------------------------------------------------------------- 1 | {%- assign site_ui_mode = site.ui.mode | default: 'auto' -%} 2 | 3 | {%- assign site_ui_brand_dark = site.ui.brand.dark | default: '#00ceff' -%} 4 | {%- assign site_ui_brand_light = site.ui.brand.light | default: '#a20000' -%} 5 | 6 | {%- assign site_ui_border_color_dark = site.ui.border_color.dark | default: '#5f5f5f' -%} 7 | {%- assign site_ui_border_color_light = site.ui.border_color.light | default: '#dee2e6' -%} 8 | 9 | {%- if site.ui.header.trianglify == true or site.ui.header.trianglify == false -%} 10 | {%- assign site_ui_header_trianglify = site.ui.header.trianglify -%} 11 | {%- else -%} 12 | {%- assign site_ui_header_trianglify = true -%} 13 | {%- endif -%} 14 | 15 | {%- assign site_ui_header_dark_color1 = site.ui.header.dark.color1 | default: '#062a48' -%} 16 | {%- assign site_ui_header_dark_color2 = site.ui.header.dark.color2 | default: '#304e67' -%} 17 | {%- assign site_ui_header_light_color1 = site.ui.header.light.color1 | default: '#080331' -%} 18 | {%- assign site_ui_header_light_color2 = site.ui.header.light.color2 | default: '#673051' -%} 19 | 20 | {%- assign site_ui_masthead_color_dark = site.ui.masthead.color.dark | default: '#fff' -%} 21 | {%- assign site_ui_masthead_color_light = site.ui.masthead.color.light | default: '#fff' -%} 22 | -------------------------------------------------------------------------------- /templates/customers/reset_password.liquid: -------------------------------------------------------------------------------- 1 |
2 |
31 |
--------------------------------------------------------------------------------
/docs/assets/css/styles.scss:
--------------------------------------------------------------------------------
1 | ---
2 | ---
3 |
4 | $site-ui-mode: {{ site.ui.mode | default: 'auto' }};
5 |
6 | $site-ui-brand-dark: {{ site.ui.brand.dark | default: '#00ceff' }};
7 | $site-ui-brand-light: {{ site.ui.brand.light | default: '#a20000' }};
8 |
9 | $site-ui-border-color-dark: {{ site.ui.border_color.dark | default: '#5f5f5f' }};
10 | $site-ui-border-color-light: {{ site.ui.border_color.light | default: '#dee2e6' }};
11 |
12 | $site-ui-header-dark-color1: {{ site.ui.header.dark.color1 | default: '#062a48' }};
13 | $site-ui-header-dark-color2: {{ site.ui.header.dark.color2 | default: '#304e67' }};
14 | $site-ui-header-light-color1: {{ site.ui.header.light.color1 | default: '#080331' }};
15 | $site-ui-header-light-color2: {{ site.ui.header.light.color2 | default: '#673051' }};
16 |
17 | $site-ui-masthead-color-dark: {{ site.ui.masthead.color.dark | default: '#fff' }};
18 | $site-ui-masthead-color-light: {{ site.ui.masthead.color.light | default: '#fff' }};
19 |
20 | @import 'abstracts/themer';
21 | @import 'abstracts/variables';
22 |
23 | // Base Styles
24 | @import 'base/anchor';
25 | @import 'base/body';
26 | @import 'base/blockquote';
27 | @import 'base/horizontal-rule';
28 | @import 'base/scope-markdown';
29 |
30 | // Components
31 | @import 'components/footer';
32 | @import 'components/mobile-toc';
33 |
--------------------------------------------------------------------------------
/docs/v1/reference/requestErrorText.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: requestErrorText
3 | layout: page
4 | ---
5 |
6 | # requestErrorText
7 |
8 | The `requestErrorText` configuration parameter sets the error message text that will appear in [`data-ajax-cart-messages`](/v1/reference/data-ajax-cart-messages/) containers when a Shopify Cart API request is not successful and doesn't have any error description, or if the request is not performed at all due to internet connection, for example.
9 |
10 | By default the text is "*There was an error while updating your cart. Please try again.*".
11 |
12 | You can change the message if your store language is not English or the phrase doesn't fit to your store:
13 | {% raw %}
14 | ```html
15 | {% comment %} Somewhere in layout/theme.liquid {% endcomment %}
16 |
17 |
22 | ```
23 | {% endraw %}
24 |
25 | You can also use the `configureCart` function:
26 | {% raw %}
27 | ```html
28 |
33 | ```
34 | {% endraw %}
--------------------------------------------------------------------------------
/docs/v1/reference/subscribeToCartStateUpdate.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: subscribeToCartStateUpdate()
3 | layout: page
4 | ---
5 |
6 | # subscribeToCartStateUpdate()
7 |
8 | The `subscribeToCartStateUpdate` function adds your callback function to the list of functions that will be called each time after the [State object](/v1/reference/state/) is changed. The callback should be passed as the only parameter.
9 |
10 | ```javascript
11 | subscribeToCartStateUpdate( myCallback );
12 | ```
13 |
14 | ```html
15 |
23 | ```
24 |
25 | Your callback will be called with the [State object](/v1/reference/state/) and the `isCartUpdated` boolean parameter.
26 |
27 | If the `isCartUpdated` is `true`, it means that Liquid Ajax Cart has just received new cart JSON-data from Shopify from the last Shopify [Cart Ajax API request](/v1/reference/requests/) and the new cart state is available in the `cart` property.
28 |
29 | If the `isCartUpdated` is `false`, it means that only `status` State property is changed.
--------------------------------------------------------------------------------
/snippets/product-unit-price.liquid:
--------------------------------------------------------------------------------
1 | {%- unless available -%}
2 | {%- if variant.title -%}
3 | {%- assign available = variant.available -%}
4 | {%- else -%}
5 | {%- assign available = true -%}
6 | {%- endif -%}
7 | {%- endunless -%}
8 |
9 |
26 |
--------------------------------------------------------------------------------
/docs/v2/event-queue-start.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: liquid-ajax-cart:queue-start
3 | layout: docs-v2
4 | ---
5 |
6 | # liquid-ajax-cart:queue-start
7 |
8 |
3 |
4 | {% comment %}
5 | This form must use 'reset_customer_password'
6 | {% endcomment %}
7 | {% form 'reset_customer_password' %}
8 |
9 |
30 |
10 |
12 |
13 | {{ 'customer.reset_password.title' | t }}
11 |{{ 'customer.reset_password.subtext' | t: email: email }}
14 | 15 | {{ form.errors | default_errors }} 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |24 | 25 |
26 | 27 | {% endform %} 28 | 29 |9 | An event which is fired at the `document` when a Shopify Cart API Ajax request 10 | has been just added to the empty [Queue of requests](/v2/queue-of-requests/). 11 |
12 | 13 | ## How it works 14 | 15 | Liquid Ajax Cart doesn't perform Shopify Cart API Ajax requests immediately, it adds them to the [Queue](/v2/queue-of-requests/). 16 | 17 | If there is no request performing at the moment (the [Queue](/v2/queue-of-requests/) is empty) 18 | and something initiates a new request (a user clicked an "Add to cart" button" 19 | or the request is made by a direct call of {% include v2/content/links-to-request-methods.html %}), 20 | the request will be added to the [Queue](/v2/queue-of-requests/), the Liquid Ajax Cart dispatches the 21 | `liquid-ajax-cart:queue-start` event and starts performing the request. 22 | 23 | {% include v2/content/lifecycle-events-reference.html %} 24 | 25 | {%- capture highlight_code -%} 26 | document.addEventListener("liquid-ajax-cart:queue-start", function() { 27 | console.log("A queue of requests is started"); 28 | }); 29 | {%- endcapture -%} 30 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 31 | 32 | -------------------------------------------------------------------------------- /docs/_includes/v2/content/request-end-use-cases.html: -------------------------------------------------------------------------------- 1 | {% assign queue_end_url = '/v2/event-queue-end/' %} 2 | {% if page.url contains 'lifecycle' %} 3 | {% assign queue_end_url = '#liquid-ajax-cart-queue-end' %} 4 | {% endif %} 5 | 6 | Use this event when you want to: 7 | * modify the page content depending on the request's result or when the cart state (which is stored in the [`liquidAjaxCart.cart`](/v2/liquid-ajax-cart-cart/) property) is updated; 8 | * modify the [`data-ajax-cart-section`](/v2/data-ajax-cart-section/) elements content or add event listeners to them when the elements are re-rendered; 9 | * track each successful cart-related user's action, such as adding a product to the cart, removing a product from the cart, etc. 10 | 11 | Code examples with this event: 12 | * [Open the Ajax-cart when a user adds a product to the cart](/v2/js-snippets/#open-the-ajax-cart-when-a-user-adds-a-product-to-the-cart); 13 | 14 | **Don't use** the event when you want to modify the cart state by performing an additional Shopify Cart API Ajax request 15 | based on a particular rule. 16 | There might be a few requests in the [Queue](/v2/queue-of-requests/), 17 | thus it is better to check the condition and initiate the additional request 18 | in a [`liquid-ajax-cart:queue-end`]({{ queue_end_url }}) event listener, 19 | when all the current requests are executed. -------------------------------------------------------------------------------- /docs/v2/js-snippets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ready snippets 3 | layout: docs-v2 4 | --- 5 | 6 | # Ready snippets 7 | 8 | ## Open the Ajax-cart when a user adds a product to the cart 9 | 10 | Usually the Ajax-cart isn't visible and opens when a user clicks the cart icon in the header. 11 | The click on the icon triggers a special CSS class to be added that makes the Ajax-cart show up. 12 | The simplified code looks like this: 13 | 14 | {%- capture highlight_code -%} 15 | // Add a special CSS class when the cart-icon is clicked 16 | document.querySelector("#cart-icon").addEventListener("click", function(){ 17 | document.body.classList.toggle("js-show-ajax-cart"); 18 | }); 19 | {%- endcapture -%} 20 | {% include v2/codeblock.html title="assets/script.js" language="javascript" code=highlight_code %} 21 | 22 | {%- capture highlight_code -%} 23 | // The Ajax-cart is hidden by default 24 | .my-ajax-cart { 25 | display: none; 26 | } 27 | 28 | // The Ajax-cart is visible if a special class is added 29 | body.js-show-ajax-cart .my-ajax-cart { 30 | display: block; 31 | } 32 | {%- endcapture -%} 33 | {% include v2/codeblock.html title="assets/style.css" language="css" code=highlight_code %} 34 | 35 | Our goal is to add the same CSS class to the `body` tag when a new product has been just added to the cart: 36 | {% include v2/content/add-to-cart-class-example.html %} -------------------------------------------------------------------------------- /templates/customers/activate_account.liquid: -------------------------------------------------------------------------------- 1 |
2 |
4 |
5 | {{ 'customer.activate_account.title' | t }}
3 |{{ 'customer.activate_account.subtext' | t }}
6 | 7 |
8 |
33 |
--------------------------------------------------------------------------------
/docs/v2/ajax-cart-product-form.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
9 |
10 | {% comment %}
11 | This form must use 'activate_customer_password'
12 | {% endcomment %}
13 | {% form 'activate_customer_password' %}
14 |
15 | {{ form.errors | default_errors }}
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
32 |
24 |
29 | {% endform %}
30 |
31 | 25 | 26 |
27 | 28 |9 | A custom tag which performs a Shopify Cart API `/cart/add.js` Ajax request once a user submits a product form. 10 |
11 | 12 | ## How it works 13 | Once loaded, an `9 | A boolean read-only property of the [`liquidAjaxCart`](/v2/liquid-ajax-cart/) object, 10 | which is `true` when there is a Shopify Cart API Ajax request in progress. 11 |
12 | 13 | ## How it works 14 | 15 | The `liquidAjaxCart.processing` property returns `true` when the [Queue of requests](/v2/queue-of-requests/) is not empty, 16 | which means that Liquid Ajax Cart is currently executing Shopify Cart API Ajax requests 17 | until the [Queue of requests](/v2/queue-of-requests/) is empty. 18 | 19 | ## Use case 20 | 21 | Check this property when you are building a custom control, 22 | and you want to initiate a Shopify Cart API Ajax request only when 23 | there is no any other request in progress: 24 | 25 | {%- capture highlight_code -%} 26 | document.querySelector("#my-control").addEventListener("click", function() { 27 | if (!window.liquidAjaxCart?.init) 28 | return; 29 | 30 | // Ignore the click if Liquid Ajax Cart is processing a request 31 | if (window.liquidAjaxCart.processing) 32 | return; 33 | 34 | // Run the custom request is there is no other request in progress 35 | window.liquidAjaxCart.add({…}); 36 | }); 37 | {%- endcapture -%} 38 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 39 | -------------------------------------------------------------------------------- /docs/_includes/v2/footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_src/settings.ts: -------------------------------------------------------------------------------- 1 | import {FormattersObjectType, ConfigurationValue, MutationsListType} from './ts-types'; 2 | 3 | import {cartDomBinderRerender} from './dom-binder'; 4 | import {cartMutationsRun} from "./mutations"; 5 | 6 | type SettingsType = { 7 | binderFormatters: FormattersObjectType, 8 | requestErrorText: string, 9 | updateOnWindowFocus: boolean, 10 | quantityTagAllowZero: boolean, 11 | quantityTagDebounce: number, 12 | mutations: MutationsListType, 13 | extraRequestOnError: boolean 14 | } 15 | type SettingsKeysType = keyof SettingsType; 16 | 17 | const settings: SettingsType = { 18 | binderFormatters: {}, 19 | requestErrorText: 'There was an error while updating your cart. Please try again.', 20 | updateOnWindowFocus: true, 21 | quantityTagAllowZero: false, 22 | quantityTagDebounce: 300, 23 | mutations: [], 24 | extraRequestOnError: true 25 | } 26 | 27 | function configureCart(property: string, value: ConfigurationValue) { 28 | if (property in settings) { 29 | (settings[property as SettingsKeysType] as ConfigurationValue) = value; 30 | if (window.liquidAjaxCart.init) { 31 | if (property === 'binderFormatters') { 32 | cartDomBinderRerender(); 33 | } 34 | if (property === 'mutations') { 35 | cartMutationsRun(); 36 | } 37 | } 38 | } else { 39 | console.error(`Liquid Ajax Cart: unknown configuration parameter "${property}"`); 40 | } 41 | } 42 | 43 | export {settings, configureCart}; 44 | -------------------------------------------------------------------------------- /docs/v2/js-ajax-cart-init.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: js-ajax-cart-init 3 | layout: docs-v2 4 | --- 5 | 6 | # js-ajax-cart-init 7 | 8 |9 | A CSS class which is appended to the `html` tag when Liquid Ajax Cart is initialized. 10 |
11 | 12 | ## Example 13 | 14 | Hiding the "Update" button on the cart page, as all the elements are ajaxified and no need to apply the changes manually: 15 | 16 | {%- capture highlight_code -%} 17 | {% raw %} 18 |
19 |
34 |
35 | {% schema %} { "name": "Cart page" } {% endschema %}
36 | {% endraw %}
37 | {%- endcapture -%}
38 | {% include v2/codeblock.html title="sections/main-cart.liquid" language="liquid" code=highlight_code highlight_lines="9-11" %}
39 |
40 | {%- capture highlight_code -%}
41 | html.js-ajax-cart-init .my-cart-page__update-button {
42 | display: none;
43 | }
44 | {%- endcapture -%}
45 | {% include v2/codeblock.html title="assets/style.css" language="css" code=highlight_code %}
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "liquid-ajax-cart",
3 | "version": "2.2.0",
4 | "description": "Build a Shopify Ajax-cart without JavaScript coding",
5 | "private": false,
6 | "browser": "./liquid-ajax-cart.js",
7 | "files": [
8 | "/liquid-ajax-cart.js"
9 | ],
10 | "scripts": {
11 | "screenshot": "node screenshot.js",
12 | "test": "echo \"Error: no test specified\" && exit 1",
13 | "webpack-watch": "webpack --mode=development --watch",
14 | "shopify-watch": "shopify theme dev --store=liquid-ajax-cart",
15 | "start": "npm-run-all --parallel webpack-watch shopify-watch",
16 | "build": "rimraf docs/v2/releases/last && webpack --mode=production && webpack --mode=production --env last=true && webpack --mode=production --env npm=true"
17 | },
18 | "keywords": [
19 | "shopify",
20 | "liquid",
21 | "ajax",
22 | "cart"
23 | ],
24 | "repository": {
25 | "type": "git",
26 | "url": "https://github.com/EvgeniyMukhamedjanov/liquid-ajax-cart.git"
27 | },
28 | "author": "Evgeniy Mukhamedjanov (https://github.com/EvgeniyMukhamedjanov)",
29 | "license": "ISC",
30 | "homepage": "https://liquid-ajax-cart.js.org",
31 | "devDependencies": {
32 | "js-yaml": "^4.1.0",
33 | "npm-run-all": "^4.1.5",
34 | "puppeteer": "^21.5.0",
35 | "resize-img": "^2.0.0",
36 | "rimraf": "^3.0.2",
37 | "ts-loader": "^9.2.6",
38 | "typescript": "^4.5.4",
39 | "webpack": "^5.53.0",
40 | "webpack-cli": "^4.8.0"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/docs/v1/reference/configure.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Configuration
3 | layout: page
4 | ---
5 |
6 | # Configuration
7 |
8 | ### data-ajax-cart-configuration
9 | Add a `script` tag with the `data-ajax-cart-configuration` attribute and a JSON object with configuration parameters inside to set initial configuration of Liquid Ajax Cart:
10 |
11 | {% raw %}
12 | ```html
13 | {% comment %} Somewhere in layout/theme.liquid {% endcomment %}
14 |
15 |
21 | ```
22 | {% endraw %}
23 |
24 | It is highly recommended to add the `script` to the `layout/theme.liquid` file to make the configuration accessible on all pages.
25 |
26 | This method doesn't support the [`productFormsFilter`](/v1/reference/productFormsFilter/) and the [`messageBuilder`](/v1/reference/messageBuilder/) parameters. To set them up use the `configureCart` function that supports all the parameters.
27 |
28 |
29 | ### configureCart()
30 |
31 | The function takes a configuration parameter and its new value:
32 | {% raw %}
33 | ```html
34 |
40 | ```
41 | {% endraw %}
--------------------------------------------------------------------------------
/docs/v1/reference/subscribeToCartSectionsUpdate.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: subscribeToCartSectionsUpdate()
3 | layout: page
4 | ---
5 |
6 | # subscribeToCartSectionsUpdate()
7 |
8 | Cart page
20 | 21 |
22 |
23 |
24 |
25 |
33 | @Kobi, especially for you.
9 | 10 | The `subscribeToCartSectionsUpdate` function adds your callback function to the list of functions that will be called each time after [`data-ajax-cart-section`](/v1/reference/data-ajax-cart-section/) sections HTML is updated. 11 | 12 | The callback should be passed as the only parameter. 13 | 14 | ```javascript 15 | subscribeToCartSectionsUpdate( myCallback ); 16 | ``` 17 | 18 | ```html 19 | 26 | ``` 27 | 28 | Your callback will be called with an array of updated sections: 29 | 30 | ```json 31 | [ 32 | { 33 | "id": "my-cart", 34 | "elements": [ Element {} ] 35 | }, 36 | { 37 | "id": "my-mini-cart", 38 | "elements": [ Element {}, Element {} ] 39 | } 40 | ] 41 | ``` 42 | 43 | * `id` — Shopify section's name. 44 | * `elements` — an array of new `data-ajax-cart-section` HTML elements that replaced old ones. If the Shopify section is updated completely due to an error then the only item of the `elements` array will be the Shopify section's HTML element. -------------------------------------------------------------------------------- /docs/v1/reference/stateBinderFormatters.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: stateBinderFormatters 3 | layout: page 4 | --- 5 | 6 | # stateBinderFormatters 7 | 8 | The `stateBinderFormatters` configuration parameter lets you define custom formatters that you can use with the [`data-ajax-cart-bind-state`](/v1/reference/data-ajax-cart-bind-state/) attribute. 9 | 10 | For example, if you use the `option_selection.js` Shopify asset and its `Shopify.formatMoney` function you can specify your own formatter for money related values: 11 | 12 | {% raw %} 13 | ```html 14 | 36 | 37 | 38 | 39 | {{ cart.total_price | money_with_currency }} 40 | 41 | ``` 42 | {% endraw %} -------------------------------------------------------------------------------- /docs/v2/update-on-window-focus.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: updateOnWindowFocus 3 | layout: docs-v2 4 | --- 5 | 6 | # updateOnWindowFocus 7 | 8 |9 | A configuration parameter which toggles the functionality that updates everything 10 | related to Liquid Ajax Cart when the browser tab loses focus and gets focus back. 11 |
12 | 13 | ## How it works 14 | 15 | Liquid Ajax Cart makes a Shopify Cart API Ajax request each time when the browser tab loses focus and gets focus back 16 | to keep [`data-ajax-cart-section`](/v2/data-ajax-cart-section/) containers and the [`liquidAjaxCart.cart`](/v2/liquid-ajax-cart-cart/) object up to date. 17 | 18 | It is necessary because a user can open two browser tabs with the same Shopify store, adds a product to the cart in the second tab, 19 | then goes back to the first one. The first tab "doesn't know" that the new product was added, so the user will see outdated data in the cart. 20 | The additional Ajax request is supposed to prevent this issue. 21 | 22 | You might want to disable this functionality during the development process because when you switch from DevTools to a page content, 23 | `window` object will get and lose focus all the time and cart sections will be updating constantly. 24 | 25 | Use the [`conf`](/v2/liquid-ajax-cart-conf/) method of the [`liquidAjaxCart`](/v2/liquid-ajax-cart/) object 26 | to switch this functionality off: 27 | {%- capture highlight_code -%} 28 | liquidAjaxCart.conf("updateOnWindowFocus", false); 29 | {%- endcapture -%} 30 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 31 | -------------------------------------------------------------------------------- /docs/v1/reference/data-ajax-cart-quantity-input.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: data-ajax-cart-quantity-input 3 | layout: page 4 | --- 5 | 6 | # data-ajax-cart-quantity-input 7 | 8 | Add the `data-ajax-cart-quantity-input` attribute with a cart item's index or a cart item's key as the value to an input element to ajaxify the input field: once a user changes the input's value, Liquid Ajax Cart will send a Shopify [Cart API request](/v1/reference/requests/) to update the quantity. 9 | 10 | The request will be sent on input's `change` event and if a user presses the `Enter` key within the input field. 11 | 12 | If a user presses the `Esc` key within the input, its value will be reset to the current item's quantity according to the [State](/v1/reference/state/) object. 13 | 14 | The `data-ajax-cart-quantity-input` input fields become `readonly` when there is a Shopify Cart API request in progress (if the [State](/v1/reference/state/)’s `status.requestInProgress` property is `true`) 15 | 16 | Using a line item's index: 17 | {% raw %} 18 | ```html 19 | {% for item in cart.items %} 20 | 21 | {% endfor %} 22 | ``` 23 | {% endraw %} 24 | 25 | Using a line item's key is supported also, but there were found unexpected behaviour of the `/add/change.js` endpoint handler in some cases. Test it carefully with your store before going live: 26 | {% raw %} 27 | ```html 28 | {% for item in cart.items %} 29 | 30 | {% endfor %} 31 | ``` 32 | {% endraw %} -------------------------------------------------------------------------------- /docs/_sass/components/_highlight.scss: -------------------------------------------------------------------------------- 1 | @if $site-ui-mode == 'auto' { 2 | @media (prefers-color-scheme: dark) { 3 | @include highlight-dark-theme(); 4 | } 5 | 6 | @media (prefers-color-scheme: light) { 7 | @include highlight-light-theme(); 8 | } 9 | } 10 | @else if $site-ui-mode == 'dark' { 11 | @include highlight-dark-theme(); 12 | } 13 | @else if $site-ui-mode == 'light' { 14 | @include highlight-light-theme(); 15 | } 16 | 17 | .highlight { 18 | @include themer(background-color, ( 19 | 'dark': #3f3f3f, 20 | 'light': #f7f7f9, 21 | )); 22 | @include themer(border-color, ( 23 | 'dark': #222222, 24 | 'light': #e1e1e8, 25 | )); 26 | 27 | border-style: solid; 28 | border-width: 1px; 29 | border-radius: 4px; 30 | padding: 9px 14px; 31 | margin-bottom: 14px; 32 | } 33 | 34 | .highlight pre { 35 | background-color: transparent; 36 | border: 0; 37 | padding: 0; 38 | margin-top: 0; 39 | margin-bottom: 0; 40 | } 41 | 42 | .highlight pre, 43 | .highlight code { 44 | word-wrap: normal; 45 | word-break: normal; 46 | white-space: pre; 47 | } 48 | 49 | .highlight pre code { 50 | @include themer(color, ( 51 | 'dark': #fdce93, 52 | 'light': #333, 53 | )); 54 | 55 | font-size: inherit; 56 | white-space: pre; 57 | background-color: transparent; 58 | border: none; 59 | padding: 0; 60 | } 61 | 62 | .highlight pre .lineno { 63 | display: inline-block; 64 | color: #bebec5; 65 | margin-right: 10px; 66 | padding-right: 5px; 67 | text-align: right; 68 | width: 22px; 69 | } 70 | -------------------------------------------------------------------------------- /docs/v1/reference/data-ajax-cart-section-scroll.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: data-ajax-cart-section-scroll 3 | layout: page 4 | --- 5 | 6 | # data-ajax-cart-section-scroll 7 | 8 | If you have a scrollable area within a [`data-ajax-cart-section`](/v1/reference/data-ajax-cart-section/) section, the scroll position will be reset to top every time when the cart is changed because the section’s HTML will be completely replaced with a new one. 9 | 10 | Add the `data-ajax-cart-section-scroll` attribute to the scrollable area and Liquid Ajax Cart will keep the scroll position unchanged. 11 | 12 | ```html 13 | {% raw %}
14 |
{% endraw %}
25 | ```
26 |
27 | If you have several scrollable areas, add the `data-ajax-cart-section-scroll` attribute with unique parameters so Liquid Ajax Cart can distinguish them after HTML update.
28 |
29 | ```html
30 | {% raw %} Cart
15 | 16 |
17 |
18 | {% comment %}
19 | Scrollable area
20 | {% endcomment %}
21 |
22 |
23 |
24 |
31 |
{% endraw %}
47 | ```
48 |
--------------------------------------------------------------------------------
/docs/_includes/v2/styles/cards.scss:
--------------------------------------------------------------------------------
1 | .cards {
2 | display: grid;
3 | grid-template-columns: repeat(6, 1fr);
4 | gap: 2.25rem;
5 | margin-top: 2rem;
6 | }
7 |
8 | .cards__card {
9 | border: 1px solid #20344C;
10 | border-top: 3px solid #243953;
11 | background-color: rgba(26, 37, 63, .3);
12 | border-radius: .875rem;
13 | padding: 2rem 1.5rem 0;
14 | position: relative;
15 | transition: .15s;
16 | z-index: 1;
17 | display: flex;
18 | flex-direction: column;
19 | min-width: 0;
20 | grid-column: span 6;
21 |
22 | &:hover {
23 | transform: scale(1.02);
24 | background-color: rgba(26, 37, 63, .5);
25 | }
26 |
27 | .codeblock {
28 | margin-bottom: 0;
29 | padding-bottom: 0;
30 | margin-top: 1.75rem;
31 | }
32 |
33 | .codeblock__wrapper {
34 | border: 1px solid #20344C;
35 | border-bottom: 0;
36 | border-radius: .75rem .75rem 0 0;
37 | }
38 |
39 | &--3-6 {
40 | @media (min-width: 768px) {
41 | grid-column: span 3;
42 | }
43 | }
44 |
45 | &--4-6 {
46 | @media (min-width: 768px) {
47 | grid-column: span 3;
48 | }
49 | @media (min-width: 992px) {
50 | grid-column: span 4;
51 | }
52 | }
53 |
54 | &--2-6 {
55 | @media (min-width: 768px) {
56 | grid-column: span 3;
57 | }
58 | @media (min-width: 992px) {
59 | grid-column: span 2;
60 | }
61 | }
62 | }
63 |
64 | .cards__card-title {
65 | font-size: 1.15rem;
66 | margin-bottom: 1.25rem;
67 | font-weight: 700;
68 | }
69 |
70 | .cards__card-description {
71 | color: #b5bedd;
72 | flex-grow: 1;
73 | max-width: 47rem;
74 |
75 | a {
76 | color: inherit !important;
77 | }
78 | }
--------------------------------------------------------------------------------
/docs/v2/binder-formatters.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: binderFormatters
3 | layout: docs-v2
4 | ---
5 |
6 | # binderFormatters
7 |
8 | Cart
32 | 33 |
34 |
35 | {% for item in cart.items %}
36 |
45 |
46 |
37 | {% comment %}
38 | Despite it sounds crazy, lets imagine that each line-item is scrollable.
39 | Thus it needs the data-ajax-cart-section-scroll attribute with a unique parameter
40 | {% endcomment %}
41 |
42 | {% endfor %}
43 |
44 | 9 | A configuration parameter which lets you define custom formatters 10 | to use with the [`data-ajax-cart-bind`](/v2/data-ajax-cart-bind/) attribute. 11 |
12 | 13 | ## Code example 14 | 15 | For example, if you use the `option_selection.js` Shopify asset and its `Shopify.formatMoney` function, 16 | you can specify your own formatter for money related values. 17 | Use the [`conf`](/v2/liquid-ajax-cart-conf/) method of the [`liquidAjaxCart`](/v2/liquid-ajax-cart/) object to do this: 18 | 19 | {%- capture highlight_code -%} 20 | liquidAjaxCart.conf('binderFormatters', { 21 | 'my_formatter': value => { 22 | // Don't change anything if the value is not a number 23 | if (typeof value !== 'number' && !(value instanceof Number)) { 24 | return value; 25 | } 26 | 27 | // Apply formatMoney function if it exists 28 | if (window.Shopify?.formatMoney) { 29 | return Shopify.formatMoney(value); 30 | } 31 | 32 | // Fallback to the "100 USD" format if there is no Shopify.formatMoney 33 | return `${ value.toFixed(2) } ${ window.liquidAjaxCart.cart.currency }`; 34 | } 35 | }); 36 | {%- endcapture -%} 37 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 38 | 39 | Applying the filter: 40 | {%- capture highlight_code -%} 41 | {% raw %} 42 | 43 | {{ cart.total_price | money_with_currency }} 44 | 45 | {% endraw %} 46 | {%- endcapture -%} 47 | {% include v2/codeblock.html language="liquid" code=highlight_code %} -------------------------------------------------------------------------------- /snippets/pagination-custom.liquid: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | 3 | This snippet renders a custom widget based on the current 'paginate' context, 4 | defined in { % paginate XXXX by 5 % } tags wrapping the content. 5 | The example below breaks the pagination down so you can setup your own styles and behavior if you wish. 6 | 7 | Basic Pagination Usage: 8 |
9 | {{ paginate | default_pagination }}
10 |
11 |
12 | Replace Text:
13 |
14 | {{ paginate | default_pagination | replace: 'Previous', 'Newer articles' | replace: 'Next', 'Older articles' }}
15 |
16 |
17 | More information:
18 | - index#pagination
19 | - http://docs.shopify.com/themes/liquid-variables/paginate
20 |
21 | {% endcomment %}
22 |
23 | -
24 | {% if paginate.previous %}
25 |
- ← 26 | {% else %} 27 |
- ← 28 | {% endif %} 29 | 30 | {% for part in paginate.parts %} 31 | {% if part.is_link %} 32 |
- 33 | {{ part.title }} 34 | 35 | {% else %} 36 | {% if part.title == paginate.current_page %} 37 |
- {{ part.title }} 38 | {% else %} 39 |
- {{ part.title }} 40 | {% endif %} 41 | {% endif %} 42 | {% endfor %} 43 | 44 | {% if paginate.next %} 45 |
- → 46 | {% else %} 47 |
- → 48 | {% endif %} 49 |
2 | {% for i in (1..section.settings.post_limit) %}
3 |
21 |
22 | {% if section.settings.post_limit == 1 and section.settings.blog_show_image %}
23 |
--------------------------------------------------------------------------------
/docs/v2/liquid-ajax-cart-cart.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: liquidAjaxCart.cart
3 | layout: docs-v2
4 | ---
5 |
6 | # liquidAjaxCart.cart
7 |
8 |
24 |
33 | {% endif %}
34 |
35 | {% endfor %}
36 |
25 |
32 | {{ 'home_page.onboarding.blog_title' | t }} →
26 | {% if section.settings.blog_show_excerpt %} 27 |
28 | {{ 'home_page.onboarding.blog_excerpt' | t }}
29 |
30 | {% endif %}
31 | 9 | A read-only property of the [`liquidAjaxCart`](/v2/liquid-ajax-cart/) object, which returns the current cart state data. 10 |
11 | 12 | ## How it works 13 | 14 | After each successful Shopify Cart API Ajax request, 15 | Liquid Ajax Cart retrieves the cart state data from the response and saves it the in the `liquidAjaxCart.cart` property. 16 | If a request is successful but the response doesn't have the cart state data (the `/cart/add.js` response is the case), 17 | Liquid Ajax Cart performs an additional `/cart/update.js` request to get the data. 18 | 19 | Use the `liquidAjaxCart.cart` property to read the latest cart state data. 20 | 21 | As the cart state data is updated after a Shopify Cart API Ajax request, 22 | subscribe to the [`liquid-ajax-cart:request-end`](/v2/event-request-end/) event 23 | if you want to run your JavaScript code when the cart state is updated. 24 | 25 | ## Structure 26 | 27 | {%- capture highlight_code -%} 28 | 29 | console.log(window.liquidAjaxCart.cart); 30 | 31 | {%- endcapture -%} 32 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 33 | 34 | Result: 35 | 36 | {%- capture highlight_code -%} 37 | { 38 | "token":"b7d3743e2c398043f209c5a3a9014f9d", 39 | "note":null, 40 | "attributes":{}, 41 | "original_total_price":1000, 42 | "total_price":1000, 43 | "total_discount":0, 44 | "total_weight":0, 45 | "item_count":1, 46 | "items":[{…}], 47 | "requires_shipping":false, 48 | "currency":"USD", 49 | "items_subtotal_price":1000, 50 | "cart_level_discount_applications":[] 51 | } 52 | {%- endcapture -%} 53 | {% include v2/codeblock.html language="json" code=highlight_code %} -------------------------------------------------------------------------------- /docs/v1/reference/data-ajax-cart-toggle-class-button.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: data-ajax-cart-toggle-class-button 3 | layout: page 4 | --- 5 | 6 | 7 | # data-ajax-cart-toggle-class-button 8 | 9 | Add the `data-ajax-cart-toggle-class-button` attribute to an HTML element, pass a CSS class name as a parameter, and Liquid Ajax Cart will "toggle" the CSS class for the `body` tag when a user clicks on the element. 10 | 11 | The CSS class will be added to the `body` tag if it doesn't have the CSS class. The CSS class will be removed from the `body` tag if it has the CSS class. 12 | 13 | The usecase is "Show/Hide Cart" button. It is used in the header of the demo store: "Cart" link shows and hides the right-side cart. 14 | 15 | {% raw %} 16 | ```html 17 | 18 | {% section 'my-cart' %}
19 |
20 |
26 |
27 |
28 |
29 |
30 |
32 | My Cart
33 |
34 |
35 |
39 | ```
40 | {% endraw %}
41 |
42 | If you want to create a button that will only add or only remove a CSS class — specify the additional parameter:
43 |
44 | ```html
45 |
48 |
49 |
52 | ```
53 |
--------------------------------------------------------------------------------
/snippets/newsletter-form.liquid:
--------------------------------------------------------------------------------
1 |
2 | {% form 'customer' %}
3 | {{ form.errors | default_errors }}
4 | {% if form.posted_successfully? %}
5 |
13 | {{ 'general.newsletter_form.confirmation' | t }}
6 | {% else %} 7 | 8 | 9 | 10 | {% endif %} 11 | {% endform %} 12 |
14 | {% form 'customer' %}
15 | {{ form.errors | default_errors }}
16 | {% if form.posted_successfully? %}
17 |
29 |
--------------------------------------------------------------------------------
/docs/v1/reference/updateOnWindowFocus.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: updateOnWindowFocus
3 | layout: page
4 | ---
5 |
6 | # updateOnWindowFocus
7 |
8 | Liquid Ajax Cart makes a Shopify Cart API request each time when the browser tab loses focus and gets focus back to keep [`data-ajax-cart-section`](/v1/reference/data-ajax-cart-section/) containers and the [State](/v1/reference/state/) object up to date.
9 |
10 | It is necessary because a user can open two browser tabs with the same Shopify store, adds a product to the cart in the second tab and then goes back to the first one. The first tab "doesn't know" about the new product in the cart but once the tab gets focus it will get updated.
11 |
12 | You might want to disable this functionality during the development process because when you switch from DevTools to a page content and back the `window` object will get and lose focus all the time and cart sections will be updating constantly. Use the `updateOnWindowFocus` configuration parameter to turn this functionality off.
13 |
14 | Disable using the `data-ajax-cart-configuration` attribute:
15 | {% raw %}
16 | ```html
17 | {% comment %} Somewhere in layout/theme.liquid {% endcomment %}
18 |
19 |
24 | ```
25 | {% endraw %}
26 |
27 | Disable using the `configureCart` function:
28 | {% raw %}
29 | ```html
30 |
35 | ```
36 | {% endraw %}
37 |
38 | You can change the parameter right in the browser's console by typing the following command:
39 | ```javascript
40 | liquidAjaxCart.configureCart('updateOnWindowFocus', false)
41 | ```
--------------------------------------------------------------------------------
/docs/v2/liquid-ajax-cart.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: The liquidAjaxCart object
3 | layout: docs-v2
4 | ---
5 |
6 | # The liquidAjaxCart object
7 |
8 | {{ 'general.newsletter_form.confirmation' | t }}
18 | {% else %} 19 | 20 |
21 |
22 |
23 |
24 |
25 |
26 | {% endif %}
27 | {% endform %}
28 | 9 | An object which exposes the methods and properties of the Liquid Ajax Cart library. 10 | The `liquidAjaxCart` object is defined as a property of the `window` object to be accessible from everywhere. 11 |
12 | 13 | ## Methods and properties 14 | 15 | A few of them are available as soon as the library code is loaded: 16 | * [`conf()`](/v2/liquid-ajax-cart-conf/) — sets configuration parameter values; 17 | * [`init`](/v2/liquid-ajax-cart-init/) — initialization status (boolean). 18 | 19 | The rest of them are available only after the [initialization](/v2/lifecycle-events-api/#initialization): 20 | 21 | * [`get()`](/v2/liquid-ajax-cart-get/) — makes a Shopify Cart API `GET /cart.js` Ajax request; 22 | * [`add()`](/v2/liquid-ajax-cart-add/) — makes a `POST /cart/add.js` request; 23 | * [`change()`](/v2/liquid-ajax-cart-change/) — makes a `POST /cart/change.js` request; 24 | * [`update()`](/v2/liquid-ajax-cart-update/) — makes a `POST /cart/update.js` request; 25 | * [`clear()`](/v2/liquid-ajax-cart-clear/) — makes a `POST /cart/clear.js` request; 26 | * [`cart`](/v2/liquid-ajax-cart-cart/) — current cart state (JSON); 27 | * [`processing`](/v2/liquid-ajax-cart-processing/) — `true` if there is a request in progress now (boolean). 28 | 29 | ## Access after initialization 30 | 31 | Since most of the `liquidAjaxCart` methods and properties are available only after the initialization, 32 | use the [`liquid-ajax-cart:init`](/v2/event-init/) event 33 | along with the [`liquidAjaxCart.init`](/v2/liquid-ajax-cart-init/) property 34 | when your code depends on Liquid Ajax Cart and should be executed as soon as the library is fully available: 35 | {% include v2/content/init-event-example.html %} -------------------------------------------------------------------------------- /_src/controls/product-form-element.ts: -------------------------------------------------------------------------------- 1 | import {cartRequestAdd} from "../ajax-api"; 2 | import {CUSTOM_ELEMENT_PREFIX} from "../const"; 3 | 4 | const ELEMENT_TAG = `${CUSTOM_ELEMENT_PREFIX}-product-form`; 5 | const DATA_ATTR_LOADING = 'processing'; 6 | 7 | class HTMLProductFormElement extends HTMLElement { 8 | connectedCallback() { 9 | const $element = this; 10 | 11 | const $innerForms = this.querySelectorAll('form') 12 | if ($innerForms.length !== 1) { 13 | console.error( 14 | `Liquid Ajax Cart: "${ELEMENT_TAG}" element must have one "form" element as a child, ${$innerForms.length} found`, 15 | $element 16 | ); 17 | return; 18 | } 19 | 20 | const $form = $innerForms[0]; 21 | 22 | const formActionUrl = new URL($form.action); 23 | if (formActionUrl.pathname !== `${window.Shopify?.routes?.root || '/'}cart/add`) { 24 | console.error( 25 | `Liquid Ajax Cart: "${ELEMENT_TAG}" element's form "action" attribute value isn't a product form action URL`, 26 | $form, 27 | $element 28 | ); 29 | return; 30 | } 31 | 32 | $form.addEventListener('submit', event => { 33 | if (!$element.hasAttribute(DATA_ATTR_LOADING)) { 34 | const formData = new FormData($form); 35 | $element.setAttribute(DATA_ATTR_LOADING, ''); 36 | 37 | cartRequestAdd(formData, { 38 | lastCallback: () => { 39 | $element.removeAttribute(DATA_ATTR_LOADING) 40 | }, 41 | info: { 42 | "initiator": $element 43 | } 44 | }) 45 | } 46 | event.preventDefault(); 47 | }); 48 | } 49 | } 50 | 51 | function cartProductFormElementInit() { 52 | customElements.define(ELEMENT_TAG, HTMLProductFormElement); 53 | } 54 | 55 | export { 56 | cartProductFormElementInit, 57 | HTMLProductFormElement 58 | } -------------------------------------------------------------------------------- /docs/_includes/jekyll-docs-theme/anchor_headings.html: -------------------------------------------------------------------------------- 1 | {% assign fm_anchorClass = layout.anchor_headings.anchorClass | default: page.anchor_headings.anchorClass | default: "" %} 2 | 3 | {% capture anchorClass -%} 4 | {{- include.anchorClass -}} 5 | {%- if fm_anchorClass -%} 6 | .{{- fm_anchorClass -}} 7 | {%- endif -%} 8 | {%- endcapture %} 9 | 10 | {% assign beforeHeading = page.anchor_headings.beforeHeading | default: layout.anchor_headings.beforeHeading | default: false %} 11 | {% assign anchorAttrs = page.anchor_headings.anchorAttrs | default: layout.anchor_headings.anchorAttrs | default: '' %} 12 | {% assign anchorBody = page.anchor_headings.anchorBody | default: layout.anchor_headings.anchorBody | default: "#" %} 13 | {% assign anchorTitle = page.anchor_headings.anchorTitle | default: layout.anchor_headings.anchorTitle | default: '' %} 14 | {% assign h_min = page.anchor_headings.h_min | default: layout.anchor_headings.h_min | default: 1 %} 15 | {% assign h_max = page.anchor_headings.h_max | default: layout.anchor_headings.h_max | default: 6 %} 16 | {% assign bodyPrefix = page.anchor_headings.bodyPrefix | default: layout.anchor_headings.bodyPrefix | default: '' %} 17 | {% assign bodySuffix = page.anchor_headings.bodySuffix | default: layout.anchor_headings.bodySuffix | default: '' %} 18 | 19 | {% unless page.disable_anchors or page.url | slice: 0, 11 == '/v1/reference/' %} 20 | {% include jekyll-docs-theme/vendor/anchor_headings.html 21 | html=content 22 | beforeHeading=beforeHeading 23 | anchorAttrs=anchorAttrs 24 | anchorBody=anchorBody 25 | anchorClass=anchorClass 26 | anchorTitle=anchorTitle 27 | h_min=h_min 28 | h_max=h_max 29 | bodyPrefix=bodyPrefix 30 | bodySuffix=bodySuffix 31 | %} 32 | {% else %} 33 | {{ content }} 34 | {% endunless %} 35 | -------------------------------------------------------------------------------- /docs/_includes/home/youtube-link.css: -------------------------------------------------------------------------------- 1 | .youtube-link { 2 | border-bottom: none !important; 3 | display: block; 4 | transition: transform .3s; 5 | transform-origin: left bottom; 6 | transform:skew(0); 7 | } 8 | .youtube-link:hover { 9 | transform:skew(-5deg); 10 | } 11 | .youtube-link:before { 12 | content: ''; 13 | width: 0; 14 | height: 0; 15 | border-style: solid; 16 | border-width: 5px 0 5px 12px; 17 | border-color: transparent transparent transparent #000000; 18 | border-style: solid; 19 | margin-right: 5px; 20 | display: inline-block; 21 | transition: border-width .1s; 22 | } 23 | .youtube-link:hover:before { 24 | border-color: transparent transparent transparent #FF0000; 25 | } 26 | 27 | .youtube-link__timing { 28 | display: inline-block; 29 | background-color: #606060; 30 | border-radius: 3px; 31 | color: white; 32 | font-size: 14px; 33 | padding: 0 4px; 34 | line-height: 1.3; 35 | margin-left: 5px; 36 | position: relative; 37 | /* overflow: hidden; */ 38 | } 39 | .youtube-link__timing:before { 40 | content: ''; 41 | position: absolute; 42 | left: 0; 43 | bottom: 0; 44 | width: 0; 45 | border-radius: 3px; 46 | top: 0; 47 | background-color: #DD0000; 48 | } 49 | .youtube-link:hover .youtube-link__timing:before { 50 | width: 100%; 51 | transition: .1s .2s; 52 | } 53 | 54 | .youtube-link__title { 55 | position: relative; 56 | padding: 3px 0; 57 | overflow: hidden; 58 | transition: color .15s; 59 | } 60 | .youtube-link__title:before, 61 | .youtube-link__title:after { 62 | content: ''; 63 | position: absolute; 64 | height: 1px; 65 | width: 100%; 66 | bottom: 0; 67 | left: 0; 68 | background-color: rgba(0, 0, 0, .3); 69 | } 70 | .youtube-link__title:after { 71 | width: 0; 72 | background-color: #FF0000; 73 | height: 2px; 74 | } 75 | .youtube-link:hover .youtube-link__youtube { 76 | color: #EE0000; 77 | } 78 | .youtube-link:hover .youtube-link__title:after { 79 | width: 100%; 80 | transition: width .2s linear; 81 | } -------------------------------------------------------------------------------- /snippets/collection-tags.liquid: -------------------------------------------------------------------------------- 1 | {%- if collection.all_tags.size > 0 -%} 2 |
3 |
4 | {% comment %}Good for /collections/all collection and regular collections{% endcomment %}
5 | {%- if collection.handle -%}
6 | {%- capture collection_url -%}
7 | {%- if collection.url == blank -%}
8 | {{ routes.all_products_collection_url }}{%- unless collection.sort_by == blank -%}?sort_by={{ collection.sort_by }}{%- endunless -%}
9 | {%- else -%}
10 | {{ collection.url }}{%- unless collection.sort_by == blank -%}?sort_by={{ collection.sort_by }}{%- endunless -%}
11 | {%- endif -%}
12 | {%- endcapture -%}
13 | {% comment %}Good for automatic type collections{% endcomment %}
14 | {%- elsif collection.current_type -%}
15 | {% assign collection_url = collection.current_type | url_for_type | sort_by: collection.sort_by %}
16 | {% comment %}Good for automatic vendor collections{% endcomment %}
17 | {%- elsif collection.current_vendor -%}
18 | {% assign collection_url = collection.current_vendor | url_for_vendor | sort_by: collection.sort_by %}
19 | {%- endif -%}
20 |
27 |
28 | {%- endif -%}
29 |
30 |
39 |
--------------------------------------------------------------------------------
/docs/v1/reference/addToCartCssClass.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: addToCartCssClass
3 | layout: page
4 | ---
5 |
6 | # addToCartCssClass
7 |
8 | The `addToCartCssClass` configuration parameter lets you specify a CSS class that will be attached to the `body` tag after successful adding a product to the cart.
9 |
10 | The usecase — opening a cart drawer after a user clicks an "Add to cart" button.
11 |
12 | Setting up using the `data-ajax-cart-configuration` attribute:
13 | {% raw %}
14 | ```html
15 | {% comment %} Somewhere in layout/theme.liquid {% endcomment %}
16 |
17 |
22 | ```
23 | {% endraw %}
24 |
25 | Setting up using the `configureCart` function:
26 | {% raw %}
27 | ```html
28 |
33 | ```
34 | {% endraw %}
35 |
36 | ### Removing the class after a while
37 |
38 | You can specify the time in milliseconds after which the class should be removed from the `body` tag.
39 |
40 | The usecase — opening a mini-cart popup for 3 seconds.
41 |
42 | Setting up using the `data-ajax-cart-configuration` attribute:
43 | {% raw %}
44 | ```html
45 | {% comment %} Somewhere in layout/theme.liquid {% endcomment %}
46 |
47 |
52 | ```
53 | {% endraw %}
54 |
55 | Setting up using the `configureCart` function:
56 | {% raw %}
57 | ```html
58 |
63 | ```
64 | {% endraw %}
--------------------------------------------------------------------------------
/docs/_includes/jekyll-docs-theme/toc.html:
--------------------------------------------------------------------------------
1 | {% assign fm_class = layout.table_of_contents.class | default: page.table_of_contents.class | default: "" %}
2 | {% assign fm_anchor_class = layout.table_of_contents.anchor_class | default: page.table_of_contents.anchor_class | default: "" %}
3 |
4 | {% capture class -%}
5 | {{- include.class -}}
6 | {%- if fm_class != "" -%}
7 | .{{- fm_class -}}
8 | {%- endif -%}
9 | {%- endcapture %}
10 |
11 | {% capture anchor_class %}
12 | {{- include.anchor_class -}}
13 | {%- if fm_anchor_class != "" -%}
14 | .{{- fm_anchor_class -}}
15 | {%- endif -%}
16 | {% endcapture %}
17 |
18 | {% assign sanitize = page.table_of_contents.sanitize | default: layout.table_of_contents.sanitize | default: false %}
19 | {% assign h_min = page.table_of_contents.h_min | default: layout.table_of_contents.h_min | default: 2 %}
20 | {% assign h_max = page.table_of_contents.h_max | default: layout.table_of_contents.h_max | default: 5 %}
21 | {% assign ordered = page.table_of_contents.ordered | default: layout.table_of_contents.ordered | default: false %}
22 | {% assign item_class = include.item_class | page.table_of_contents.item_class | default: layout.table_of_contents.item_class | default: '' %}
23 | {% assign baseurl = page.table_of_contents.baseurl | default: layout.table_of_contents.baseurl | default: '' %}
24 | {% assign skipNoIDs = page.table_of_contents.skipNoIDs | default: layout.table_of_contents.skipNoIDs | default: false %}
25 |
26 | {% assign transformed_content = content | replace: 'Triggers the ', '' %}
27 |
28 | {% include jekyll-docs-theme/vendor/toc.html
29 | html=transformed_content
30 | id=include.id
31 | class=class
32 | sanitize=sanitize
33 | h_min=h_min
34 | h_max=h_max
35 | ordered=ordered
36 | item_class=item_class
37 | baseurl=baseurl
38 | anchor_class=anchor_class
39 | skipNoIDs=skipNoIDs
40 | %}
41 |
--------------------------------------------------------------------------------
/docs/v2/data-ajax-cart-quantity-plus.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: data-ajax-cart-quantity-plus
3 | layout: docs-v2
4 | ---
5 |
6 | # data-ajax-cart-quantity-plus
7 |
8 |
9 | An attribute which identifies a "Plus" button inside a [`
15 |
Cart ({{ cart.item_count }})
16 | 17 |
18 | {% for line_item in cart.items %}
19 | {% assign line_item_index = forloop.index %}
20 |
21 |
22 |
Price: {{ line_item.final_price | money }}
23 |
24 |
25 | Quantity:
26 |
27 |
29 | Minus one
30 |
31 |
32 |
33 |
38 |
39 |
41 | Plus one
42 |
43 |
44 |
45 |
46 | {% endraw %}
47 | {%- endcapture -%}
48 | {% include v2/codeblock.html title="sections/my-ajax-cart.liquid" language="liquid" code=highlight_code highlight_lines="26" %}
49 |
50 | Find more details on the [``](/v2/ajax-cart-quantity/) page.
--------------------------------------------------------------------------------
/docs/v2/data-ajax-cart-quantity-minus.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: data-ajax-cart-quantity-minus
3 | layout: docs-v2
4 | ---
5 |
6 | # data-ajax-cart-quantity-minus
7 |
8 |
9 | An attribute which identifies a "Minus" button inside a [`
15 |
Cart ({{ cart.item_count }})
16 | 17 |
18 | {% for line_item in cart.items %}
19 | {% assign line_item_index = forloop.index %}
20 |
21 |
22 |
Price: {{ line_item.final_price | money }}
23 |
24 |
25 | Quantity:
26 |
27 |
29 | Minus one
30 |
31 |
32 |
33 |
38 |
39 |
41 | Plus one
42 |
43 |
44 |
45 |
46 | {% endraw %}
47 | {%- endcapture -%}
48 | {% include v2/codeblock.html title="sections/my-ajax-cart.liquid" language="liquid" code=highlight_code highlight_lines="14" %}
49 |
50 | Find more details on the [``](/v2/ajax-cart-quantity/) page.
--------------------------------------------------------------------------------
/docs/v1/reference/sections.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Ajaxified sections
3 | layout: page
4 | ---
5 |
6 | # Ajaxified sections
7 |
8 | Liquid Ajax Cart reloads HTML code of the HTML containers that marked with the [`data-ajax-cart-section`](/v1/reference/data-ajax-cart-section/) attribute every time when the Shopify cart is changed.
9 |
10 | It uses [Bundled section rendering](https://shopify.dev/api/ajax/reference/cart#bundled-section-rendering) under the hood to ask Shopify to provide re-rendered HTML code for theme sections with each Cart API request response. Due to this, the `data-ajax-cart-section` must be applied only within sections.
11 |
12 | After Liquid Ajax Cart received a response of a Shopify Cart API request with the re-rendered sections' HTML, it replaces HTML of the `data-ajax-cart-section` containers within the section with the new ones.
13 |
14 | ##### Immutable elements
15 |
16 | If you want to have an immutable HTML element within a [`data-ajax-cart-section`](/v1/reference/data-ajax-cart-section/) container — add the `data-ajax-cart-static-element` attribute to this element. HTML of the immutable element will *not* be replaced when its section gets updated.
17 |
18 | ##### Scrollable area
19 |
20 | If you have a scrollable area within a `data-ajax-cart-section` container, the scroll position will be reset to top every time when the cart is changed because the section's HTML will be completely replaced with a new one. To keep the scroll position the same add the [`data-ajax-cart-section-scroll`](/v1/reference/data-ajax-cart-section-scroll/) attribute to the scrollable area.
21 |
22 |
23 | ##### JavaScript callback
24 |
25 | If you want to run your JavaScript code after the HTML code of the `data-ajax-cart-section` sections are reloaded — use the [`subscribeToCartSectionsUpdate`](/v1/reference/subscribeToCartSectionsUpdate/) function.
26 |
27 | ##### Example
28 | Since the cart sections are plain Shopify liquid theme sections, you are free to use any Liquid tags, objects and filters.
29 |
30 | {% include code/section.html %}
31 |
--------------------------------------------------------------------------------
/docs/v2/extra-request-on-error.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: extraRequestOnError
3 | layout: docs-v2
4 | ---
5 |
6 | # extraRequestOnError
7 |
8 |
2 |
8 |
53 |
--------------------------------------------------------------------------------
/_src/state.ts:
--------------------------------------------------------------------------------
1 | import {
2 | AppStateType,
3 | AppStateCartType,
4 | EventRequestEndType
5 | } from './ts-types';
6 |
7 | import {
8 | EVENT_REQUEST_END_INTERNAL,
9 | } from './ajax-api';
10 | import {DATA_ATTR_PREFIX} from "./const";
11 |
12 | const DATA_ATTR_INITIAL_STATE = `${DATA_ATTR_PREFIX}-initial-state`;
13 |
14 | let cart: AppStateCartType = null;
15 | let previousCart: AppStateCartType | undefined = undefined
16 |
17 | function cartStateInit(): Promise {
18 |
19 | document.addEventListener(EVENT_REQUEST_END_INTERNAL, (event: EventRequestEndType) => {
20 | const {requestState} = event.detail;
21 | let newCart: AppStateCartType;
22 | if (requestState.extraResponseData?.ok && requestState.extraResponseData.body.token) {
23 | newCart = requestState.extraResponseData.body as AppStateCartType;
24 | } else if (requestState.responseData?.ok && requestState.responseData.body.token) {
25 | newCart = requestState.responseData.body as AppStateCartType;
26 | }
27 |
28 | if (newCart) {
29 | previousCart = cart;
30 | cart = newCart;
31 |
32 | event.detail.previousCart = previousCart;
33 | event.detail.cart = cart;
34 | }
35 | });
36 |
37 | const initialStateContainer = document.querySelector(`[${DATA_ATTR_INITIAL_STATE}]`);
38 | if (initialStateContainer) {
39 | try {
40 | cart = JSON.parse(initialStateContainer.textContent);
41 | } catch (e) {
42 | console.error(`Liquid Ajax Cart: can't parse cart JSON from the "${DATA_ATTR_INITIAL_STATE}" script`);
43 | console.error(e);
44 | }
45 | }
46 |
47 | return new Promise((resolve, reject) => {
48 | if (cart) {
49 | resolve();
50 | return;
51 | }
52 | fetch(`${window.Shopify?.routes?.root || '/'}cart.js`, {
53 | headers: {
54 | 'Content-Type': 'application/json'
55 | }
56 | }).then(response => {
57 | return response.json();
58 | }).then(data => {
59 | cart = data;
60 | resolve();
61 | }).catch(error => {
62 | console.error(error);
63 | reject('Can\'t load the cart state from the "/cart.js" endpoint');
64 | })
65 | })
66 | }
67 |
68 | function getCartState(): AppStateType {
69 | return {
70 | cart,
71 | previousCart
72 | }
73 | }
74 |
75 | export {cartStateInit, getCartState};
--------------------------------------------------------------------------------
9 | A configuration parameter which makes Liquid Ajax Cart send an additional request 10 | when the current request has returned an error. 11 |
12 | 13 | ## Why it is needed 14 | 15 | Sometimes Shopify responds with an error to a Shopify Cart API Ajax request but actually makes changes in the cart. 16 | In order to get the updated cart state and HTML, Liquid Ajax Cart performs an additional `/cart/update.js` request. 17 | 18 | If your Shopify store doesn't have this bug, you should switch this feature off to avoid sending redundant requests. 19 | 20 | ## Use cases 21 | 22 | Let's say your Shopify store has a product with 5 items in stock. 23 | A user with the empty cart tries adding more items than in stock to the cart (for example 10). 24 | All Shopify stores respond with an error message to such requests 25 | but some of them also modify the user's cart by adding all available stock (5 items) to it. 26 | 27 | A video example of this behavior is attached to the [corresponding GitHub issue](https://github.com/Shopify/dawn/issues/2994). 28 | 29 | If the `extraRequestOnError` is `true`, Liquid Ajax Cart sends an additional request 30 | to get the updated cart state and HTML in order to fix this unexpected behavior. 31 | 32 | The same behavior is noticed when a user has some items in the cart 33 | and tries to change the quantity to add more items than available in stock. 34 | 35 | If your Shopify store doesn't have this behavior 36 | you should consider set this configuration parameter to `false` 37 | to avoid sending redundant requests. 38 | 39 | Use the [`conf`](/v2/liquid-ajax-cart-conf/) method of the [`liquidAjaxCart`](/v2/liquid-ajax-cart/) object 40 | to switch the extra request off: 41 | {%- capture highlight_code -%} 42 | liquidAjaxCart.conf("extraRequestOnError", false); 43 | {%- endcapture -%} 44 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 45 | -------------------------------------------------------------------------------- /templates/customers/register.liquid: -------------------------------------------------------------------------------- 1 |
2 |
3 |
38 |
--------------------------------------------------------------------------------
/snippets/search-bar.liquid:
--------------------------------------------------------------------------------
1 | {% comment %}
2 |
3 | A snippet to include a search bar anywhere in your theme.
4 | Note we are using 'input-group' for the layout. Look under Forms > Input Groups for some demos.
5 |
6 | More information:
7 | - http://docs.shopify.com/themes/liquid-variables/search
8 |
9 | To return only products in results:
10 | - http://docs.shopify.com/manual/configuration/store-customization/return-only-product-in-storefront-search-results
11 | - Or manually add type=product to the search URL as a query parameter
12 | - Uncomment hidden input with value="product" below
13 |
14 | {% endcomment %}
15 |
16 | {% if search-bar == 'header' %}
17 |
25 | {% else %}
26 |
36 | {% endif %}
37 |
--------------------------------------------------------------------------------
/docs/v2/event-queue-end.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: liquid-ajax-cart:queue-end
3 | layout: docs-v2
4 | ---
5 |
6 | # liquid-ajax-cart:queue-end
7 |
8 |
4 |
5 |
36 |
37 |
6 |
8 |
9 | {% comment %}
10 | This form must use 'create_customer'
11 | {% endcomment %}
12 | {% form 'create_customer' %}
13 |
14 | {{ form.errors | default_errors }}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | {{ 'customer.register.title' | t }}
7 |29 | 30 |
31 | {{ 'customer.register.cancel' | t }} 32 | 33 | {% endform %} 34 | 35 |9 | An event which is fired at the `document` when a Liquid Ajax Cart has executed 10 | all the Shopify Cart API Ajax requests from the [Queue](/v2/queue-of-requests/) and 11 | it is switching back to the "idle" mode. 12 |
13 | 14 | ## How it works 15 | 16 | Liquid Ajax Cart doesn't perform Shopify Cart API Ajax requests immediately, it adds them to the [Queue](/v2/queue-of-requests/). 17 | When a request is executed, it is removed from the [Queue](/v2/queue-of-requests/). 18 | If there is no other request to perform, Liquid Ajax Cart triggers the `liquid-ajax-cart:queue-end` event. 19 | 20 | {% include v2/content/lifecycle-events-reference.html %} 21 | 22 | {%- capture highlight_code -%} 23 | document.addEventListener("liquid-ajax-cart:queue-end", function() { 24 | console.log("A queue of requests is finished"); 25 | console.log("The current cart state is: ", window.liquidAjaxCart.cart); 26 | }); 27 | {%- endcapture -%} 28 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 29 | 30 | ## Sending requests from the event listener 31 | 32 | If you want to send a Shopify Cart API request from a `liquid-ajax-cart:queue-end` event listener, 33 | you have a chance to get into infinity loop of requests: 34 | 35 | * a queue of requests is finishes and fires the `liquid-ajax-cart:queue-end` event, 36 | * your event listener initiates a request, 37 | * Liquid Ajax Cart creates a new queue of requests and puts the request there 38 | * when the new queue is finishes, it fires the `liquid-ajax-cart:queue-end` event ... 39 | 40 | In order to prevent this, make sure that you have a strong condition that won't let the loop happen: 41 | {%- capture highlight_code -%} 42 | let ranOnce = false; 43 | 44 | document.addEventListener("liquid-ajax-cart:queue-end", function(event) { 45 | // condition to prevent infinity loop: 46 | if (!ranOnce) { 47 | ranOnce = true; 48 | 49 | // send your request 50 | window.liquidAjaxCart.add(...); 51 | } 52 | }); 53 | {%- endcapture -%} 54 | {% include v2/codeblock.html language="javascript" code=highlight_code %} 55 | -------------------------------------------------------------------------------- /screenshot.js: -------------------------------------------------------------------------------- 1 | const puppeteer = require('puppeteer'); 2 | const fs = require('node:fs'); 3 | const yaml = require('js-yaml'); 4 | const resizeImg = require('resize-img'); 5 | 6 | const executablePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'; 7 | 8 | async function captureScreenshots() { 9 | try { 10 | const data = fs.readFileSync('docs/_config.yml', 'utf8'); 11 | const parsedData = yaml.load(data); 12 | const browser = await puppeteer.launch({ 13 | executablePath, 14 | headless: 'new' 15 | }); 16 | const page = await browser.newPage(); 17 | await page.setViewport({ 18 | width: 1540, 19 | height: 771, 20 | }); 21 | 22 | for (const {image, url, selector, autoscreenshot} of parsedData.links.portfolio) { 23 | // if (autoscreenshot !== 'yes') continue; 24 | await page.goto(url, { 25 | timeout: 0 26 | }); 27 | 28 | await new Promise(r => setTimeout(r, 2000)); //waiting for the page to load completely 29 | if (selector) { 30 | const selectorArr = await selector.split(','); 31 | for (const item of selectorArr) { 32 | if (await page.$(item)) { 33 | const element = await page.waitForSelector(item); 34 | await element.click(); 35 | console.log(`✅ Clicked to '${item}' selector to hide it (${url})`); 36 | } else console.log(`❌ Selector '${item}' isn't found (${url})`); 37 | } 38 | await new Promise(r => setTimeout(r, 1000)); //waiting for the popup to close completely 39 | } 40 | await page.screenshot({path: `docs/assets/screens/${image}`}); 41 | console.log(`✅ Screenshot captured ${url} - ${image}`); 42 | 43 | const resizeImage = await resizeImg(fs.readFileSync(`docs/assets/screens/${image}`), { 44 | width: 527, 45 | height: 264 46 | }); 47 | fs.writeFileSync(`docs/assets/screens/${image}`, resizeImage); 48 | console.log(`✅ Screenshot size was changed to 527x264 (${image})`); 49 | console.log('-------------------------------------------------------------------'); 50 | } 51 | 52 | await browser.close(); 53 | } catch (err) { 54 | console.log("❌ Error: ", err.message); 55 | } 56 | } 57 | 58 | captureScreenshots(); -------------------------------------------------------------------------------- /templates/customers/account.liquid: -------------------------------------------------------------------------------- 1 |
2 |
4 |
5 | {{ 'customer.account.title' | t }}
3 |
6 |
7 |
68 |
--------------------------------------------------------------------------------
/docs/_includes/navigation.html:
--------------------------------------------------------------------------------
1 |
8 |
58 |
59 | {{ 'customer.orders.title' | t }}
9 | 10 | {% comment %} 11 | If we have past orders, loop through each one 12 | {% endcomment %} 13 | 14 | {% paginate customer.orders by 20 %} 15 | 16 | {% if customer.orders.size != 0 %} 17 | 18 |
19 |
20 |
21 |
41 |
42 |
43 | {% else %}
44 |
45 | | {{ 'customer.orders.order_number' | t }} | 23 |{{ 'customer.orders.date' | t }} | 24 |{{ 'customer.orders.payment_status' | t }} | 25 |{{ 'customer.orders.fulfillment_status' | t }} | 26 |{{ 'customer.orders.total' | t }} | 27 |
|---|---|---|---|---|
| {{ order.name | link_to: order.customer_url }} | 33 |{{ order.created_at | date: format: 'date' }} | 34 |{{ order.financial_status_label }} | 35 |{{ order.fulfillment_status_label }} | 36 |{{ order.total_price | money }} | 37 |
{{ 'customer.orders.none' | t }}
46 | 47 | {% endif %} 48 | 49 | {% if paginate.pages > 1 %} 50 |
51 | {% include 'pagination-custom' %}
52 |
53 | {% endif %}
54 |
55 | {% endpaginate %}
56 |
57 |
60 |
66 |
67 | {{ 'customer.account.details' | t }}
61 | 62 | {{ customer.default_address | format_address }} 63 | 64 |{{ 'customer.account.view_addresses' | t }} ({{ customer.addresses_count }})
65 |
9 |
52 |
10 |
11 |
12 |
51 |
13 |
50 | -
14 | {% for p in site.links.main %}
15 | {% assign p_active = false %}
16 | {% if page.url == p.url %}
17 | {% assign p_active = true %}
18 | {% elsif p.url != '/v1/' and page.url.size > p.url.size %}
19 | {% assign page_url_slice = page.url | slice: 0, p.url.size %}
20 | {% if page_url_slice == p.url %}
21 | {% assign p_active = true %}
22 | {% endif %}
23 | {% endif %}
24 |
- 25 | 26 | {{ p.title }} 27 | 28 | 29 | {% endfor %} 30 |
-
32 | {% for p in site.links.header %}
33 | {% assign p_active = false %}
34 | {% if page.url == p.url %}
35 | {% assign p_active = true %}
36 | {% elsif p.url != '/v1/' and page.url.size > p.url.size %}
37 | {% assign page_url_slice = page.url | slice: 0, p.url.size %}
38 | {% if page_url_slice == p.url %}
39 | {% assign p_active = true %}
40 | {% endif %}
41 | {% endif %}
42 |
- 43 | 44 | {{ p.title }} 45 | 46 | 47 | {% endfor %} 48 |
16 |