【開発コミュニティの人気Tipsをご紹介⑤】カートに入れるボタンを作ってみる

2024.08.14

#集客・販促・運営

EC-CUBE公式アドバイザーに
ご相談いただけます

EC-CUBEでは、ご利用者同士が問題解決方法を投稿・共有できる「開発コミュニティ」を開設し、多くの方にお使いいただいています。この連載では、開発コミュニティで話題のカスタマイズや、よく質問にあがる「これってどうやるの？」について解説を行っていきます。

※過去の記事はこちらからご覧いただけます。

管理画面のページ管理で作成したランディングページで、カートボタンを作る場面はよくあると思います。今回は、通常の商品詳細ページではなく、独自ページにカートにいれるボタンを作るカスタマイズをご紹介します。

1. ページを作成する
2. カートに入れる処理を実装する
3. カートブロックを更新する
最後に

1. ページを作成する

管理画面の、コンテンツ管理＞ページ管理から新規ページを作成します。

名称：パーコレータLP
URL：percolator
ファイル名：percolator
内容：

{% extends 'default_frame.twig' %}

{% block main %}
{% endblock %}

/user_data/percolator にアクセスし、画面が表示されたらOKです。

EC-CUBE公式アドバイザーが、ツール選びからサイト制作、マーケティング・セキュリティの領域までアドバイスいたします。ご相談窓口はこちら

2. カートに入れる処理を実装する

ベースとなるページは作成できたので、ここからはカートに入れる処理を記述していきます。
作成したページの内容を、以下のように修正します。

{% extends 'default_frame.twig' %}

{% block main %}
    <button class="btn-default" id="cart-add">カートに入れる</button>
{% endblock %}

{% block javascript %}
    <script>
        $('#cart-add').on('click', function () {
            $.ajax({
                url: "{{ url('cart_add') }}",
                type: 'POST',
                data: {
                    'product_class_id': 10,
                    'quantity': 2
                },
                dataType: 'html',
            }).done(function (data) {
                alert('カートに追加しました。');
            }).fail(function (data) {
                alert('カートの追加に失敗しました。');
            });
        });
    </script>
{% endblock %}

画面に戻り、カートボタンをクリックしてみましょう。
「カートに追加しました」とメッセージが表示されれば成功です。

カート画面にアクセスすると、カートに追加できているのがわかります。

3. カートブロックを更新する

先程の修正で、カートに追加することはできましたが、ページ右上のカートエリアは更新されていません。商品追加後、カートエリアも更新するように修正してみます。

{% extends 'default_frame.twig' %}

{% block main %}
    <button class="btn-default" id="cart-add">カートに入れる</button>
{% endblock %}

{% block javascript %}
    <script>
        $('#cart-add').on('click', function () {
            $.ajax({
                url: "{{ url('cart_add') }}",
                type: 'POST',
                data: {
                    'product_class_id': 10,
                    'quantity': 2
                },
                dataType: 'html',
            }).done(function (data) {
                alert('カートに追加しました。');
                $.ajax({
                    url: "{{ url('block_cart') }}",
                    type: 'GET',
                    dataType: 'html'
                }).done(function(html) {
                    $('#cart_area').html(html);
                });
            }).fail(function (data) {
                alert('カートの追加に失敗しました。');
            });
        });
    </script>
{% endblock %}

「カートに追加しました」の後に、カートブロックを取得しなおす処理を追加しています。
動作確認をして、カートブロックが更新されればOKです。