Shopify技术问题：通过Script Tag获取注册/登录客户邮箱生成带ClientID的Cookie

Hey there! Let's tackle your Shopify JavaScript questions step by step:

Shopify exposes a global Shopify object in the frontend for logged-in customers, which includes a customer property with their details (including email). Here's how you can access it:

1. Check for the logged-in state first: The Shopify.customer object only exists when a customer is actively logged into their account.
2. Access the email property: Once confirmed the object exists, you can pull the email directly.

Example code snippet:

// Wait for the DOM to fully load to ensure Shopify's scripts are ready
window.addEventListener('DOMContentLoaded', () => {
  if (window.Shopify && Shopify.customer) {
    const customerEmail = Shopify.customer.email;
    console.log('Customer Email:', customerEmail);
    // Use the email for your desired logic here
  } else {
    console.log('Customer is not logged in or Shopify object hasn\'t loaded');
  }
});

Pro tip: If you're injecting this via Shopify's Script Tag API, set the load timing to DOMContentLoaded to avoid race conditions with Shopify's core scripts.

You absolutely can use an injected JS Script Tag to handle this—you just need to account for the difference between logged-in customers and new registrants. Let's break it down by scenario:

Scenario 1: Customer Logs In #

When a customer logs in successfully, Shopify automatically populates the Shopify.customer object. You can listen for this event (or check on page load) to grab the email and generate your cookie:

// Listen for Shopify's built-in login event (supported by most themes)
document.addEventListener('shopify:customer:logged_in', () => {
  if (Shopify.customer) {
    const customerEmail = Shopify.customer.email;
    // Generate your ClientID (replace with your actual logic)
    const clientId = generateClientId(); // Assume this is your custom function
    // Set the cookie with ClientID and email
    document.cookie = `clientIdCookie=${clientId}|${customerEmail}; path=/; max-age=31536000; SameSite=Lax`;
  }
});

// Fallback: Check on page load (for users who refresh after logging in)
window.addEventListener('DOMContentLoaded', () => {
  if (window.Shopify && Shopify.customer) {
    const customerEmail = Shopify.customer.email;
    const clientId = generateClientId();
    document.cookie = `clientIdCookie=${clientId}|${customerEmail}; path=/; max-age=31536000; SameSite=Lax`;
  }
});

Scenario 2: New Customer Registers #

For registrations, the Shopify.customer object won't exist until the form is submitted and the customer is logged in. Instead, you'll need to capture the email directly from the registration form before submission:

// Target the registration form (selector may vary by theme—adjust as needed)
const registerForm = document.querySelector('form[action="/account"]');
if (registerForm) {
  registerForm.addEventListener('submit', (e) => {
    // Grab the email input field (most themes use name="customer[email]")
    const emailInput = registerForm.querySelector('input[name="customer[email]"]');
    if (emailInput && emailInput.value) {
      const customerEmail = emailInput.value.trim();
      const clientId = generateClientId();
      // Set the cookie before the form submits
      document.cookie = `clientIdCookie=${clientId}|${customerEmail}; path=/; max-age=31536000; SameSite=Lax`;
    }
  });
}

Why your onclick approach isn't ideal #

Adding an onclick to the login/register button misses cases where users submit the form via keyboard (e.g., pressing Enter). Listening to the form's submit event is far more reliable. And you're right—__st.cid is an internal Shopify cookie that doesn't expose the customer's email, so it's not useful here.

Key Notes #

• Theme Compatibility: Form selectors might differ across themes—inspect your store's registration/login forms to get the correct CSS selectors.
• Privacy Compliance: Ensure your cookie usage aligns with regulations like GDPR or CCPA (e.g., get user consent if required in your region).
• Script Loading: If using Shopify's Script Tag API, set display_scope to online_store and load timing to DOMContentLoaded to ensure your script runs after the page and Shopify's core scripts are ready.

内容的提问来源于stack exchange，提问作者maciey_b