Untitled
unknown
plain_text
2 months ago
1.3 kB
4
Indexable
{% if product.available %} <div class="instock-pulse"> <span class="icon--pulsing {% if product.variants.first.inventory_quantity <= 12 %}low-stock{% endif %}"></span> <span class="stock-message"> {% if product.variants.first.inventory_quantity <= 12 %} Kun {{ product.variants.first.inventory_quantity }} tilbage på lager! {% else %} På lager - klar til levering {% endif %} </span> </div> <style> .instock-pulse { display: flex; flex-wrap: nowrap; align-items: center; } .icon--pulsing { position: relative; width: 20px; height: 20px; margin-right: 5px; } .icon--pulsing:after, .icon--pulsing:before { width: 10px; height: 10px; border-radius: 10px; position: absolute; left: 0; top: 0; content: ""; margin: 5px; } /* Standard farve (grøn) */ .icon--pulsing:after, .icon--pulsing:before { background: #54c63a; } /* Orange farve ved lav lagerbeholdning */ .icon--pulsing.low-stock:after, .icon--pulsing.low-stock:before { background: #ffa500; /* Orange farve */ } @keyframes inventory-pulse{ 0%{ opacity:0.5; } to{ transform:scale(2.5); opacity:0; } } .icon--pulsing:before { animation: inventory-pulse 2s linear infinite; } </style> {% endif %}
Editor is loading...
Leave a Comment