Мобильная версияIn product_detail.html:
{% extends 'partials/base.html'%} {%load static%} {% block content %} /* 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; } {% for p in p_image %}
{% endfor %}
{{p.vendor}} {{p.title}}
{{p.description}}
Color {% for c in colors %} {% endfor %} {% for s in sizes %} Sizes {{s.name}} {% endfor %} How to configurate your headphones
New Price: {{p.price}}
Old Price: {{p.old_price}} Add to cart Buy Now $(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'); }); }); {% 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:
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:
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
My problem in simple word: I have created an html page which will content product details in the page I created a checkbox when I am clicking in the checkboxes it is not working means it is not changing the images and the checkboxes(type= radio) also have to filled with colors(which I created in style tag)
.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; } in the above code you can see this that all checkboxes will fill with colors.
{% for c in colors %} {% endfor %} but in the above html code checkboxes are comming as i am adding in my addmin pannel but the css is not working and when I am clicking in the checkboxes it is also not changing the image(but I created image changing function) The image changing function is:
$(document).ready(function() { $('.color-choose input').on('click', function() { var headphonesColor = $(this).attr('data-image'); $('.active').removeClass('active'); $('.left-column img[data-image = ' + headphonesColor + ']').addClass('active'); $(this).addClass('active'); }); });
Источник: https://stackoverflow.com/questions/780 ... -ok-and-or
