Alteração de layout para assinaturas

O recurso de Assinaturas precisa de uma adaptação no front-end da loja para que a funcionalidade fique disponível na vitrine. Essa alteração no front-end é a responsável por delimitar na vitrine quais produtos podem ser adicionados em uma compra por assinatura. Nesse artigo você encontra o que você deve alterar no layout da loja para que a vitrine suporte o recurso de Assinaturas.

❗️

Para fazer as alterações, certifique-se ter comprido com sucesso as configurações entre plataformas e o cadastro de produtos de assinatura.

Inclua o código abaixo no arquivo product.liquid do template da loja.

<form data-form-product-assinatura>
  <input type="hidden" id="quantity" name="quantity" value="1">

  {% assign mainVariant = product.variants | where: 'main', true | first %}

  <input type="hidden" name="sku" value="{{ mainVariant.sku }}">
  <input type="hidden" name="extra[vindi_plan_id]" value="{{ mainVariant.properties.property1.value }}">

  <button 
    type="submit" 
    class="add-to-cart-button"
    data-action="add-cart-assinatura"
    data-event="addToCart"
    data-event-json='{% gtm item:product %}'>
    Assinar
  </button>

  <div class="msg-response" id="erro-adicionar-assinatura">
    <span class="msg"></span>
  </div>
</form>

<script>
  var urlHome = "{{ home_url }}"
  var urlAssinaturaCartAdd = urlHome + 'assinaturas/carrinho/itens';

  $("[data-form-product-assinatura]").on("submit", function(){
    var data = {};

    data.subscription_item = {
      quantity: this.find('[name="quantity"]').val(),
      sku: this.find('[name="sku"]').val(),
      extra: {
        vindi_plan_id: this.find('[name="extra[vindi_plan_id]"]').val()
      }
    }

    $.ajax({
      url: url,
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(data),
      xhrFields: { 
        withCredentials: true 
      },
    })
    .done(function (resp) {
      console.log("success");
    })
    .fail(function (xhr, status, error) {
      console.log("error");
    })
    .always(function () {
      console.log("complete");
    });
  })
</script>

Considerações sobre o código:

• O arquivo producto.liquid é responsável pelas informações da página do produto, e o código acima adiciona um formulário com o botão de assinaturas. Assim os clientes podem adicionar os produto de compra por assinatura no carrinho.
• No código, os parâmetros sku e vindi_plan_id são os códigos identificadores dos produtos e planos de assinatura. O código sku é o código identificador do produto, e o código vindi_plan_id é o código identificador do plano de assinatura disponível para o produto.
• Note que utilizamos no código a property1 para chamar a variável que contém o código vindi_plan_id. Isso porque utilizamos como padrão o atriburo 1 (na variante do produto) para identificar o plano e assinatura. Lembre-se de manter a coerência entre a variável do layout e o cadastro de produto. Saiba mais em Relação entre o atributo Plano Vindi e a alteração de layout.
• O campo quantity é referente as unidades de itens para assinatura. Essa é a quantidade de itens que o cliente final adicionará na assinatura quando clicar no botão de assinaturas. Por padrão, esse valor é 1 unidade.
• Nesse código utilizamos o envio das informações por JavaScript com a biblioteca jQuery. No entanto, você também pode ser utilizar da biblioteca Vanilla JS.
• Os dados do formulário são enviados para URLdaLoja/assinaturas/carrinho/itens.