Skip to content

Commit

Permalink
Merge pull request #13913 from canonical/usamabinnadeem-WD-11785-brok…
Browse files Browse the repository at this point in the history 
…en-buy-button-bulk-purchase

fix(bulk purchase): WD-11785 fix broken buy button
  • Loading branch information
@usamabinnadeem-10
usamabinnadeem-10 committed Jun 3, 2024
2 parents 352b3fe + 9711fb7 commit c1a0027
Showing 1 changed file with 93 additions and 97 deletions.
190 changes: 93 additions & 97 deletions templates/credentials/shop/keys.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,129 +3,125 @@
{% block title %}Canonical Credentials -- Your exams{% endblock %}

{% block meta_description %}
The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
Ubuntu Desktop, and Ubuntu Server topics.
The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
Ubuntu Desktop, and Ubuntu Server topics.
{% endblock meta_description %}

{% block meta_copydoc %}
https://docs.google.com/document/d/1QuhO-9FEOGLrYp8bErS_9snqdljl7d6tFAUoNQxoVDQ/edit
https://docs.google.com/document/d/1QuhO-9FEOGLrYp8bErS_9snqdljl7d6tFAUoNQxoVDQ/edit
{% endblock
meta_copydoc %}

{% block content %}
<div class="p-strip">
<div class="p-strip">

<div class="row">
<div class="row">

<h3>How many exam attempts do you need?</h3>
<h3>How many exam attempts do you need?</h3>

</div>
</div>

<div class="row">

<div class="col-6">

<form onsubmit="handleSubmit()" method="post">

<input type="number"
id="key_quantity"
name="key_quantity"
min="1"
value="1"
oninput="updateOrderSummary()" />

</form>

</div>

<div class="row">
</div>

<div class="row">

<div class="col-6">
<p>
Each exam attempt allows you to register for one or more of the
following certifications:

<form onsubmit="handleSubmit()" method="post">
<ul>

<input type="number"
id="key_quantity"
name="key_quantity"
min="1"
value="1"
oninput="updateOrderSummary()" />
<li>CUE.01 Linux</li>

</form>
<li>CUE.02 Desktop</li>

</div>
<li>CUE.03 Server</li>

</div>
</ul>

<div class="row">
</p>

</div>
</div>
<section class="p-strip--light is-shallow p-shop-cart">

<p>
Each exam attempt allows you to register for one or more of the
following certifications:
<div class="row u-sv3">

<div class="col-6 p-heading--2">Your Order</div>

</div>

<ul>
<div class="row u-sv3">

<li>CUE.01 Linux</li>
<div class="col-6" id="order_quantity">0 x Exam attempt key</div>

<li>CUE.02 Desktop</li>
<div class="col-3" id="order_price">$0.00</div>

<li>CUE.03 Server</li>
<div class="col-3">

</ul>
<button type="submit"
class="p-button--positive"
id="form-submit"
onclick="handleSubmit()">Buy Now</button>

</p>
</div>

</div>
</div>
<section class="p-strip--light is-shallow p-shop-cart">

<div class="row u-sv3">

<div class="col-6 p-heading--2">Your Order</div>

</div>

<div class="row u-sv3">

<div class="col-6" id="order_quantity">0 x Exam attempt key</div>

<div class="col-3" id="order_price">$0.00</div>

<div class="col-3">

<button type="submit"
class="p-button--positive"
id="form-submit"
onclick="handleSubmit()">Buy Now</button>

</div>

</div>
</section>

<script>
const cueKeyProduct = {
{
cue_key_product | tojson
}
};

function handleSubmit() {
const inputQuantity = document.getElementById("key_quantity").value;
localStorage.setItem(
"shop-checkout-data",
JSON.stringify({
product: cueKeyProduct,
quantity: inputQuantity,
action: "purchase",
})
)
location.href = "/account/checkout";
};

function updateOrderSummary() {
const inputQuantity = document.getElementById("key_quantity").value;
var productPrice = cueKeyProduct["price"]["value"] / 100 * inputQuantity;
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: cueKeyProduct["price"]["currency"],
});
productPrice = formatter.format(productPrice);
document.getElementById("order_price").innerHTML = productPrice;
document.getElementById("order_quantity").innerHTML = inputQuantity + " x Exam attempt key";

if (inputQuantity < 1) {
document.getElementById("form-submit").disabled = true;
} else {
document.getElementById("form-submit").disabled = false;
}
};

document.addEventListener("DOMContentLoaded", () => {
updateOrderSummary();
</section>

<script>
const cueKeyProduct = JSON.parse('{{cue_key_product | tojson }}');

function handleSubmit() {
const inputQuantity = document.getElementById("key_quantity").value;
localStorage.setItem(
"shop-checkout-data",
JSON.stringify({
product: cueKeyProduct,
quantity: inputQuantity,
action: "purchase",
})
)
location.href = "/account/checkout";
};

function updateOrderSummary() {
const inputQuantity = document.getElementById("key_quantity").value;
var productPrice = cueKeyProduct["price"]["value"] / 100 * inputQuantity;
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: cueKeyProduct["price"]["currency"],
});
</script>
productPrice = formatter.format(productPrice);
document.getElementById("order_price").innerHTML = productPrice;
document.getElementById("order_quantity").innerHTML = inputQuantity + " x Exam attempt key";

if (inputQuantity < 1) {
document.getElementById("form-submit").disabled = true;
} else {
document.getElementById("form-submit").disabled = false;
}
};

document.addEventListener("DOMContentLoaded", () => {
updateOrderSummary();
});
</script>
{% endblock content %}

0 comments on commit c1a0027

Please sign in to comment.