Как организовать подобный выбор размера и цвета?
Как организовать подобный выбор размера и цвета?
www.vsemayki.ru/product/manshort/430736
www.vsemayki.ru/product/manshort/430736
Комментарии: 10
Разобрался сам
[[msOptions?
&name=`size`
&tplOuter=`tpl.msOptions.size.outer`
&tplRow=`tpl.msOptions.size.row`
]]
tpl.msOptions.size.outer<div class="form-group">
<label class="col-sm-2 control-label">[[%ms2_product_[[+name]]]]:</label>
<div class="col-sm-9">
[[+rows]]
</div>
</div>
tpl.msOptions.size.row<input type="radio" id="check-size-[[+value]]" class="size" value="[[+value]]" [[+checked]] [[+disabled]] name="options[size]">
<label for="check-size-[[+value]]"><span>[[+value]]</span></label>
CSS/*
UI Styles: radio Sizes
*/
input[type="radio"], input[type="radio"]:active, input[type="radio"]:focus, input[type="radio"]:checked {
display: none;
}
input[type="radio"] + label span {
display: inline-block;
width: 32px;
height: 30px;
background: #454545;
border-radius: 4px;
cursor: pointer;
position: relative;
padding: 0;
margin: 5px;
border: none;
-webkit-backface-visibility: hidden;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: .075s;
-moz-transition: .075s;
-ms-transition: .075s;
-o-transition: .075s;
transition: .075s;
box-shadow: 0 2px 0 #000;
}
input[type="radio"].size + label span {
background: #b9d9f5;
box-shadow: 0 2px 0 #94bfe4;
text-align: center;
font-family: "Open Sans", sans-serif;
line-height: 32px;
font-size: 16px;
color: #fff;
}
input[type="radio"].size + label span:hover {
background: #7db3e1;
box-shadow: 0 2px 0 #6495be;
}
input[type="radio"].size + label span:active {
top: 2px;
box-shadow: 0 0px 0 #94bfe4;
}
input[type="radio"]:checked.size + label span {
content: "";
color: #fff;
background: #7db3e1;
box-shadow: 0 2px 0 #6495be;
}
input[type="radio"]:checked.size + label span:after {
content: "";
color: rgba(255, 255, 255, 0.3);
}
input[type="radio"]:disabled.size + label span {
opacity: 0.4;
}
input[type="radio"]:disabled.size + label span:hover {
background: #b9d9f5;
box-shadow: 0 2px 0 #94bfe4;
}
input[type="radio"]:disabled.size + label span:active {
top: 0;
box-shadow: 0 2px 0 #94bfe4;
}
input[type="radio"]:checked + label span:after {
cursor: pointer;
display: block;
position: absolute;
top: -4px;
left: -4px;
width: 40px;
height: 40px;
box-shadow: inset 0 0 0 2px #d0d0d0;
border-radius: 4px;
line-height: 40px;
font-size: 16px;
text-align: center;
font-family: "proviz";
content: "\e25a";
color: rgba(255, 255, 255, 0.3);
-webkit-backface-visibility: hidden;
-webkit-transition: .045s;
-moz-transition: .045s;
-ms-transition: .075s;
-o-transition: .045s;
transition: .045s;
}
input[type="radio"]:disabled.size + label span {
opacity: 0.4;
}
:before, :after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Получилось довольно симпатично
очень пригодится такое) а при смене размера — цена меняется? если, например, вот этот modstore.pro/packages/ecommerce/msoptionsprice плагин поставить?
Да все меняется
Не разобрался пока как сделать этот параметр обязательным, чтобы без выбора размера не добавлялся товар а предлагало выбрать как здесь www.lamoda.ru/p/tt001amcjr43/shoes-ttaccardiforkari-botinki/?rec_name=rnd_recommendations&rec_place=category
а сейчас как? с каким размеров в корзину по умолчанию уходит?
Без размера уходит
просто наверное js написать, который бы форму запрещал отправлять пока один из checkbox не нажат
Тут есть: modx.pro/help/4991/
Картинка тоже меняется при выборе цвета? Подскажите, как реализовали?
Не смог разобраться как вывести информацию о то что товара нет в наличии и запретить возможность выбирать данный размер, и сделал такой костыль
Например 44 disabled выглядит вот так
<input type="radio" id="check-size-[[+value]]" class="size" value="[[+value]]" [[+value]] name="options[size]">
<label for="check-size-[[+value]]"><span>[[+value]]</span></label>
в указании размера нужно писать не просто размер а размер пробел disabled Например 44 disabled выглядит вот так
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.