WooCommerce 微信小程序开发使用 WooCommerce 的原生 Rest API,接口中是缺少一些必要的图片信息的,这里列举两个地方:
1. 产品接口中,所有的产品图片都只有原图 URL,没有带上 thumbnail 和其他 WordPress 生成的尺寸:
通常商店管理员并没有太多图片的优化意识,会直接把多达几 M 的产品图上传。WooCommerce 的主题多半会生成一些必要的小尺寸图片分别给产品列表以及购物车等地方加载,但 Rest API 中并不会有这些信息。微信小程序的产品列表页也是需要这些小图的,于是我们需要在接口中把这些小尺寸产品图也加入进去:
- 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;
- }
这样从原生接口中获取的图片信息就会添加所有 WordPress 和 WooCommerce 生成的其他尺寸图片地址,方便小程序在任何地方取用
2. 在订单接口中,产品信息里没有产品的图片信息。
订单接口中,产品信息都是放在名为 line_items 的数组中的,但这个对象数组里没有产品的图片信息,这样在订单页面中,就无法直接显示产品图片,会降低订单页面的体验。
为订单接口添加产品图片:
- 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;
- }
这样获取的数据中就有了图片信息
总结:WooCommerce 的 Rest API 为各种第三方前端提供了明确的开发方向,但其中确实有一些数据不够齐全的问题,好在官方文档非常简洁明了,缺了什么数据,文档一查便知。结合 WordPress 提供的钩子可以逐一解决这些问题,完善接口数据。
文章标题:WooCommerce微信小程序开发,为Rest API补充图片信息
文章链接:https://www.wuyanshuo.cn/1325.html
更新时间:2022年09月14日
本站资源均为两层压缩,第一层7z(后缀若为wys,请自行修改为7z)有解压密码;第二层zip或cbz,无解压密码,可直接使用漫画类软件程序查看;详情可参考解压教程。
本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:service@wuyanshuo.cn我们将第一时间处理! 资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。 所有资源仅限于参考和学习,版权归原作者所有,更多请阅读无言说网络服务协议。