Articles with Dropdowns

You can use a dropdown to offer different quantities. To achieve this, you need a <select> element, encapsulated in an element having the CSS class sc-autobasket-item. The <option> values represent the quantity.

Here is an example:

<!DOCTYPE html>
<title>Ball Pen Demo</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<h1>Ball Pen Demo</h1>
<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true" data-sc-intent="order">
<p class="sc-autobasket-item">
ACME ball pen Modern Line 8050, €15.95
<select data-sc-item-name="ACME ball pen Modern Line 8050"
<option value="0" selected>none</option>
<option value="1">1 pieces</option>
<option value="2">2 pieces</option>
<option value="3">3 pieces</option>
<option value="5" data-sc-item-price="1495">5 pieces á €14.95</option>
<option value="10" data-sc-item-price="1295">10 pieces á €12.95</option>
<button type="submit" class="sc-autobasket-enter-button">Check out ...</button>

As you see, you can override the article price using data-sc-item-price.

Monetary amounts are expressed in the smallest currency unit (e. g. Euro Cent). The gross unit price in our example above is €15.95 .. €12.95.

Here is a visual example: