ゆるいイラストここにあり。

SUZURI APIとPHP cURLを使ってグッズの一覧ページを作った

2022/1/23 | WEB, お知らせ, プログラミング

<広告>

イラストレーターのハセガワ（@h_hasegawa8）です。

SUZURIのAPIとPHPのcURLを使ってグッズの一覧ページを作ったのでそのお知らせと、ご紹介です。

（現在はページを閉じました。）

SUZURI APIとPHP cURLを使ってグッズの一覧ページを作った

PHPでSUZURIのAPIを叩く

オモイデから50アイテムを取得するコードです。

// functions.php
function view_suzuri_products( $content ) {
    if( is_page("goods") ) {
        list($request_url, $context) = gen_param_to_suzuri(50);
        $products = get_suzuri_products($request_url, $context);
        $content = $content.'<div class="list-suzuri-goods-page">';
        foreach($products as $product) {
            $content = $content.'<div class="suzuri-product">';
            $content = $content.'<a href="'.$product->sampleUrl.'" target="_blank">';
            $content = $content.'<img src="'.$product->sampleImageUrl.'" alt="'.$product->title.'">';
            $content = $content.'<p>'.$product->title.'</p>';
            $content = $content.'</a>';
            $content = $content.'</div>';
        }
        $content = $content.'</div>';
        $content = $content.'<p class="to-suzuri"><a href="https://suzuri.jp/taroimo-tarooo" target="_blank">SUZURIでもっと見る>>></a></p>';
    }
    return $content;
}
add_filter( 'the_content', 'view_suzuri_products');
function gen_param_to_suzuri( $limit ) {
    $endpoint = "https://suzuri.jp/api/v1/choices/<オモイデのID>/products";
    $params = array(
        "userName" => "<ユーザー名>",
        "limit" => $limit
    );
    $request_url = $endpoint.'?'.http_build_query($params);
    
    $context = array(
        'http' => array(
            'method' => 'GET' ,
            'header' => array(
                'Authorization: Bearer <APIのキー>',
            ),
        ),
    );
    return array($request_url, $context);
}
function get_suzuri_products( $request_url, $context ) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $request_url);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $context['http']['method']);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $context['http']['header']);
    $curl_result = curl_exec($ch);
    curl_close($ch);
    
    $curl_result = json_decode($curl_result, true);
    $products = json_encode($curl_result['products']);
    return json_decode($products);
}

ページのデザインはCSS

一覧表示させるCSSです。

スマホやタブレットでは1列に表示するアイテムの数を変更します。

/* style.css */
.list-suzuri-goods-page {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.suzuri-product {
    width: calc(100% / 4 - 30px);
    margin-bottom: 30px;
    text-align: center;
}
@media screen and (max-width: 400px) {
    .suzuri-product {
        width: calc(100% / 2 - 30px);
    }
}
@media screen and (min-width: 401px) and (max-width: 800px) {
    .suzuri-product {
        width: calc(100% / 3 - 30px);
    }
}

<広告>

<広告>