You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 20, 2023. It is now read-only.
* Refactor theme-cart to remove jQuery and add tests
* Resolve with the cart state object for updateItem and setNote
* setNote() -> updateNote()
* setAttributes() -> updateAttributes()
Copy file name to clipboardexpand all lines: packages/theme-cart/README.md
+186
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,7 @@
1
1
# @shopify/theme-cart
2
2
3
+
Theme Cart is a tiny library (<1kb min+gzip) that facilitates requests to [Shopify's Cart API](https://help.shopify.com/en/themes/development/getting-started/using-ajax-api) and makes it easier to manage cart state.
4
+
3
5
## Getting Started
4
6
5
7
Theme Scripts can be used in any theme project. To take advantage of semantic versioning and easy updates, we recommend using NPM or Yarn to include them in your project:
@@ -13,3 +15,187 @@ and then import the functions you wish to use through ES6 imports:
13
15
```
14
16
import * as cart from '@shopify/theme-cart`;
15
17
```
18
+
19
+
If you prefer not to use a package manager, you can download the latest version of Theme Cart and include it in your project manually from the following links:
These files make Theme cart accessible via the `Shopify.theme.cart` global variable.
25
+
26
+
## Browser Support
27
+
28
+
Theme Cart uses two APIs not available to legacy browsers, Fetch and Promise. If you wish to support legacy browsers, make sure you add the following dependencies to your project:
29
+
30
+
```
31
+
yarn add unfetch es6-promise
32
+
```
33
+
34
+
and then import them before you import Theme Cart:
35
+
36
+
```js
37
+
// Only need to import these once
38
+
import'unfetch/polyfill';
39
+
import'es6-promise/auto';
40
+
41
+
// Import @shopify/theme-cart anywhere you need it
42
+
import*ascartfrom'@shopify/theme-cart';
43
+
```
44
+
45
+
## Methods
46
+
47
+
### getState()
48
+
49
+
Returns a promise which fulfills with the [cart state](https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#get-cart).
Adds an item to your cart. If no quantity is specified, 1 item is added. Returns a promise which fulfills with the matching [line item](https://help.shopify.com/en/themes/liquid/objects/line_item).
86
+
87
+
> ⚠️ If the quantity specified is more then what is available, the promise will reject and the cart state will remain unchanged
Changes the quantity and/or properties of an existing line item. Returns a promise which fulfills with the [cart state](https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#get-cart).
101
+
102
+
> ⚠️ If the quantity specified is more then what is available, the promise will still be fullfilled and the maximum number of available items is added to the cart.
103
+
104
+
> ⚠️ When you modify properties, the key value of the item changes. Make sure you record the new key value from the item returned by the resolved promise.
105
+
106
+
```js
107
+
cart.updateItem(key, { quantity }).then(state=> {
108
+
var item =state.items.find(item=>item.key=== key);
109
+
console.log(`The item with key '${key}' now has quantity ${item.quantity}`);
Removes an item from the cart. Returns a promise which fulfills with the updated [cart state](https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#get-cart).
116
+
117
+
```js
118
+
cart.removeItem(key).then(state=> {
119
+
console.log(`There is now ${state.items.length} item(s) in your cart`);
120
+
});
121
+
```
122
+
123
+
### clearItems()
124
+
125
+
Removes all items from the cart. Returns a promise which fulfills with the updated [cart state](https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#get-cart).
126
+
127
+
```js
128
+
cart.clearItems().then(state=> {
129
+
console.log(`Your cart is now empty.`);
130
+
});
131
+
```
132
+
133
+
### getAttributes()
134
+
135
+
Returns a promise which fulfills with the [cart attributes](https://help.shopify.com/en/themes/customization/cart/get-more-information-with-cart-attributes).
136
+
137
+
```js
138
+
cart.getAttributes().then(attributes=> {
139
+
if (attributes.giftWrapped) {
140
+
console.log('The customer wants their order gift wrapped.');
141
+
}
142
+
});
143
+
```
144
+
145
+
### updateAttributes()
146
+
147
+
Sets the value of the [cart attributes](https://help.shopify.com/en/themes/customization/cart/get-more-information-with-cart-attributes). Returns a promise which fulfills with the [cart state](https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#get-cart).
148
+
149
+
> ⚠️ This method will only add or overwrite attribute values. Passing an empty object will result in no change.
console.log('The customer wants their order gift wrapped.');
155
+
}
156
+
});
157
+
```
158
+
159
+
### clearAttributes()
160
+
161
+
Clears all values from the [cart attributes](https://help.shopify.com/en/themes/customization/cart/get-more-information-with-cart-attributes) object. Returns a promise which fulfills with the [cart state](https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#get-cart).
162
+
163
+
### getNote()
164
+
165
+
Returns a promise which fulfills with the value of the cart note.
166
+
167
+
```js
168
+
cart.getNote().then(note=> {
169
+
console.log('The customer has written the following note:', note);
170
+
});
171
+
```
172
+
173
+
### updateNote()
174
+
175
+
Sets the value of the cart note. Returns a promise which fulfills with the [cart state](https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#get-cart).
176
+
177
+
```js
178
+
cart.updateNote().then(state=> {
179
+
console.log('The customer has written the following note:', state.note);
180
+
});
181
+
```
182
+
183
+
### clearNote()
184
+
185
+
Clears the value of the cart note. Returns a promise which fulfills with the [cart state](https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#get-cart).
186
+
187
+
```js
188
+
cart.clearNote().then(() => {
189
+
console.log('The cart note has been cleared');
190
+
});
191
+
```
192
+
193
+
### getShippingRates()
194
+
195
+
Returns a promise which fulfills with an array of [shipping rate objects](https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#get-shipping-rates).
"\nThis is a demonstration store. You can purchase products like this from the real Ratio online store.\nTechnically speaking.\nModel: Eight Warranty: 10 years Capacity: Brews up to 40oz (eight 5oz cups) Dimensions: 13.5\" deep x 9\" wide x 14\" tall\nRatio Eight changes everything with precision brewing technique, top-quality construction, and a design that will elevate any environment for years to come. Each machine is hand assembled and tested in Portland, Oregon. That Eight has a powerful 1600 watt heating element in 110 (US & Canada) or 220 volt. Eight's carafe holds Chemex paper filters or Able Kone stainless steel filter.\nExpected to ship: 2-3 weeksFree shipping | 10 years warranty",
0 commit comments