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 23:47:16 +02:00
parent ed9ac3da1e
commit a660eac2b3
1 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,6 +34,10 @@
endif
-%}
{% comment %}
SHX custom code
{% endcomment %}
{% liquid
capture shx_current_page
render "shx-get-current-page"
@ -43,12 +47,12 @@
{% if shx_current_page contains "texte" %}
<style>
/* Custom dropdown button styling */
.shx-custom-dropdown {
.shx-custom-variant-picker-dropdown {
position: relative;
display: inline-block;
}
.shx-custom-dropdown-content {
.shx-custom-variant-picker-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
@ -59,7 +63,7 @@
padding: 6px 0;
}
.shx-custom-dropdown-content div {
.shx-custom-variant-picker-dropdown-content div {
color: black;
padding: 2px 12px;
text-decoration: none;
@ -70,11 +74,11 @@
align-items: center;
}
.shx-custom-dropdown-content div:hover {
.shx-custom-variant-picker-dropdown-content div:hover {
background-color: #e9e9e9;
}
.shx-custom-dropbtn {
.shx-custom-variant-picker-dropbtn {
width: 100%;
padding: 16px 14px 16px 24px;
font-size: 16px;
@ -84,16 +88,16 @@
color: rgb(var(--color-foreground));
}
.shx-custom-dropbtn:focus {
.shx-custom-variant-picker-dropbtn:focus {
outline: none;
}
.shx-custom-dropdown-variant {
.shx-custom-variant-picker-dropdown-variant {
display: flex;
justify-content: center;
}
.shx-custom-selected-variant {
.shx-custom-variant-picker-selected-variant {
background-color: #e9e9e9;
}
@ -104,7 +108,7 @@
<legend class="form__label">{{ option.name }}</legend>
<div class="shx-custom-dropdown field custom">
<div class="shx-custom-variant-picker-dropdown field custom">
<select
id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="shx-dummy-select field__input"
@ -116,15 +120,15 @@
{% endfor %}
</select>
<button class="shx-custom-dropbtn" id="shx-custom-selected">
<button class="shx-custom-variant-picker-dropbtn" id="shx-custom-variant-picker-selected">
<div style="display: flex; justify-content: space-between; align-items: center; pointer-events: none">
<span id="shx-custom-selected-value">{{ option.selected_value }}</span>
<span id="shx-custom-variant-picker-selected-value">{{ option.selected_value }}</span>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#131213"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
</div>
</button>
<div class="shx-custom-dropdown-content" id="shx-custom-dropdown-content">
<div class="shx-custom-variant-picker-variant-pickerdropdown-content" id="shx-custom-variant-picker-variant-pickerdropdown-content">
{% for product_variant in product.variants %}
<div data-value="{{ product_variant.title }}" {% if option.selected_value == product_variant.title %}class="shx-custom-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">
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%">
@ -138,15 +142,15 @@
<script>
const selectElement = document.querySelector('.shx-dummy-select');
const dropdownContent = document.getElementById('shx-custom-dropdown-content');
const selectedButton = document.getElementById('shx-custom-selected');
const customSelectedValue = document.getElementById('shx-custom-selected-value')
const dropdownContent = document.getElementById('shx-custom-variant-picker-dropdown-content');
const selectedButton = document.getElementById('shx-custom-variant-picker-selected');
const customSelectedValue = document.getElementById('shx-custom-variant-picker-selected-value')
selectedButton.addEventListener('click', function() {
dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
});
document.querySelectorAll('.shx-custom-dropdown-content div').forEach(item => {
document.querySelectorAll('.shx-custom-variant-picker-dropdown-content div').forEach(item => {
item.addEventListener('click', event => {
const selectedVariant = event.currentTarget.getAttribute('data-value');
customSelectedValue.innerText = selectedVariant;
@ -159,12 +163,12 @@
selectElement.dispatchEvent(eventChange);
// Remove the selected style from all items
document.querySelectorAll('.shx-custom-dropdown-content div').forEach(div => {
div.classList.remove('shx-custom-selected-variant');
document.querySelectorAll('.shx-custom-variant-picker-dropdown-content div').forEach(div => {
div.classList.remove('shx-custom-variant-picker-selected-variant');
});
// Add the selected style to the clicked item
event.currentTarget.classList.add('shx-custom-selected-variant');
event.currentTarget.classList.add('shx-custom-variant-picker-selected-variant');
dropdownContent.style.display = 'none';
});
@ -172,7 +176,7 @@
// Close the dropdown if the user clicks outside of it
window.addEventListener('click', function(event) {
if (!event.target.matches('.shx-custom-dropbtn')) {
if (!event.target.matches('.shx-custom-variant-picker-dropbtn')) {
if (dropdownContent.style.display === 'block') {
dropdownContent.style.display = 'none';
}
@ -180,6 +184,9 @@
});
</script>
{% else %}
{% comment %}
Theme default code
{% endcomment %}
{%- if picker_type == 'swatch' -%}
<fieldset class="js product-form__input product-form__input--swatch">
<legend class="form__label">