Waltt - Sales Sniper - How to add Sales Sniper on Gempages ?
First go to the code editor of your theme and create a salessniper file and add this code
Then on Gempages add a "Liquid" block in the place you want and add the following code inside the block :
{% if content_for_header contains "sniper.js" %}
{% assign meta_lines = shop.metafields.ssniper_v01 %}
{% assign list_line_keys_ordered = null %}
{% for meta_line in meta_lines %}
{% if meta_line[0] == "list-lines-order" %}
{% if meta_line[1].value %}
{% assign list_line_keys_ordered = meta_line[1].value %}
{% else %}
{% assign list_line_keys_ordered = meta_line[1] %}
{% endif %}
{% endif %}
{% endfor %}
<ul class="product_extras_list">
{% for current_line_key in list_line_keys_ordered %}
{% assign current_line_key = null %}
{% assign current_line = null %}
{% for meta_line in meta_lines %}
{% if meta_line[0] == current_line_key %}
{% if meta_line[1].value %}
{% assign current_line = meta_line[1].value %}
{% else %}
{% assign current_line = meta_line[1] %}
{% endif %}
{% endif %}
{% endfor %}
{% if current_line == null %}
{% continue %}
{% endif %}
{% if current_line.filters.all != true %}
{% assign to_display = false %}
{% for current_line_product in current_line.filters.products %}
{% if current_line_product["id"] contains product.id %}
{% assign to_display = true %}
{% endif %}
{% endfor %}
{% if to_display != true %}
{% for collection_p in product.collections %}
{% assign id_collection = collection_p.id | downcase %}
{% for current_line_collection in current_line.filters.collections %}
{% if current_line_collection["id"] contains id_collection %}
{% assign to_display = true %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% if to_display == false %}
{% continue %}
{% endif %}
{% endif %}
{% assign meta_value = current_line.textEditor.htmlContent %}
{% assign extra_array = current_line.extra %}
{% case extra_array["extraType"] %}
{% when "time" %}
{% assign data_extratime = '<span class="timer_extra" data-extratype="time" data-extratime="time,'
| append: extra_array["timer"]["dateStart"] | append: ","
| append: extra_array["timer"]["dateEnd"] | append: ","
| append: extra_array["loop"] | append: ","
| append: extra_array["timer"]["labelDay"] | append: ","
| append: extra_array["timer"]["labelHour"] | append: ","
| append: extra_array["timer"]["labelMinute"] | append: ","
| append: extra_array["timer"]["labelSecond"] | append: ","
| append: extra_array["timer"]["plural"] | append: ","
| append: "true,"
| append: extra_array["actionName"] | append: '"></span>' %}
{% assign meta_value = meta_value | replace: '{{extra}}', data_extratime %}
{% when "number" %}
{% assign meta_value = meta_value | replace: '{{extra}}', '<span class="number_extra" data-extratype="number" data-extrafrequency="{{frequency}}" data-extrafrom="{{from}}" data-extrato="{{to}}">{{extra}}</span>'
| replace: '{{extra}}', " "
| replace: '{{from}}', extra_array["extraFrom"]
| replace: '{{to}}', extra_array["extraTo"]
| replace: '{{frequency}}', extra_array["extraFrequency"] %}
{% when "random" %}
{% assign meta_value = meta_value | replace: '{{extra}}', '<span class="random_extra" data-extratype="random" data-extrafrequency="{{frequency}}" data-extrafrom="{{from}}" data-extrato="{{to}}">{{extra}}</span>'
| replace: '{{extra}}', " "
| replace: '{{from}}', extra_array["extraFrom"]
| replace: '{{to}}', extra_array["extraTo"]
| replace: '{{frequency}}', extra_array["extraFrequency"] %}
{% endcase %}
{% assign meta_value = meta_value | replace: '{{#', '<i class="' %}
{% assign meta_value = meta_value | replace: '#}}', '"></i>' %}
<li class="product_extra_item">{{meta_value}}</li>
{% endfor %}
</ul>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<style>
ul.product_extras_list{
margin-left: 0;
padding-left: 0;
padding-top: 5px;
padding-bottom: 20px;
list-style: none;
clear:both;
}
ul.product_extras_list p{
margin: 0;
padding: 0;
}
li.product_extra_item{
padding-top: 3px;
padding-bottom: 3px;
line-height: 1.5;
}
/* Step 1: Common Properties: All required to make icons render reliably - we did this above but it's included here for the full demo */
.icon::before {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
</style>
{% endif %}
Then on Gempages add a "Liquid" block in the place you want and add the following code inside the block :
{% include 'salessniper' %}
Updated on: 06/12/2022
Thank you!