カスタムモジュールのコーディング

.testimonial-module__wrapper {
  background: url('{{ module_asset_url('bg-pattern.png') }}');
  background-repeat: repeat;
  min-height: 200px;
  width: 100%;
  display: block;
}

<!-- module.html -->

<section class="img-text__wrapper img-text--{{ module.positioning }}" aria-label="{{ module.heading }}">
  {# module.position is a choice field with two values "img-left" or "img-right". This dictates the order they appear on desktop. Controlled by CSS #}
  <div class="img-text__img">
      <img src="{{ module.image.src }}" alt="{{ module.image.alt }}">
  </div>
  <div class="img-text__text">
      <h2>
        {% inline_text field="heading" value="{{ module.heading }}" %}
      </h2>
      {% inline_rich_text field="text" value="{{ module.text }}" %}
  </div>
</section>

/* module.css */

/* CSS that makes the image show adjacent to the text,
and positioned based on the positioning field.*/

/* The media query ensures that on mobile the image
will always appear above the text for
visual consistency. */

@media (min-width: 768px) {
  .img-text__wrapper {
    display: flex;
    align-items: row;
  }
  .img-text__img,
  .img-text__text {
    flex: 1;
    padding: 10px;
  }
  .img-text--img-right {
    flex-direction: row-reverse;
  }
}

<div class="img__wrapper">
  {% if module.image.src %}
    {% set sizeAttrs = 'width="{{ module.image.width }}" height="{{ module.image.height }}"' %}
    {% if module.image.size_type == 'auto' %}
      {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.image.size_type == 'auto_custom_max' %}
      {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image.max_width }}px; max-height: {{ module.image.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" {{ sizeAttrs }}>
  {% endif %}
</div>

{% require_css %}
  <style>
    img {
    border-width:{{ module.border_width }}px;
    border-color:rgba({{ module.border_color.color|convert_rgb}},{{ module.border_color.opacity/100 }});
    border-style: solid;
    }
  </style>
{% end_require_css %}

<div class="img__wrapper">
  {% if module.image.src %}
    {% set sizeAttrs = 'width="{{ module.image.width }}" height="{{ module.image.height }}"' %}
    {% if module.image.size_type == 'auto' %}
      {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.image.size_type == 'auto_custom_max' %}
      {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image.max_width }}px; max-height: {{ module.image.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" {{ sizeAttrs }}>
  {% endif %}
</div>

{% require_css %}
<style>
  {% scope_css %}
    img {
    border-width:{{ module.border_width }}px;
    border-color:rgba({{ module.border_color.color|convert_rgb}},{{ module.border_color.opacity/100 }});
    border-style: solid;
    }
  {% end_scope_css %}
</style>
{% end_require_css %}

{# Module.html #}
<div style="background: rgba({{ module.bg_color.color|convert_rgb }},{{ module.bg_color.opacity/100 }});">
  {% inline_rich_text field="richtext" value="{{ module.richtext }}" %}
</div>

<!-- module.html -->
{{ require_css(get_asset_url("/modules/shared_layout_styles.css")) }}

<!-- module.html-->
<div class="img-module img-module__wrapper" data-lightbox="{{ module.is_lightbox_enabled }}" data-caption="above">
  <!-- module.is_lightbox_enabled is a boolean field, module.caption_position is a choice field. -->
  {% if module.image.src %}
    {% set sizeAttrs = 'width="{{ module.image.width }}" height="{{ module.image.height }}"' %}
    {% if module.image.size_type == 'auto' %}
      {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.image.size_type == 'auto_custom_max' %}
      {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image.max_width }}px; max-height: {{ module.image.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" {{ sizeAttrs }}>
  {% endif %}
</div>

// module.js

let imgModules = document.getElementsByClassName('img-module');
Array.from(imgModules).forEach(function (element) {
  // loop through each of the instances of the module
  // set data attributes to variables to make it easy to work with
  let isLightboxEnabled = element.dataset.lightbox;
  let captionStyle = element.dataset.caption;
  if (isLightboxEnabled) {
    element.addEventListener('click', function () {
      showLightbox(captionStyle); // Execute your code for the action you want to take, you can pass your data attributes into functions from libraries.
    });
  }
});

{% require_js %}
<script>
  let myArray = [
    {%- for item in module.repeating_text_field -%}"{{ item }}",{%- endfor -%}
  ];
</script>
{% end_require_js %}