らくうるカートの外部カート機能

らくうるカート / / Tips
rakuurucart

より詳しい情報発信やファンづくりの為にネットショップと別にブログを書かれている方も多いでしょう。
ブログで商品を紹介する際、商品ページのURLを載せるのが一般的だと思いますがブログ記事内から直接買い物カゴに誘導できる外部カート機能を利用する方法もあります。

らくうるカートの外部カート機能は商品管理で自動生成されるformコードをコピー＆ペーストで利用することができます。

外部カートの利用方法（らくうるカート）

最初にカートの共通設定をしておく

商品管理 > カートボタン共通設定

外部カート用の基本設定をしておきます。
商品名を掲示するのか、金額は表示するか、購入ボタンはテキストなのか画像を使うのか、など。

個別に設定することも出来ますが、ほとんどの場合同じ設定で利用されると思いますので、最初に決めておくと楽です。
共通設定をしていても、カート生成の際個別に編集出来ますのであまり難しく考える必要はありません。

外部カートのhtmlコードを取得する

商品一覧、または商品の個別編集をひらくと右端に「カート」のボタンがありますので、それをクリックすると基本設定に基づいた外部カートのコードが生成されます。

hogetshirt

このとき下にプレビューと編集機能が出ているので、個別編集したければそこで編集＆更新します。
あとは生成されたコードをコピーし、ブログ記事内など好きな場所にコードを貼り付ければカートが完成です。

ちなみに無料ブログ（Ameba、FC2など）利用の場合、運営会社によっては<form>タグの貼り付けが不可となっているようです。無料ブログを利用している場合は<form>が禁止タグに入っていないか確認しておきましょう。

下記の外部カート（HOGE Tシャツ）はサンプルですので動作しませんが、生成されるコードは実際のものを利用しています。

末尾の
<input name=”itemId” type=”hidden” value=”XXXXX” />
<input name=”shpHash” type=”hidden” value=”XXXXXXXXXXXXXXXXXXXXXXXX” />

がそれぞれ商品IDとお店識別のコードになっています（XXXX・・の部分）。

<form action="https://cart.raku-uru.jp/incart" method="post">
        <div style="font-size:16px; color:#333; margin-bottom:5px;" class="raku-cart-itemname">hoge Tシャツ</div>
        <div class="raku-cart-variation" style="margin-bottom:5px;">
            <label for="variationId" style="vertical-align: middle;">
                <select name="variationId" style="width:280px; height:40px;line-height: 30px;  border: 1px solid #666; background-color:#fff; font-size:16px; color:#333;">
                    <option value="MMMMMM" selected="selected">Mサイズ </option>
                    <option value="XLXLXL">XLサイズ </option>
                </select>
            </label>
        </div>
        <div class="raku-cart-quantity" style="margin-bottom:5px;">
            <label for="itemQuantity" style="vertical-align: middle;">
                <select name="itemQuantity" style="width:60px; height:36px;line-height: 30px;  border: 1px solid #444; background-color:#fff; font-size:16px; color:#333;">
                    <option value="1" selected="selected">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </label>
        </div>
        <div class="raku-cart-button">
            <input type="submit" value="カートに入れる" style="width:240px;height:36px;line-height:30px;border:1px solid #ddd; background-color:#696969;font-size:16px;color:#fff;cursor:pointer;">
        </div>
    <input type="hidden" name="itemId" value="XXXXX">
    <input type="hidden" name="shpHash" value="XXXXXXXXXXXXXXXXXXX">
</form>

生成されるカート（一部改変あり・動作はしません）
↓

hoge Tシャツ


関連投稿