WooCommerce微信小程序开发使用WooCommerce的原生Rest API，接口中是缺少一些必要的图片信息的，这里列举两个地方：
1. 产品接口中，所有的产品图片都只有原图URL，没有带上thumbnail和其他WordPress生成的尺寸：
通常商店管理员并没有太多图片的优化意识，会直接把多达几M的产品图上传。WooCommerce的主题多半会生成一些必要的小尺寸图片分别给产品列表以及购物车等地方加载，但Rest API中并不会有这些信息。微信小程序的产品列表页也是需要这些小图的，于是我们需要在接口中把这些小尺寸产品图也加入进去：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | add_filter("woocommerce_rest_prepare_product_object", "brain1981_prepare_product_images", 10, 3); function brain1981_prepare_product_images($response, $post, $request) { if (empty($response->data)) { return $response; } global $_wp_additional_image_sizes; foreach ($response->data['images'] as $key => $image) { foreach ($_wp_additional_image_sizes as $size => $value) { $image_info = wp_get_attachment_image_src($image['id'], $size); $response->data['images'][$key][$size] = $image_info[0]; } } return $response; } //from: https://blog.brain1981.com |
这样从原生接口中获取的图片信息就会添加所有WordPress和WooCommerce生成的其他尺寸图片地址，方便小程序在任何地方取用
2. 在订单接口中，产品信息里没有产品的图片信息。
订单接口中，产品信息都是放在名为line_items的数组中的，但这个对象数组里没有产品的图片信息，这样在订单页面中，就无法直接显示产品图片，会降低订单页面的体验。
为订单接口添加产品图片：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | add_filter( "woocommerce_rest_prepare_shop_order_object", "brain1981_rest_get_product_order_image", 10, 3 ); function brain1981_rest_get_product_order_image( $response, $object, $request ) { if( empty( $response->data ) ) return $response; $images = array(); foreach($response->data['line_items'] as $key => $productItems){ $productID = $productItems['product_id']; $variationID = $productItems['variation_id']; if($variationID == 0){//普通产品显示thumbnail $thumbnailID = get_post_meta( $productID, '_thumbnail_id', true); $attachment = wp_get_attachment_image_src($thumbnailID, 'woocommerce_thumbnail' ); } else {//可变产品显示变量图片 $variation = new WC_Product_Variation( $variationID ); $image_id = $variation->get_image_id(); $attachment = wp_get_attachment_image_src($image_id, 'woocommerce_thumbnail' ); } if($attachment){//如果没有图片，则显示一张默认图片 $image = $attachment[0]; } else { $image = get_template_directory_uri()."/images/logo.png"; } $response->data['line_items'][$key]['image'] = $image; } return $response; } //from: https://blog.brain1981.com |
这样获取的数据中就有了图片信息
总结：WooCommerce的Rest API为各种第三方前端提供了明确的开发方向，但其中确实有一些数据不够齐全的问题，好在官方文档非常简洁明了，缺了什么数据，文档一查便知。结合WordPress提供的钩子可以逐一解决这些问题，完善接口数据。
本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/2930.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。
本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。