javascript - 在 WP Rest API 中获取基于 WooCommerce 产品 URL 的 features_image

Question

我在 React 应用程序中使用 WP Rest API。我正在尝试访问 Rest API 中的产品特色图片。它已经带有 features_media id，例如:featured_media: 15195 ，但这并不能真正帮助我展示图像。我一直在尝试弄清楚如何在 Rest API 中添加一个字段来返回产品图片 URL。
有没有办法做到这一点，或者有什么有用的资源？

Answer 1

您有 两个您可以使用的选项 - 您可以修改当前产品 rest api拥有图片的 URL url一通电话回复或者您可以修改您的functions.php通过在下面添加此代码:
修改functions.php

//Register new route - fetch product and its image together in one request
function product_route() {
    register_rest_field( 
        'product',
        'featured_image_url',
        array(
            'get_callback'    => 'getImagesUrl',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}

add_action( 'rest_api_init', 'product_route' );

//get images with URL
function getImagesUrl( $object, $field_name, $request ) {
    //get products image URL
    $product_img_url = wp_get_attachment_image_src( get_post_thumbnail_id( $object->id ), 'large' );
    
    //return image url
    return $product_img_url['0'];
}

将上述代码添加到functions.php中后，您可以像这样在单个请求中使用fetch

fetch(state.source.api + "/wp/v2/product")
  .then((response) => response.json())
  .then((data) => {
    //setProducts(data); //set state
});

使用嵌套的 fetch API 调用来获取产品 URL
如果您想了解更多关于产品图片的详细信息 URL那么您可以使用 wordpress媒体 url获取端点 featured_image您的网址 woo-commerce产品。
将此代码添加到您的 fetch 中要求。首先获取所有 products和 featured_media然后循环遍历它并获取所有 source_url - 您可以将基于产品 ID 的网址保存在 new array 中在您的 react状态

fetch(state.source.api + "/wp/v2/product")
  .then((response) => response.json())
  .then((data) => {
    //setProducts(data); //set state
    //loop through each data to get featured_media number
    data.forEach((x) => {
      //get all urls using featured_media
        fetch(state.source.api + "/wp/v2/media/"+x.featured_media)
        .then((response) => response.json())
        .then((o) => {
          //get all urls OR store to react State
          console.log(o.source_url)
      });
    })
});