商品がお気に入りに追加されているかどうかを示す真偽値の変数タグを使用することで、「クリック（タップ）でお気に入りに追加し、再度のクリック（タップ）で削除する」ボタンの実装が可能です。
商品がお気に入りに追加されているかどうかを示す真偽値の変数タグ
|
商品詳細ページ |
$item.is_favorite |
| カテゴリページ | $category.item.list[i].is_favorite |
| 検索結果ページ | $search.item.list[i].is_favorite |
| まとめ買い割引一覧 | $bulk.item.list[i].is_favorite |
「クリック（タップ）でお気に入りに追加し、再度のクリック（タップ）で削除する」ボタンは、デザインテンプレート【Complete】に実装されています。（2024年11月以降）
実装に必要なソース（HTML、CSS、JavaScript）は、デザインテンプレート【Complete】の初期値のソースを参照してください。
ショップデザイン / テンプレート選択・編集 / クリエイターモード-デザインセット一覧
に【Complete】のデザインをひとつ追加して、編集画面にすすむと確認することができます。
＜CSS＞
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」に記述してください。
ソース例）
.item-list-image {
position: relative;
}
.favorite-wrap {
display: flex;
align-items: baseline;
}
.favorite-icon:after {
font-family: 'Font Awesome 5 Free';
content: "\f004";
font-size: 24px;
font-weight: 900;
margin-left: 14px;
margin-right: 4px;
-webkit-text-stroke: 1px #fff;
}
.favorite-icon.hide {
display: none;
}
.favorite-on {
color: #ff7683;
}
.favorite-off {
color: #E6E6E6;
}
.item-list-image {
position: relative;
}
.item-list-favorite {
position: absolute;
top: 6px;
right: 4px;
}
＜JavaSctipt＞
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「JavaScript」に記述してください。
ソース例）
function MakeShop_afterListFavoriteEntry(data) {
if (!data.result) {
data.method.modal(data.error.message);
return false;
}
$('a[href="' + data.source + '"]').addClass('hide').siblings('.favorite-on').removeClass('hide');
return false;
}
function MakeShop_afterListFavoriteRemove(data) {
if (!data.result) {
data.method.modal(data.error.message);
return false;
}
$('a[href="' + data.source + '"]').addClass('hide').siblings('.favorite-off').removeClass('hide');
return false;
}
＜HTML＞
◆商品詳細
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細 「HTML」
「お気に入りに追加」を表示させたい位置に記述してください。
バリエーションの設定が無い場合
ソース例）
<{if $item.is_favorite}>
<a href="<{$item.favorite_remove_url}>"></a>
<{else}>
<a href="<{$item.favorite_entry_url}>"></a>
<{/if}>
バリエーションを項目ごとに表示（SKU）する場合
バリエーションのループ <{section name=i loop=$item.option_sku.list}>～<{/section}>
の中に記述してください。
ソース例）
<{if $item.option_sku.list[i].is_favorite}>
<a href="<{$item.option_sku.list[i].favorite_remove_url}>"></a>
<{else}>
<a href="<{$item.option_sku.list[i].favorite_entry_url}>"></a>
<{/if}>
◆商品カテゴリー
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品カテゴリー 「HTML」
「お気に入りに追加」を表示させたい位置に記述してください。
ソース例）
<div class="favorite item-list-favorite">
<a href="<{$categor.item.list[i].favorite_entry_url}>" class="favorite-icon favorite-off <{if $categor.item.list[i].is_favorite}>hide<{/if}>"></a>
<a href="<{$categor.item.list[i].favorite_remove_url}>" class="favorite-icon favorite-on <{if !$categor.item.list[i].is_favorite}>hide<{/if}>"></a>
</div>
◆商品検索結果
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品検索結果 「HTML」
「お気に入りに追加」を表示させたい位置に記述してください。
ソース例）
<div class="favorite item-list-favorite">
<a href="<{$search.item.list[i].is_favorite_entry_url}>" class="favorite-icon favorite-off <{if $search.item.list[i].is_favorite}>hide<{/if}>"></a>
<a href="<{$search.item.list[i].is_favorite_remove_url}>" class="favorite-icon favorite-on <{if !$search.item.list[i].is_favorite}>hide<{/if}>"></a>
</div>
◆まとめ買い割引一覧
ショップデザイン / テンプレート選択・編集 / クリエイターモード / まとめ買い割引 「HTML」
「お気に入りに追加」を表示させたい位置に記述してください。
ソース例）
<div class="favorite item-list-favorite">
<a href="<{$bulk.item.list[i].is_favorite_entry_url}>" class="favorite-icon favorite-off <{if $bulk.item.list[i].is_favorite}>hide<{/if}>"></a>
<a href="<{$bulk.item.list[i].is_favorite_remove_url}>" class="favorite-icon favorite-on <{if !$bulk.item.list[i].is_favorite}>hide<{/if}>"></a>
</div>
◆ハートのアイコンが出ない場合
各ページの<head>～</head>内にアイコンフォントの表示に必要なHTMLを記述してください。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
◆新商品・おすすめ商品・スペシャル商品・最近チェックした商品・ランキング・商品グループ・カテゴリーのおすすめ商品
変数タグがないため、「お気に入りに追加」を設置できません。