摘要
本文档提供了一个在 Laravel 电商平台中，为不同产品类型关联不同图片的方法。通过将产品创建和图片关联拆分为两个步骤，并利用 jQuery 插件 image-picker，简化了用户操作，并解决了在单个表单中处理复杂图片上传和关联的问题。最终，将图片 ID 存储在产品变体表中，方便后续查询和展示。
实现步骤
1. 产品信息录入
首先，创建一个用于录入产品信息的表单，包括产品名称、描述、价格、类型、颜色、重量、数量等字段。关键在于，暂时不处理产品类型对应的图片上传。
public function product_store(Request $request)
{
// ... (其他字段的处理)
if(!empty(implode($request->product_type))) {
$productId = Products::insertGetId([
// ... (产品基本信息)
]);
foreach ($request->product_type as $id => $key) {
ProductVariations::insert([
'product_id' => $productId,
'product_type' => $request->product_type[$id],
'product_color' => $request->product_color[$id],
'product_weight' => $request->product_weight[$id],
'product_variation_qty' => $request->product_qty[$id],
'product_variation_price' => $request->product_variation_price[$id],
'created_at' => Carbon::now()
]);
}
return redirect()->route('admin.product-variations-images-settings', ['id' => $productId])->with('notification', ['message' => 'Product Inserted!', 'alert-type' => 'success']);
} else {
// ... (没有产品类型时的处理)
return redirect()->route('admin.products')->with('notification', ['message' => 'Product Inserted!', 'alert-type' => 'success']);
}
}注意： 在 product_store 方法中，成功插入产品信息后，如果存在产品类型，则重定向到 admin.product-variations-images-settings 路由，并将产品 ID 作为参数传递。
2. 创建图片选择页面
创建一个新的视图，用于展示已上传的产品图片，并允许用户为每个产品类型选择对应的图片。
Product Variations Images
Select Images for Product Variations
关键点：
YxShop是国内首家ASP.NET免费开源商城购物系统,是易想团队自主研发的基于Asp.Net+C#+SQL的B2C网上商店系统，具有开源、高速、稳定、安全等特性，可自由添加频道，只要懂得网站常识的站长就可以轻松利用易想商城购物系统源码建立起专业的大型网上书店，点卡店、鲜花店、手机店、服装店、团购网等不同类型的网络b2c商城。易想商城为您提供了一整套的在线开店解决方案，已经为国内外千家网上商店提
- 使用 image-picker jQuery 插件，该插件可以将
- 遍历 productVariations，为每个产品类型创建一个
- 遍历 productImages，为每个图片创建一个
- 创建一个隐藏的 input 存储 productVariation 的 id，方便后续更新。
3. 处理图片选择
创建一个控制器方法，用于处理用户选择的图片，并将图片 ID 存储到 product_variations 表的 product_variation_image 字段中。
public function product_variations_images_settings($id)
{
$productVariations = ProductVariations::where('product_id', $id)->get();
$productImages = ProductImages::where('product_id', $id)->get();
return view('administrator.pages.products.product-variations', compact('productVariations','productImages'));
}
public function product_variations_images_store(Request $request)
{
$productVariationId = $request->id;
$productImageId = $request->product_variation_image;
$array = array_combine($productVariationId, $productImageId);
foreach ($array as $id => $key){
ProductVariations::findOrFail($id)->update([
'product_variation_image' => $key,
'updated_at' => Carbon::now()
]);
}
$notification = array(
'message' => 'Images Set!',
'alert-type' => 'success'
);
return redirect()->route('admin.products')->with($notification);
}关键点：
- 接收包含产品类型 ID 和对应图片 ID 的请求。
- 使用 ProductVariations::findOrFail($id)->update() 方法更新 product_variation_image 字段。
4. 路由配置
确保定义了以下路由：
- admin.product-variations-images-settings: 用于显示图片选择页面。
- admin.product-variations-images-store: 用于处理图片选择。
Route::get('/admin/product-variations-images-settings/{id}', 'ProductController@product_variations_images_settings')->name('admin.product-variations-images-settings');
Route::post('/admin/product-variations-images-store', 'ProductController@product_variations_images_store')->name('admin.product-variations-images-store');注意事项
- 确保 product_variations 表中存在 product_variation_image 字段，用于存储图片 ID。
- image-picker 插件需要在前端引入 jQuery。
- 图片上传功能需要单独实现，并将上传的图片信息存储到 product_images 表中。
- 可以根据实际需求，自定义图片选择页面的样式和交互。
- 错误处理和验证是必不可少的，需要根据实际情况进行添加。
总结
通过将产品创建和图片关联拆分为两个步骤，并利用 image-picker 插件，可以有效地解决为不同产品类型添加不同图片的问题。这种方法简化了用户操作，提高了用户体验，并且易于维护和扩展。最终，将图片 ID 存储在产品变体表中，方便后续查询和展示，为电商平台提供了更灵活的产品管理能力。
