概要

設定方法

{
      "type": "checkbox",
      "id": "display_at_random",
      "label": "t:sections.featured-collection.settings.display_at_random.label",
      "default": false
    },

"display_at_random": {
          "label": "商品をランダムで表示する"
        },

{% if section.settings.display_at_random %}
  {%- liquid
    assign random_featured_collection_attribute_key = section.id | append: '_random_products'
    assign random_featured_collection_attribute_value = cart.attributes[random_featured_collection_attribute_key]
    assign featured_collection_products_handles = ''
    paginate section.settings.collection.products by section.settings.collection.products.size
      for product in section.settings.collection.products
        assign featured_collection_products_handles = featured_collection_products_handles | append: ',"' | append: product.handle | append: '"'
      endfor
    endpaginate
    assign featured_collection_products_handles = featured_collection_products_handles | remove_first: ","
  -%}
  <script>
    function getRandom(arr, n) {
      let result = new Array(n);
      let len = arr.length;
      let taken = new Array(len);
      if (n > len)
          throw new RangeError("getRandom: more elements taken than available");
      while (n--) {
          let x = Math.floor(Math.random() * len);
          result[n] = arr[x in taken ? taken[x] : x];
          taken[x] = --len in taken ? taken[len] : len;
      }
      return result;
    }
    const randomNum = {% if section.settings.collection.products.size < section.settings.products_to_show %}{{ section.settings.collection.products.size }}{% else %}{{ section.settings.products_to_show }}{% endif %}
    const random_product_handles = getRandom({{ '[' | append: featured_collection_products_handles | append: ']' }}, randomNum);
    console.log(random_product_handles);
    fetch(`/cart/update.js`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        attributes: {
          '{{ random_featured_collection_attribute_key }}' : random_product_handles.join(',')
        }
      }),
      keepalive: true
    });
  </script>
{% endif %}

{% if section.settings.display_at_random and random_featured_collection_attribute_value %}
          {% assign random_featured_collection_product_handles = random_featured_collection_attribute_value | split: ',' %}
          {%- for producthandle in random_featured_collection_product_handles -%}
            {% assign forloop_index = forloop.index %}
            {% for product in section.settings.collection.products %}
              {% if product.handle == producthandle %}
                <li
                  id="Slide-{{ section.id }}-{{ forloop_index }}"
                  class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                  {% if settings.animations_reveal_on_scroll %}
                    data-cascade
                    style="--animation-order: {{ forloop_index }};"
                  {% endif %}
                >
                  {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    image_shape: section.settings.image_shape,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    show_quick_add: section.settings.enable_quick_add,
                    section_id: section.id
                  %}
                </li>
                {% break %}
              {% endif %}
            {% endfor %}
          {% endfor %}
        {% else %}

注意事項