Laravel 5.4 邮件 Markdown 2 按钮内联

Question

我想知道如何将按钮放在一起。



现在它在一个单独的行上。

@component('mail::message')
    Dear {{$vendor_name}}

    Product {{$product_id}} : {{$product_name}} price id : {{$price_id}} will expire on {{$date_expire}}.
    Please renew price.


@component('mail::button', ['url' => 'http://phuketjettour.com/', 'color' => 'green'])
    Phuket Jet Tour
@endcomponent
@component('mail::button', ['url' => 'http://phuketjettour.com/s/vendors'])
    Vendor submission
@endcomponent
    Thanks,<br>
    Phuket Jet Tour

@endcomponent

Answer 1

内嵌按钮的动态数量
对我来说，以下工作可以在 Laravel Markdown 邮件中创建 2、3、4(动态数量)的内联按钮:

1)为您的自定义组件添加一个新目录
首先让我们扩展邮件配置以包含我们的组件新目录:
config/mail.php

<?php 

// ...

'markdown' => [
    'theme' => 'default',

    'paths' => [
        resource_path('views/vendor/mail'),
        resource_path('views/emails/components') // <-- This line was added
    ],
],

2) 为内嵌按钮创建新组件
您需要创建组件的 HTML 和文本版本。否则你会得到一个 InvalidArgumentException “未找到查看 $name”:
www/resources/views/emails/components/html/buttons.blade.php
这是 HTML 文件:

<table class="action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
@if(null !== ($headline ?? null))
<tr><td><h2 style="text-align: center;">{{ $headline }}</h2></td></tr>
@endif
<tr>
<td>
@foreach($buttons as $button)
<a href="{{ $button['url'] }}" class="button button-{{ $button['color'] ?? 'primary' }}" target="_blank" rel="noopener">{!! $button['slot'] !!}</a>
@endforeach
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

www/resources/views/emails/components/text/buttons.blade.php
这是 正文 文件

@if(null !== ($headline ?? null))
{{ $headline }}
------------------------------
@endif
@foreach($buttons as $button)
{!! $button['slot'] !!}: {{ $button['url'] }}
@endforeach

3) 在您的邮件中包含新组件:
现在您可以像这样在 Markdown 电子邮件中包含该组件:
带有 2 个内嵌按钮和一个标题的示例:

@component('mail::buttons', [
    'headline' => 'Share link',
    'buttons' => [
        [
            'url' => 'https://wa.me/?text=' . urlencode('Whatsapp text'),
            'slot' => 'WhatsApp',
        ],[
            'url' => 'https://t.me/share/url?text=' . urlencode('telegram text'),
            'slot' => 'Telegram',
        ]
    ]
])
@endcomponent

3 个没有标题的内嵌按钮的示例:

@component('mail::buttons', [
    'buttons' => [
        [
            'url' => 'https://wa.me/?text=' . urlencode('Whatsapp text'),
            'slot' => 'WhatsApp',
        ],[
            'url' => 'https://t.me/share/url?text=' . urlencode('telegram text'),
            'slot' => 'Telegram',
        ],[
            'url' => 'https://twitter.com/intent/tweet?text=' . urlencode('Twitter text'),
            'slot' => 'Twitter',
        ]
    ]
])
@endcomponent

3 个不同颜色的内嵌按钮的示例:

@component('mail::buttons', [
    'buttons' => [
        [
            'url' => 'https://wa.me/?text=' . urlencode('Whatsapp text'),
            'slot' => 'WhatsApp',
            'color' => 'blue' // This is the default
        ],[
            'url' => 'https://t.me/share/url?text=' . urlencode('telegram text'),
            'slot' => 'Telegram',
            'color' => 'green'
        ],[
            'url' => 'https://twitter.com/intent/tweet?text=' . urlencode('Twitter text'),
            'slot' => 'Twitter',
            'color' => 'red'
        ]
    ]
])
@endcomponent