Hi im following the below - it shows fine but does not seem to change the price ?
Any help would be great please .
To add a discount code on the cart page, follow these steps:
- Create a new file called “discount-code.liquid” in the “snippets” folder.
- Copy and paste the code on this page into the new file and save it.
- In the location where you want the discount code to appear, such as the “cart.liquid” file, call the file by using the code “{% render ‘discount-code’ %}”. If you are using an older theme, use “{% include ‘discount-code’ %}” instead.
This should help you add a discount code to the cart page.
<!-- discount code CSS (Optional) -->
<style>
.discount-code-container {
margin-bottom: 2rem;
}
.discount-code-container .h3 {
margin-bottom: 2rem;
}
.cart-discount.input-wrapper {
display: flex;
justify-items: center;
gap: 20px;
}
input#discount_code {
min-width: 200px;
border-radius: 5px;
border: 1px solid gainsboro;
padding: 10px;
color: #333;
}
button.apply-discount-code {
position: relative;
padding: 7px 22px;
text-transform: uppercase;
border-radius: 9px;
border: 1px solid transparent;
color: #fff;
background-color: #000;
font-weight: 500;
letter-spacing: 0.2px;
cursor: pointer;
}
.loading::before {
border: 3px solid #acacac;
border-top: 2px solid #000;
border-radius: 50%;
width: 25px;
height: 25px;
animation: spin .5s linear infinite;
content: '';
position: absolute;
right: -37px;
top: 0px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<!-- discount code html (Required. Also notice the form="cart". This is required as the input is not directly inside the form element) -->
<div class="discount-code-container">
<h3 class="h3">Enter Coupon Or Discount Code:</h3>
<div class="cart-discount input-wrapper">
<label for="discount_code" class="visually-hidden sr-only">Enter Discount Code</label>
<input
type="text"
id="discount_code"
name="discount"
class="form-control"
value=""
placeholder="Coupon code"
form="cart"
>
<div class="apply-btn-wrapper">
<button type="button" class="apply-discount-code">Apply</button>
</div>
</div>
</div>
<!-- discount code JS (Required)-->
<script>
window.shopUrl = '{{ request.origin }}';
const discountSubmitBtn = document.querySelector('.apply-discount-code'),
discountCodeInput = document.querySelector('[name="discount"]');
discountSubmitBtn.addEventListener('click', (event) => {
event.preventDefault();
const discountCode = discountCodeInput.value;
event.target.classList.add('loading');
const xhr = new XMLHttpRequest();
xhr.open('POST', shopUrl + '/cart.js');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
discountSubmitBtn.classList.remove('loading');
}
};
xhr.send(JSON.stringify({ 'attributes[discount]': discountCode }));
xhr.addEventListener('error', function(e) {
console.log(`${e.type}}`)
discountSubmitBtn.classList.remove('loading');
});
});
</script>
Copy
