Shopify AJAX 表单到第三方服务答案

【问题标题】：Shopify AJAX form to third-party serviceShopify AJAX 表单到第三方服务
【发布时间】：2019-07-22 09:38:36
【问题描述】：

我正在尝试在 Shopify 中构建一个 AJAX MailChimp 表单，该表单将通过 MailChimp API 发布表单数据。虽然知道 Shopify 私人应用程序，但我不确定如何配置它们，或者即使这是正确的路径。

我来自 WordPress 背景，使用 cURL 请求非常简单 - 希望有类似的解决方案。

【问题讨论】：

将您的 MailChimp 表单嵌入 Shopify。为什么需要 ajax 表单？这将导致安全问题。

标签： forms api shopify shopify-app

【解决方案1】：

如果您谈论的是 Mailchimp 注册表单，他们有一个 JSONP 端点可供您使用。无需任何应用程序。

Mailchimp 表单操作 URL 如下所示：

https://name.us11.list-manage.com/subscribe/post?u=dcabf4ea1e6340c0f1c34b0b6&id=ba610251dc

对于 JSONP 端点，您只需将 post 更改为 post-json：

https://name.us11.list-manage.com/subscribe/post-json?u=dcabf4ea1e6340c0f1c34b0b6&id=ba610251dc

这是一个 jQuery sn-p，它演示了如何使用 AJAX 逐步增强 Mailchimp 表单：

$('[data-mailchimp-form]').on('submit', function(event) {
  var $form = $(this);

  $.ajax({
    url: $form.attr('action').replace('/subscribe/post', '/subscribe/post-json'),
    data: $form.serialize(),
    dataType: 'jsonp',
    jsonp: 'c',
    success: function() {
      // Show a success message.
    },
    error: function() {
      // Show an error message.
    },
    complete: function() {
      $form.append('<p>AJAX response received.</p>');
    }
  });

  event.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://name.us11.list-manage.com/subscribe/post?u=dcabf4ea1e6340c0f1c34b0b6&id=ba610251dc" method="POST" data-mailchimp-form>
  <input name="EMAIL" placeholder="email" value="test@example.com">
  <!-- Include the other fields copied with the Mailchimp form code -->
  <input type="submit" value="Subscribe">
</form>

【讨论】：