In product_detail.html:
{% extends 'partials/base.html'%}
{%load static%}
{% block content %}
<style>
/* Basic Styling */
html, body {
height: 100%;
width: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.containerbox {
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: 70%;
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;
}
/* Product Color */
.product-color {
margin-bottom: 30px;
}
.color-choose div {
display: inline-block;
}
.color-choose input[type="radio"] {
display: none;
}
.color-choose input[type="radio"] + label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.color-choose input[type="radio"] + label span {
border: 2px solid #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
}
.color-choose input[type="radio"]#red + label span {
background-color: #C91524;
}
.color-choose input[type="radio"]#blue + label span {
background-color: #314780;
}
.color-choose input[type="radio"]#black + label span {
background-color: #323232;
}
.color-choose input[type="radio"]:checked + label span {
background-image: url(images/check-icn.svg);
background-repeat: no-repeat;
background-position: center;
}
/* Cable Configuration */
.size-choose {
margin-bottom: 20px;
}
.size-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;
}
.size-choose button:hover,
.size-choose button:active,
.size-choose button:focus {
border: 2px solid #86939E;
outline: none;
}
.size-config {
border-bottom: 1px solid #E1E8EE;
margin-bottom: 20px;
}
.size-config a {
color: #358ED7;
text-decoration: none;
font-size: 12px;
position: relative;
margin: 10px 0;
display: inline-block;
}
.size-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;
}*/
.cart-btn {
display: inline-block;
background-color: #FFB6C1;
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
}
.cart-btn:hover {
background-color: #ff0000;
}
.buynow-btn {
display: inline-block;
background-color: #FFB6C1;
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
}
.buynow-btn:hover {
background-color: #ff0000;
}
/* 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;
}
}
.product-price {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.price {
font-size: 24px;
font-weight: bold;
color: #333; /* Price color */
margin-bottom: 5px;
}
del {
color: #999; /* Old price color */
font-size: 18px;
}
</style>
<meta name="robots" content="noindex,follow" />
</head>
<body>
<main class="containerbox">
<!-- Left Column / Headphones Image -->
<div class="left-column">
{% for p in p_image %}
<img data-image="black" src="{{ p.images.url }}" alt="Hi1">
{% endfor %}
<!-- {% for q in p_image %}
<img data-image="blue" src="{{ q.images.url }}" alt="Hi2">
{% endfor %} -->
<img data-image="red" class="active" src="{{p.image.url}}" alt="Hi">
<!-- <p class="showcase-badge">{{p.get_percentage|floatformat:0}}% off</p> -->
</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>
<!-- Product Configuration -->
<div class="product-configuration">
<!-- Product Color -->
<div class="product-color">
<span>Color</span>
<div class="color-choose">
{% for c in colors %}
<div>
<input data-image="{{c.code}}" type="radio" id="{{c.code}}" name="color" value="{{c.code}}" checked>
<label for="red"><span></span></label>
</div>
{% endfor %}
<!-- <div>
<input data-image="blue" type="radio" id="blue" name="color" value="blue">
<label for="blue"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black">
<label for="black"><span></span></label>
</div> -->
</div>
</div>
<!-- Cable Configuration -->
<div class="size-config">
{% for s in sizes %}
<span>Sizes</span>
<div class="size-choose">
<button>{{s.name}}</button>
</div>
{% endfor %}
<a href="#">How to configurate your headphones</a>
</div>
</div>
<!-- Product Pricing -->
<div class="product-price">
<p class="price">New Price: {{p.price}} </p>
<del>Old Price: {{p.old_price}}</del>
</div>
<a href="#" class="cart-btn">Add to cart</a>
<a href="#" class="buynow-btn">Buy Now</a>
<!-- </div> -->
</div>
</main>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script>
$(document).ready(function() {
$('.color-choose input').on('click', function() {
var productColor = $(this).attr('data-image');
$('.active').removeClass('active');
$('.left-column img[data-image = ' + productColor + ']').addClass('active');
$(this).addClass('active');
});
});
</script>
</body>
{% endblock content %}
I created this product-details html page Where I created checkbox(radio) but when I am clicking on the checkboxes it is not working
In the original template all the things are working perfectly. My views and model also are working perfectly.
To see my problem in detail please visit the link:
https://youtu.be/SAfs2UepWqc
you can see in the video that when I add a new color in products it is working(I mean previously in page page there are four colors after adding one there is five colors) but when I am clicking on the colors it is not changing the images.
Though I uploaded more than one image you can see In the below video by visiting the link:
https://youtu.be/BtRq0XeijmY
I have also an another question that it is possible that in css
.color-choose input[type="radio"]#red + label span {
background-color: #C91524;
}
instade of #red if i can put the colors which I created in admin pannel