shopify-customization/custom-dynamic-text.html.liquid at main · msafwankarim/shopify-customization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<section class="custom-dynamic-text cdt-wrapper">
  {% if section.settings.enable_dynamic_number %}
  {{ section.settings.dynamic_text | replace: "DYNAMIC_NUMBER", "<span class='dynamic-number'></span>"}}
    {% else %}
    {{ section.settings.dynamic_text }}
    {% endif %}
</section>

{% if section.settings.enable_dynamic_number %}
<script>
  $(document).on("DOMContentLoaded shopify:section:load",(e,detail) => {
    const LOWER_LIMIT = {{ section.settings.dynamic_number_min | json }};
    const UPPER_LIMIT = {{ section.settings.dynamic_number_max | json }};

    const number = Math.floor(Math.random() * (UPPER_LIMIT - LOWER_LIMIT) + LOWER_LIMIT);
    $(".dynamic-number").html(number);
  });
</script>
{% endif %}

<style>
  .cdt-wrapper {
    background-color: #ecf3ff;
    border-radius: 6px;
    margin-bottom: 16px;
    margin-top: 16px;
    text-align: center;
    padding: 12px;
  }
</style>

<!-- Put the following schema in section schema -->
<script type="text/json">
{
    "name": "Custom Dynamic Text",
    "settings": [
      {
        "type": "header",
        "content": "Dynamic Text"
      },
      {
        "type": "text",
        "id": "dynamic_text",
        "label": "Dynamic Text",
        "info": "Use the word DYNAMIC_NUMBER to insert dynamic number in text"
      },
      {
        "type": "checkbox",
        "id": "enable_dynamic_number",
        "label": "Enable Dynamic Number",
        "default": true
      },
      {
        "type": "number",
        "id": "dynamic_number_min",
        "label": "Dynamic Number Lower Limit"
      },
      {
        "type": "number",
        "id": "dynamic_number_max",
        "label": "Dynamic Number Upper Limit"
      }
    ]
}
</script>