Add optional min-price badge to product pricetable

This commit is contained in:
Björn Fromme
2022-03-14 13:04:24 +01:00
parent 520d2ea4ee
commit 721a1be51d
5 changed files with 51 additions and 3 deletions
@@ -205,8 +205,8 @@
<div class="headline--3 headline--underlined">
Inklusivleistungen
</div>
<div class="bg-gray-50 p-4 mb-8">
<ul class="list-none m-0 p-0">
<div class="bg-gray-50 p-4 mb-8 flex items-center">
<ul class="list-none m-0 p-0 flex-1">
<f:for each="{servicesIncluded}" as="service">
<li class="flex items-center space-x-2">
<svg class="w-6 h-6 text-ep-primary">
@@ -216,6 +216,22 @@
</li>
</f:for>
</ul>
<f:if condition="{product.minPrice} > 0">
<div class="pl-4">
<div class="relative w-32 h-32 md:w-48 md:h-48 transform rotate-3">
<svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
class="w-full h-full">
<circle fill="currentColor" class="text-ep-pink-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-pink" cx="100" cy="100" r="70"/>
</svg>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
<span class="block text-center text-white uppercase font-bold leading-none text-2xl md:text-3xl">ab {product.minPrice}&nbsp;</span>
</div>
</div>
</div>
</f:if>
</div>
</div>