技術的なQ＆A

next_kota · ‎09-16-2021

お世話になっております。

表題の件で質問させてください。

現在、商品ページのカスタマイズをしています。

デフォルトのsection『テキスト付き画像（image-with-text.liquid ）』を複製し、

『テキスト付き画像3（image-with-text-type3.liquid ）』を作成し、カスタマイズ中です。

下の添付のようにテキストが入る箇所は「商品メタフィールド」で設定しています。

商品詳細ページにて、下記添付のように［詳細テキスト３］が未記入だった場合には、

［詳細テキスト３］が出力されているsectionのエリアを全体ごと非表示にしたいのですがそちらの設定が出来ません。

下記に現在のソースコードも記載いたします。

liquidが不慣れな為、解決策を教えていただけますととても助かります。

どうぞよろしくお願いします。

▼image-with-text-type3.liquid　ソースコード

{%- if block.settings.text != blank -%} 

<section class="image-with-text-type3">
<div class="image-with-text {% if section.settings.full_width %}image-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
  <div class="image-with-text__grid color-{{ section.settings.color_scheme }}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %} grid grid--gapless grid--1-col grid--2-col-tablet">
  
    
    {%- if section.settings.image != blank -%} 
    <div class="grid__item grid__item_img">
      <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
          <img srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
            {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
            {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
            {%- if section.settings.image.width >= 720 -%}{{ section.settings.image | img_url: '720x' }} 720w,{%- endif -%}
            {%- if section.settings.image.width >= 940 -%}{{ section.settings.image | img_url: '940x' }} 940w,{%- endif -%}
            {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w{%- endif -%}"
            src="{{ section.settings.image | img_url: '533x' }}"
            sizes="(min-width: 1100px) 535px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
          >
      </div>
    </div>
        {%- else -%}
        <div class="non-image"></div>
        {%- endif -%}
    
    <div class="grid__item grid__item_text">
      <div class="image-with-text__content image-with-text__content--{{ section.settings.height }}">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              <h2 class="image-with-text__heading h1">
                {{ block.settings.heading | escape }}
              </h2>
            {%- when 'text' -%}
              <div class="image-with-text__text rte">{{ block.settings.text }}</div>
            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                <a href="{{ block.settings.button_link }}" class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>{{ block.settings.button_label | escape }}</a>
              {%- endif -%}
          {%- endcase -%}
        

        {%- endfor -%}
      </div>
    </div>
  </div>
</div>
</section>

{%- else -%}
      
{%- endif -%}