<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product page</title>
<!-- Fonts -->
<style>
/* Custom Styling */
html, body {
height: 100%;
width: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
}
/* Columns */
.left-column {
width: 65%;
position: relative;
}
.right-column {
width: 35%;
margin-top: 60px;
}
/* Left Column */
.left-column img {
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 0.3s ease;
}
.left-column img.active {
opacity: 1;
}
/* Right Column */
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
margin-bottom: 20px;
}
.product-description span {
font-size: 12px;
color: #358ED7;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.product-description h1 {
font-weight: 300;
font-size: 52px;
color: #43484D;
letter-spacing: -2px;
}
.product-description p {
font-size: 16px;
font-weight: 300;
color: #86939E;
line-height: 24px;
}
/* Product Configuration */
.product-color span,
.cable-config span {
font-size: 14px;
font-weight: 400;
color: #86939E;
margin-bottom: 20px;
display: inline-block;
}
/* Cable Configuration */
.cable-choose {
margin-bottom: 20px;
}
.cable-choose button {
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #5E6977;
background-color: #fff;
cursor: pointer;
transition: all .5s;
}
.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
border: 2px solid #86939E;
outline: none;
}
.cable-config {
border-bottom: 1px solid #E1E8EE;
margin-bottom: 20px;
}
<!-- Product Pricing --!>
@media (max-width: 940px) {
.container {
flex-direction: column;
margin-top: 60px;
}
.left-column,
.right-column {
width: 100%;
}
.left-column img {
width: 300px;
right: 0;
top: -65px;
left: initial;
}
}
@media (max-width: 535px) {
.left-column img {
width: 220px;
top: -85px;
}
}
</style>
<!-- CSS -->
<link href="style.css" rel="stylesheet">
<meta name="robots" content="noindex,follow" />
</head>
<body>
<main class="container">
<!-- Left Column / Headphones Image -->
{% for p in products %}
<div class="left-column">
<img data-image="red" class="active" src="{{p.image.url}}" alt="">
</div>
<!-- Right Column -->
<div class="right-column">
<!-- Product Description -->
<div class="product-description">
<span>{{p.vendor}}</span>
<h1>{{p.title}}</h1>
<p>{{p.description}}</p>
</div>
{% endfor %}
<!-- Product Configuration -->
<!-- </div> -->
<!-- Product Pricing -->
</div>
</main>
<!-- Related Products Section -->
<div class="related-products">
<div style="text-align: center;">
<h2>Related Products</h2>
</div>
{% endfor %}
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
{% for i in colors %}
<script>
function colorID(){
window.location.href =window.location.pathname + `?color=${{i.id}}`
}
</script>
{% endfor %}
</body>
</html>
There is an issue with the script where the color ID is not being assigned unique values correctly to each checkbox.
http://127.0.0.1:8000/product/prdcadfacebaa/?color=$4
The script seems to always assign the value of 4 to the color parameter regardless of which checkbox is selected. This inconsistency can be observed in the provided images.