Dawn主题下Buy with PayPal按钮自定义变体属性同步问题咨询

问题原因 #

Buy with PayPal按钮默认仅读取产品原生变体数据，不会自动抓取表单内的自定义properties隐藏字段，因此自定义属性无法同步到PayPal结账窗口。

解决方案 #

以下提供两种可落地的实现方式，适配Dawn主题的PayPal按钮逻辑：

方法一：通过Cart API先加购再跳转PayPal

该方法先将带自定义属性的商品添加到购物车，再引导至PayPal结账，确保PayPal能读取完整的商品信息。

1. 修改产品表单的自定义属性输入框
   给所有自定义属性隐藏框添加统一类名，方便JS批量获取：

<form method="post" action="/cart/add" id="product-form-template--17081662406963__main" accept-charset="UTF-8" class="form" enctype="multipart/form-data" novalidate="novalidate" data-type="add-to-cart-form">
    <input type="hidden" name="form_type" value="product">
    <input type="hidden" name="utf8" value="✓">
    <input type="hidden" name="id" value="44030441193779">
    <!-- 添加custom-product-property类 -->
    <input type="hidden" name="properties[Size]" id="custom-size" class="custom-product-property" value="5T">
    <input type="hidden" name="properties[Color]" id="custom-color" class="custom-product-property" value="Blush Pink">
</form>

2. 添加JS逻辑覆盖PayPal按钮默认行为
   在主题的assets/main-product.js或assets/theme.js末尾添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
  const paypalButton = document.querySelector('[data-paypal-button]');
  const productForm = document.getElementById('product-form-template--17081662406963__main');
  const customProps = productForm?.querySelectorAll('.custom-product-property');

  if (!paypalButton || !productForm) return;

  paypalButton.addEventListener('click', function(e) {
    e.preventDefault();
    
    // 收集自定义属性
    const properties = {};
    customProps.forEach(input => {
      const propName = input.name.match(/properties\[(.+)\]/)[1];
      properties[propName] = input.value.trim();
    });

    // 调用Cart API添加商品到购物车
    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        id: productForm.querySelector('[name="id"]').value,
        properties: properties
      })
    })
    .then(res => res.json())
    .then(data => {
      if (data.id) {
        // 跳转至PayPal结账
        window.location.href = '/checkout?payment_method=paypal';
      } else {
        alert('添加商品失败：' + (data.message || '未知错误'));
      }
    })
    .catch(err => {
      console.error('加购错误:', err);
      alert('操作失败，请重试');
    });
  });
});

方法二：修改PayPal订单创建逻辑，自定义商品名称

如果希望直接在PayPal弹窗中显示带自定义属性的商品名称，可通过修改PayPal按钮的createOrder回调实现：

在PayPal按钮初始化代码所在的文件（如sections/main-product.liquid或snippets/paypal-button.liquid）中，调整初始化逻辑：

window.Shopify.PayPal.Button.render({
  // 保留原有配置（如client-id、currency等）
  createOrder: function(data, actions) {
    const productForm = document.getElementById('product-form-template--17081662406963__main');
    const variantId = productForm.querySelector('[name="id"]').value;
    const size = productForm.getElementById('custom-size').value;
    const color = productForm.getElementById('custom-color').value;

    // 获取产品基础信息并拼接自定义属性
    return fetch(`/variants/${variantId}.js`)
      .then(res => res.json())
      .then(variant => {
        const customTitle = `${variant.title} - ${size} / ${color}`;
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: variant.price / 100 // 转换为货币单位（如美元）
            },
            items: [{
              name: customTitle,
              sku: variant.sku || variant.id,
              quantity: 1,
              unit_amount: {
                value: variant.price / 100
              }
            }]
          }]
        });
      });
  },
  // 保留原有onApprove、onError等回调
}, '#paypal-button-container');

注意事项 #

• 若自定义属性是用户可动态修改的（如通过选择器切换），需确保JS能实时获取最新的输入框值，而非固定初始值。
• 修改代码后需清空主题缓存，在测试环境验证功能正常后再部署到生产环境。
• 若使用方法一，需确保店铺开启了“允许直接从购物车跳转PayPal结账”的设置。

内容的提问来源于stack exchange，提问作者datasn.io