書類のダウンロードボタンを条件によってグレーアウトしたい

Shopifyのプランは「Basic」、テーマは「Rise」を使っています。

テーマのコードの直接編集ではなく、テーマのカスタマイズで作成しています。

セクションの「カスタムliquid」に以下のコードで、【お客様の注文】ページに書類のダウンロードボタンとリンクを設定しました。(リンクはダミーです)


## **書類ダウンロード**

以下のボタンから各書類がダウンロードいただけます。

  

    
      見積書
    

    
      納品書
    

    
      請求書
    

    
      領収書
    
  

<b>※納品書・領収書は、ご注文商品全ての発送完了後にダウンロードいただけます。
※クレジットカード決済、スマホ決済(QRコード決済)では、各決済会社からのご請求となるので請求書はダウンロードできません。領収書をご利用ください。</b>

こちらについて、以下の条件でダウロード不可状態にしたいです。

具体的には、ボタンをグレーアウトし、クリックもできないようにしたいです。

  • 見積書:無条件でいつでもダウロード可能。
  • 納品書:支払状況に関係なく、発送済みの場合のみダウロード可能。(一部のみ発送済みはダウンロード不可)
  • 請求書:支払状況・配送状況に関係なく、支払方法でShopifyPaymentまたはスマホ決済の場合はダウンロード不可。
  • 領収書:全額支払済みかつ全て発送済みの場合のみダウロード可能。

具体的なコードを教えていただけると助かります。

よろしくお願いいたします。

@n_ogawa3

書類のダウンロードボタンを条件によってグレーアウトしたい件ですが、抜粋で調整内容を記載させていただきます。

1.CSSで無効化スタイルを追加

.disabled-button {
  background-color: #e9ecef;
  border-color: #ced4da;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
  box-shadow: none;
}

2.Liquidで条件分岐を追加

見積書ボタン

常にダウンロード可能なので、特別な条件分岐は不要です。

納品書ボタン
すべての商品が発送済みかどうかを確認します。

{% assign all_fulfilled = true %}
{% for line_item in order.line_items %}
  {% if line_item.fulfillable_quantity > 0 %}
    {% assign all_fulfilled = false %}
  {% endif %}
{% endfor %}

{% if all_fulfilled %}
  納品書
{% else %}
  納品書
{% endif %}

請求書ボタン

支払い方法がShopify Paymentsまたはスマホ決済かどうかを確認します。

※スマホ決済の名称はご自身の決済方法の文言に変更ください。

{% assign payment_gateway = order.gateway | downcase %}

{% if payment_gateway == 'shopify_payments' or payment_gateway contains 'スマホ決済' %}
  請求書
{% else %}
  請求書
{% endif %}

領収書ボタン

全額支払い済みかつすべての商品が発送済みかどうかを確認します。

{% assign all_fulfilled = true %}
{% for line_item in order.line_items %}
  {% if line_item.fulfillable_quantity > 0 %}
    {% assign all_fulfilled = false %}
  {% endif %}
{% endfor %}

{% if order.financial_status == 'paid' and all_fulfilled %}
  領収書
{% else %}
  領収書
{% endif %}

以上の調整で、ご希望の内容になるかと思われます。

実際の使用時は検証の上ご利用ください。

ご参考まで。

(キュー小坂)