
$(document).ready(function() {
// Target all select elements
$('select').each(function() {
var dropdown = $(this);
var options = dropdown.find('option');
// Add specific classes to "Yes" and "No" options dynamically
options.each(function() {
if ($(this).text() === "Yes") {
$(this).addClass('option-yes');
}
if ($(this).text() === "No") {
$(this).addClass('option-no');
}
});
// Check if the dropdown contains "Yes" and "No"
var containsYes = dropdown.find('.option-yes').length > 0;
var containsNo = dropdown.find('.option-no').length > 0;
// If the dropdown contains both "Yes" and "No", convert it into a toggle
if (containsYes && containsNo) {
// Create the toggle switch HTML with text inside the toggle
var toggleHtml = `<label class="switch"><input type="checkbox" class="toggleCheckbox" ${containsNo ? '' : 'checked' }><span class="slider round"><span class="toggle-text">${containsNo ? "No" : "Yes"}</span></span></label>`;
dropdown.closest('.product-attribute-departmentitem-container').addClass('toggle-attribute');
// Insert the toggle switch HTML above the dropdown
dropdown.before(toggleHtml);
// When the toggle is changed, update the dropdown selection and the text inside the toggle
$('.toggleCheckbox').change(function() {
if ($(this).is(':checked')) {
// Find the "Yes" option by class and select it
dropdown.find('.option-yes').prop('selected', true);
dropdown.find('.option-no').prop('selected', false);
dropdown.trigger('change');
$('.toggle-text').text("Yes");
} else {
// Find the "No" option by class and select it
dropdown.find('.option-no').prop('selected', true);
dropdown.find('.option-yes').prop('selected', false);
dropdown.trigger('change');
$('.toggle-text').text("No");
}
});
}
});
});
function dmLoad() {
// Hide the original dropdown
$('.toggle-attribute .select2').hide();
}
.switch {
position: relative;
display: inline-block;
width: 75px;
height: 30px;
vertical-align: middle;
margin-left: 10px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.switch .slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
border-radius: 50%;
background-color: white;
transition: 0.4s;
left: 4px;
bottom: 4px;
}
.switch input:checked+.slider {
background-color: #4CAF50;
}
.switch input:checked+.slider:before {
transform: translateX(45px);
}
.toggle-text {
font-size: 14px;
color: white;
font-weight: bold;
transition: 0.4s;
position: absolute;
left: 40%;
transform: translateX(-0%);
pointer-events: none;
}
.switch input:checked+.slider .toggle-text {
transform: translateX(-70%);
}
.switch input:not(:checked)+.slider .toggle-text {
transform: translateX(50%);
}
// Target all select elements
$('select').each(function() {
var dropdown = $(this);
var options = dropdown.find('option');
// Add specific classes to "Yes" and "No" options dynamically
options.each(function() {
if ($(this).text() === "Yes") {
$(this).addClass('option-yes');
}
if ($(this).text() === "No") {
$(this).addClass('option-no');
}
});
// Check if the dropdown contains "Yes" and "No"
var containsYes = dropdown.find('.option-yes').length > 0;
var containsNo = dropdown.find('.option-no').length > 0;
// If the dropdown contains both "Yes" and "No", convert it into a toggle
if (containsYes && containsNo) {
// Create the toggle switch HTML with text inside the toggle
var toggleHtml = `<label class="switch"><input type="checkbox" class="toggleCheckbox" ${containsNo ? '' : 'checked' }><span class="slider round"><span class="toggle-text">${containsNo ? "No" : "Yes"}</span></span></label>`;
dropdown.closest('.product-attribute-departmentitem-container').addClass('toggle-attribute');
// Insert the toggle switch HTML above the dropdown
dropdown.before(toggleHtml);
// When the toggle is changed, update the dropdown selection and the text inside the toggle
$('.toggleCheckbox').change(function() {
if ($(this).is(':checked')) {
// Find the "Yes" option by class and select it
dropdown.find('.option-yes').prop('selected', true);
dropdown.find('.option-no').prop('selected', false);
dropdown.trigger('change');
$('.toggle-text').text("Yes");
} else {
// Find the "No" option by class and select it
dropdown.find('.option-no').prop('selected', true);
dropdown.find('.option-yes').prop('selected', false);
dropdown.trigger('change');
$('.toggle-text').text("No");
}
});
}
});
// Hide the original dropdown
$('.toggle-attribute .select2').hide();
.page-productdetails label:not(#fulFileUpload_button),
.page-checkout .checkout-shipmenttype-container label,
.page-checkout .checkout-orderdetails-container label {
width: 100%;
}
.page-productdetails label:not(#fulFileUpload_button):not(.toggle-attribute label),
.page-checkout .checkout-shipmenttype-container label,
.page-checkout .checkout-orderdetails-container label {
width: 100%;
}
If you have any ideas you'd like to see us tackle email our support team at support@docketmanager.ca