Skip to content

Commit

Permalink
fix shop page
Browse files Browse the repository at this point in the history
  • Loading branch information
@usamabinnadeem-10
usamabinnadeem-10 committed Jun 11, 2024
1 parent 3491216 commit c8ff6e0
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 94 deletions.
166 changes: 82 additions & 84 deletions templates/credentials/shop/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,27 +16,13 @@ <h2>Select an exam to purchase</h2>
<div class="row u-hide--small">
{% for exam in exams %}
<div class="col-4">
<div class="p-card--radio--column
{% if loop.index0 == exam_index %}
is-selected
{% endif %}"
<div id="price-card-{{ loop.index0 }}" class="p-card--radio--column"
>
<label class="p-radio">
<input class="p-radio__input" type="radio"
{% if exam.price is not defined %}
disabled
{% endif %}
/>
<input id="price-radio-{{ loop.index0 }}" class="p-radio__input" type="radio" />
<span class="p-radio__label">
<label class="inner-label p-radio" label="{{ exam.name }}">
<input class="p-radio__input" name="exam-radio" type="radio" value={{ loop.index0 }}
{% if loop.index0 == exam_index %}
checked
{% endif %}
{% if exam.price is not defined %}
disabled
{% endif %}
/>
<input id="price-radio-inner-{{ loop.index0 }}" class="p-radio__input" name="exam-radio" type="radio" value={{ loop.index0 }} />
<span class="p-radio__label">
{{ exam.name }}
</span>
Expand All @@ -46,12 +32,8 @@ <h2>Select an exam to purchase</h2>
{{ exam.metadata[0].value }}
</p>
<hr/>
<h5 id="exam-price" class="u-align--right" style="padding-right: 1rem;">
{% if exam.price is not defined %}
Coming Soon!
{% else %}
<span class="exam-price" id="exam-price-{{ exam.id }}">Price: {{ exam.price.currency }} {{ exam.price.value }}</span>
{% endif %}
<h5 id="exam-price-{{ loop.index0 }}" class="u-align--right" style="padding-right: 1rem;">
<span class="exam-price" id="exam-price-{{ loop.index0 }}"></span>
</h5>
</span>
</label>
Expand All @@ -64,21 +46,12 @@ <h5 id="exam-price" class="u-align--right" style="padding-right: 1rem;">
{% for exam in exams %}
<div class="col-12 u-hide u-show--small">
<div
class="p-card--radio--column
{% if loop.index0 == exam_index %}
is-selected
{% endif %}"
id="price-card-{{ loop.index0 }}"
class="p-card--radio--column"
style="margin-left: 1rem; margin-right: 1rem;"
>
<label class="p-radio--inline" label="{{ exam.name }}">
<input class="p-radio__input" type="radio" name="exam-radio--small" value={{ loop.index0 }}
{% if loop.index0 == exam_index %}
checked
{% endif %}
{% if exam.price is not defined %}
disabled
{% endif %}
/>
<input id="price-radio-{{ loop.index0 }}" class="p-radio__input" type="radio" name="exam-radio--small" value={{ loop.index0 }} />
<span class="p-radio__label">
{{ exam.name }}
</span>
Expand All @@ -89,12 +62,8 @@ <h5 id="exam-price" class="u-align--right" style="padding-right: 1rem;">
</p>
</span>
<span>
<h5 id="exam-price" class="u-align--right" style="padding-right: 1rem;">
{% if exam.price is not defined %}
Coming Soon!
{% else %}
<span class="exam-price" id="exam-price-{{ exam.id }}">Price: {{ exam.price.currency }} {{ exam.price.value }}</span>
{% endif %}
<h5 id="exam-price-{{ loop.index0 }}" class="u-align--right" style="padding-right: 1rem;">
<span class="exam-price" id="exam-price-{{ loop.index0 }}"></span>
</h5>
</span>
</div>
Expand All @@ -110,13 +79,11 @@ <h5 id="exam-price" class="u-align--right" style="padding-right: 1rem;">
</div>
<div class="row">
<div class="col-6" style="display: flex;">
<p class="order-name p-heading--2" style="margin-block: auto;">
{{ exams[exam_index].name }}
</p>
<p id="selected-product-name" class="order-name p-heading--2" style="margin-block: auto;"></p>
</div>
<div class="col-3 col-small-2" style="display: flex;">
<p id="exam-price" class="p-heading--2" style="margin-block: auto;">
<span id="total-price" class="exam-price">Price: {{ exams[exam_index].price.currency }} {{ exams[exam_index].price.value }}</span>
<span id="total-price" class="exam-price"></span>
</p>
</div>
<div class="col-3 col-small-2 u-align--right" style="display: flex;">
Expand All @@ -130,69 +97,100 @@ <h5 id="exam-price" class="u-align--right" style="padding-right: 1rem;">

<script>
window.stripePublishableKey = "{{ get_stripe_publishable_key }}";
const exams = {{ exams | tojson }};
const exams = JSON.parse('{{ exams | tojson }}');
let examIndex = JSON.parse("{{ exam_index }}")

function currencyFormatter(currency, value) {
function currencyFormatter({currency, value}) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency,
});
return formatter.format(value/100);
};

function updateCurrency() {
const prices = document.querySelectorAll("#exam-price");
for (var i = 0; i < prices.length; i++) {
const priceElement = prices[i];
const price = priceElement.getElementsByClassName("exam-price")[0];

if (price) {
const priceList = price.innerHTML.split(" ");
const formattedPrice = currencyFormatter(priceList[1], parseInt(priceList[2]));
if (price.id == "total-price") {
price.innerHTML = formattedPrice;
} else {
price.innerHTML = 'Price: ' + formattedPrice;
}
}
const getExamFinalPrice = (examIndex = 0) => {
const exam = exams[examIndex];
const examOriginalPrice = exam?.metadata?.find((e) => e.key === 'originalPrice' && !!e.value);
const examDiscountedPrice = exam?.metadata?.find((e) => e.key === 'discountedPrice' && !!e.value);

if (!examDiscountedPrice && !examOriginalPrice) return {
price: null,
type: null,
examOriginalPrice: null,
examDiscountedPrice: null,
};

return {
price: examDiscountedPrice || examOriginalPrice,
type: examDiscountedPrice ? 'discountedPrice' : 'originalPrice',
examOriginalPrice,
examDiscountedPrice,
}
}

const updateOrderTotal = (examIndex = 0) => {
// if user enables radio button
if (examIndex > 0) {
setInitialData();
return;
}
const exam = exams[examIndex];
const selectedProduct = document.getElementById('selected-product-name');
const totalPrice = document.getElementById('total-price');
selectedProduct.innerText = exam.displayName;
const {price} = getExamFinalPrice(examIndex);
totalPrice.innerText = `${currencyFormatter(price)}`;
}

const setInitialData = (examIndex = 0) => {
// select the active card
const card = document.getElementById(`price-card-${examIndex}`);
card.classList.add('is-selected');
updateOrderTotal(examIndex);

// select/disable cards and add prices
exams.forEach((exam, idx) => {
const radioInput = document.querySelectorAll(`#price-radio-${idx}`);
const radioInputInner = document.querySelectorAll(`#price-radio-inner-${idx}`);
const examPriceH5 = document.querySelectorAll(`h5#exam-price-${idx}`)
const examPriceSpan = document.querySelectorAll(`span#exam-price-${idx}`);
const {price, type, examOriginalPrice, examDiscountedPrice} = getExamFinalPrice(idx);
radioInput.forEach((r) => r.disabled = !price);
radioInputInner.forEach((r) => r.disabled = !price);

if (idx === examIndex) {
radioInputInner.forEach((r) => r.checked = "checked");
}
if (!price){
examPriceH5.forEach((r) => r.innerHTML = 'Coming Soon');
// examPriceSpan.forEach((r) => r.hidden = true);
} else{
if (type === 'discountedPrice') {
examPriceSpan.forEach((r) => r.innerHTML = `Price: <s>${currencyFormatter(examOriginalPrice)}</s> ${currencyFormatter(examDiscountedPrice)}` );
} else {
examPriceSpan.forEach((r) => r.innerText = `Price: ${currencyFormatter(examOriginalPrice)}`);
}

}
})
}

document.addEventListener("DOMContentLoaded", () => {
updateCurrency();
setInitialData();
});

document.getElementsByName("exam-radio").forEach(function(e) {
e.addEventListener("click", function() {
updateOrder(e.value);
updateOrderTotal(e.value);
});
});

document.getElementsByName("exam-radio--small").forEach(function(e) {
e.addEventListener("click", function() {
updateOrder(e.value);
updateOrderTotal(e.value);
});
});

function updateOrder(exam_index) {
// Update order cart
const order = document.querySelectorAll("#order-cart");
const orderName = order[0].getElementsByClassName("order-name")[0];
const orderPrice = order[0].getElementsByClassName("exam-price")[0];
orderName.innerHTML = exams[exam_index].name;
orderPrice.innerHTML = currencyFormatter(exams[exam_index].price.currency, exams[exam_index].price.value);

// Update selected card
const card = document.querySelectorAll(".p-card--radio--column");
for (var i = 0; i < card.length; i++) {
if (i == exam_index || i == exam_index/2 ) {
card[i].classList.add("is-selected");
} else {
card[i].classList.remove("is-selected");
}
}
};

const handleSubmit = () => {
event.preventDefault();
const index = document.querySelector('input[name="exam-radio"]:checked').value;
Expand Down
19 changes: 16 additions & 3 deletions webapp/shop/cred/exams.json
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,30 @@
[
{
"id": "cue-linux-essentials",
"name": "CUE Linux Essentials",
"name": "CUE.01 Linux",
"displayName": "CUE.01 Linux",
"metadata": [
{
"key": "description",
"value":
"Prove your basic operational knowledge of Linux by demonstrating your ability to secure, operate and maintain basic system resources. Topics include user and group management, file and filesystem navigation, and logs and installation tasks related to system maintenance."
},
{
"key": "originalPrice",
"value": "10000",
"currency": "USD"
},
{
"key": "discountedPrice",
"value": "0",
"currency": "USD"
}
]
},
{
"id": "cue-02-desktop",
"name": "CUE Desktop",
"name": "CUE.02 Desktop",
"displayName": "CUE.02 Desktop",
"metadata": [
{
"key": "description",
Expand All @@ -23,7 +35,8 @@
},
{
"id": "cue-03-server",
"name": "CUE Server",
"name": "CUE.03 Server",
"displayName": "CUE.03 Server",
"metadata": [
{
"key": "description",
Expand Down
7 changes: 0 additions & 7 deletions webapp/shop/cred/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -858,13 +858,6 @@ def cred_submit_form(**_):
def cred_shop(**kwargs):
exams_file = open("webapp/shop/cred/exams.json", "r")
exams = json.load(exams_file)
cue_products = get_cue_products(type="exam").json

for exam in exams:
id = exam["id"]
for product in cue_products:
if id == product["id"]:
exam["price"] = product["price"]

return flask.render_template(
"credentials/shop/index.html", exams=exams, exam_index=0
Expand Down

0 comments on commit c8ff6e0

Please sign in to comment.