Welcartに在庫がある商品だけを表示機能をつけてみる

今回の投稿はサイトの更新とは関係ありませんが、ネットショップはwelcartを使わせていただいております。とても優秀なのですが、欲を言えばあれこれ欲しい機能が、、
特に欲しかったのが、商品一覧ページに売り切れ商品を非表示にする機能。
いろいろカスタマイズサイトを探したのですが、動かない(;_;)
手直ししてみても挙動不審。
私の他のカスタマイズとの相性なのか、私がドンクサイのか。webの知識はそこまでないのでとにかくわからない。カウチに転がっている主人になんとかしてと、つけてもらいました。

商品、見やすくなったでしょうか?



きっとwelcartをつかってらっしゃる店長さんたくさんいらっしゃると思い、機能のつけ方をメモしておきます。
オリジナルのコードはここからで、私のサイトで動くよう手を色々と加えてもらいました。
オリジナル Welcart カスタマイズブログ

主人曰く私のサイトの作り方は「無茶苦茶で汚い」だそうです。ひどい
ただの主婦なんでそんなのできないし、、


注意
全てのブラウザでテストしてません 確認済み Mac: Safari Chrome Firefox 
私のサイトでは動いていますが、デフォルト何も手を加えていない状態のwelcart basic ではテストしてません、なにかしら編集が必要かもしれません
いろいろなカスタマイズサイトを拝見して、私のサイトで動かないカスタムも多々あったので、、
CSSは完全に私のサイト仕様なので必要に応じて変更してください
売り切れ表示でもバックに在庫があると表示されちゃいます

手順
■ category.php
ボタンをカテゴリーページに追加

<form class=\'zaiko <?
      if (isset($_GET[\'sort\'])) {
        ?>isApplied<?
      }?>\' method=\"GET\" action=\"<?php echo get_category_link($cat); ?>\">
        <? if (!isset($_GET[\'sort\'])) { ?>
          <i class=\'fa fa-fort-awesome\'></i>
        <? } else { ?>
          <i class=\'fa fa-undo\'></i>
        <? } ?>

        <input type=\"text\" hidden name=\"cat\" value=\"<? echo $cat ?>\">
        
        <? if (!isset($_GET[\'sort\'])) { ?>
          <input type=\"text\" hidden name=\"sort\" value=\"zaiko\">
        <? } ?>

        <? if (!isset($_GET[\'sort\'])) { ?>
          <input type=\"submit\" value=\"在庫有りのみ表示する\">
        <? } else { ?>
          <input type=\"submit\" value=\"在庫有りのみ表示中\">
        <? } ?>
      </form>

■ functions.php
以下のコードを追加。

//在庫ありのみ表示
function my_sort_item( $query ) {
    if ( is_admin() || ! $query->is_main_query() ) {
        return;
    }
    if ( $query->is_category() ) {
        $sort = isset($_GET[\'sort\']) && is_string($_GET[\'sort\']) ? $_GET[\'sort\'] : \'\';
        $cat = isset($_GET[\'cat\']) ? $_GET[\'cat\'] : \'\';

        if ( $sort !== \'zaiko\' ) {
            return;
        }

        $args = array(
            array(
                \'key\' => \'_isku_\',
                \'value\' => \'\"stocknum\";s:1:\"0\"\',
                \'compare\' => \'NOT LIKE\',
            ),
            array(
                \'key\' => \'_isku_\',
                \'value\' => \'\"stocknum\";i:0\',
                \'compare\' => \'NOT LIKE\',
            ),
        );

        $query->set(\'meta_query\' , $args);
    }
}
add_action( \'pre_get_posts\', \'my_sort_item\', 10, 3);

■ CSS お好きにカスタムしてください

/* zaiko */
.zaiko {
  background-color: #d0c7b0;
  float: right;
  margin-top: .82857em;
  padding: .5rem;
}

.zaiko i {
  -webkit-transition: .3s ease all;
  -moz-transition: .3s ease all;
  -o-transition: .3s ease all;
  transition: .3s ease all;
}

.zaiko input[type=\'submit\'] {
  background: none;
  padding: 0;
}

.zaiko + * {
  clear: right;
}

/* styles before filter apply */
.zaiko {
  background-color: #d0c7b0;
}
.zaiko i,
.zaiko input {
  color: blue;
}

.zaiko:hover {
  background-color: #d0c7b0;
}
.zaiko:hover i,
.zaiko:hover input {
  color: white;
}

/* styles after filter applied */
.zaiko.isApplied {
  background-color: #d0c7b0;
}
.zaiko.isApplied i,
.zaiko.isApplied input {
  color: green;
}

.zaiko.isApplied:hover {
  background-color: #d0c7b0;
}
.zaiko.isApplied:hover i,
.zaiko.isApplied:hover input {
  color: white;
}


以上です。

お役に立てば幸いです。
(自己責任でお願いします)

CONVERSATION

Back
to top