dropdown for product variant picker

main
alexanderroese 2024-07-13 23:58:38 +02:00
parent cfa732f1ca
commit 4cda10fcd8
1 changed files with 10 additions and 7 deletions

View File

@ -45,12 +45,6 @@
%}
{% if shx_current_page contains "texte" %}
<script>
console.log("option", {{ option }})
console.log("option2", {{ option | json }})
</script>
<style>
/* Custom dropdown button styling */
.shx-custom-variant-picker-dropdown {
@ -129,7 +123,16 @@
<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-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 style="display: flex; align-items: center">
{% for product_variant in product.variants %}
{% if option.selected_value == product_variant.title %}
<img src="{{ product_variant.featured_image.src | image_url }}" height="40" width="40" style="border-radius: 4px">
{% endif %}
{% endfor %}
<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>
</div>
</button>
<div class="shx-custom-variant-picker-dropdown-content" id="shx-custom-variant-picker-dropdown-content">