WordPress教程

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.  
  10. 		if($variationID == 0){//普通产品显示thumbnail
  11. 			$thumbnailID = get_post_meta( $productID, '_thumbnail_id', true);
  12. 			$attachment = wp_get_attachment_image_src($thumbnailID, 'woocommerce_thumbnail' );
  13. 		} else {//可变产品显示变量图片
  14. 			$variation = new WC_Product_Variation( $variationID );
  15. 			$image_id = $variation->get_image_id();
  16. 			$attachment = wp_get_attachment_image_src($image_id, 'woocommerce_thumbnail' );
  17. 		}
  18. 		if($attachment){//如果没有图片,则显示一张默认图片
  19. 			$image = $attachment[0];
  20. 		} else {
  21. 			$image = get_template_directory_uri()."/images/logo.png";
  22. 		}
  23.  
  24. 		$response->data['line_items'][$key]['image'] = $image;
  25. 	}
  26. 	return $response;
  27. }

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

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!