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>
</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 %}
<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">
@ -150,15 +150,15 @@
<script>
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 selectedButton = document.getElementById('shx-custom-enhanced-dropdown-variant-select-button');
const dropdownContent = document.getElementById('shx-custom-enhanced-dropdown-variant-dropdown-content');
const selectButton = document.getElementById('shx-custom-enhanced-dropdown-variant-select-button');
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';
});
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 => {
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-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');
});
@ -190,7 +190,7 @@
// Close the dropdown if the user clicks outside of it
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') {
dropdownContent.style.display = 'none';
}

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

@ -589,13 +589,41 @@
}
function toggleCustomEnhancedDropdownFont() {
console.log("toggleCustomEnhancedDropdownFont")
const dropdownContent = document.getElementById("shx-custom-enhanced-dropdown-font-content")
const dropdownContent = document.getElementById("shx-custom-enhanced-dropdown-font-dropdown-content")
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) {
let html = `
<label class="form__label custom shx-ifc-form_label" for="${inputID}-label">${labelText}</label>
@ -611,7 +639,7 @@
if (isInputShxFont) {
customDropdownHtml += `
<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">
<span>font</span>
@ -621,7 +649,7 @@
</div>
</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) {
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>
</div>
`