Welcart Shop 商品一覧ページでのカートボタン表示

Welcart Shop　の商品一覧ページで、カートボタンを設置するにはループの中に以下のようなテンプレートタグを記述することで実現した。

参考ページ
https://www.welcart.com/community/forums/topic/商品一覧から直接カートへ入れたい

上記2011年5月23日 2:21 AMの投稿をそのまま使わせていただきました。


<?php query_posts('category_name=item-cake&posts_per_page=0&orderby=meta_value_num&order=ASC&meta_key=item_sort_key'); ?>

<?php if(have_posts()): ?>

<?php while(have_posts()): the_post(); ?>

↓↓↓　ここから　↓↓↓

<?php

usces_the_item();

usces_have_skus()

?>

<?php usces_direct_intoCart($post->ID, usces_the_itemSku('return')); ?>

<!-- form button end --></form></div>

↑↑↑　ここまで　↑↑↑

<?php endwhile; ?>

<?php endif; wp_reset_query(); ?>

ついでに、ボタンの文字がデフォルトでは「Add to Cart」のように英語なので、ここは日本語に変更したい。

ということで同じサイトの、こんどはこちらのページを参考にさせて頂きました。
よく見たら追加箇所以外まったく同じタグでした。



<?php usces_direct_intoCart($post->ID, usces_the_itemSku('return'), false, 'カートへ入れる'); ?>

「false, 'カートへ入れる'」を追加しました。

参考ページ
https://www.welcart.com/community/forums/topic/未解決-カテゴリーページにカートへ入れるを追加

ネット検索でよく出てくる「wc_item_single.php」を編集する方法では治りませんでした。テンプレートファイルもめぼしいものは"Add"を検索してみましたが見つからず、「Add to Cart」の出所はいまだ不明です。


ちなみに商品詳細ページは初めから「カートへ入れる」でした。

投稿一覧の並び順

商品販売用のプラグイン「Welcart Shop」で登録された商品の並び順を任意に指定するにはカスタムフィールドを使って以下のように呼び出す。
（当然、普通の投稿にも適用できそう。）


<!--カスタムフィールドのitem_sort_keyの数字順に読み込む-->
<?php query_posts('category_name=item-cake&posts_per_page=0&orderby=meta_value_num&order=ASC&meta_key=item_sort_key'); ?>

<?php if(have_posts()): ?>

<?php while(have_posts()): the_post(); ?>

・・・・・・

・・・・・・

・・・・・・

<?php endwhile; endif; ?>

■category_name=item-cake

いつものカテゴリ指定

■posts_per_page=0

いつもの１ページ表示数

■orderby=meta_value_num

これがカスタムフィールドの値を並び順の条件とする項目

■order=ASC

数値を昇順で呼び出す指定　最低から最高へ昇順 (1, 2, 3; a, b, c).

■meta_key=item_sort_key

カスタムフィールドのキー　好きなキー名でOK

アプリが（なぜか）絶好調！

発売以来一週間に数件だったダウンロード数がここのところ一気に上昇！
なんでだろ？？
こんなレビューページもいつの間にかつくられてた。
https://appadvice.com/app/web-search-words-2/1074824812

うれしいかぎり (^0^;)
皆さんに感謝です！

floatの右

メニューなどで横並びにする時の「float」。
要素を「li」としたとき

<li class="list1">リスト１</li>
<li class="list2">リスト２</li>

とすると

li .list1{ float:left;}

でも"list2"は"list1"の右に並ぶ。

ただしこのとき、ブラウザの要素の調査を見ると"list2"の幅は親要素いっぱいになっていて、「マージン」や「パディング」等が効かない。

そこで、"list2"にも

li .list1{ float:left;}

li .list2{ float:left;}

とすると前の項目の"list1"の右側から"liset2"要素が始まり、「マージン」等のプロパティが有効になる。


　追記　2017/08/22

Deamwerver CC2017で再度検証してみたところ、list2にfloatをかけなくてもライブモードでmargin-leftが効いた。
Win7上ではCrome、Firefox、IE、Opera、Sleipnirすべてで問題なくマージンを読んでいた。
マージンが効かなかったのは
li .list1{ float:left;}
"li" と ".list2"の間にスペースが入っていたからかもしれない。
ただ、".list1"の前にスペースがあったら同様に書式ミスで"list2"は回り込まないので、他に原因があるのかもしれない。

Adobe Bridge Win版 メタデータパネルの位置

インデックスタブの部分を持って、プレビューパネル（他のパネルでも）の下にドラッグすると青の枠線が棒状になるのでその位置でドロップすると下に現れる。

UL の デフォルトスタイルシート「padding-start」

<UL>タグにはデフォルトで"padding-start:40px;"が付いているらしい。
"padding-start"とは文の頭につく余白とのこと。
●がpaddingとして「●●テキストテキスト」のような感じ。
ULリストなので本体の左ではなく、上側に余白をとったのかも。

これは、スライドショーでよく使う「bxslider」を検証していた時のこと。
画像の上にかなりの隙間ができたので消そうとしたが、スクリプトやCSSファイルでは見つからず、試に
html,body,div,ul{
margin:0;
padding:0;
}
としてみたところ、見事に余白が消えたということ。

CSSはリセットしなければまともに使えないことは"reset.css"を使い始めた時から知っていたが、今回はじめてそれが「デフォルトスタイルシート」と言われるものだと知った。

透明度のトランジションはボックスに直接

ホバー時に透明度を変更し、そのアクションをゆっくりとさせる、トランジションを加えるには
ボックスに戻るときの transition
ボックスのホバーに ホバー時の transition
を設定する。
要はアンカーとアンカーのホバーではなく、ボックスに直接設定する。

.box{

はば
width:300px;
高さ
height:56px;

角丸にする
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;

背景色
background:#000;

今回トランジションする透明度プロパティ
opacity:0.7;

3秒かけて元の0.7に戻る

transition:3s;

}

.box a:link{
アンカーでは無効
}
.box a:hover{
アンカーのホバーも無効
}

.box:hover{

ホバー時の透明度
opacity:0.9;

1秒かけて0.9になる
transition:1s;
}

以下、ボタン反応部分の設定（ボックスと同じにする）

.back-to-news a{

display:block;

width:300px;
height:56px;

border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;

}