Produce_4.mov

{% if customer.tags contains "スタッフユーザー" %}
{%- liquid
  assign search_target_handles = cart.attributes['search_target_handles']
-%}

<div class="page-width">
<form action="">
<h3>商品のhandleを入力してください（最大20件）</h3>
<textarea id="product-handles">
{%- for search_target_handle in search_target_handles -%}{{ search_target_handle }}{%- endfor -%}
</textarea>
<button id="clear-button">クリア</button>
<button id="submit-button">調査する</button>
</form>
<script>
  const submitButton = document.querySelector('#submit-button');
  submitButton.addEventListener('click', (e)=>{
      e.preventDefault();
      const productHandles = document.querySelector('#product-handles');
      updateCartAttirbute(productHandles.value);
      setTimeout(()=>{ location.href = '{{ page.url }}'; }, 500);
  });
  const clearButton = document.querySelector('#clear-button');
  clearButton.addEventListener('click', (e)=>{
      e.preventDefault();
      updateCartAttirbute('');
      setTimeout(()=>{ location.href = '{{ page.url }}'; }, 500);
  });
  const updateCartAttirbute = (product_handles) => {
      fetch(`/cart/update.js`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            attributes: {
              'search_target_handles' : product_handles
            }
          }),
          keepalive: true
      });
  }
</script>

{% unless search_target_handles == null %}
  {% assign search_target_handles = search_target_handles | newline_to_br | split: '<br />' %}
<h2>対象商品</h2>
<table class="products">
<tr><th class="name">商品名</th><th class="image">商品写真</th><th class="links">この商品へのリンク状況</th></tr>
{% for search_target_handle in search_target_handles %}
  {% assign stripped_handle = search_target_handle | strip %}
  {% assign search_word = stripped_handle | url_encode %}
  {% assign search_word = 'products/' | append: search_word %}
  
    <tr>
    {% if all_products[stripped_handle].available == true or all_products[stripped_handle].url != empty %}
        <td>{{ all_products[stripped_handle].title | link_to: all_products[stripped_handle].url }}</td>
        <td style="width: 300px;"><img src="{{ all_products[stripped_handle].featured_media | image_url }}" style="width: 100%;height: 100%;aspect-ratio: 1 / 1; object-fit: cover;"></td>
    {% else %}
        <td>{{ stripped_handle }}</td>
        <td style="width: 300px;">商品が存在しない or 下書き状態</td>
    {% endif %}
        <td>
            {% assign products_count = 0 %}
            {% assign products_total_count = collections['all'].products.size %}
            {% capture products_list %}
              {% paginate collections['all'].products by products_total_count %}
              {% for product in collections['all'].products %}
                {% if product.description contains search_word %}
                  <li><a href="{{ product.url }}">{{ product.title }}</a></li>
                  {% assign products_count = products_count | plus: 1 %}
                {%- endif -%}
              {%- endfor -%}
              {% endpaginate %}
            {% endcapture %}
            
            {% assign article_count = 0 %}
            {% assign article_total_count = 0 %}
            {% capture blogs_list %}
              {% comment %}検索対象のblogのhandleをカンマ区切りで全て指定{% endcomment %}
              {% assign blog_handles = 'news,staff-blog' | split: "," %}
              {% for blog_handle in blog_handles %}
                  {% assign this_blog = blogs[blog_handle] %}
                  <h3>{{ this_blog.title }}</h3>
                  <ul>
                        {%- paginate this_blog.articles by this_blog.articles.size -%}
                  {% for article in this_blog.articles %}
                    {% assign article_total_count = article_total_count | plus: 1 %}
                    {% if article.content contains search_word %}
                      {% assign article_count = article_count | plus: 1 %}
                      <li>{{ article.title | link_to: article.url }}</li>
                    {% endif %}
                  {% endfor %}
                        {%- endpaginate -%}
                </ul>
              {% endfor %}
            {% endcapture %}
            
            {% assign page_count = 0 %}
            {% assign page_total_count = 0 %}
            {% capture pages_list %}
              {% for page in pages %}
              {% assign page_total_count = page_total_count | plus: 1 %}
                {% if page.content contains search_word %}
                  {% assign page_count = page_count | plus: 1 %}
                  <li>{{ page.title | link_to: page.url }}</li>
                {% endif %}
              {% endfor %}
            {% endcapture %}
            
            {% assign policy_count = 0 %}
            {% assign policy_total_count = 0 %}
            {% capture policies_list %}
              {% for policy in shop.policies %}
              { % assign policy_total_count = policy_total_count | plus: 1 %}
                {% if page.body contains search_word %}
                  {% assign policy_count = policy_count | plus: 1 %}
                  <li>{{ policy.title | link_to: policy.url }}</li>
                {% endif %}
              {% endfor %}
            {% endcapture %}
            <table class="links">
                <tr>
                    <th>商品説明</th>
                    <td>
                        {% if products_count == 0 %}
                        なし
                        {% else %}
                        <ul>{{ products_list }}</ul>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th>ブログ記事</th>
                    <td>
                        {% if article_count == 0 %}
                        なし
                        {% else %}
                        {{ blogs_list }}
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th>ページ</th>
                    <td>
                        {% if page_count == 0 %}
                        なし
                        {% else %}
                        {{ pages_list }}
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th>ポリシー</th>
                    <td>
                        {% if policy_count == 0 %}
                        なし
                        {% else %}
                        {{ policies_list }}
                        {% endif %}
                    </td>
                </tr>
            </table>
        </td>
    </tr>
{% endfor %}
</table>
{% endunless %}
</div>
<style>
table.products {
    width: 100%;
    border-collapse: collapse;
}
table.products .name {
    width: 150px;
}
table.products .image {
    width: 100px;
}
table.links {
    width: 100%;
    border-collapse: collapse;
}
table.links th {
    width: 200px;
}
table.products th,
table.products td,
table.links th,
table.links td {
    border: 1px solid #ccc;
    padding: 10px;
}
form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 500px;
    text-align: center;
    margin: 0 auto;
}
textarea {
    width: 100%;
    min-height: 150px;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #cccccc;
}
button {
    background-color: #007BFF;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 auto;
}
button:hover {
    background-color: #0056b3;
}
</style>
{% endif %}