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

dropdown for product variant picker

main
alexanderroese 2024-07-13 17:46:16 +02:00
parent 2e199f93d6
commit 56ae034f62
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,6 +94,10 @@
display: flex;
justify-content: center;
}
.shx-custom-selected-variant {
background-color: #d1e7dd;
}
</style>
{% if shx_current_page contains "texte" %}
@ -132,16 +136,27 @@
{% endif %}
<script>
const dropdownContent = document.getElementById('shx-custom-dropdown-content');
const selectedButton = document.getElementById('shx-custom-selected');
document.getElementById('shx-custom-selected').addEventListener('click', function() {
const dropdownContent = document.getElementById('shx-custom-dropdown-content');
dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
});
document.querySelectorAll('.shx-custom-dropdown-content div').forEach(item => {
item.addEventListener('click', event => {
const selectedVariant = event.currentTarget.getAttribute('data-value');
document.getElementById('shx-custom-selected').innerText = event.currentTarget.innerText;
document.getElementById('shx-custom-dropdown-content').style.display = 'none';
selectedButton.innerText = event.currentTarget.innerText;
// Remove the selected style from all items
document.querySelectorAll('.shx-custom-dropdown-content div').forEach(div => {
div.classList.remove('shx-custom-selected-variant');
});
// Add the selected style to the clicked item
event.currentTarget.classList.add('shx-custom-selected-variant');
dropdownContent.style.display = 'none';
console.log('Selected variant:', selectedVariant);
// Additional code to handle the selected variant can go here
});