Hi everybody. So I have old one MODX Revolution 2.8.3-pl with simple shop. All products are like resources. I made a simple cart with localStorage, after making order it sends to email order information.
General problems
- After pressing Order button, it is not redirecting to success page.
- I need to delete cart information after order is made.
What is wrong in my code??? Please help, i have spent a lot of hours and still can’t fix it ((((
The button in product page is like this:
[[*available:is=`3`:then=``:else=`<a class="btn" onclick="addToCart([[*id]], '[[*pagetitle]]', '[[+article]]', '[[*thumb]]', [[*price]], '[[~[[*id]]]]')">Add to cart</a>`]]
<script>
function addToCart(id, name, article, thumb, price, url) {
let cart = JSON.parse(localStorage.getItem('cart')) || [];
const exists = cart.some(item => item.id === id);
if (exists) {
alert('Already added');
return;
}
cart.push({ id, name, article, thumb, price, url });
localStorage.setItem('cart', JSON.stringify(cart));
alert('You added product to basket');
}
</script>
Next is a main chunk:
<div id="cart-container"></div>
<form method="post" action="[[~[[*id]]]]" class="cart_order_form ajax_form af_example" id="cart-form">
<input type="text" name="name" placeholder="Name" required>
<input type="text" name="phone" placeholder="Phone" required>
<textarea name="comment" placeholder="Comments"></textarea>
<input type="hidden" name="cart_content" id="cart_content">
<button type="submit" class="btn">Order</button>
</form>
[[+fi.success:is=1:then=<div class="alert alert-success">[[+fi.successMessage]]</div>]]
[[+fi.validation_error:is=1:then=<div class="alert alert-danger">[[+fi.validation_error_message]]</div>]]
<script>
function removeFromCart(id) {
let cart = JSON.parse(localStorage.getItem('cart')) || [];
cart = cart.filter(item => item.id !== id);
localStorage.setItem('cart', JSON.stringify(cart));
location.reload();
}
document.addEventListener("DOMContentLoaded", function () {
let cart = JSON.parse(localStorage.getItem('cart')) || [];
let container = document.getElementById('cart-container');
let form = document.getElementById('cart-form');
let hiddenField = document.getElementById('cart_content');
if (cart.length === 0) {
container.innerHTML = '<p>Cart is empty</p>';
if (form) form.style.display = 'none';
} else {
if (form) form.style.display = 'block';
let tableHtml = `
<table style="width:100%; border-collapse:collapse;">
<thead>
<tr>
<th>Photo</th>
<th>Name</th>
<th>Delete</th>
<th>Price</th>
</tr>
</thead>
<tbody>
`;
let total = 0;
cart.forEach((item) => {
total += parseFloat(item.price);
tableHtml += `
<tr>
<td><img src="${item.thumb}" alt="" style="width:120px;"></td>
<td><a href="${item.url}">${item.name}</a><br><small>аrt. ${item.article}</small></td>
<td>
<button type="button" onclick="removeFromCart(${item.id})" title="Delete" style="background:none; border:none; cursor:pointer; font-size:18px; color:#cc0000;">
<i class="fa fa-trash"></i>
</button>
</td>
<td>${item.price}</td>
</tr>
`;
});
tableHtml += `
</tbody>
</table>
`;
container.innerHTML = tableHtml;
let totalElem = document.createElement('p');
totalElem.style.textAlign = "right";
totalElem.style.fontWeight = "bold";
totalElem.style.marginTop = "10px";
totalElem.textContent = `Total: ${total.toFixed(2)}`;
container.appendChild(totalElem);
hiddenField.value = JSON.stringify(cart);
}
});
</script>
Next is a cart page with:
[[!AjaxForm?
&form=cartFormTpl
&hooks=spam,email,redirect
&emailTpl=cartEmailTpl
&emailSubject=New order «[[++site_name]]»
&emailTo=[[++emailsender]]
&emailFrom=[[++emailsender]]
&validate=name:required,phone:required
&validationErrorMessage=Please fill all fields
&successMessage=Your order is send!
&redirectTo=[[~1511]]
]]
Next is page success with ID 1511. And last one is a chunk to send:
<p><strong>Name:</strong> [[+name]]</p>
<p><strong>Phone:</strong> [[+phone]]</p>
<p><strong>Comments:</strong> [[+comment]]</p>
<p><strong>Cart:</strong></p>
<pre>[[+cart_content]]</pre>