Всем привет. Есть такая проблемка. У меня есть 100 вариантов опции (цветов например)
Я хочу выводить на странице товара только первые 5 цветов, а при клике на кнопку "Смотреть больше" открывается модалка и в ней уже все 100 цветов, и пользователь выбирает нужный
Есть код опций
<div class="form-group">
<label class="control-label">{% if option.required %}<span class="required">*</span> {% endif %}{{ option.name }}</label>
<div id="input-option{{ option.product_option_id }}" class="options-box-first d-xl-flex flex-wrap align-items-center">
{% for option_value in option.product_option_value %}
<div class="radio">
<label data-toggle="tooltip" data-trigger="hover" class="optid {{ option.product_option_id }} {{ '1' == option_value.is_default ? 'selected' : 'not-selected' }} {% if option_value.image %} radio-img{% endif %}" {% if option_value.price %}title="{{ option_value.price_prefix }}{{ option_value.price }}"{% endif %} {{ '1' == option_value.is_default ? 'checked="checked"' : '' }}>
<input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" class="d-none" />
{% if option_value.image %}
<img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" />
<p class="option-value-name">{{ option_value.name }}</p>
{% else %}
{{ option_value.name }}
{% endif %}
</label>
<script>
$(document).ready(function() {
$('label.optid.{{ option.product_option_id }}').click(function(){
$('label.optid.{{ option.product_option_id }}').removeClass('selected').addClass('not-selected');
$(this).removeClass('not-selected').addClass('selected');
});
});
</script>
</div>
{% endfor %}
</div>
</div>
и код модального окна
<!-- Button trigger modal -->
<button type="button" class="btn-more-options" data-toggle="modal" data-target="#myModal">
Переглянути більше
</button>
<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="myModalLabel">Виберіть опцію товару</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn-more-options" data-dismiss="modal">Повернутися до покупки товару</button>
</div>
</div>
</div>
</div>
Использую бутстрап, сейчас пытаюсь вывести <div class="form-group"> в модальном окне где <div class="modal-body">
Сделал таким образом
$(document).ready(function(){
$("#myModal").on("show.bs.modal", function(event){
$('.modal-body').html( $('.form-group').html() );
});
});
Так открываются опции в модалке, но теперь проблема с выбором, если я выберу на странице опцию, а потом открою модалку, то выбранный элемент так и есть выбранным
А вот если я выберу в модалке какую-то опцию, то при закрытии модалки сбрасывается выбор
Может кто знает как можно решить?