WordPress

【WordPress】プラグインを使わずにカート機能を自作する方法

悩んでいる人
悩んでいる人

「WordPressでネットショップを自作したい」
「カート機能をプラグイン無しで実装したい」

この記事は上記のような方の参考になるかと思います。

この記事では、WordPressでプラグインを使わずにカート機能を実装する方法をまとめています。

ネットショップサイトを作成する際に、プラグインを使わずにカートを自作する必要があったため実装の手順をまとめました。

完成イメージは下記のような商品ページから、「カートに入れる」を押すとカートに商品が入り
single.php(商品ページ)

カートページからカートの商品個数を変更したり、削除することができるようにします。
page-cart.php(カートページ)

商品ページにフォームを追加する

まず商品ページに、商品をカートに追加するためのフォームを用意します。

商品ページとなる「single.php」を用意し、フォームを実装します。

<div class="item_wrap">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class='item_wrap_img'>
      <?php the_post_thumbnail('large'); ?>
    </div>
    <div class='item_wrap_innner'>
      <h1>
        <?php the_title(); ?>
      </h1>
      <div>
        <p>
          <?php if(get_post_meta($post->ID, 'item_price', true)): ?>
            <?php echo get_post_meta($post->ID, 'item_price', true);?>円(税込 <?php echo get_post_meta($post->ID, 'item_price', true) * 1.08;?>円)
          <?php endif;?>
        </p>
        <p class='sentence'><?php the_content(); ?></p>
        <p>アレルギー:<?php echo get_post_meta($post->ID, 'item_allergies', true); ?></p>

        <!-- ここからフォーム、必要情報を値として受け渡す-->
        <form action="<?php echo get_page_link(2215)?>" method="post">
          <div>
            <span>数量</span>
            <input type="number" value="1"  min="1" name="num">
          </div>
          <div>
            <input type="hidden" name="item_id" value="<?php echo get_the_ID()?>">
            <input type="hidden" name="price" value="<?php echo get_post_meta($post->ID, 'item_price', true);?>">
            <input type="submit" value="カートに入れる">
          </div>
        </form>
        <!-- ここまでフォーム -->

      </div>
    </div>
  <?php endwhile; endif; ?>
</div>

フォームには「カートに入れる」を押した際にカートページに遷移し、商品個数、商品の値段、商品IDの情報をpostするように記載しています。

これで以下のようなフォームが完成します。

セッションを有効にする

カートに商品情報を受け渡すためには、セッションを有効にする必要があります。
セッションは個々のユーザーのデータを一時的に保存する仕組みです。
セッションを用いることで、ページを遷移してもデータを保持したまま、ページ間でのデータの受け渡しが可能となります。

「function.php」に以下を記述します。
initアクションフックを用いて、セッションを開始させます。

参考>> initアクションフック(wordpressコードリファレンス)

//SESSION 開始
function init_session_start(){
  if(!session_id()) {
    session_start();
  }
}
add_action('init', 'init_session_start');

カートの中身の表示&カートの中身の数量変更、削除

セッション用いて商品ページからpostされた商品情報をカートページで表示します。
固定ページの「page-cart.php」を作成し、カートページを用意します。

<?php
//ページにアクセスする際に使用されたリクエストのメソッドがPOSTの時
if($_SERVER['REQUEST_METHOD']==='POST'){
    $item=$_POST['item_id'];
    $num=$_POST['num'];
    $price=$_POST['price'];
    $_SESSION['cart'][$item]=['num'=>$num,'price'=>$price];//POSTデータをカート用のセッションに保存
  if($_POST['action']==='delete'){
    // 削除
    unset($_SESSION['cart'][$item]);
  }
}
$cart=array();
if(isset($_SESSION['cart'])){
  $cart=$_SESSION['cart'];
}
?>

<?php get_header(); ?>
<div class="cart">
  <div class="cart_title">
    <h1>現在のカートの中身</h1>
  </div>
  <div class="cart_frame">
    <?php if(empty($cart)):?>
    <div class="none-item"><p>中身はございません</p></div>
    <?php else:?>
    <div class="cart_items">
      <?php foreach($cart as $key=>$val):?>
      <hr>
      <div class="cart_item">
        <div class="image">
          <?php echo get_the_post_thumbnail( $key ); ?>
        </div>
        <div class="cart_info">
          <div>
            <p>商品名:<?php echo get_the_title($key);?></p>
          </div>

          <!-- ここから数量変更のフォーム -->
          <form action="" method="POST">
            <div>
              <p>単価:<?php echo $val['price']* 1.08;?>円</p>
              <input type="hidden" name="price" value="<?php echo $val['price'];?>">
            </div>
            <div>
              <span>数量:</span>
              <input type="hidden" name="action" value="change">
              <input type="hidden" name="item_id" value="<?php echo $key;?>">
              <input type="number" name="num" value="<?php echo $val['num'];?>"  min="1" >
              <input type="submit" value="変更">
            </div>
            <div>
              <p>小計:<?php echo $val['price'] * $val['num'] * 1.08;?>円</p>
            </div>
          </form>

          <!-- ここから削除のフォーム -->
          <form action="" method="POST">
            <input type="hidden" name="action" value="delete">
            <input type="hidden" name="item_id" value="<?php echo $key;?>">
            <input type="submit" value="削除">
          </form>

        </div>
      </div>
      <?php $total_price += $val['price'] * $val['num']* 1.08;
      endforeach;?>
      <hr>
    </div>
    <div class="detail">
      <div class="detail_container">
        <div>
          <div class="detail_total">
            <span>合計</span>
            <span><?php echo number_format($total_price);?>円</span>
          </div>
          <div class="detail_link">
            <div class="detail_link_buy"><button type="button" class="btn btn-outline-original">購入手続きへ</button></div>
          </div>
        </div>
      </div>
      <div class="link_shop"><button type="button" class="btn btn-outline-original">お買い物を続ける</button></div>
    </div>
    <?php endif; ?>
  </div>
</div>
<?php get_footer(); ?>

コードを解説します。
まず、$_SERVER['REQUEST_METHOD']を用いて、ページにアクセスした際のリクエストがPOSTであれば、$_POST['item_id']、$_POST['num']、$_POST['price']のPOSTデータをカート用のセッション$_SESSION['cart']に保存します。
これによりカートページにPOSTされる時、すなわち

商品ページから商品を「カートに入れる」を選択した時
カートページで商品を「削除」、または数量を「変更」した時

にカート情報を保存している$_SESSION['cart']の値を更新しています。
参考>> $_SERVER(phpリファレンス)

そして変数$cartを用意し、その変数にセッション情報をセットし、foreach文でカートの中身を表示をしています。

数量の変更と削除の処理に関しては、
formをそれぞれ2つ用意し、inputタグのtype属性でtype="hidden"を用いて隠しデータで判別しています。

<!-- 数量変更 -->
<input type="hidden" name="action" value="change">

<!-- 削除 -->
<input type="hidden" name="action" value="delete">

以上でカート機能の実装は完了です。

セッションを用いてページ間でデータを受け渡し、
カートの中身の新規追加、更新、削除を行えるようになりました。
カート機能を自作したい方の参考になれば幸いです。

  • この記事を書いた人

コウダイ

文系・ノースキル・完全未経験・アラサー・地方住み・残業100時間超えの社畜ホテルマンから都内上場IT企業のフルリモートWebエンジニアに転職した人。

都内上場IT企業に勤務するWebエンジニア5年目|プログラミングスクールのテックキャンプ公式アンバサダー|新卒で手取り18万の地方ホテルマン6年→プログラミングを900時間勉強→転職活動100社以上応募→アラサー未経験から7ヶ月でフルリモートのWebエンジニアに転職し年収100万円UP|33歳2児のパパ|ブログ歴4年→月間6,000PV|エンジニア転職ノウハウ、プログラミング、Web制作、副業での稼ぎ方など、「時間や場所に縛られずに稼ぐ」方法を発信しています。

-WordPress