Shopify Bulk Order Form
Budget: $30 – $60 USD
We do NOT have Shopify PLUS and we like to have a bulk-order-page. So we prepared the following code (which is not working yet):
<!-- Vorlage für Bulk-Bestellungen in Shopify -->
<div class="grid">
<div class="grid__item large--five-sixths push--large--one-twelfth">
<header class="section-header text-center">
<h1>{{ page.title }}</h1>
<hr class="hr--small">
</header>
<div class="grid">
<div class="grid__item large--four-fifths push--large--one-tenth">
<div class="rte rte--nomargin rte--indented-images">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulk-Bestellseite</title>
</head>
<body>
<!-- Produktliste -->
<form id="bulk-order-form">
{% for product in collections.all.products %}
<div class="product">
<h3>{{ product.title }}</h3>
<label for="quantity_{{ product.id }}">Menge:</label>
<input
type="number"
id="quantity_{{ product.id }}"
data-variant-id="{{ product.variants.first.id }}"
name="quantity_{{ product.id }}"
value="0"
min="0">
</div>
{% endfor %}
</form>
<!-- Button zum Hinzufügen der Produkte in den Warenkorb -->
<button type="button" id="add-to-cart-button">Produkte in den Warenkorb legen</button>
<script>
document.getElementById('add-to-cart-button').addEventListener('click', function() {
const itemsToAdd = [];
// Alle Eingabefelder im Formular durchgehen
document.querySelectorAll('#bulk-order-form input[type="number"]').forEach(function(input) {
const quantity = parseInt(input.value, 10);
const variantId = input.dataset.variantId;
if (quantity > 0) {
itemsToAdd.push({
id: variantId,
quantity: quantity
});
}
});
// Überprüfen, ob Produkte ausgewählt wurden
if (itemsToAdd.length > 0) {
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({ items: itemsToAdd })
})
.then(response => {
if (response.ok) {
alert('Produkte erfolgreich zum Warenkorb hinzugefügt!');
location.reload();
} else {
return response.json().then(data => {
alert('Fehler: ' + (data.message || 'Unbekannter Fehler'));
});
}
})
.catch(error => {
console.error('Netzwerkfehler:', error);
alert('Ein Netzwerkfehler ist aufgetreten. Bitte versuche es erneut.');
});
} else {
alert('Bitte wähle mindestens ein Produkt aus.');
}
});
</script>
</body>
</html>
</div>
</div>
</div>
</div>
</div>
Can you help us to solve the problems? If yes, please bid your price, NO PLACEHOLDER. Thank you very much!
<!-- Vorlage für Bulk-Bestellungen in Shopify -->
<div class="grid">
<div class="grid__item large--five-sixths push--large--one-twelfth">
<header class="section-header text-center">
<h1>{{ page.title }}</h1>
<hr class="hr--small">
</header>
<div class="grid">
<div class="grid__item large--four-fifths push--large--one-tenth">
<div class="rte rte--nomargin rte--indented-images">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulk-Bestellseite</title>
</head>
<body>
<!-- Produktliste -->
<form id="bulk-order-form">
{% for product in collections.all.products %}
<div class="product">
<h3>{{ product.title }}</h3>
<label for="quantity_{{ product.id }}">Menge:</label>
<input
type="number"
id="quantity_{{ product.id }}"
data-variant-id="{{ product.variants.first.id }}"
name="quantity_{{ product.id }}"
value="0"
min="0">
</div>
{% endfor %}
</form>
<!-- Button zum Hinzufügen der Produkte in den Warenkorb -->
<button type="button" id="add-to-cart-button">Produkte in den Warenkorb legen</button>
<script>
document.getElementById('add-to-cart-button').addEventListener('click', function() {
const itemsToAdd = [];
// Alle Eingabefelder im Formular durchgehen
document.querySelectorAll('#bulk-order-form input[type="number"]').forEach(function(input) {
const quantity = parseInt(input.value, 10);
const variantId = input.dataset.variantId;
if (quantity > 0) {
itemsToAdd.push({
id: variantId,
quantity: quantity
});
}
});
// Überprüfen, ob Produkte ausgewählt wurden
if (itemsToAdd.length > 0) {
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({ items: itemsToAdd })
})
.then(response => {
if (response.ok) {
alert('Produkte erfolgreich zum Warenkorb hinzugefügt!');
location.reload();
} else {
return response.json().then(data => {
alert('Fehler: ' + (data.message || 'Unbekannter Fehler'));
});
}
})
.catch(error => {
console.error('Netzwerkfehler:', error);
alert('Ein Netzwerkfehler ist aufgetreten. Bitte versuche es erneut.');
});
} else {
alert('Bitte wähle mindestens ein Produkt aus.');
}
});
</script>
</body>
</html>
</div>
</div>
</div>
</div>
</div>
Can you help us to solve the problems? If yes, please bid your price, NO PLACEHOLDER. Thank you very much!