【Shopify】簡単3STEPでパンくずリストを実装する方法

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .breadcrumb-nav {
    background-color: {{ section.settings.background_color }};
  }
{%- endstyle -%}

{%- unless template == 'index' or template == 'cart' -%}
  <nav class="breadcrumb-nav page-width section-{{ section.id }}-padding" aria-label="breadcrumbs">
    <ol class="breadcrumb__list" role="list">
      <li class="breadcrumb__item">
        <a class="breadcrumb__link" href="{{ routes.root_url }}">ホーム</a>
      </li>
      {%- if template == 'product' -%}
        {%- if collection -%}
          <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="{{ collection.url }}">{{ collection.title }}</a>
          </li>
        {%- endif -%}
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ product.title }}</span>
        </li>
      {%- elsif template == 'collection' and collection.handle -%}
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ collection.title }}</span>
        </li>
      {%- elsif template == 'blog' -%}
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ blog.title }}</span>
        </li>
      {%- elsif template == 'article' -%}
        <li class="breadcrumb__item">
          <a class="breadcrumb__link" href="{{ blog.url }}">{{ blog.title }}</a>
        </li>
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ article.title }}</span>
        </li>
      {%- elsif template == 'page' -%}
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ page.title }}</span>
        </li>
      {%- else -%}
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ page_title }}</span>
        </li>
      {%- endif -%}
    </ol>
  </nav>
{%- endunless -%}

{% schema %}
{
  "name": "パンくずリスト",
  "class": "section",
  "settings": [
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "上部の余白",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "下部の余白",
      "default": 36
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "背景色",
      "default": "#ffffff"
    }
  ]
}
{% endschema %}

.breadcrumb-nav {
  display: flex;
  align-items: center;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__item:not(:last-child)::after {
  content: '/';
  margin: 0 0.5em;
  color: rgba(var(--color-foreground), 0.55);
}

.breadcrumb__link {
  color: rgba(var(--color-link), 0.75);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: rgb(var(--color-link));
}

.breadcrumb__text {
  color: rgba(var(--color-foreground), 0.75);
}

{{ 'breadcrumb.css' | asset_url | stylesheet_tag }}

{% section 'breadcrumb' %}