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

select with images

main
alexanderroese 2024-07-17 20:06:28 +02:00
parent 14727f78cd
commit e455d7939b
2 changed files with 41 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -134,7 +134,7 @@
</div> </div>
</div> </div>
</button> </button>
<div class="shx-custom-enhanced-dropdown-content shx-custom-enhanced-dropdown-variant-picker-dropdown-content" id="shx-custom-enhanced-dropdown-variant-picker-dropdown-content"> <div class="shx-custom-enhanced-dropdown-content shx-custom-enhanced-dropdown-variant-dropdown-content" id="shx-custom-enhanced-dropdown-variant-dropdown-content">
{% for product_variant in product.variants %} {% 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 %}> <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"> <img src="{{ product_variant.featured_image.src | image_url }}" height="100" width="100" style="border-radius: 4px">
@ -150,15 +150,15 @@
<script> <script>
const selectElement = document.querySelector('.shx-custom-enhanced-dropdown-variant-hide-dummy-select'); const selectElement = document.querySelector('.shx-custom-enhanced-dropdown-variant-hide-dummy-select');
const dropdownContent = document.getElementById('shx-custom-enhanced-dropdown-variant-picker-dropdown-content'); const dropdownContent = document.getElementById('shx-custom-enhanced-dropdown-variant-dropdown-content');
const selectedButton = document.getElementById('shx-custom-enhanced-dropdown-variant-select-button'); const selectButton = document.getElementById('shx-custom-enhanced-dropdown-variant-select-button');
const customSelectedValue = document.getElementById('shx-custom-enhanced-dropdown-variant-select-selected-value') const customSelectedValue = document.getElementById('shx-custom-enhanced-dropdown-variant-select-selected-value')
selectedButton.addEventListener('click', function() { selectButton.addEventListener('click', function() {
dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block'; dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
}); });
document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-picker-dropdown-content div').forEach(item => { document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-dropdown-content div').forEach(item => {
item.addEventListener('click', event => { item.addEventListener('click', event => {
const selectedVariant = event.currentTarget.getAttribute('data-value'); const selectedVariant = event.currentTarget.getAttribute('data-value');
customSelectedValue.innerText = selectedVariant; customSelectedValue.innerText = selectedVariant;
@ -171,7 +171,7 @@
selectElement.dispatchEvent(eventChange); selectElement.dispatchEvent(eventChange);
// Remove the selected style from all items // Remove the selected style from all items
document.querySelectorAll('.shx-custom-enhanced-dropdown-variant-picker-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'); div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
}); });
@ -190,7 +190,7 @@
// Close the dropdown if the user clicks outside of it // Close the dropdown if the user clicks outside of it
window.addEventListener('click', function(event) { window.addEventListener('click', function(event) {
if (!event.target.matches('.shx-custom-enhanced-dropdown-dropbtn')) { if (!event.target.matches('#shx-custom-enhanced-dropdown-variant-select-button')) {
if (dropdownContent.style.display === 'block') { if (dropdownContent.style.display === 'block') {
dropdownContent.style.display = 'none'; dropdownContent.style.display = 'none';
} }

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

@ -589,13 +589,41 @@
} }
function toggleCustomEnhancedDropdownFont() { function toggleCustomEnhancedDropdownFont() {
console.log("toggleCustomEnhancedDropdownFont") const dropdownContent = document.getElementById("shx-custom-enhanced-dropdown-font-dropdown-content")
const dropdownContent = document.getElementById("shx-custom-enhanced-dropdown-font-content")
dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block'; dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
} }
function onFontDropdownItemClick(event) {
console.log("onFontDropdownItemClick")
const selectedVariant = event.currentTarget.getAttribute('data-value');
customSelectedValue.innerText = selectedVariant;
// Set the selected option in the original select element
selectElement.value = selectedVariant;
// Trigger change event
const eventChange = new Event('change', { bubbles: true });
selectElement.dispatchEvent(eventChange);
// Remove the selected style from all items
document.querySelectorAll('.shx-custom-enhanced-dropdown-font-dropdown-content div').forEach(div => {
div.classList.remove('shx-custom-enhanced-dropdown-font-selected');
});
// Add the selected style to the clicked item
event.currentTarget.classList.add('shx-custom-enhanced-dropdown-font-selected');
dropdownContent.style.display = 'none';
const currentTargetImage = event.currentTarget.querySelector("img")
if (currentTargetImage !== null && currentTargetImage.src !== null) {
//document.getElementById("shx-custom-enhanced-dropdown-variant-selected-image").src = event.currentTarget.querySelector("img").src
}
}
function SHX_IFC_genDropdownSelect(inputID, labelText, inputName, inputVal, options, section_id) { function SHX_IFC_genDropdownSelect(inputID, labelText, inputName, inputVal, options, section_id) {
let html = ` let html = `
<label class="form__label custom shx-ifc-form_label" for="${inputID}-label">${labelText}</label> <label class="form__label custom shx-ifc-form_label" for="${inputID}-label">${labelText}</label>
@ -611,7 +639,7 @@
if (isInputShxFont) { if (isInputShxFont) {
customDropdownHtml += ` customDropdownHtml += `
<div class="shx-custom-enhanced-dropdown field custom"> <div class="shx-custom-enhanced-dropdown field custom">
<button class="shx-custom-enhanced-dropdown-dropbtn" id="shx-custom-enhanced-dropdown-font-button" onclick="toggleCustomEnhancedDropdownFont()"> <button class="shx-custom-enhanced-dropdown-dropbtn" onclick="toggleCustomEnhancedDropdownFont()">
<div style="display: flex; justify-content: space-between; align-items: center; pointer-events: none"> <div style="display: flex; justify-content: space-between; align-items: center; pointer-events: none">
<span>font</span> <span>font</span>
@ -621,7 +649,7 @@
</div> </div>
</button> </button>
<div class="shx-custom-enhanced-dropdown-content" id="shx-custom-enhanced-dropdown-font-content"> <div class="shx-custom-enhanced-dropdown-content" id="shx-custom-enhanced-dropdown-font-dropdown-content">
` `
} }
@ -643,7 +671,7 @@
if (isInputShxFont) { if (isInputShxFont) {
customDropdownHtml += ` customDropdownHtml += `
<div data-value="${optionValue}" class="${inputVal === optionValue ? 'shx-custom-variant-picker-selected-variant' : ''}"> <div data-value="${optionValue}" class="${inputVal === optionValue ? 'shx-custom-variant-picker-selected-variant' : ''}" onclick="onFontDropdownItemClick()">
<span>${optionDisplayName}</span> <span>${optionDisplayName}</span>
</div> </div>
` `