Ribbons¶
Availability:
The ribbons module is used to display ribbons. The module contains also products ribbons that are also present in the Product title module.
Configuration parameters¶
showPromotionTag¶
int if set to 1 a ribbon for promotion will be displayed. It is possible to display the text as a deal name or a percentage.
showBestsellerTag¶
int if set to 1 a ribbon for bestseller will be displayed.
showNewProductTag¶
int if set to 1 a ribbon for new will be displayed.
showBundleTag¶
int if set to 1 a ribbon for bundle will be displayed.
showDigitalTag¶
int if set to 1 a ribbon for digital will be displayed.
showLoyaltyTag¶
int if set to 1 a ribbon for loyalty will be displayed.
Module source code¶
{% set product = ObjectApi.getProduct(product_id) %}
{% set productVariant = product %}
{% if product.variants.count == 1 %}
{% set productVariant = product.variants[0] %}
{% endif %}
{% set isPromo = productVariant.hasSpecialOffer %}
{% set price = productVariant.price %}
{% if productVariant.lowestHistoricalPriceInLast30Days %}
{% set lowestHistoricalPriceInLast30Days = productVariant.lowestHistoricalPriceInLast30Days.getPrice() %}
{% endif %}
{% if isPromo %}
{% if lowestHistoricalPriceInLast30Days and lowestHistoricalPriceInLast30Days.grossValue > 0 %}
{% set percentageDiscountValue = (100 - price.grossValue * 100 / lowestHistoricalPriceInLast30Days.grossValue)|round() %}
{% else %}
{% set percentageDiscountValue = productVariant.specialOffer.formatDiscount %}
{% endif %}
{% endif %}
{% set isBestSeller = product.isBestSeller %}
{% set isNew = product.isNew %}
{% set isBundle = product.isBundle %}
{% set isDigital = product.isDigital %}
{% set isLoyaltyProgram = product.isUsedInLoyaltyProgram and not isBundle and _context_id == 4 %}
{% set shouldDisplayBundleTag = isBundle and moduleConfig.showBundleTag == 1 %}
<div class="ribbons" aria-labelledby="tag-group-label-{{ moduleInstance }}">
<p class="sr-only" id="ribbons-tag-group-label-{{ moduleInstance }}">{{ translate('Ribbons') }}</p>
{% if isPromo or isBestSeller or isNew or shouldDisplayBundleTag or isDigital or isLoyaltyProgram %}
<ul class="ribbon-group tag__group ribbons__ribbon-group ribbons__tag__group">
{% if isPromo and moduleConfig.showPromotionTag == 1 %}
<li class="ribbon ribbon_primary ribbon_promo ribbons__ribbon">
{% if moduleConfig.displayMethod == "nameDeal" %}
{{ translate('Deal') }}
{% else %}
{% set discountSign = '' %}
{% if percentageDiscountValue is not null %}
{% if percentageDiscountValue > 0 %}
{% set discountSign = '-' %}
{% elseif percentageDiscountValue < 0 %}
{% set discountSign = '+' %}
{% endif %}
{% endif %}
<product-price product-id="{{ product.id }}" role="listitem">
<div class="js__product-price-gross">
<div class="js__product-price">
<div class="js__special-offer-container" {% if not productVariant.hasSpecialOffer %} hidden {% endif %}>
<span class="js__special-offer-percentage-value">
{{ discountSign }}{{ percentageDiscountValue|number_format|abs }}%
</span>
<span class="sr-only">{{ translate('discount <<genitive>>') }}</span>
</div>
</div>
</div>
</product-price>
{% endif %}
</li>
{% endif %}
{% if isBestSeller and moduleConfig.showBestsellerTag == 1 %}
<li class="ribbon ribbon_secondary ribbon_bestseller ribbons__ribbon">
{{ translate('Bestseller') }}
</li>
{% endif %}
{% if isNew and moduleConfig.showNewProductTag == 1 %}
<li class="ribbon ribbon_new ribbons__ribbon">
{{ translate('New Product') }}
</li>
{% endif %}
{% if shouldDisplayBundleTag %}
<li class="tag tag_quaternary tag_bundle ribbons__tag">
<span class="font_semibold">{{ translate('Set') }}</span>
</li>
{% endif %}
{% if isDigital and moduleConfig.showDigitalTag == 1 %}
<li class="tag tag_quaternary tag_digital ribbons__tag">
<span class="font_semibold">{{ translate('Digital product') }}</span>
</li>
{% endif %}
{% if isLoyaltyProgram and moduleConfig.showLoyaltyTag == 1 %}
<li class="tag tag_quaternary tag_loyalty ribbons__tag">
<span class="font_semibold">{{ translate('Loyalty program') }}</span>
</li>
{% endif %}
</ul>
{% endif %}
</div>
Module reference¶
Macros reference¶
Used Object Api methods¶
Used styles¶
Module configuration schema¶
[
{
"label": "General settings",
"state": "unfolded",
"elements": [
{
"name": "infobox",
"type": "infobox",
"options": {
"type": "blank",
"message": "%s Related settings%s**in the admin panel:**%s- changing phrases in [translations](%s)%s- mechanism for marking products as bestseller in [product settings](%s)%s%s**in the Shoper Visual Editor:**%s- ribbon appearance in the [Colors and styles](%s)",
"placeholderValues": [
"####",
"\n",
"\n",
"/admin/configLanguages/list",
"\n",
"/admin/configProducts",
"\n",
"\n",
"\n",
"theme-and-colors"
]
}
},
{
"name": "promotionalRibbons",
"type": "header",
"label": "Promotional ribbons"
},
{
"name": "showPromotionTag",
"type": "checkbox",
"label": "Product on sale",
"defaultValue": 1,
"children": [
{
"name": "displayMethod",
"type": "radio",
"relations": [
{
"parentName": "showPromotionTag",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
],
"options": {
"radioOptions": [
{
"key": "nameDeal",
"label": "name (e.g. deal)"
},
{
"key": "discountPercentage",
"label": "discount percentage (e.g. 20%)",
"labelDescription": "calculated from the lowest price during 30 days prior to the reduction"
}
]
},
"label": "Display method",
"defaultValue": "nameDeal"
}
]
},
{
"name": "showBestsellerTag",
"type": "checkbox",
"label": "Bestseller",
"defaultValue": 1
},
{
"name": "showNewProductTag",
"type": "checkbox",
"label": "New Product",
"defaultValue": 1
},
{
"name": "productRibbons",
"type": "header",
"label": "Product ribbons"
},
{
"name": "showBundleTag",
"type": "checkbox",
"label": "Bundle",
"defaultValue": 0
},
{
"name": "showDigitalTag",
"type": "checkbox",
"label": "Digital product",
"defaultValue": 0
},
{
"name": "showLoyaltyTag",
"type": "checkbox",
"label": "Loyalty program",
"defaultValue": 0
}
]
},
{
"label": "CSS",
"state": "unfolded",
"elements": [
{
"name": "classNames",
"type": "text",
"label": "CSS class",
"labelDescription": "Enter the class name without a dot at the beginning. You can add multiple classes by separating them with spaces."
}
]
}
]