Мобильная версияProduct page /* 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; } } {% for p in products %}
{{p.vendor}} {{p.title}} {{p.description}}
{% endfor %} Color {% for c in colors %} {% endfor %} Sizes {% for s in sizes %} {{s.name}} {% endfor %} {% for p in products %} Our Price:{{p.price}} M.R.P: {{p.old_price}} Add to cart Buy Now {% endfor %} Related Products {% for p in products %}
{{ p.get_percentage|floatformat:0 }}% off
{{ p.category }} {{ p.title }}
{{ p.price }}
{{ p.old_price }} Add to cart {% endfor %} {% for i in colors %} function colorID(){ window.location.href =window.location.pathname + `?color=${{i.id}}` } {% endfor %}
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....
Источник: https://stackoverflow.com/questions/780 ... ot-working
