HOME  /Welcart
 /Welcart_basicのカートシステムの仕様
2020年08月01日

Welcart_basicのカートシステムの仕様

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丸で背景は白で文字はオレンジで表示

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wecart」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

ここではWelcart商品を価格順に並び替える方法を解説しています

ここではWelcartのキャンペーン商品設定の方法と、設定された商品リストを表示する関数を作成する方法を解説しています

ここではWelcartの商品カテゴリを指定して商品リストする関数を作成しています。全商品、おすすめ商品、新製品及び商品カテゴリが対象となります。

ここでは売れている商品をWelcartのDBから読み出して「売れ筋商品」としてリストする関数を作成する方法を解説しています。

ここではWelcartで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品」としてリストする関数を作成する方法を解説しています。

ここではWelcart_basicのメニュのCSS制御の解説をしています。

ここではWelcart_basicのカートボタンの「色」と「文字」を変更する方法を解説しています。

Welcartで会員システムを使うのであれば、ログイン後の画面に現在使えるポイント数が表示されているのが親切です。そこでここではwelcart_bascで保有ポイントが表示されるようにカスタマイズしたサンプルを解説しています。

ここではwelcart_basicの会員システムがどの様な仕様になっているか?を解説しています。

ここではWelcart_basicの検索BOXがCSSでどの様に制御されているのか?を解説しています

welcart_basicは製品だけしか検索対象としていませんが、ここではページの情報を読み込んで、何を検索させるのかを自動で判断させる方法を解説しています。

ここでは「welcart_basic」の「category.php」がブログ用のサイドーバーが使われてない問題点を修正方法を説明しています。また「welcart_basic」がどの様な構造になっているか?も併せて解説しています。

ここではWelcartの検索機能制限の解除と商品か否かを判断する関数を作成する方法を解説しています。

ここではWelcartで用意されている関数を解説しています。

Welcartのファンクションはfunctions.phpからincフォルダにあるファンクションをインクルードしています。この辺の構造を商品表示の設定例で解説しています。

Welcartのホームページと事前に作られている固有のページを解説してます。特にカートページやメンバーページ及びお問い合わせフォームの作り方も解説しています。

WelcartはWordPressの「固定ページ」と「投稿ページ」のみで作られております。この「投稿ページ」の中に「商品」が設定されています。そこで検索機能はファンクションの中で、商品のみを検索する様な設定が定義されている為、そのままではブログ等を検索できません。

ここではWelcartの商品画像を「slick」でスライドさせる方法を解説しています。スライド方法は下記の2つを解説しています。①.slickオプションだけでスライドさせる。②slickイベントやメソッドを使ってスライドさせる。

ここではカスタマイズ→ヘッダ画像で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。スライドサンプルとしては画像サイズと画像サイズ+αで表示させるサンプルを解説しています。

「slick.js」はjqueryでスライド動作を指定するプラグインです。ここでは「slick.js」のインストールから、設定方法及び「slick.js」のオプションを解説しています

ここでは「Welcart basic」の子テーマの作成方法を解説しています。

Welcartの商品画像適用ルールと「Media Library Assistant」による画像管理、及び商品画像の登録方法を解説しています。

Welcartで商品登録を行う前に.Welcart Shopの「基本設定」、「配送設定」及び「.商品カテゴリ」の登録が必要で、ここではその登録方法を解説しています。

ここではWelCartの商品の登録の仕方を解説しています。

WelcartはWordPressを使った無償のe-Commerceシステムです。ここでは「Welcart」の「インストール」と「無償テンプレート」について解説します。

ここでは「Welcart_Basic」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。