E-commerce no good

Did you tried Snipcart to add e-commerce feature?

https://snipcart.com/blog/publii-static-cms-html

Could you specify what is bad with Snipcart? I plan to use it sometime in future.

If you want to create an e-commerce website, you just can’t use a static content generator without using an external service. You need at least  to interact with a database, using any dynamic language (php, asp, javascript) link to any kind of database (sql, flat file…). Your content has to be generated dynamically (just to manage your stock or your sales for example). If it’s not something acceptable for you, then a static content generator is not the tool you are looking for 🙂

What about Foxy Cart? It seems more flexible.

[anonymous] wrote:

I haven’t try SnipCart yet, from this page

https://docs.snipcart.com/v3/setup/products

It looks like you can define different color for products

You can define different colors for a product. And different sizes, and whatever other options you want. The problem is getting that information to the server, because all the options have to be in a single button element that the user clicks.

You can just put every iteration of the product on the page each with its own buy button, i.e., a series of buttons to “buy small black shirt”, “buy med black shirt”, “buy large black shirt”, “buy small green shirt”, etc. Each button has attributes to tell SnipCart which version of the product was selected. But having lots of buttons like that are clunky, bad for usability, and almost certainly unacceptable to the client.

So instead you do what is obvious: use form elements, with a select for size, and select for color, and a single “buy” button. Simple and usable. But now you have to write javascript to alter the attributes of the single button element each time a user changes a select. Or hide all buttons except the one with the attributes that matches the user’s selection. You wind up writing lots of javascript, and json, and really what you’re doing is reinventing the html form, but in a brittle way that requires lots of testing and yet still could break if you miss something.

That’s my experience with SnipCart. Again, YMMV.

In this demo site I have created a customizable product very easily (see mountain bike)

https://snipcart-publii.netlify.app/

Hi,

I have carefully followed the snipcart documentation. Unfortunately I don’t remember the details.

1. Activation of snipcart. Tools / Custom Html / Head:

https://docs.snipcart.com/v3/setup/installation

<link rel = "stylesheet" href = "https://cdn.snipcart.com/themes/v3.0.7/default/snipcart.css" />
 
<script async = "async" src = "https://cdn.snipcart.com/themes/v3.0.7/default/snipcart.js"> </script>

2. Creating the button with options within a post:

https://docs.snipcart.com/v3/setup/products

<button class = "snipcart-add-item" data-item-id = "t03" data-item-name = "MTB Walden - Mondo Cycles" data-item-description = "Custom Walden MTB: the pure essence of mountain biking "data-item-price =" 940.00 "data-item-has-taxes-included =" true "data-item-image =" https://snipcart-publii.netlify.app/media/files/bici.png " data-item-url = "https://snipcart-publii.netlify.app/mountain-bike.html#/" data-item-custom1-name = "Frame size" data-item-custom1-options = "M | L | XL | XXL [+50] "data-item-custom1-value =" L "data-item-custom1-required =" true "data-item-custom2-name =" Equipment "data-item-custom2-options = "Frameset only | Shimano Tiagra 2x10 Mech. [+ 600.00] | Shimano 105 2x11 Hydr. [+ 1300] | Ultegra 2x11 Hydr. [+ 1750.00] | Sram Rival 1x11 [+1750.00]" data-item-custom2-required = "true" data-item-custom3-name = "Fork" data-item-custom3-options = "No | Manitou Machete 120 [+300] | Formula Selva 130 [+500]" data-item-custom3-required = " true "> Customize your MTB </button>

3. Adding the shopping cart button to the menu bar:

https://docs.snipcart.com/v3/setup/cart-summary

<button class = "snipcart-checkout" title = "Go to cart">
<svg viewBox = "0 0 64 64" fill = "none" xmlns = "http://www.w3.org/2000/svg" alt = "" class = "snipcart-cart-header__icon snipcart__icon - white snipcart__icon"> <path fill-rule = "evenodd" clip-rule = "evenodd" d = "M51.714 20.47L55 60H9l3.286-39.53h9.857v -6.588C22.143 8.424 26.556 4 32 4c5.444 0 9.857 4.424 9.857 9.882v6.589h9.857zM25.43 13.883v16.47h-3.286v-6.587h-6.834l-2.737 32.94h38.856l-2.737-32.94h-6.834 v6.588h-3.286v-16.47c0-3.634-2.947-6.589-6.571-6.589-3.624 0-6.571 2.955-6.571 6.588zm3.285 9.883V20.47h6.572v3.294h-6.572z "fill =" # ffffff "> </path> </svg>
<span style = "display: inline; color: white;" class = "snipcart-items-count"> 0 </span>
</button>