设计一个Zblog程序的商品卡片插件

设计一个Zblog的商品卡片插件，主要功能是在文章页面展示商品，包括图片、名称、价格和购买按钮。后端要有商品管理系统，可以增删商品，前端样式要固定，自适应但布局不变，产品名称过长时隐藏。还有在编辑文章时能通过点击插入短代码。

这个Zblog商品卡片插件的开发可以分为以下几个步骤，我将为你提供详细的技术方案：

插件目录结构：

/zb_users/
    └── plugin/
        └── ProductCard/
            ├── plugin.xml          # 插件配置文件
            ├── plugin.php         # 主入口文件
            ├── product_admin.php   # 后台管理界面
            ├── product_select.php  # 商品选择对话框
            ├── include/
            │   ├── product.class.php # 商品类定义
            │   └── functions.php   # 辅助函数
            ├── css/
            │   └── style.css       # 样式文件
            └── js/
                └── editor.js       # 编辑器扩展脚本

一、数据库设计（在插件激活时创建）

sql
CREATE TABLE zbp_product (
  product_id INT NOT NULL AUTO_INCREMENT,
  product_name VARCHAR(255) NOT NULL,
  product_price DECIMAL(10,2) NOT NULL,
  product_image VARCHAR(255) NOT NULL,
  product_url VARCHAR(255) NOT NULL,
  PRIMARY KEY (product_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

二、后端管理系统开发

1. 插件管理界面（添加到Zblog后台）

php
function Product_Admin() {
    global $zbp;
    if ($zbp->CheckPlugin('ProductCard')) {
        Add_Action_Plugin('Admin_LeftMenu', 'Product_AddMenu');
    }
}
function Product_AddMenu() {
    global $zbp;
    echo '<a href="'.$zbp->host.'zb_users/plugin/ProductCard/product_admin.php" class="leftmenu-main"><span class="m-left">商品管理</span></a>';
}

2. 商品管理功能（product_admin.php核心代码）：

php
// 添加商品处理
if (isset($_POST['add_product'])) {
    $product = new Product();
    $product->Name = trim($_POST['product_name']);
    $product->Price = (float)$_POST['product_price'];
    $product->Image = UploadFile('product_image'); // 文件上传函数
    $product->Url = trim($_POST['product_url']);
    $product->Save();
}
// 删除商品处理
if (isset($_GET['del'])) {
    $product = new Product($_GET['del']);
    if ($product->ID > 0) {
        $product->Delete();
    }
}

三、前端展示模块

1. 短代码解析：

php
function Product_Shortcode($atts) {
    global $zbp;
    $id = (int)$atts['id'];
    $product = new Product($id);
    
    $html = '<div class="product-card">';
    $html .= '<div class="product-image"><img src="'.$product->Image.'"></div>';
    $html .= '<div class="product-info">';
    $html .= '<h3 class="product-name">'.$product->Name.'</h3>';
    $html .= '<div class="price-area">';
    $html .= '<span class="product-price">¥'.$product->Price.'</span>';
    $html .= '<a href="'.$product->Url.'" class="buy-button">立即购买</a>';
    $html .= '</div></div></div>';
    
    return $html;
}
Add_Filter_Plugin('Filter_Plugin_Zbp_Show','Product_RegisterShortcode');

2. CSS样式（确保响应式布局）：

css
.product-card {
    display: flex;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #eee;
    padding: 15px;
}
.product-image {
    flex: 0 0 40%;
    margin-right: 20px;
}
.product-image img {
    width: 100%;
    height: auto;
}
.product-info {
    flex: 1;
}
.product-name {
    font-size: 18px;
    margin: 0 0 15px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.price-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.buy-button {
    background: #ff4444;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
}
@media (max-width: 768px) {
    .product-card {
        flex-direction: column;
    }
    .product-image {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

四、编辑器集成

1. 添加编辑器按钮：

javascript
$(document).ready(function() {
    var productBtn = '<button type="button" id="btnProduct" class="editor-button" title="插入商品"><i class="icon-shopping-cart"></i></button>';
    $('#divEditor2 .editbar').append(productBtn);
    
    $('#btnProduct').click(function() {
        $.get(serverurl + "zb_users/plugin/ProductCard/product_select.php", 
        function(data) {
            ShowDialog(data, '选择商品');
        });
    });
});

2. 商品选择对话框（product_select.php）：

php
$products = $zbp->GetProductList();
foreach ($products as $product) {
    echo '<div class="product-item" onclick="insertProduct('.$product->ID.')">';
    echo '<span>'.$product->Name.'</span>';
    echo '<span class="price">¥'.$product->Price.'</span>';
    echo '</div>';
}

五、使用流程

1. 后台管理：

通过左侧菜单【插件管理】找到设计的这个商品卡片名称插件进入商品管理

添加商品：填写名称、价格、上传图片、购买链接

管理现有商品（编辑/删除）

2. 文章插入：

在编辑器点击商品按钮，弹出对话框选择商品。

自动插入短代码：[product id="1"]

3. 前端展示：

自动渲染为商品卡片，保持布局一致，自适应图片尺寸，长名称自动截断。

这个方案实现了：

1. 完整的商品管理系统

2. 响应式但布局稳定的前端展示

3. 可视化文章插入功能

4. 安全的数据处理机制

5. 自动化的图片上传和存储

开发完成后需要进行以下测试：

1. 跨设备样式测试

2. 高并发压力测试

3. SQL注入防护测试

4. 图片上传格式验证

5. 短代码容错处理

建议配合Zblog的缓存插件使用以提升性能，并定期备份数据库确保数据安全。