Question posted in 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product page</title>
<!-- Fonts -->
<style>
/* Basic 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;
}
.cable-config a {
color: #358ED7;
text-decoration: none;
font-size: 12px;
position: relative;
margin: 10px 0;
display: inline-block;
}
.cable-config a:before {
content: "?";
height: 15px;
width: 15px;
border-radius: 50%;
border: 2px solid rgba(53, 142, 215, 0.5);
display: inline-block;
text-align: center;
line-height: 16px;
opacity: 0.5;
margin-right: 5px;
}
/* Product Price */
.product-price {
display: flex;
align-items: center;
}
.product-price span {
font-size: 26px;
font-weight: 300;
color: #43474D;
margin-right: 20px;
}
.btn {
display: inline-block;
background-color: #FFB6C1;
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
}
.btn:hover {
background-color: #ff5733;
}
/* Responsive */
@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="black" src="images/black.png" alt="">
<img data-image="blue" src="images/blue.png" alt=""> -->
<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 class="product-configuration">
<!-- Product Color -->
<div class="product-color">
<span>Color</span>
{% for c in colors %}
<div class="color-choose">
<input type="checkbox" onchange="colorID('{{c.id}}')" id="checkbox1" style="display: none;">
<label for="checkbox1"value="✔" style="display: inline-block; width: 40px; height: 40px; background-color: {{c.code}}; border-radius: 50%;border: 2px solid #FFFFFF; cursor: pointer;float: left; margin-right: 10px;box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);"></label>
</div>
{% endfor %}
</div>
<!-- Cable Configuration -->
<div class="cable-config">
<span>Sizes</span>
{% for s in sizes %}
<div class="cable-choose">
<button>{{s.name}}</button>
<!-- <button>Coiled</button>
<button>Long-coiled</button> -->
</div>
{% endfor %}
<!-- <a href="#">How to configurate your headphones</a> -->
</div>
<!-- </div> -->
<!-- Product Pricing -->
{% for p in products %}
<div class="product-price">
<span>Our Price:{{p.price}}</span>
<del>M.R.P: {{p.old_price}}</del>
</div>
<div class="button">
<a href="#" class="btn">Add to cart</a>
<a href="#" class="btn">Buy Now</a>
</div>
{% endfor %}
</div>
</main>
<!-- Related Products Section -->
<div class="related-products">
<div style="text-align: center;">
<h2>Related Products</h2>
</div>
{% for p in products %}
<div class="showcase">
<div class="showcase-banner">
<img src="{{ p.image.url }}" alt="{{ p.title }}" width="300" class="product-img default">
<p class="showcase-badge">{{ p.get_percentage|floatformat:0 }}% off</p>
</div>
<div class="showcase-content">
<a href="#" class="showcase-category">{{ p.category }}</a>
<a href="#"><h3 class="showcase-title">{{ p.title }}</h3></a>
<div class="price-box">
<p class="price">{{ p.price }}</p>
<del>{{ p.old_price }}</del>
</div>
<a href="#" class="btn">Add to cart</a>
</div>
</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>
In the script section color id is taking same value for each of the checkboxes
http://127.0.0.1:8000/product/prdcadfacebaa/?color=$4
In every cases the script is taking ?color=$4 the value of 4. You can see that In Input section I have taken the onchange function and I java script made it href with ?color And the main problem is here The function is not taking the color ID unique.
in part1 image when i click on the first color it is showing 1
in part2 image when I clicking the next color it is marking as on 2….
2
Answers
Ok So I findout the solution I made little changes in code Instade of
I changed this code to
And I also remove the script
So what i can read in your code this section here your looping over an array of colours and creating a script block in each iteration of the loop with the same function. this will cause issues. remove your for loop so you have one script block with the one colorID function.
the next issue i noticed is where your calling the colorID function here
<input type="checkbox" onchange="colorID('{{c.id}}')" id="checkbox1" style="display: none;">so you call the function and give it a parameter but when you look at your colorID function it doesn’t take any parameters. If you want this to work you should add the parameter to the function like this.
Also you where using ` in your script which I changed to ‘ I’m not a JS pro so I don’t know if that’s allowed or not, just didn’t seem right to me. Everything else I’m going off basic principles.