[
  {
    "id": 3317,
    "title": "商品リンクカード_F-12",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M224,56V80H32V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z\" fill=\"#9aa8c9\"/><path d=\"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V72H40V56Zm0,144H40V88H216V200Zm-40-88a48,48,0,0,1-96,0,8,8,0,0,1,16,0,32,32,0,0,0,64,0,8,8,0,0,1,16,0Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "商品リンクカード",
      "CTA・訴求"
    ],
    "slug": "lazyblock/f-product-link-card",
    "description": "プラグインや外部ツールのサムネイル画像、説明文、詳細へのリンクボタンをひとまとめにしたアフィリエイト・紹介用のカード型ブロックです。PCでは横並び、スマホでは画像が大きく縦積みに切り替わるレスポンシブ仕様になっています。また、Googleアナリティクス（gtag.js）でのクリック計測用スクリプトも同梱しています。",
    "category": "Lazyblocks Free",
    "category_label": "Lazyblocks Free",
    "supports": {
      "customClassName": true,
      "anchor": false,
      "html": false,
      "multiple": true,
      "inserter": true,
      "reusable": true,
      "color": false,
      "layout": false,
      "shadow": false,
      "spacing": false,
      "dimensions": false,
      "typography": false,
      "lock": true,
      "align": [
        "wide",
        "full"
      ],
      "ghostkit": {
        "effects": false,
        "position": false,
        "spacings": false,
        "frame": false,
        "transform": false,
        "customCSS": false,
        "display": false,
        "attributes": false
      }
    },
    "controls": {
      "control_cad9eb41a8": {
        "type": "image",
        "name": "product_image",
        "default": "",
        "label": "商品画像",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_1dfa4049db": {
        "type": "text",
        "name": "product_name",
        "default": "",
        "label": "商品名",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_c5eb4d4a3b": {
        "type": "textarea",
        "name": "product_desc",
        "default": "",
        "label": "説明",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_996a214dd5": {
        "type": "url",
        "name": "product_url",
        "default": "",
        "label": "アフィリエイトURL",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      }
    },
    "code": {
      "output_method": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php\r\n$p_name = isset( $attributes['product_name'] ) ? $attributes['product_name'] : '';\r\n$p_img  = isset( $attributes['product_image'] ) ? $attributes['product_image'] : '';\r\n$p_desc = isset( $attributes['product_desc'] ) ? $attributes['product_desc'] : '';\r\n$p_url  = isset( $attributes['product_url'] ) ? $attributes['product_url'] : '';\r\n?>\r\n\r\n<?php if ( empty( $p_name ) ) : ?>\r\n  <div style=\"padding: 24px; background: #11151f; border: 2px dashed #00d2d3; border-radius: 12px; text-align: center; color: #ffffff;\">\r\n    <p style=\"margin: 0;\">🛒 <strong>商品リンクカードブロック</strong><br><span style=\"font-size: 13px; color: #8b92a5;\">右側のパネルから「商品名」などを入力してください。</span></p>\r\n  </div>\r\n<?php else : \r\n  $uid = 'plc-' . substr( md5( $p_name . $p_url ), 0, 8 );\r\n?>\r\n  <div class=\"product-link-card\">\r\n    <?php if ( is_array( $p_img ) && ! empty( $p_img['url'] ) ) : ?>\r\n      <img src=\"<?php echo esc_url( $p_img['url'] ); ?>\" alt=\"<?php echo esc_attr( $p_name ); ?>\" class=\"plc-image\">\r\n    <?php elseif ( is_string( $p_img ) && ! empty( $p_img ) ) : ?>\r\n      <img src=\"<?php echo esc_url( $p_img ); ?>\" alt=\"<?php echo esc_attr( $p_name ); ?>\" class=\"plc-image\">\r\n    <?php else : ?>\r\n      <div class=\"plc-image-placeholder\"></div>\r\n    <?php endif; ?>\r\n    \r\n    <div class=\"plc-body\">\r\n      <p class=\"plc-name\"><?php echo esc_html( $p_name ); ?></p>\r\n      <?php if ( ! empty( $p_desc ) ) : ?>\r\n        <p class=\"plc-desc\"><?php echo nl2br( esc_html( $p_desc ) ); ?></p>\r\n      <?php endif; ?>\r\n      \r\n      <div class=\"plc-button-wrap\">\r\n        <a href=\"<?php echo esc_url( $p_url ? $p_url : '#' ); ?>\" class=\"plc-button\" id=\"<?php echo esc_attr( $uid ); ?>\" target=\"_blank\" rel=\"nofollow sponsored\">詳細を見る</a>\r\n      </div>\r\n      \r\n    </div>\r\n  </div>\r\n\r\n  <style>\r\n  .product-link-card, .product-link-card * { box-sizing: border-box; }\r\n  .product-link-card p { margin: 0 !important; }\r\n  .product-link-card a.plc-button { text-decoration: none !important; }\r\n  .product-link-card {\r\n    display: flex; gap: 24px; align-items: center;\r\n    background: #111622; border: 1px solid #283042; border-radius: 16px;\r\n    padding: 24px; width: 100%; margin: 32px 0;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.05);\r\n    transition: box-shadow 0.2s ease, border-color 0.2s ease;\r\n  }\r\n  .product-link-card:hover { \r\n    box-shadow: 0 8px 24px rgba(0,0,0,0.15); \r\n    border-color: #3d4a60;\r\n  }\r\n  .plc-image { \r\n    width: 120px; height: 120px; object-fit: cover; \r\n    border-radius: 12px; flex-shrink: 0; background: #283042;\r\n  }\r\n  .plc-image-placeholder {\r\n    width: 120px; height: 120px; border-radius: 12px; \r\n    flex-shrink: 0; background: #283042;\r\n  }\r\n  .plc-body { flex: 1; min-width: 0; }\r\n  .plc-name { color: #ffffff; font-weight: 700; font-size: 18px; margin: 0 0 8px !important; }\r\n  .plc-desc { font-size: 14px; color: #b4b9c9; margin: 0 !important; line-height: 1.6; }\r\n  \r\n  .plc-button-wrap {\r\n    margin-top: 20px;\r\n    display: block; \r\n  }\r\n  .plc-button {\r\n    display: inline-flex; align-items: center; justify-content: center;\r\n    background: #00d2d3; color: #11151f;\r\n    font-size: 14px; font-weight: 700; padding: 12px 32px; border-radius: 8px;\r\n    transition: background 0.2s ease, transform 0.2s ease;\r\n    line-height: 1; letter-spacing: 0.05em;\r\n  }\r\n  .plc-button:hover {\r\n    background: #00e5e6;\r\n    transform: translateY(-2px);\r\n  }\r\n  \r\n  @media (max-width: 480px) {\r\n    .product-link-card { flex-direction: column; align-items: stretch; text-align: center; padding: 20px; gap: 16px; }\r\n    .plc-image, .plc-image-placeholder { width: 100%; height: 180px; margin: 0 auto; }\r\n    .plc-button-wrap { margin-top: 16px; }\r\n    .plc-button { display: flex; width: 100%; }\r\n  }\r\n  </style>\r\n\r\n  <script>\r\n  ( function () {\r\n    var btn = document.getElementById( '<?php echo esc_js( $uid ); ?>' );\r\n    if ( btn && ! btn.dataset.bound ) {\r\n      btn.dataset.bound = 'true';\r\n      btn.addEventListener( 'click', function () {\r\n        if ( typeof gtag === 'function' ) {\r\n          gtag( 'event', 'cta_click_lazyblocks_product_link_card', {\r\n            product_name: '<?php echo esc_js( $p_name ); ?>'\r\n          } );\r\n        }\r\n      } );\r\n    }\r\n  } )();\r\n  </script>\r\n<?php endif; ?>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "",
      "editor": ""
    },
    "script": {
      "view": ""
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]