Conditionals
The following attributes can be used on every element to show or hide it, based on specific conditions.
Show If
By using the attribute:
show-ifconditionThe element will be rendered only if the condition is met.
Hide if
By using the attribute:
hide-ifconditionThe element will not be rendered only if the condition is met.
Conditions
Below you will find all valid conditions, divided by sector, for brevity you will find all the attributes only with show-if, but you can change it with hide-if without any issue:
Customer
Show/Hide element if the user is currently logged in:
show-iflogged-inGift card
Active
Show/Hide element if gift card is active:
show-ifgift-card-activeUsed
Show/Hide element if gift card has been used:
show-ifgift-card-usedEnabled
Show/Hide element if gift card is enabled:
show-ifgift-card-enabledExpired
Show/Hide element if gift card is expired:
show-ifgift-card-expiredOrders
Show/Hide element if currently logged in user has made any order:
show-ifhas-ordersCart
Items in Cart
Show/Hide element if the cart has items inside:
show-ifhas-items-in-cartEmpty
Show/Hide element if the cart is empty:
show-ifcart-emptyProduct
Has Related Products
Show/hide element if the current product (only works within single product page) has related products:
show-ifhas-related-productsVariable Price
Show/hide element if the current product has a variable price:
show-ifvariable-priceOrder
Cancelled
Show/Hide element if the order has been cancelled:
show-iforder-cancelledOrder item fulfilled
Show/Hide element if the current order item has been fulfilled:
show-iforder-item-fulfilledOrder item has tracking url
Show/Hide element if the current order item has a tracking url:
show-iforder-item-tracking-urlNotes
The elements you hide/show with conditionals will not be sent at all from the Server to the Browser, so they will not be "hidden" by css or js, they will not be present at all inside the DOM!