Scriptorium · IV

Adicione um botão de compra ao seu site Jekyll

Sites Jekyll levam pagamentos com dois blocos colados, e isso inclui GitHub Pages em estoque. Não há plugins, sem gemas e sem fluxo de trabalho Actions para configurar.

Adicione a tag de script, uma vez

Adicione a tag de script no cabeçalho em seu layout padrão (_layouts/default.html) ou o include de cabeça do seu tema (_includes/head.html).

<!-- _layouts/default.html -->
<head>
  <meta charset="utf-8" />
  <title>{{ page.title }}</title>
  <script src="https://sdk.coinmoebius.com/latest/sdk.global.js"
    crossorigin="anonymous"
    defer></script>
</head>

Nomeie o produto em seu painel

Abra seu projeto, mude para a aba Produtos e adicione o produto: uma referência que você escolhe, um nome, um preço, uma moeda. A partir daqui, o painel escreve ambos os blocos nesta página com seu ID de projeto real. O que você vê abaixo é a forma.

Coloque o botão onde você vender

Cole o botão em qualquer página, postagem ou inclusão. Kramdown passa HTML inline em Markdown através por padrão, portanto meio-post funciona.

<coin-moebius-buy
  project-id="proj_YOUR_ID_HERE"
  product-id="t-shirt-medium"
  label="Buy a t-shirt">
</coin-moebius-buy>

Publicar. O botão renderiza com a página e o seletor de pagamento carrega a primeira vez que um comprador o clica. Cada produto adicional é o mesmo bloco com uma referência e rótulo diferentes.

Tenha cuidado com estes

GitHub Pages não precisa de nada extra

HTML simples mais nosso script hospedado significa nenhuma problemática com lista de permissões de plugin. Empurre para o ramo que você já publica e o botão está ao vivo.

Liquid o deixa em paz

O botão não contém colchetes, portanto Liquid não tem nada para interpolar. Cole como está. Nenhuma marca bruta necessária.

Na lista verificada

Jekyll é uma das plataformas que a documentação lista como confirmada funcionando.

Pronto quando sua página estiver

Grátis cobre 150 transações por mês. Sem cartão para se inscrever.