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 16:24:20 +02:00
parent d4544e566a
commit 23868a5e63
1 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,8 +41,41 @@
%}
<script>
console.log("2 product variant", "{{ picker_type }}", {{ product | json }}, {{ shx_current_page }})
console.log("3 product variant", "{{ picker_type }}", {{ product | json }}, {{ shx_current_page }})
</script>
<style>
/* Custom dropdown button styling */
.shx-custom-dropdown {
position: relative;
display: inline-block;
}
.shx-custom-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.shx-custom-dropdown-content div {
color: black;
padding: 12px 16px;
text-decoration: none;
display: flex;
flex-direction: column;
}
.shx-custom-dropdown-content div:hover {
background-color: #f1f1f1;
}
.shx-custom-dropdown:hover .shx-custom-dropdown-content {
display: block;
}
</style>
{% if shx_current_page contains "texte" %}
<h3>Texte Dropdown</h3>
@ -57,12 +90,27 @@
{% for product_variant in product.variants %}
<option value="{{ product_variant.title }}">
<div style="display: flex; flex-direction: column">
<span>h {{ product_variant.title }}</span>
<span>{{ product_variant.title }}</span>
</div>
</option>
{% endfor %}
</select>
</div>
<div class="shx-custom-dropdown">
<button class="shx-custom-dropbtn">Select Product Variant</button>
<div class="shx-custom-dropdown-content">
<div>
<span>Variant 1</span>
</div>
<div>
<span>Variant 2</span>
</div>
<div>
<span>Variant 3</span>
</div>
</div>
</div>
{% endif %}
{%- if picker_type == 'swatch' -%}