自作の背景動画が全てのページ(問い合わせページなど)にも反映される

uni4 · ‎06-14-2023

ホームページのヘッダーに自作セクションの「背景動画」セクションを追加したところ、ホームページだけでなくすべてのページ(問い合わせページ,カートページなど)にも表示されます。

テンプレートは「Dawn」の最新バージョンを使っています。

コードは他のファイルは触れていません。

ホームページにのみ適応されるようにしたいです。

ご教授いただけると幸いです。

「背景動画」のコードは以下のとおりです。

{%- if section.blocks.size > 0 -%}
  {%- for block in section.blocks -%}
    {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
    {% if block.type == 'video' %}
    <div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | img_url: 'master' }}');{%- endif -%}">
      {%- if block.settings.video_link != blank -%}
      <div class="fullscreen-video-wrap">
        <video class="video-js" loop autoplay preload="none" muted playsinline poster="https:{{ block.settings.video_image | img_url: 'master' }}">
          <source src="{{ block.settings.video_link }}" type="video/mp4">
        </video>
      </div>
      {% endif %}
      <div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
      <div class="videoBoxInfo">
      {% if block.settings.title != blank %}
        <h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
        {{ block.settings.title | escape }}
        </h1>
      {% endif %}
      {%- style -%}
        .videoBackground .imageBoxInfoDescription p {
          color: {{ block.settings.color_text }}!important;
        }
      {%- endstyle -%}
      {% if block.settings.text != blank %}
        <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
        {{ block.settings.text }}
        </div>
      {% endif %}
      {% if block.settings.button_link != blank and block.settings.button_label != blank %}
        <a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
        {{ block.settings.button_label | escape }}
        </a>
      {% endif %}
      </div>
    </div>
    {% else %}
    <div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">
      <div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
      <div class="imageBoxInfo">
      {% if block.settings.title != blank %}
        <h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
        {{ block.settings.title | escape }}
        </h1>
      {% endif %}
      {%- style -%}
        .videoBackground .imageBoxInfoDescription p {
          color: {{ block.settings.color_text }}!important;
        }
      {%- endstyle -%}
      {% if block.settings.text != blank %}
        <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
        {{ block.settings.text }}
        </div>
      {% endif %}
      {% if block.settings.button_link != blank and block.settings.button_label != blank %}
        <a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
        {{ block.settings.button_label | escape }}
        </a>
      {% endif %}
      </div>
    </div>
    {% endif %}
  {%- endfor -%}
{% else %}
    <div class="placeholderNoblocks">
      This section doesn’t currently include any content. Add content to this section using the sidebar.
    </div>
{%- endif -%}
<style>
.main-content .videoBackground {
  margin-top: -55px;
}
.videoBackground {
  height: 100%;
  position: relative;
}
.videoBackground .fullscreen-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.videoBackground .fullscreen-video-wrap .video-js {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.videoBackground .fullscreen-video-wrap video {
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}
.videoBackground .videoBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  padding: 100px 20px 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 500px;
  max-height: 800px;
  height: calc(100vh - 165px);
  position: relative;
}
.videoBackground .imageBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  padding: 100px 20px 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: calc(100vh - 165px);
  height: auto;
}
.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
  z-index: 2;
  text-align: center;
}
.videoBackground .overlay {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  z-index: 1;
}
.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 8px 15px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: normal;
  font-size: 14px;
  margin-top: 20px;
}
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
  color: #FFF;
  font-size: 30px;
  line-height: 40px;
}
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
  max-width: 500px;
  margin: 0 auto;
}
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
  font-size: 18px;
  line-height: 28px;
}
.videoBackground .placeholderNoblocks {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
.main-content .videoBackground {
  margin-top: -35px;
}
.videoBackground .fullscreen-video-wrap {
  z-index: 3;
}
.videoBackground .videoBox {
  min-height: 500px;
  height: 100%;
  position: relative;
  padding: 0;
}
.videoBackground .fullscreen-video-wrap {
  position: relative;
  min-height: 300px;
}
.videoBackground .videoBoxInfo {
  padding: 40px 20px;
  background: #000;
  width: 100%;
}
}
</style>
{% schema %}
{
  "name": {
    "ja": "背景動画"
  },
  "class": "videoBackground",
  "max_blocks": 1,
  "blocks": [
  {
    "type": "video",
    "name": "Video",
    "settings": [
    {
      "type": "url",
      "id": "video_link",
      "label": {
        "ja": "リンク"
      }
    },
    {
      "type": "image_picker",
      "id": "video_image",
      "label": {
        "ja": "サムネイル画像"
      }
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": {
        "ja": "不透明度"
      },
      "min": 0,
      "max": 99,
      "step": 1,
      "unit": {
        "ja": "%"
      },
      "default": 0
    },
    {
      "type": "header",
      "content": {
        "ja": "テキスト"
      }
    },
    {
      "type": "text",
      "id": "title",
      "label": {
        "ja": "タイトル"
      },
      "default": "Video slide"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": {
        "ja": "説明文"
      },
      "default": {
        "ja": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      }
    },
    {
      "type": "color",
      "id": "color_text",
      "label": {
        "ja": "テキストカラー"
      },
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": {
        "ja": "ボタンラベル"
      }
    },
    {
      "type": "url",
      "id": "button_link",
      "label": {
        "ja": "ボタンリンク"
      }
    },
    {
      "type": "color",
      "id": "color_btn_bg",
      "label": {
        "ja": "ボタンの背景色"
      },
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "color_btn_text",
      "label": {
      "ja": "ボタンの色"
      },
      "default": "#ffffff"
    }
    ]
  },
  {
    "type": "image",
    "name": "Image",
    "settings": [
    {
      "type": "color",
      "id": "color_bg",
      "label": {
        "ja": "背景色 (optional)"
      },
      "default": "#16165b"
    },
    {
      "type": "image_picker",
      "id": "image_bg",
      "label": {
        "ja": "画像 (required)"
      }
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": {
        "ja": "不透明度"
      },
      "min": 0,
      "max": 99,
      "step": 1,
      "unit": {
        "ja": "%"
      },
      "default": 0
    },
    {
      "type": "header",
      "content": {
        "ja": "テキスト"
      }
    },
    {
      "type": "text",
      "id": "title",
      "default": "Image slide",
      "label": {
        "ja": "タイトル"
      }
    },
    {
      "type": "richtext",
      "id": "text",
      "label": {
        "ja": "説明文"
      },
      "default": {
        "ja": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      }
    },
    {
      "type": "color",
      "id": "color_text",
      "label": {
        "ja": "テキストカラー"
      },
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": {
        "ja": "ボタンラベル"
      }
    },
    {
      "type": "url",
      "id": "button_link",
      "label": {
        "ja": "ボタンリンク"
      }
    },
    {
      "type": "color",
      "id": "color_btn_bg",
      "label": {
        "ja": "ボタンの背景色"
      },
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "color_btn_text",
      "label": {
        "ja": "ボタンの色"
      },
      "default": "#ffffff"
    }
    ]
  }
  ],
  "presets": [
  {
    "name": {
      "ja": "背景動画"
    },
    "category": {
      "ja": "Main"
    },
    "blocks": [
    {
      "type": "video"
    }
    ]
  }
  ]
}
{% endschema %}

st_mh · ‎06-14-2023

現在はヘッダーを読み込ませているページ全てで、無条件で表示される設定になっているので、条件分岐で出したいページなど振り分けると良いと思います。

{%- if template.name == 'index' -%}
{%- if section.blocks.size > 0 -%}
...
{%- endif -%}
{%- endif -%}

一行目をこのようにすると、テンプレート名がindex（トップページ）で、背景動画設定済みの時だけ、動画背景が描画されます。

unlessで囲えば、設定したページ以外で表示されます。
以下の例だと、404ページのテンプレート、カートページのテンプレート、ページハンドル名「AAA」以外で表示されます。

{%- unless template.name == '404' or template.name == 'cart' or page.handle == 'AAA' -%}
{%- if section.blocks.size > 0 -%}
...
{%- endif -%}
{%- endunless -%}

背景動画を設定したい範囲がどれほどか分からないのですが、おそらくunlessの方を使用して、表示させたくない条件を追加してやった方がいいと思います。

絞り込み方法は他にも、request.pathなども使えます。

テンプレート名などが良く分からない場合、{{ template.name }}と記述すれば出力されますので、それを頼りにして下さい。
（例）「customers/login.json」なら「login」など、一見分かりにくいものもあります。

■条件分岐に関するフォーラム

https://shopify.dev/docs/api/liquid/tags/conditional-tags

元の投稿で解決策を見る

st_mh · ‎06-14-2023

現在はヘッダーを読み込ませているページ全てで、無条件で表示される設定になっているので、条件分岐で出したいページなど振り分けると良いと思います。

{%- if template.name == 'index' -%}
{%- if section.blocks.size > 0 -%}
...
{%- endif -%}
{%- endif -%}

一行目をこのようにすると、テンプレート名がindex（トップページ）で、背景動画設定済みの時だけ、動画背景が描画されます。

unlessで囲えば、設定したページ以外で表示されます。
以下の例だと、404ページのテンプレート、カートページのテンプレート、ページハンドル名「AAA」以外で表示されます。

{%- unless template.name == '404' or template.name == 'cart' or page.handle == 'AAA' -%}
{%- if section.blocks.size > 0 -%}
...
{%- endif -%}
{%- endunless -%}

背景動画を設定したい範囲がどれほどか分からないのですが、おそらくunlessの方を使用して、表示させたくない条件を追加してやった方がいいと思います。

絞り込み方法は他にも、request.pathなども使えます。

テンプレート名などが良く分からない場合、{{ template.name }}と記述すれば出力されますので、それを頼りにして下さい。
（例）「customers/login.json」なら「login」など、一見分かりにくいものもあります。

■条件分岐に関するフォーラム

https://shopify.dev/docs/api/liquid/tags/conditional-tags

uni4 · ‎06-16-2023

ありがとうございます！改善されました！

トイチョコ · ‎01-16-2024

私も同様のコードをセクションに追加したところ、すべてのページ(問い合わせページ,カートページなど)に背景動画が表示される状態です。

一行目に

{%- if template.name == 'index' -%}

を追加してみたのですがそのまま表示されます。

トップページのみに背景動画を表示させたいのですが、どのようにコードを編集したら良いでしょうか。

自作の背景動画が全てのページ(問い合わせページなど)にも反映される

自作の背景動画が全てのページ(問い合わせページなど)にも反映される

コミュニティ・ブログ記事