今回の投稿はサイトの更新とは関係ありませんが、ネットショップはwelcartを使わせていただいております。とても優秀なのですが、欲を言えばあれこれ欲しい機能が、、
特に欲しかったのが、商品一覧ページに売り切れ商品を非表示にする機能。
いろいろカスタマイズサイトを探したのですが、動かない(;_;)
手直ししてみても挙動不審。
私の他のカスタマイズとの相性なのか、私がドンクサイのか。webの知識はそこまでないのでとにかくわからない。カウチに転がっている主人になんとかしてと、つけてもらいました。
商品、見やすくなったでしょうか?
きっとwelcartをつかってらっしゃる店長さんたくさんいらっしゃると思い、機能のつけ方をメモしておきます。
オリジナルのコードはここからで、私のサイトで動くよう手を色々と加えてもらいました。
オリジナル 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