zz-shopify-components 0.3.1-beta.12 → 0.3.1-beta.14

package/assets/zz-edu-info-dialog.js

@@ -1,4 +1,5 @@
-class ZZEduInfoDialog extends HTMLElement {
+if (!customElements.get('zz-edu-info-dialog')) {
+  class ZZEduInfoDialog extends HTMLElement {
     constructor() {
       super();
       this.init();
@@ -115,8 +116,8 @@ class ZZEduInfoDialog extends HTMLElement {
   
   
   }
-  
-  
+
   customElements.define('zz-edu-info-dialog', ZZEduInfoDialog);
+}
 
 

package/blocks/zz-edu-form.liquid

@@ -97,7 +97,7 @@
     <zz-radio-tabs-item value="manual">Upload student card</zz-radio-tabs-item>
   </zz-radio-tabs>
   <div class="zz-edu-form-container">
-    <form class="zz-edu-form-form" id="eduForm">
+    <form class="zz-edu-form-form" id="eduForm-{{ block.id }}">
       <div class="zz-edu-form-group">
         <label for="firstName" class="zz-edu-form-label">Full name</label>
         <div class="zz-edu-form-row">
@@ -169,10 +169,10 @@
       <div class="zz-edu-form-row upload-file-row zz-edu-form-hidden">
         <div class="zz-edu-form-column">
           <div class="zz-edu-form-group">
-            <label for="fileUpload" class="zz-edu-form-label">Upload Document</label>
+            <label for="fileUpload-{{ block.id }}" class="zz-edu-form-label">Upload Document</label>
             <div class="zz-edu-form-file-upload-container">
-              <input type="file" id="fileUpload" name="fileUpload" class="zz-edu-form-file-input" accept=".pdf,.jpg,.jpeg,.png">
-              <label for="fileUpload" class="zz-edu-form-file-upload-label">
+              <input type="file" id="fileUpload-{{ block.id }}" name="fileUpload" class="zz-edu-form-file-input" accept=".pdf,.jpg,.jpeg,.png">
+              <label for="fileUpload-{{ block.id }}" class="zz-edu-form-file-upload-label">
                 <div class="zz-edu-form-file-upload-content">
                   <svg class="zz-edu-form-file-upload-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M12 16L12 8M12 8L15 11M12 8L9 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -182,7 +182,7 @@
                   <span class="zz-edu-form-file-upload-hint">PDF, JPG, PNG (Max 10MB)</span>
                 </div>
               </label>
-              <div class="zz-edu-form-file-preview" id="filePreview"></div>
+              <div class="zz-edu-form-file-preview" id="filePreview-{{ block.id }}"></div>
             </div>
           </div>
         </div>
@@ -217,19 +217,14 @@
 
 <script src="{{ 'aliyun-oss-sdk-6.20.0.min.js' | asset_url }}" defer></script>
 
-{% if block.settings.request_type == 'prod' %}
-  {% assign base_url = 'https://h130-app-server-us.hoverx1.cn' %}
-{% else %}
-  {% assign base_url = 'https://h130-app-server-test-us.hoverx1.cn' %}
-{% endif %}
+
 <script src="{{ 'zz-edu-info-dialog.js' | asset_url }}" defer></script>
 
 <script>
-  const verifySuccessTitle = '{{ block.settings.verify_success_title }}';
-  const verifySuccessMessage = '{{ block.settings.verify_success_message }}';
-  const verifyFailTitle = '{{ block.settings.verify_fail_title }}';
+  
 
-  const EduErrorCodeConf = {
+  
+  var EduErrorCodeConf = {
     201: {
       zh: "该教育邮箱已完成注册，无需重复认证",
       en: "This educational email has been registered, no need to re-authenticate"
@@ -276,10 +271,18 @@
     }
   }
   document.addEventListener('DOMContentLoaded', function () {
+    {% if block.settings.request_type == 'prod' %}
+      {% assign base_url = 'https://h130-app-server-us.hoverx1.cn' %}
+    {% else %}
+      {% assign base_url = 'https://h130-app-server-test-us.hoverx1.cn' %}
+    {% endif %}
+    const verifySuccessTitle = '{{ block.settings.verify_success_title }}';
+    const verifySuccessMessage = '{{ block.settings.verify_success_message }}';
+    const verifyFailTitle = '{{ block.settings.verify_fail_title }}';
 
     const baseUrl = '{{ base_url }}';
     const block = document.getElementById('shopify-block-{{ block.id }}');
-    const form = block.querySelector('#eduForm');
+    const form = block.querySelector('#eduForm-{{ block.id }}');
     let verifyType = 'email'
     let identityDocumentUrl = ''
     
@@ -310,7 +313,7 @@
       
       // 验证文件上传
       if (verifyType === 'manual') {
-        const fileInput = form.querySelector('#fileUpload');
+        const fileInput = form.querySelector('#fileUpload-{{ block.id }}');
         if (!fileInput.files || fileInput.files.length === 0) {
           fileInput.classList.add('error');
           isValid = false;
@@ -416,8 +419,8 @@
     
     
     // 文件上传处理
-    const fileInput = form.querySelector('#fileUpload');
-    const filePreview = form.querySelector('#filePreview');
+    const fileInput = form.querySelector('#fileUpload-{{ block.id }}');
+    const filePreview = form.querySelector('#filePreview-{{ block.id }}');
     const fileUploadLabel = form.querySelector('.zz-edu-form-file-upload-label');
     
     fileInput.addEventListener('change', function(e) {
@@ -458,7 +461,6 @@
                 accessKeySecret: data.AccessKeySecret,
                 stsToken: data.SecurityToken,
               });
-            
               const result = await client.put(file.name, file);
               if(result.url) {
                 identityDocumentUrl = result.url
@@ -516,7 +518,7 @@
             <span class="zz-edu-form-file-name">${fileName}</span>
             <span class="zz-edu-form-file-size">${fileSize} MB</span>
           </div>
-          <div class="zz-edu-form-file-remove-btn" onclick="removeEduVerifyFile()">
+          <div class="zz-edu-form-file-remove-btn" onclick="removeEduVerifyFile{{ block.id }}()">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <circle cx="12" cy="12" r="12" fill="#DD3B46"/>
             <path d="M8.07812 15.9609L15.9977 8.04134" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
@@ -530,7 +532,7 @@
     }
     
     // 移除文件
-    window.removeEduVerifyFile = function() {
+    window['removeEduVerifyFile{{ block.id }}'] = function() {
       fileInput.value = '';
       filePreview.innerHTML = '';
       fileUploadLabel.style.display = 'flex';
@@ -544,15 +546,6 @@
         block.querySelector('.upload-file-row').classList.add('zz-edu-form-hidden');
       }
     });
-    {% comment %} block.querySelector('.zz-edu-form-submit-btn').addEventListener('click', (e) => {
-      const zzEduInfoDialog = block.querySelector('zz-edu-info-dialog');
-      zzEduInfoDialog.showModal({
-        title: 'Verify my email',
-        message: 'Please enter the verification code sent to your email',
-        showInput: true
-      });
-  
-    }); {% endcomment %}
 
   });
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.3.1-beta.12",
+  "version": "0.3.1-beta.14",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",