Add shop buttons for various products and implement Amazon ASIN retrieval in common.js. Update product pages to include new shop button functionality for E02, E02H24, G200, GM100, S400, and W01, while excluding S300.

Author: li-jun-chao

components/common.js

@@ -180,13 +180,40 @@ function createProductCard(productModel) {
         <img src="products/pics/${productModel}/${productModel}${['S400', 'S300', 'GM100'].includes(productModel) ? 'CB' : ''}-1.jpg" class="card-img-top" alt="${productModel}">
         <div class="card-body">
           <h5 class="card-title">${productModel}</h5>
-          <a href="products/${productModel.toLowerCase()}.html" class="btn btn-primary">Learn More</a>
+          <div class="d-flex gap-2">
+            <a href="products/${productModel.toLowerCase()}.html" class="btn btn-primary">Learn More</a>
+            ${ productModel != 'S300' ? `<a href="https://amazon.com/dp/${getAmazonASIN(productModel)}" target="_blank" class="btn btn-success">Shop</a>` : ''}
+          </div>
         </div>
       </div>
     </div>
   `;
 }
 
+// 创建商店按钮
+function createShopButton(productModel) {
+  return `
+    <div class="text-center mb-4">
+      <a href="https://amazon.com/dp/${getAmazonASIN(productModel)}" target="_blank" class="btn btn-success btn-lg">
+        Shop ${productModel} on Amazon
+      </a>
+    </div>
+  `;
+}
+
+// 获取Amazon ASIN
+function getAmazonASIN(productModel) {
+  const asinMap = {
+    'S400': 'B0F24CL2YZ',
+
+    'GM100': 'B0CSX8W1SD',
+    'E02': 'B0CT3KH4L4',
+    'E02H24': 'B0D69J9HDQ',
+    'W01': 'B0CT3SFYY9'
+  };
+  return asinMap[productModel] || 'B0XXXXXXXXX';
+}
+
 // 修改暗黑模式切换按钮
 function loadDarkModeToggle() {
   const darkModeToggle = document.createElement('div');

products/e02.html

@@ -9,6 +9,7 @@
     loadImageHandlers();
 
     const container = document.querySelector('.container');
+    container.innerHTML += createShopButton('E02');
     container.innerHTML += createGallerySection('E02', '', 12);
     container.innerHTML += createManualSection('E02');
     container.innerHTML += createInstallGuideSection('YOUR_E02_VIDEO_ID');

products/e02h24.html

@@ -9,6 +9,7 @@
     loadImageHandlers();
 
     const container = document.querySelector('.container');
+    container.innerHTML += createShopButton('E02H24');
     container.innerHTML += createGallerySection('E02H24', '', 7);
     container.innerHTML += createManualSection('E02H24');
     container.innerHTML += createInstallGuideSection('YOUR_E02H24_VIDEO_ID');

products/g200.html

@@ -9,6 +9,7 @@
     loadImageHandlers();
 
     const container = document.querySelector('.container');
+    container.innerHTML += createShopButton('G200');
     container.innerHTML += createGallerySection('G200', 'Black', 10);
     container.innerHTML += createGallerySection('G200', 'White', 9);
     container.innerHTML += createManualSection('G200');

products/gm100.html

@@ -9,6 +9,7 @@
     loadImageHandlers();
 
     const container = document.querySelector('.container');
+    container.innerHTML += createShopButton('GM100');
     container.innerHTML += createGallerySection('GM100', 'Black', 6);
     container.innerHTML += createGallerySection('GM100', 'White', 3);
     container.innerHTML += createManualSection('GM100');

products/s300.html

@@ -9,6 +9,7 @@
     loadImageHandlers();
 
     const container = document.querySelector('.container');
+    // container.innerHTML += createShopButton('S300');
     container.innerHTML += createGallerySection('S300', 'Black', 8);
     container.innerHTML += createGallerySection('S300', 'White', 8);
     container.innerHTML += createManualSection('S300');

products/s400.html

@@ -9,6 +9,7 @@
     loadImageHandlers();
 
     const container = document.querySelector('.container');
+    container.innerHTML += createShopButton('S400');
     container.innerHTML += createGallerySection('S400', 'Black', 13);
     container.innerHTML += createGallerySection('S400', 'White', 13);
     container.innerHTML += createManualSection('S400');

products/w01.html

@@ -9,6 +9,7 @@
     loadImageHandlers();
 
     const container = document.querySelector('.container');
+    container.innerHTML += createShopButton('W01');
     container.innerHTML += createGallerySection('W01', '', 8);
     container.innerHTML += createManualSection('W01');
     container.innerHTML += createInstallGuideSection('YOUR_W01_VIDEO_ID');