Yahoo!ショッピング店舗オーナーが Yahoo!ショッピング API を使って自店ホームページに商品ページを作成する

2023.5.2
「Yahoo!ショッピングカート」部分は現在動作しません。「商品情報」は取得できます。

-------------------------------------------------------------
Yahoo!ショッピング店舗オーナーが Yahoo!ショッピング API を使って自店ホームページ(WordPress)に簡単に商品ページ(商品情報＋Yahoo!ショッピングカート)を作成したい方向けの記事です。

Yahoo!ショッピング API で取得した商品情報及びYahoo!ショッピングカートを表示するショートコードを作成し、各ページにそのショートコードを商品コードと共に貼り付けます。

[my_getItem item_code=商品コード]

自社サイトに掲載する Yahoo!ショッピングの商品情報は、 Yahoo!ショッピング API で取得可能です。
商品コード検索(商品詳細)を使って商品情報を取得します。
商品コード検索(商品詳細)はYID連携不要なので簡単に扱えます。

Yahoo!デベロッパーネットワーク

ショッピング:商品コード検索(商品詳細) - Yahoo!デベロッパーネットワーク

https://developer.yahoo.co.jp/webapi/shopping/shopping/v1/itemlookup.html

Yahoo!デベロッパーネットワークで公開している商品コード検索(商品詳細) APIは、各ストアの商品がもつユニークなコード（商品コード）をキーに個別の商品情報を取得する機能を提供しています。

Yahoo!ショッピングカートの html 、 css 、 JavaScript は『ネットショップ語り』さんを参考にさせていただきました。

ネットショップ語り

Yahooショッピングのカートを外部化する方法

https://ecmemo.net/yahoo-external-cart

Yahooショッピングのトリプルページや外部サイトにYahooショッピングのカートを設置したい方向け。カートを外部化して設置することで購入経路が増え、売上UPの効果が見込めます。それでは詳しく解説していきます。Android版PayPayモ

ありがとうございました。

● functions.php に以下を追記

// Yahoo!ショッピング 商品ページ表示
// [my_getItem item_code=商品コード]
function my_getItemFunc( $atts ) {
	extract( shortcode_atts( array(
		'item_code' => '',
	), $atts ) );

	if ( $item_code == '' ) {
		return '商品コードが未指定です';
	}

	$appid = 'アプリケーションID'; // アプリケーションID
	$storeid = 'ストアID'; // ストアID
	$itemcode = $storeid . '_' . $item_code; // 商品コード（ストアID_ストア商品コード）
	$url = 'https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemLookup?responsegroup=medium&appid=' . $appid . '&itemcode=' . $itemcode;

	$options = [
		'http' => [
			'method'  => 'GET',
			'timeout' => 3, // タイムアウト時間
		]
	];

	$json = file_get_contents( $url, false, stream_context_create( $options ) );

	// Falseならエラー
	if ( $json === false ) {
		return 'file_get_contents error';
	}

	// 200以外のステータスコードはエラー
	preg_match( '/HTTP\/1\.[0|1|x] ([0-9]{3})/', $http_response_header[0], $matches );
	$statusCode = (int)$matches[1];
	if ( $statusCode !== 200 ) {
		return 'エラー ステータスコード:' . $statusCode;
    }

	$jsonarray = json_decode( $json, true );
	// totalResultsReturned が1で無いときは非公開とみなす
	if ( $jsonarray['ResultSet']['totalResultsReturned'] != 1 ) {
		return '販売停止中です';
	}
	$fprice = number_format( $jsonarray['ResultSet'][0]['Result'][0]['Price']['_value'] );

	$html = <<<EOD
<p>商品名：{$jsonarray['ResultSet'][0]['Result'][0]['Name']}</br>
商品コード：{$jsonarray['ResultSet'][0]['Result'][0]['Code']}</p>
<p style="font-size: 18pt; color: #ff0000;">{$jsonarray['ResultSet'][0]['Result'][0]['Headline']}</p>
<p>{$jsonarray['ResultSet'][0]['Result'][0]['Description']}</p>
<p style="color: #ff0000;">販売価格：{$fprice}円(税込)</p>

<form method="post" name="addCart" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form" target="_blank" class="cart" accept-charset="EUC-JP">
	<input name="vwcatalog" value="$storeid" type="hidden">
	<input name="vwitem" value="$item_code" type="hidden">
	<label for="vwquantity">数量</label>
	<div class="input_area">
	<input name="vwquantity" class="counter1" value="1" maxlength="3" onclick="this.select(0, this.value.length);" type="number" data-min="1" data-max="99" pattern="d*" aria-label="数量" aria-describedby="vwquantity" id="vwquantity">
	<button type="button" class="btnspinner" data-cal="-1" data-target=".counter1" style="margin-left: auto;">－</button>
	<button type="button" class="btnspinner" data-cal="1" data-target=".counter1" style="margin-left: 7px;">＋</button>
	</div>
	<button type="submit" class="btn btn-danger" onclick="YAHOO.JP.sc.addCart(YAHOO.JP.sc.products, YAHOO.JP.sc.prop22);">カートに入れる</button>
</form>
EOD;

	return $html;
}
add_shortcode( 'my_getItem', 'my_getItemFunc' );


// カート用 scripts
function my_spinner_scripts() {
	wp_enqueue_script( 'spinner', get_stylesheet_directory_uri().'/js/spinner.js', array( 'jquery' ), NULL, true );
}
add_action( 'wp_enqueue_scripts', 'my_spinner_scripts' );

// Yahoo!ショッピング商品ページ表示

// [my_getItem item_code=商品コード]

function my_getItemFunc( $atts ) {

extract( shortcode_atts( array(

'item_code' => '',

), $atts ) );

if ( $item_code == '' ) {

return '商品コードが未指定です';

}

$appid = 'アプリケーションID'; // アプリケーションID

$storeid = 'ストアID'; // ストアID

$itemcode = $storeid . '_' . $item_code; // 商品コード（ストアID_ストア商品コード）

$url = 'https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemLookup?responsegroup=medium&appid=' . $appid . '&itemcode=' . $itemcode;

$options = [

'http' => [

'method' => 'GET',

'timeout' => 3, // タイムアウト時間

]

];

$json = file_get_contents( $url, false, stream_context_create( $options ) );

// Falseならエラー

if ( $json === false ) {

return 'file_get_contents error';

}

// 200以外のステータスコードはエラー

preg_match( '/HTTP\/1\.[0|1|x] ([0-9]{3})/', $http_response_header[0], $matches );

$statusCode = (int)$matches[1];

if ( $statusCode !== 200 ) {

return 'エラーステータスコード:' . $statusCode;

}

$jsonarray = json_decode( $json, true );

// totalResultsReturned が1で無いときは非公開とみなす

if ( $jsonarray['ResultSet']['totalResultsReturned'] != 1 ) {

return '販売停止中です';

}

$fprice = number_format( $jsonarray['ResultSet'][0]['Result'][0]['Price']['_value'] );

$html = <<<EOD

<p>商品名：{$jsonarray['ResultSet'][0]['Result'][0]['Name']}</br>

商品コード：{$jsonarray['ResultSet'][0]['Result'][0]['Code']}</p>

<p style="font-size: 18pt; color: #ff0000;">{$jsonarray['ResultSet'][0]['Result'][0]['Headline']}</p>

<p>{$jsonarray['ResultSet'][0]['Result'][0]['Description']}</p>

<p style="color: #ff0000;">販売価格：{$fprice}円(税込)</p>

</div>

<button type="submit" class="btn btn-danger" onclick="YAHOO.JP.sc.addCart(YAHOO.JP.sc.products, YAHOO.JP.sc.prop22);">カートに入れる</button>

</form>

EOD;

return $html;

}

add_shortcode( 'my_getItem', 'my_getItemFunc' );

// カート用 scripts

function my_spinner_scripts() {

wp_enqueue_script( 'spinner', get_stylesheet_directory_uri().'/js/spinner.js', array( 'jquery' ), NULL, true );

}

add_action( 'wp_enqueue_scripts', 'my_spinner_scripts' );

● css ファイルに以下を追記

.cart label {
  font-size: .8rem;
  letter-spacing: .12em;
  display: inline-block;
  margin-bottom: .5rem;
}

.cart .input_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.8rem;
}

.input_area input[type="number"] {
  font-size: 1.2rem;
  max-width: 5em;
  padding: .6rem;
  background-color: #f5f5f5;
  border: none;
  box-shadow: 0 2px 0 0 #808080;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* FireFox，IEのデフォルトのスピナーを消す */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Chrome、Safariのデフォルトのスピナーを消す */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]:focus {
  outline: 0;
}

.btnspinner {
  padding: .6rem .85rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  /* テキストを選択できないようにする */
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.btnspinner:hover {
	background-color: #24890d;
}
.btnspinner:active {
	background-color: #24890d;
}
.btnspinner:focus {
	background-color: #24890d;
}

.btnspinner:focus {
  outline: 0;
  border-color: #6c757d;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, .5);
}

button[type="submit"] {
  width: 100%;
  padding: .9em .5em;
  border-radius: 4px;
  color: white;
  border: none;
  letter-spacing: .12em;
  cursor: pointer;
}

button[type="submit"]:hover {
}

button[type="submit"]:focus {
  outline: 0;
}

.cart label {

font-size: .8rem;

letter-spacing: .12em;

display: inline-block;

margin-bottom: .5rem;

}

.cart .input_area {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1.8rem;

}

.input_area input[type="number"] {

font-size: 1.2rem;

max-width: 5em;

padding: .6rem;

background-color: #f5f5f5;

border: none;

box-shadow: 0 2px 0 0 #808080;

border-top-left-radius: 4px;

border-top-right-radius: 4px;

}

/* FireFox，IEのデフォルトのスピナーを消す */

input[type="number"]::-webkit-outer-spin-button,

input[type="number"]::-webkit-inner-spin-button {

-webkit-appearance: none;

margin: 0;

}

/* Chrome、Safariのデフォルトのスピナーを消す */

input[type="number"] {

-moz-appearance: textfield;

}

input[type="number"]:focus {

outline: 0;

}

.btnspinner {

padding: .6rem .85rem;

border: 1px solid #ccc;

border-radius: 4px;

cursor: pointer;

/* テキストを選択できないようにする */

-ms-user-select: none;

-moz-user-select: -moz-none;

-khtml-user-select: none;

-webkit-user-select: none;

user-select: none;

}

.btnspinner:hover {

background-color: #24890d;

}

.btnspinner:active {

background-color: #24890d;

}

.btnspinner:focus {

background-color: #24890d;

}

.btnspinner:focus {

outline: 0;

border-color: #6c757d;

box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, .5);

}

button[type="submit"] {

width: 100%;

padding: .9em .5em;

border-radius: 4px;

color: white;

border: none;

letter-spacing: .12em;

cursor: pointer;

}

button[type="submit"]:hover {

}

button[type="submit"]:focus {

outline: 0;

}

●テーマに /js/spinner.js を追加

( function( $ ) {

  var arySpinnerCtrl = [];
  var spin_speed = 20; //変動スピード

  //長押し押下時
  $('.btnspinner').on('touchstart mousedown click', function(e) {
    if (arySpinnerCtrl['interval']) return false;
    var target = $(this).data('target');
    arySpinnerCtrl['target'] = target;
    arySpinnerCtrl['timestamp'] = e.timeStamp;
    arySpinnerCtrl['cal'] = Number($(this).data('cal'));
    //クリックは単一の処理に留める
    if (e.type == 'click') {
      spinnerCal();
      arySpinnerCtrl = [];
      return false;
    }
    //長押し時の処理
    setTimeout(function() {
      //インターバル未実行中 + 長押しのイベントタイプスタンプ一致時に計算処理
      if (!arySpinnerCtrl['interval'] && arySpinnerCtrl['timestamp'] == e.timeStamp) {
        arySpinnerCtrl['interval'] = setInterval(spinnerCal, spin_speed);
      }
    }, 500);
  });

  //長押し解除時 画面スクロールも解除に含む
  $(document).on('touchend mouseup scroll', function(e) {
    if (arySpinnerCtrl['interval']) {
      clearInterval(arySpinnerCtrl['interval']);
      arySpinnerCtrl = [];
    }
  });

  //変動計算関数
  function spinnerCal() {
    var target = $(arySpinnerCtrl['target']);
    var num = Number(target.val());
    num = num + arySpinnerCtrl['cal'];
    if (num > Number(target.data('max'))) {
      target.val(Number(target.data('max')));
    } else if (Number(target.data('min')) > num) {
      target.val(Number(target.data('min')));
    } else {
      target.val(num);
    }
  }
})( jQuery );

( function( $ ) {

var arySpinnerCtrl = [];

var spin_speed = 20; //変動スピード

//長押し押下時

$('.btnspinner').on('touchstart mousedown click', function(e) {

if (arySpinnerCtrl['interval']) return false;

var target = $(this).data('target');

arySpinnerCtrl['target'] = target;

arySpinnerCtrl['timestamp'] = e.timeStamp;

arySpinnerCtrl['cal'] = Number($(this).data('cal'));

//クリックは単一の処理に留める

if (e.type == 'click') {

spinnerCal();

arySpinnerCtrl = [];

return false;

}

//長押し時の処理

setTimeout(function() {

//インターバル未実行中 + 長押しのイベントタイプスタンプ一致時に計算処理

if (!arySpinnerCtrl['interval'] && arySpinnerCtrl['timestamp'] == e.timeStamp) {

arySpinnerCtrl['interval'] = setInterval(spinnerCal, spin_speed);

}

}, 500);

});

//長押し解除時画面スクロールも解除に含む

$(document).on('touchend mouseup scroll', function(e) {

if (arySpinnerCtrl['interval']) {

clearInterval(arySpinnerCtrl['interval']);

arySpinnerCtrl = [];

}

});

//変動計算関数

function spinnerCal() {

var target = $(arySpinnerCtrl['target']);

var num = Number(target.val());

num = num + arySpinnerCtrl['cal'];

if (num > Number(target.data('max'))) {

target.val(Number(target.data('max')));

} else if (Number(target.data('min')) > num) {

target.val(Number(target.data('min')));

} else {

target.val(num);

}

})( jQuery );