felixroos/snipcart.html

## snipcart.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Snipcart Test</title>
</head>
<body>
<h1>Snipcart Test</h1>
<button onclick="addProduct()">ADD TO CART</button>
<button onclick="updateItem()">UPDATE ITEM</button>
<button onclick="openCart()">OPEN CART</button>
<button onclick="clearCart()">CLEAR CART</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" id="snipcart"
        data-api-key="MjU2YWNiNmItNjc5YS00ZTEzLThlMWEtODg3OGYwMDcyYTk1NjM2MjU2MDE5NjY4NDk1NzY5"></script>
<script>
  function getProduct() {
    return {
      id: 'XYZ-test',
      name: 'TestProduct',
      description: 'This is a test',
      categories: ['test', 'tag'],
      image: 'https://unsplash.it/120/120',
      url: '/seo-title',
      price: '0.40',
      quantity: 50,
      duplicatable: false,
      shippable: true,
      stackable: true,
      taxable: true,
      taxes: ['default'],
      hasTaxesIncluded: true,
      customFields: [{
        name: 'userCardID',
        value: 'asdgfhds',
        required: true
      }, {
        name: 'Papiertyp', //the dropdown for this custom field will vanish after reloading
        options: 'ohne|16x16cm, Perlmutt, Abziehstreifen +0.50 €[+0.50]|16x16cm, transparent, Haftstreifen +0.72 €[+0.72]|16x16cm, Recycling braun, Abziehstreifen +0.47 €[+0.47]|15,5x15,5cm, naturelle, nassklebend, 120g +0.30 €[+0.30]|15,5x15,5cm, weiß, Haftstreifen, 120g +0.30 €[+0.30]|16x16cm, weiß, nassklebend, 90g +0.20 €[+0.20]',
        value: '16x16cm, Perlmutt, Abziehstreifen +0.50 €',
        type: 'dropdown'
      }]
    };
  }

  function addProduct() {
    Snipcart.api.items.add(getProduct()).then(function (item) {
      Snipcart.api.modal.show();
    });
  }
  function updateItem() {
    const items = Snipcart.api.items.all();
    if (!items.length) {
      console.log('no items in cart. add one first..');
      return;
    }
    items[0].customFields[0].value = 'changed'; //change custom field value
    console.log('update item', items[0]);
    Snipcart.api.items.update(items[0].id, items[0]) //this function will send the old field value
    .then(function (item) {
      console.log('Updated item is', item);
      // the updated item still has the old value
    });
  }
  function openCart() {
    Snipcart.api.modal.show();
  }
  function clearCart() {
    Snipcart.api.items.clear();
  }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Snipcart Test</title>
	</head>
	<body>
	<h1>Snipcart Test</h1>
	<button onclick="addProduct()">ADD TO CART</button>
	<button onclick="updateItem()">UPDATE ITEM</button>
	<button onclick="openCart()">OPEN CART</button>
	<button onclick="clearCart()">CLEAR CART</button>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" id="snipcart"
	data-api-key="MjU2YWNiNmItNjc5YS00ZTEzLThlMWEtODg3OGYwMDcyYTk1NjM2MjU2MDE5NjY4NDk1NzY5"></script>
	<script>
	function getProduct() {
	return {
	id: 'XYZ-test',
	name: 'TestProduct',
	description: 'This is a test',
	categories: ['test', 'tag'],
	image: 'https://unsplash.it/120/120',
	url: '/seo-title',
	price: '0.40',
	quantity: 50,
	duplicatable: false,
	shippable: true,
	stackable: true,
	taxable: true,
	taxes: ['default'],
	hasTaxesIncluded: true,
	customFields: [{
	name: 'userCardID',
	value: 'asdgfhds',
	required: true
	}, {
	name: 'Papiertyp', //the dropdown for this custom field will vanish after reloading
	options: 'ohne\|16x16cm, Perlmutt, Abziehstreifen +0.50 €[+0.50]\|16x16cm, transparent, Haftstreifen +0.72 €[+0.72]\|16x16cm, Recycling braun, Abziehstreifen +0.47 €[+0.47]\|15,5x15,5cm, naturelle, nassklebend, 120g +0.30 €[+0.30]\|15,5x15,5cm, weiß, Haftstreifen, 120g +0.30 €[+0.30]\|16x16cm, weiß, nassklebend, 90g +0.20 €[+0.20]',
	value: '16x16cm, Perlmutt, Abziehstreifen +0.50 €',
	type: 'dropdown'
	}]
	};
	}

	function addProduct() {
	Snipcart.api.items.add(getProduct()).then(function (item) {
	Snipcart.api.modal.show();
	});
	}
	function updateItem() {
	const items = Snipcart.api.items.all();
	if (!items.length) {
	console.log('no items in cart. add one first..');
	return;
	}
	items[0].customFields[0].value = 'changed'; //change custom field value
	console.log('update item', items[0]);
	Snipcart.api.items.update(items[0].id, items[0]) //this function will send the old field value
	.then(function (item) {
	console.log('Updated item is', item);
	// the updated item still has the old value
	});
	}
	function openCart() {
	Snipcart.api.modal.show();
	}
	function clearCart() {
	Snipcart.api.items.clear();
	}
	</script>
	</body>
	</html>