Welcart 複数のSKUをセレクトボックスにまとめてカートに入れる方法

商品詳細ページで複数のSKUをセレクトボックスにまとめて表示させる必要があったため有料プラグインの「WCEX SKU Select」で対応を試みたのですがレイアウト調整がうまくいかなかったので自力で対応する方法に変更して対応しました。

SKUを取得

<?php
$item_code = get_post_meta(get_the_ID(), '_itemCode', true);
$skus = get_post_meta(get_the_ID(),'_isku_');
?>

SKUをセレクトボックスで表示

<form>
    <input type="hidden" name="item_code" value="<?php echo $item_code;?>">
    <div>
        <input type="number" name="item_quant" id="item_quant" value="1"> 箱
    </div>
    <select name="item_select" id="item_select" class="detail-select">
        <?php foreach ($skus as $sku):?>
        <option label="<?php echo $sku['name'];?>" value="<?php echo $sku['code'];?>"><?php echo $sku['name'];?></option>
        <?php endforeach;?>
    </select>                                        
</form>

カートに入れるボタン

<div id="to_cart_btn">
<?php echo do_shortcode("[button_to_cart item='{$item_code}' sku='{$skus[0]['code']}' value='カートに入れる' quant=1]");?>
</div>

数量の設定とカートに入れるボタンの生成

<script>
$(function($) {
    
    $("[name^='quant\[']").val(1);
    $("[name^='quant\[']").get(0).type = 'hidden';                        
    
    //
    $('#item_select, #item_quant').change(function() {
        var item_quant = $("[name='item_quant']").val();
        var item_code = $("[name='item_code']").val();
        var item_sku = $("[name='item_select']").val();

        var fd = new FormData();
        fd.append('action', 'to_cart_btn');
        fd.append('item_quant', item_quant);
        fd.append('item_code', item_code);
        fd.append('item_sku', item_sku);
        // ajax通信
        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: fd,
            processData: false,
            contentType: false,
            success: function( response ){
                $("#to_cart_btn").html(response);
            },
            error: function( response ){
                $("#resultarea").html( "error" );
            }
        });
        return false;                 
    });
});  
</script>

WordPressでAjaxを利用出来るように設定

wp_head にフックしてリクエスト送信先のURLをグローバル変数として出力します。（functions.phpなどに設定）

/**
 * Ajaxを利用出来るよう設定
 */
function add_my_ajaxurl() {
?>
<script>
    var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
</script>
<?php
}
add_action( 'wp_head', 'add_my_ajaxurl', 1 );

カートに入れるボタン生成して返す関数

Ajaxリクエストに応答してアイテムコード／SKUをショートコードに渡してカートに入れるボタンを生成して返す関数。数量は隠しフィールドでの値をJSで書き換えてPOST出来るよう準備します。

/**
 * カートに入れるボタン生成
 */
function get_to_cart_btn(){
    $item_code  = $_POST['item_code'];
    $item_sku   = $_POST['item_sku'];
    $item_quant = $_POST['item_quant'];
    if($item_sku):?>
        <?php echo do_shortcode("[button_to_cart item='{$item_code}' sku='{$item_sku}' value='カートに入れる' quant=1]"); ?>
        <script>
            $(function($) {
                $("[name^='quant\[']").val(<?php echo $item_quant;?>);
                $("[name^='quant\[']").get(0).type = 'hidden';
            });
        </script>
    <?php endif;
    die();
}
add_action( 'wp_ajax_to_cart_btn', 'get_to_cart_btn' );
add_action( 'wp_ajax_nopriv_to_cart_btn', 'get_to_cart_btn' );