WooCommerce微信小程序开发,为Rest API补充图片信息

WooCommerce 微信小程序开发使用 WooCommerce 的原生 Rest API,接口中是缺少一些必要的图片信息的,这里列举两个地方:

1. 产品接口中,所有的产品图片都只有原图 URL,没有带上 thumbnail 和其他 WordPress 生成的尺寸:
WooCommerce微信小程序开发,为Rest API补充图片信息
通常商店管理员并没有太多图片的优化意识,会直接把多达几 M 的产品图上传。WooCommerce 的主题多半会生成一些必要的小尺寸图片分别给产品列表以及购物车等地方加载,但 Rest API 中并不会有这些信息。微信小程序的产品列表页也是需要这些小图的,于是我们需要在接口中把这些小尺寸产品图也加入进去:

  1. add_filter("woocommerce_rest_prepare_product_object", "brain1981_prepare_product_images", 10, 3);
  2. function brain1981_prepare_product_images($response, $post, $request) {
  3. if (empty($response->data)) {
  4. return $response;
  5. }
  6. global $_wp_additional_image_sizes;
  7. foreach ($response->data['images'] as $key => $image) {
  8. foreach ($_wp_additional_image_sizes as $size => $value) {
  9. $image_info = wp_get_attachment_image_src($image['id'], $size);
  10. $response->data['images'][$key][$size] = $image_info[0];
  11. }
  12. }
  13. return $response;
  14. }

这样从原生接口中获取的图片信息就会添加所有 WordPress 和 WooCommerce 生成的其他尺寸图片地址,方便小程序在任何地方取用
WooCommerce微信小程序开发,为Rest API补充图片信息
2. 在订单接口中,产品信息里没有产品的图片信息。
订单接口中,产品信息都是放在名为 line_items 的数组中的,但这个对象数组里没有产品的图片信息,这样在订单页面中,就无法直接显示产品图片,会降低订单页面的体验。
WooCommerce微信小程序开发,为Rest API补充图片信息
为订单接口添加产品图片:

  1. add_filter( "woocommerce_rest_prepare_shop_order_object", "brain1981_rest_get_product_order_image", 10, 3 );
  2. function brain1981_rest_get_product_order_image( $response, $object, $request ) {
  3. if( empty( $response->data ) )
  4. return $response;
  5. $images = array();
  6. foreach($response->data['line_items'] as $key => $productItems){
  7. $productID = $productItems['product_id'];
  8. $variationID = $productItems['variation_id'];
  9. if($variationID == 0){//普通产品显示thumbnail
  10. $thumbnailID = get_post_meta( $productID, '_thumbnail_id', true);
  11. $attachment = wp_get_attachment_image_src($thumbnailID, 'woocommerce_thumbnail' );
  12. } else {//可变产品显示变量图片
  13. $variation = new WC_Product_Variation( $variationID );
  14. $image_id = $variation->get_image_id();
  15. $attachment = wp_get_attachment_image_src($image_id, 'woocommerce_thumbnail' );
  16. }
  17. if($attachment){//如果没有图片,则显示一张默认图片
  18. $image = $attachment[0];
  19. } else {
  20. $image = get_template_directory_uri()."/images/logo.png";
  21. }
  22. $response->data['line_items'][$key]['image'] = $image;
  23. }
  24. return $response;
  25. }

这样获取的数据中就有了图片信息

总结:WooCommerce 的 Rest API 为各种第三方前端提供了明确的开发方向,但其中确实有一些数据不够齐全的问题,好在官方文档非常简洁明了,缺了什么数据,文档一查便知。结合 WordPress 提供的钩子可以逐一解决这些问题,完善接口数据。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress给登陆页面添加文字提示框

2022-9-14 1:58:10

WordPress教程

WooCommerce根据付款方式不同跳转到不同的感谢页面

2022-9-14 10:58:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索