From 2b4169c9e5f2da283d9e5794805cdbea7d341eb7 Mon Sep 17 00:00:00 2001 From: Aisha Blake Date: Fri, 27 Mar 2020 09:52:50 -0400 Subject: [PATCH 01/11] Draft beginning and end --- .../adding-a-shopping-cart-with-snipcart.md | 46 +++++++++++++++++++ www/src/data/sidebars/doc-links.yaml | 2 + 2 files changed, 48 insertions(+) create mode 100644 docs/docs/adding-a-shopping-cart-with-snipcart.md diff --git a/docs/docs/adding-a-shopping-cart-with-snipcart.md b/docs/docs/adding-a-shopping-cart-with-snipcart.md new file mode 100644 index 0000000000000..470daf9e333d4 --- /dev/null +++ b/docs/docs/adding-a-shopping-cart-with-snipcart.md @@ -0,0 +1,46 @@ +--- +title: Adding a Shopping Cart with Snipcart +--- + +## Introductory paragraph + +Snipcart is a shopping cart solution designed to be dropped neatly into any web project. Including it in your project allows any HTML you write to instantly become a "buy button" with the addition of several Snipcart-specific attributes. + +Combine it with a source of products (like a CMS or an e-commerce platform like [Etsy](https://www.etsy.com/)) and a payment processer (like [Stripe](https://www.stripe.com/)) to build a complete e-commerce experience for your customers. + +## Prerequisites + +To get started, you'll need: + +- a Gatsby site with [`gatsby-plugin-snipcart`](/packages/gatsby-plugin-snipcart/) installed +- A [Snipcart](https://snipcart.com/) account +- Products to sell (test data is fine!) + +## Installing the Plugin + +What are the facts you know about the topic of this guide? + +Keep paragraphs short (around 1-4 sentences). People are more likely to read +several short paragraphs instead of a huge block of text. + +## Adding Products + +## Example + +Readers will likely use doc articles as a quick reference to look up syntax. +Articles should have a basic, real-world example that shows common use cases of its syntax. + +Provide at least one example of how the task gets accomplished. A code snippet is ideal, in this format: + + code snippet + +//See this [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code) on how to format code examples + +## Other resources + +- [Build an E-commerce Site with Gatsby, DatoCMS, and Snipcart](/docs/tutorial/e-commerce-with-datocms-and-snipcart/) tutorial +- [`gatsby-plugin-snipcart`](/packages/gatsby-plugin-snipcart/) +- [OneShopper Gatsby starter](/starters/rohitguptab/OneShopper/) +- Reference guide on [sourcing from Etsy](/docs/sourcing-from-etsy/) +- Reference guide on [processing payments with Stripe](/docs/processing-payments-with-stripe/) +- From the Snipcart blog: [E-Commerce for React Developers [w/ Gatsby Tutorial]](https://snipcart.com/blog/react-ecommerce-gatsby-tutorial) \ No newline at end of file diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index f8cd9012ee527..6df8e056fc724 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -475,6 +475,8 @@ items: - title: Building an E-commerce Site with Shopify link: /docs/building-an-ecommerce-site-with-shopify/ + - title: Adding a Shopping Cart with Snipcart + link: /docs/adding-a-shopping-cart-with-snipcart - title: Processing Payments with Stripe link: /docs/processing-payments-with-stripe/ - title: Processing Payments with Square From da105a4ddc4194459dba38ae6cf67b08284cc765 Mon Sep 17 00:00:00 2001 From: Aisha Blake Date: Fri, 27 Mar 2020 18:56:41 -0400 Subject: [PATCH 02/11] Tweak Snipcart intro --- docs/docs/adding-a-shopping-cart-with-snipcart.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/docs/adding-a-shopping-cart-with-snipcart.md b/docs/docs/adding-a-shopping-cart-with-snipcart.md index 470daf9e333d4..87a57a8e5d759 100644 --- a/docs/docs/adding-a-shopping-cart-with-snipcart.md +++ b/docs/docs/adding-a-shopping-cart-with-snipcart.md @@ -13,8 +13,8 @@ Combine it with a source of products (like a CMS or an e-commerce platform like To get started, you'll need: - a Gatsby site with [`gatsby-plugin-snipcart`](/packages/gatsby-plugin-snipcart/) installed -- A [Snipcart](https://snipcart.com/) account -- Products to sell (test data is fine!) +- a [Snipcart](https://snipcart.com/) account +- products to sell (test data is fine!) ## Installing the Plugin @@ -25,6 +25,8 @@ several short paragraphs instead of a huge block of text. ## Adding Products +Adding products with Snipcart involves adding a set of attributes to your HTML. + ## Example Readers will likely use doc articles as a quick reference to look up syntax. From 4daa54815934c4640a874b6dd2d4d489c401df71 Mon Sep 17 00:00:00 2001 From: Aisha Blake Date: Sat, 28 Mar 2020 16:50:03 -0400 Subject: [PATCH 03/11] Finish draft --- .../adding-a-shopping-cart-with-snipcart.md | 194 +++++++++++++++--- 1 file changed, 167 insertions(+), 27 deletions(-) diff --git a/docs/docs/adding-a-shopping-cart-with-snipcart.md b/docs/docs/adding-a-shopping-cart-with-snipcart.md index 87a57a8e5d759..c776fd72afcc5 100644 --- a/docs/docs/adding-a-shopping-cart-with-snipcart.md +++ b/docs/docs/adding-a-shopping-cart-with-snipcart.md @@ -2,41 +2,180 @@ title: Adding a Shopping Cart with Snipcart --- -## Introductory paragraph - Snipcart is a shopping cart solution designed to be dropped neatly into any web project. Including it in your project allows any HTML you write to instantly become a "buy button" with the addition of several Snipcart-specific attributes. Combine it with a source of products (like a CMS or an e-commerce platform like [Etsy](https://www.etsy.com/)) and a payment processer (like [Stripe](https://www.stripe.com/)) to build a complete e-commerce experience for your customers. ## Prerequisites -To get started, you'll need: +To get started, you'll need - a Gatsby site with [`gatsby-plugin-snipcart`](/packages/gatsby-plugin-snipcart/) installed - a [Snipcart](https://snipcart.com/) account -- products to sell (test data is fine!) - -## Installing the Plugin - -What are the facts you know about the topic of this guide? - -Keep paragraphs short (around 1-4 sentences). People are more likely to read -several short paragraphs instead of a huge block of text. - -## Adding Products - -Adding products with Snipcart involves adding a set of attributes to your HTML. - -## Example - -Readers will likely use doc articles as a quick reference to look up syntax. -Articles should have a basic, real-world example that shows common use cases of its syntax. - -Provide at least one example of how the task gets accomplished. A code snippet is ideal, in this format: - - code snippet - -//See this [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code) on how to format code examples +- your Snipcart test API key +- products to sell + +Installing the plugin adds Snipcart's shopping cart JavaScript for you, so you can get right to building your e-commerce site. It's okay if you're not sure what you'd like to sell quite yet. Using sample products is fine to begin with! + +## Defining Products + +Adding products with Snipcart involves writing HTML representing your product and adding a set of attributes to that HTML. You might write something similar to the following code block for each item in your catalogue. + +```html +
+

Silver Stacking Ring

+

$19.99

+

Wear one or seventeen! These rings are fun to mix and match.

+
+``` + +Including this information allows a visitor to see what you have for sale, but they can't do anything with that information quite yet. You'll need a way for customers to add individual items to their cart. Try adding a button with the following attributes. + +```html +
+

Silver Stacking Ring

+

$19.99

+

Wear one or seventeen! These rings are fun to mix and match.

+ + + +
+``` + +Snipcart uses these attributes (`data-item-*`) to figure out what your customer is trying to buy and how much to charge them. The ID, price, URL, and name attributes are all required but there are several others that you can add to enhance the shopping cart. + +Importantly, `data-item-url` denotes the URL of the webpage displaying the product(s). Snipcart needs to crawl this page to validate the order. The web crawler looks for the HTML element with the `snipcart-add-item` CSS class as well as the `data-item-id` and checks what it finds there against whatever is in the cart. + +Note that, while you're testing, a `data-item-url` value of `"/"` is fine. For the checkout flow to work, you will eventually need to replace this with the actual URL at which you've published your catalogue or product page. + +To learn more about defining products, see the [Snipcart documentation](https://docs.snipcart.com/v3/setup/products). + +### Adding product variants + +Snipcart refers to variations like size and color as "product options" or "custom fields". You can add these custom fields to your products to allow customers to refine their orders. + +Building on the stacking ring example, suppose that you wanted to give your customer a choice between available sizes. You would do this by adding a custom field with a name and options. + +```html +
+

Silver Stacking Ring

+

$19.99

+

Wear one or seventeen! These rings are fun to mix and match.

+ +
+``` + +You can add multiple custom fields by incrementing the index of the `data-item-custom` attribute. Perhaps you want customers to have the ability to mark each item in their cart as a gift. + +```html +
+

Silver Stacking Ring

+

$19.99

+

Wear one or seventeen! These rings are fun to mix and match.

+ +
+``` + +### Selling digital products + +Snipcart enables the sale of digital goods. To sell a file, you'll need to upload it to your Snipcart dashboard and then add the resulting guid as the value of the `data-item-file-guid` attribute to your product's markup. You can specify a file access expiry in days and a maximum number of downloads per order from the dashboard. + +```html +
+

Silver Stacking Ring

+

$19.99

+

Wear one or seventeen! These rings are fun to mix and match.

+ +
+``` + +## Customizing the cart + +Using Snipcart allows you to retain nearly complete control over your customers' experience on your e-commerce site. You can configure and customize the cart behavior as well as the product options. Look through your [Snipcart account settings](https://app.snipcart.com/dashboard/account/settings) to change things like currency, shipping options, and email templates. + +### Preventing automatic popups + +By default, the shopping cart will pop up every time a customer adds a product. To prevent this bahavior, set the value of `autopop` to `false` in your `gatsby-config.js` file. + +```js:title=gatsby-config.js +{ + resolve: 'gatsby-plugin-snipcart', + options: { + apiKey: 'your-api-key', + autopop: false // highlight-line + } +}, +``` + +If you choose to prevent this popup, you'll need to give your customers some other way to access their shopping carts. Create a "show cart" button by giving a `button` element a class of `snipcart-checkout`. + +```html + +``` + +### Styling the cart + +You can override most aspects of the shopping cart, including the CSS. Try inspecting the element you'd like to customize and using your browser's developer tools to find the correct Snipcart class to override. + +```css +.snip-header { + background: #663399; +} + +.snip-layout__main-container { + border: 2px solid black; + padding: 3px; +} +``` + +You can also customize the cart template itself. For a complete list of Snipcart's components (with code examples), check out their [default theme reference](https://docs.snipcart.com/v3/themes/default/reference). + +## Connecting a payment processor + +Once you're ready to receive payments, connect your chosen payment processor to your Snipcart account from the dashboard. You'll also need to input your credit card information in order to get your live Snipcart key. + +The following quote is from the Snipcart [payment gateway page](https://app.snipcart.com/dashboard/account/gateway): + +> Please note that you can select only one payment gateway. However, you can also enable Paypal Express Checkout on top of any gateway you choose. +> +> Also, you can switch from a gateway to another whenever you want. ## Other resources @@ -45,4 +184,5 @@ Provide at least one example of how the task gets accomplished. A code snippet i - [OneShopper Gatsby starter](/starters/rohitguptab/OneShopper/) - Reference guide on [sourcing from Etsy](/docs/sourcing-from-etsy/) - Reference guide on [processing payments with Stripe](/docs/processing-payments-with-stripe/) -- From the Snipcart blog: [E-Commerce for React Developers [w/ Gatsby Tutorial]](https://snipcart.com/blog/react-ecommerce-gatsby-tutorial) \ No newline at end of file +- From the Snipcart blog: [E-Commerce for React Developers [w/ Gatsby Tutorial]](https://snipcart.com/blog/react-ecommerce-gatsby-tutorial) +- [Snipcart documentation](https://docs.snipcart.com/v3/setup/installation) \ No newline at end of file From 72e850cfb82d972cbeb13328ef7090092dca92c2 Mon Sep 17 00:00:00 2001 From: gatsbybot Date: Sun, 29 Mar 2020 16:15:05 +0000 Subject: [PATCH 04/11] chore: format --- .../adding-a-shopping-cart-with-snipcart.md | 43 ++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/docs/docs/adding-a-shopping-cart-with-snipcart.md b/docs/docs/adding-a-shopping-cart-with-snipcart.md index c776fd72afcc5..a1ff1468c2c70 100644 --- a/docs/docs/adding-a-shopping-cart-with-snipcart.md +++ b/docs/docs/adding-a-shopping-cart-with-snipcart.md @@ -2,7 +2,7 @@ title: Adding a Shopping Cart with Snipcart --- -Snipcart is a shopping cart solution designed to be dropped neatly into any web project. Including it in your project allows any HTML you write to instantly become a "buy button" with the addition of several Snipcart-specific attributes. +Snipcart is a shopping cart solution designed to be dropped neatly into any web project. Including it in your project allows any HTML you write to instantly become a "buy button" with the addition of several Snipcart-specific attributes. Combine it with a source of products (like a CMS or an e-commerce platform like [Etsy](https://www.etsy.com/)) and a payment processer (like [Stripe](https://www.stripe.com/)) to build a complete e-commerce experience for your customers. @@ -29,7 +29,7 @@ Adding products with Snipcart involves writing HTML representing your product an ``` -Including this information allows a visitor to see what you have for sale, but they can't do anything with that information quite yet. You'll need a way for customers to add individual items to their cart. Try adding a button with the following attributes. +Including this information allows a visitor to see what you have for sale, but they can't do anything with that information quite yet. You'll need a way for customers to add individual items to their cart. Try adding a button with the following attributes. ```html
@@ -37,11 +37,13 @@ Including this information allows a visitor to see what you have for sale, but t

$19.99

Wear one or seventeen! These rings are fun to mix and match.

- @@ -50,7 +52,7 @@ Including this information allows a visitor to see what you have for sale, but t Snipcart uses these attributes (`data-item-*`) to figure out what your customer is trying to buy and how much to charge them. The ID, price, URL, and name attributes are all required but there are several others that you can add to enhance the shopping cart. -Importantly, `data-item-url` denotes the URL of the webpage displaying the product(s). Snipcart needs to crawl this page to validate the order. The web crawler looks for the HTML element with the `snipcart-add-item` CSS class as well as the `data-item-id` and checks what it finds there against whatever is in the cart. +Importantly, `data-item-url` denotes the URL of the webpage displaying the product(s). Snipcart needs to crawl this page to validate the order. The web crawler looks for the HTML element with the `snipcart-add-item` CSS class as well as the `data-item-id` and checks what it finds there against whatever is in the cart. Note that, while you're testing, a `data-item-url` value of `"/"` is fine. For the checkout flow to work, you will eventually need to replace this with the actual URL at which you've published your catalogue or product page. @@ -67,12 +69,16 @@ Building on the stacking ring example, suppose that you wanted to give your cust

Silver Stacking Ring

$19.99

Wear one or seventeen! These rings are fun to mix and match.

- @@ -106,19 +115,23 @@ You can add multiple custom fields by incrementing the index of the `data-item-c ### Selling digital products -Snipcart enables the sale of digital goods. To sell a file, you'll need to upload it to your Snipcart dashboard and then add the resulting guid as the value of the `data-item-file-guid` attribute to your product's markup. You can specify a file access expiry in days and a maximum number of downloads per order from the dashboard. +Snipcart enables the sale of digital goods. To sell a file, you'll need to upload it to your Snipcart dashboard and then add the resulting guid as the value of the `data-item-file-guid` attribute to your product's markup. You can specify a file access expiry in days and a maximum number of downloads per order from the dashboard. ```html

Silver Stacking Ring

$19.99

Wear one or seventeen! These rings are fun to mix and match.

- +```jsx + ``` ### Styling the cart From d38b35ecd8a4348614b546be6a785e0bc36dcf22 Mon Sep 17 00:00:00 2001 From: Aisha Blake Date: Thu, 2 Apr 2020 09:20:35 -0400 Subject: [PATCH 06/11] Apply suggestions from code review Co-Authored-By: Obinna Ekwuno --- .../adding-a-shopping-cart-with-snipcart.md | 34 ++++++++----------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/docs/docs/adding-a-shopping-cart-with-snipcart.md b/docs/docs/adding-a-shopping-cart-with-snipcart.md index 6b1cbd8d832bb..150352a3aca17 100644 --- a/docs/docs/adding-a-shopping-cart-with-snipcart.md +++ b/docs/docs/adding-a-shopping-cart-with-snipcart.md @@ -4,13 +4,16 @@ title: Adding a Shopping Cart with Snipcart Snipcart is a shopping cart solution designed to be dropped neatly into any web project. Including it in your project allows any HTML you write to instantly become a "buy button" with the addition of several Snipcart-specific attributes. -Combine it with a source of products (like a CMS or an e-commerce platform like [Etsy](https://www.etsy.com/)) and a payment processer (like [Stripe](https://www.stripe.com/)) to build a complete e-commerce experience for your customers. +Combine it with a source of products (like a CMS or an e-commerce platform like [Etsy](https://www.etsy.com/)) and a payment processor (like [Stripe](https://www.stripe.com/)) to build a complete e-commerce experience for your customers. ## Prerequisites -To get started, you'll need +To get started, you'll need to have the following set up: -- a Gatsby site with [`gatsby-plugin-snipcart`](/packages/gatsby-plugin-snipcart/) installed +- A Gatsby site with [`gatsby-plugin-snipcart`](/packages/gatsby-plugin-snipcart/) installed +- A [Snipcart](https://snipcart.com/) account +- A Snipcart test API key +- A list of products to sell - a [Snipcart](https://snipcart.com/) account - your Snipcart test API key - products to sell @@ -54,7 +57,7 @@ Snipcart uses these attributes (`data-item-*`) to figure out what your customer Importantly, `data-item-url` denotes the URL of the webpage displaying the product(s). Snipcart needs to crawl this page to validate the order. The web crawler looks for the HTML element with the `snipcart-add-item` CSS class as well as the `data-item-id` and checks what it finds there against whatever is in the cart. -Note that, while you're testing, a `data-item-url` value of `"/"` is fine. For the checkout flow to work, you will eventually need to replace this with the actual URL at which you've published your catalogue or product page. +> Note that, while you're testing, a `data-item-url` value of `"/"` is fine. For the checkout flow to work, you will eventually need to replace this with the actual URL at which you've published your catalog or product page. To learn more about defining products, see the [Snipcart documentation](https://docs.snipcart.com/v3/setup/products). @@ -75,13 +78,11 @@ Building on the stacking ring example, suppose that you wanted to give your cust data-item-price="19.99" data-item-url="/" data-item-name="Silver Stacking Ring" - data-item-custom1-name="Size" - data-item-custom1-options="6|6.5|7|7.5|8|8.5|9"> + data-item-custom1-options="6|6.5|7|7.5|8|8.5|9" + > Add to cart
@@ -102,11 +103,9 @@ You can add multiple custom fields by incrementing the index of the `data-item-c data-item-name="Silver Stacking Ring" data-item-custom1-name="Size" data-item-custom1-options="6|6.5|7|7.5|8|8.5|9" - + data-item-custom2-name="This is a gift" data-item-custom2-type="checkbox" + > Add to cart @@ -128,10 +127,7 @@ Snipcart enables the sale of digital goods. To sell a file, you'll need to uploa data-item-price="19.99" data-item-url="/" data-item-name="Silver Stacking Ring" - data-item-file-guid="your-digital-product-guid"> Add to cart @@ -145,7 +141,7 @@ Using Snipcart allows you to retain nearly complete control over your customers' ### Preventing automatic popups -By default, the shopping cart will pop up every time a customer adds a product. To prevent this bahavior, set the value of `autopop` to `false` in your `gatsby-config.js` file. +By default, the shopping cart will pop up every time a customer adds a product. To prevent this behavior, set the value of `autopop` to `false` in your `gatsby-config.js` file. ```js:title=gatsby-config.js { From 5b6aad5645b199e9b835d12ba8f2ef99e8e54156 Mon Sep 17 00:00:00 2001 From: Aisha Blake Date: Thu, 2 Apr 2020 19:41:21 -0400 Subject: [PATCH 07/11] Add explanation for where to put product code --- docs/docs/adding-a-shopping-cart-with-snipcart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-a-shopping-cart-with-snipcart.md b/docs/docs/adding-a-shopping-cart-with-snipcart.md index 150352a3aca17..3a95cc5bbd34e 100644 --- a/docs/docs/adding-a-shopping-cart-with-snipcart.md +++ b/docs/docs/adding-a-shopping-cart-with-snipcart.md @@ -22,7 +22,7 @@ Installing the plugin adds Snipcart's shopping cart JavaScript for you, so you c ## Defining Products -Adding products with Snipcart involves writing HTML representing your product and adding a set of attributes to that HTML. You might write something similar to the following code block for each item in your catalogue. +Adding products with Snipcart involves writing HTML representing your product and adding a set of attributes to that HTML. You might write something similar to the following code block for each item in your catalog. This code could be part of a page like `index.js` or anywhere else you list a product. ```jsx
From 85e2342a28b9670d2abddabd1fc4ac8d016759f5 Mon Sep 17 00:00:00 2001 From: gatsbybot Date: Fri, 3 Apr 2020 14:59:30 +0000 Subject: [PATCH 08/11] chore: format --- docs/docs/adding-a-shopping-cart-with-snipcart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-a-shopping-cart-with-snipcart.md b/docs/docs/adding-a-shopping-cart-with-snipcart.md index 3a95cc5bbd34e..09de6b4936c7f 100644 --- a/docs/docs/adding-a-shopping-cart-with-snipcart.md +++ b/docs/docs/adding-a-shopping-cart-with-snipcart.md @@ -8,7 +8,7 @@ Combine it with a source of products (like a CMS or an e-commerce platform like ## Prerequisites -To get started, you'll need to have the following set up: +To get started, you'll need to have the following set up: - A Gatsby site with [`gatsby-plugin-snipcart`](/packages/gatsby-plugin-snipcart/) installed - A [Snipcart](https://snipcart.com/) account From c66c86dee924a711770f794a21637285963f05ee Mon Sep 17 00:00:00 2001 From: Aisha Blake Date: Mon, 6 Apr 2020 17:13:17 -0400 Subject: [PATCH 09/11] Apply suggestions from code review Co-Authored-By: LB --- docs/docs/adding-a-shopping-cart-with-snipcart.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/docs/docs/adding-a-shopping-cart-with-snipcart.md b/docs/docs/adding-a-shopping-cart-with-snipcart.md index 09de6b4936c7f..16c4d1b41d006 100644 --- a/docs/docs/adding-a-shopping-cart-with-snipcart.md +++ b/docs/docs/adding-a-shopping-cart-with-snipcart.md @@ -2,9 +2,9 @@ title: Adding a Shopping Cart with Snipcart --- -Snipcart is a shopping cart solution designed to be dropped neatly into any web project. Including it in your project allows any HTML you write to instantly become a "buy button" with the addition of several Snipcart-specific attributes. +Snipcart is a shopping cart solution designed to drop neatly into any web project. Including it in your project allows any HTML you write to instantly become a "buy button" with the addition of several Snipcart-specific attributes. -Combine it with a source of products (like a CMS or an e-commerce platform like [Etsy](https://www.etsy.com/)) and a payment processor (like [Stripe](https://www.stripe.com/)) to build a complete e-commerce experience for your customers. +Combine it with a source of products (like a CMS or an e-commerce platform such as [Etsy](https://www.etsy.com/)) and a payment processor (like [Stripe](https://www.stripe.com/)) to build a complete e-commerce experience for your customers. ## Prerequisites @@ -14,9 +14,6 @@ To get started, you'll need to have the following set up: - A [Snipcart](https://snipcart.com/) account - A Snipcart test API key - A list of products to sell -- a [Snipcart](https://snipcart.com/) account -- your Snipcart test API key -- products to sell Installing the plugin adds Snipcart's shopping cart JavaScript for you, so you can get right to building your e-commerce site. It's okay if you're not sure what you'd like to sell quite yet. Using sample products is fine to begin with! @@ -53,7 +50,7 @@ Including this information allows a visitor to see what you have for sale, but t
``` -Snipcart uses these attributes (`data-item-*`) to figure out what your customer is trying to buy and how much to charge them. The ID, price, URL, and name attributes are all required but there are several others that you can add to enhance the shopping cart. +Snipcart uses these attributes (`data-item-*`) to figure out what your customer is trying to buy and how much to charge them. The ID, price, URL, and name attributes are all required but there are several other attributes that you can add to enhance the shopping cart. Importantly, `data-item-url` denotes the URL of the webpage displaying the product(s). Snipcart needs to crawl this page to validate the order. The web crawler looks for the HTML element with the `snipcart-add-item` CSS class as well as the `data-item-id` and checks what it finds there against whatever is in the cart. From cd5490ea515857752194830e052ca64227c6ea1f Mon Sep 17 00:00:00 2001 From: Aisha Blake Date: Tue, 7 Apr 2020 11:50:54 -0400 Subject: [PATCH 10/11] Update docs/docs/adding-a-shopping-cart-with-snipcart.md --- docs/docs/adding-a-shopping-cart-with-snipcart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-a-shopping-cart-with-snipcart.md b/docs/docs/adding-a-shopping-cart-with-snipcart.md index 16c4d1b41d006..d0aa0c7d27bad 100644 --- a/docs/docs/adding-a-shopping-cart-with-snipcart.md +++ b/docs/docs/adding-a-shopping-cart-with-snipcart.md @@ -111,7 +111,7 @@ You can add multiple custom fields by incrementing the index of the `data-item-c ### Selling digital products -Snipcart enables the sale of digital goods. To sell a file, you'll need to upload it to your Snipcart dashboard and then add the resulting guid as the value of the `data-item-file-guid` attribute to your product's markup. You can specify a file access expiry in days and a maximum number of downloads per order from the dashboard. +Snipcart enables the sale of digital goods such as e-books, photography, and other artwork. To sell a file, you'll need to upload it to your Snipcart dashboard and then add the resulting guid as the value of the `data-item-file-guid` attribute to your product's markup. You can specify a file access expiry in days and a maximum number of downloads per order from the dashboard. ```jsx
From 8eeeb60084c38591159c70f65f83adeb399803d0 Mon Sep 17 00:00:00 2001 From: Aisha Blake Date: Tue, 7 Apr 2020 11:53:54 -0400 Subject: [PATCH 11/11] Update docs/docs/adding-a-shopping-cart-with-snipcart.md Co-Authored-By: LB --- docs/docs/adding-a-shopping-cart-with-snipcart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/adding-a-shopping-cart-with-snipcart.md b/docs/docs/adding-a-shopping-cart-with-snipcart.md index d0aa0c7d27bad..4edb64ad73dc6 100644 --- a/docs/docs/adding-a-shopping-cart-with-snipcart.md +++ b/docs/docs/adding-a-shopping-cart-with-snipcart.md @@ -111,7 +111,7 @@ You can add multiple custom fields by incrementing the index of the `data-item-c ### Selling digital products -Snipcart enables the sale of digital goods such as e-books, photography, and other artwork. To sell a file, you'll need to upload it to your Snipcart dashboard and then add the resulting guid as the value of the `data-item-file-guid` attribute to your product's markup. You can specify a file access expiry in days and a maximum number of downloads per order from the dashboard. +Snipcart enables the sale of digital goods such as e-books, photography, and other artwork. To sell a file you intend for download, you'll need to upload it to your Snipcart dashboard and then add the resulting guid as the value of the `data-item-file-guid` attribute to your product's markup. You can specify a file access expiry in days and a maximum number of downloads per order from the dashboard. ```jsx