WelCart_Basicのカートボタンの仕様は下記の様になっています。
1.カートシステムとは
1-1.カートボタンの表示画面
<PC画面>
＜スマホ、iPAD画面＞
1-2.カートをクリックすると
カートをクリックすると購入画面が表示されます。
2.カートシステムの中で使われているFont Awesome
WelCart_Basicの「Font Awesome」で総てのフォントアイコンが使える様になりましたが、カートシステムの中では下記が使われています。
<i class=”fa fa-shopping-cart”></i>は、「Font Awesome」の
です。
3.プログラムとHTML表示
3-1.プログラム
カートシステムのプログラム部分は「header.php」にダイレクトに記述されています。
<div class="incart-btn">
<a href="<?php echo USCES_CART_URL; ?>"><i class="fa fa-shopping-cart"><span><?php _e('In the cart', 'usces') ?></span></i><?php if(! defined( 'WCEX_WIDGET_CART' ) ): ?><span class="total-quant"><?php usces_totalquantity_in_cart(); ?></span><?php endif; ?></a>
</div>
■上記の赤字部分は「WCEX_WIDGET_CART」という有償プラグインが入っていれば、合計数字を表示しないという部分なので、本稿では関係ないので外します。
<div class="incart-btn"> <a href="<?php echo USCES_CART_URL; ?>"><i class="fa fa-shopping-cart"><span><?php _e('In the cart', 'usces') ?></span></i><span class="total-quant"><?php usces_totalquantity_in_cart(); ?></span></a> </div>
■赤字の所はの後に「カートの中」という文字を入力しています。
■上記のプログラムの中には下記のWelcart関数で記述されています。
| 項目 | 関数 | 説明 |
| カートページURL | USCES_CART_URL | カートページのURIを返す |
| カート内の合計数量 | usces_totalquantity_in_cart() | カート内の合計数量を返す |
3-2.HTML
上記のプログラムが実行されると下記HTMLが出力されます。
<div class="incart-btn">
<a href="https://hnw.ddnsfree.com/welcart/usces-cart/">
<i class="fa fa-shopping-cart"><span>カートの中</span></i>
span class="total-quant">1
</span></a>
</div>
■CSSのポイントは「incart-btn」です。
4.CSS制御
WelCart_BasicのCSSはモバイルファーストで記述されています。
ブレークポイントは下記の様になっています。
①620px(38.75em)以下
②740px(46.25em)まで
③880px(55em)まで
④1000px(62.5em)以上
| スマホ、iPAD等 | PC |
.incart-btn {
float: left;
}
.incart-btn a {
display: block;
color: #262626;
}
.incart-btn span {
display: none;
}
.incart-btn a {
position: relative;
}
.incart-btn .total-quant {
display: inline-block;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
width: auto;
min-width: 20px;
max-width: 30px;
height: 20px;
color: #fff;
background-color: #fba60d;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
vertical-align: text-bottom;
}
|
.incart-btn {
min-width: 160px;
margin-top: .714286em;
float: right;
}
.incart-btn a {
background-color: #ff8c00;
padding: 6px .714286em;
text-align: center;
-webkit-transition: .3s ease all;
-moz-transition: .3s ease all;
-o-transition: .3s ease all;
transition: .3s ease all;
}
.incart-btn a:hover {
background-color: #ffa500;
}
.incart-btn i {
padding: 0;
}
.incart-btn i:before {
color: #fff;
margin-right: 8px;
}
.incart-btn span {
display: inline-block;
color: #fff;
font-size: 12px;
font-weight: bold;
vertical-align: middle;
letter-spacing: 1px;
}
.incart-btn .total-quant {
display: inline-block;
position: relative;
font-weight: bold;
color: #fba60d;
margin-left: 1.25em;
background-color: #fff;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
vertical-align: text-bottom;
}
|
|
■.incart-btnは、左基準で幅は指定していない ■.incart-btn aに含まれるiは、黒(#262626)のアイコンで表示 ■.incart-btn spanは「カートの中」の文字だが、これは非表示 ■ .total-quantは丸で背景はオレンジ(#fba60d)で文字は白(#fff)で表示 |
■.incart-btnは、右基準で幅は160px ■.incart-btn aの中にはアイコンと文字が入るが背景はオレンジ(#ff8c00)でセンター基準 ■.incart-btn iはアイコン文字で色は白で右に8pxの余白がある ■.incart-btn spanは「カートの中」の文字だが、色は白で表示 ■.total-quant丸で背景は白で文字はオレンジで表示 |
