Jannex
/
SHX-Theme
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

select with images

main
alexanderroese 2024-07-17 22:53:01 +02:00
parent c0345cb605
commit f35f6e76c6
2 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
snippets/product-variant-picker.liquid
View File

@ -134,7 +134,7 @@
</div>
</div>
</button>
<div class="shx-custom-enhanced-dropdown-content shx-custom-enhanced-dropdown-variant-dropdown-content" id="shx-custom-enhanced-dropdown-variant-dropdown-content">
<div class="shx-custom-enhanced-dropdown-content" id="shx-custom-enhanced-dropdown-variant-dropdown-content">
{% for product_variant in product.variants %}
<div data-value="{{ product_variant.title }}" {% if option.selected_value == product_variant.title %}class="shx-custom-variant-picker-selected-variant"{% endif %}>
<img src="{{ product_variant.featured_image.src | image_url }}" height="100" width="100" style="border-radius: 4px">
@ -158,7 +158,7 @@
dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
});
document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-dropdown-content div').forEach(item => {
document.querySelectorAll('#shx-custom-enhanced-dropdown-variant-dropdown-content div').forEach(item => {
item.addEventListener('click', event => {
const selectedVariant = event.currentTarget.getAttribute('data-value');
customSelectedValue.innerText = selectedVariant;
@ -171,7 +171,7 @@
selectElement.dispatchEvent(eventChange);
// Remove the selected style from all items
document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-dropdown-content div').forEach(div => {
document.querySelectorAll('#shx-custom-enhanced-dropdown-variant-dropdown-content div').forEach(div => {
div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
});

10
snippets/shx-3d-render-input.liquid
View File

@ -582,7 +582,7 @@
}
function toggleCustomEnhancedDropdownFont() {
const dropdownContent = document.getElementById("shx-custom-enhanced-dropdown-font-dropdown-content")
const dropdownContent = document.querySelector("#shx-custom-enhanced-dropdown-font-dropdown-content")
dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
}
@ -603,14 +603,14 @@
selectElement.dispatchEvent(eventChange);
// Remove the selected style from all items
document.querySelectorAll('.shx-custom-enhanced-dropdown-font-dropdown-content div').forEach(div => {
document.querySelectorAll('#shx-custom-enhanced-dropdown-font-dropdown-content div').forEach(div => {
div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
});
// Add the selected style to the clicked item
event.currentTarget.classList.add('shx-custom-enhanced-dropdown-variant-selected');
document.getElementById("shx-custom-enhanced-dropdown-font-dropdown-content").style.display = 'none';
document.getElementById("#shx-custom-enhanced-dropdown-font-dropdown-content").style.display = 'none';
}
function loadCustomEnhancedDropdownDefaultSelectedValue() {
@ -661,11 +661,9 @@
html += `<option value="${optionValue}" ${inputVal === optionValue ? 'selected' : ''}>${optionDisplayName}</option>`;
console.log("for", inputVal, optionValue)
if (isInputShxFont) {
customDropdownHtml += `
<div data-value="${optionValue}" onclick="onFontDropdownItemClick(event)">
<div data-value="${optionValue}" class="${inputVal === optionValue ? 'shx-custom-enhanced-dropdown-variant-selected' : ''}" onclick="onFontDropdownItemClick(event)">
<span>${optionDisplayName}</span>
</div>
`