読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【wordperss welcart】固定ページに「カートへ入れる」ボタン設置

wordpress 備忘録 welcart

つい最近welcartなる存在を知った。
wordpressにEC機能を持たせるとな?

私が先日引き受けた案件は、通常のwordpressサイトにLPを作りそこの購入ボタンを押すとカートに商品が入る仕組みにしてほしいという要望であった。

そのため固定ページにLPを作り、そこに「カートへ入れる」を設置するやり方を試行錯誤でやったのでまた備忘録で記す。ちなみに今回はテーマ「blanc」使用。


手順

①固定ページテンプレートを複製

②「カートに入れる」ボタン設置


①固定ページテンプレートを複製

まずは、固定ページテンプレートを複製。ここでは、page2.phpというファイル名を作成し、サーバーにアップロード。その際php
の中身には「lp1」と名前をつける。その後に管理画面で固定ページ新規追加でLP用のページを作成。ここで画面右側のページ属性でテンプレートの項目を「lp1」にすることを忘れずに。

②「カートに入れる」ボタン設置

この「カートに入れる」ボタンはwelcartのテンプレートタグの

usces_the_itemSkuButton($value)

こちらを入力すれば通常は出るが、今回の案件はLPの商品とこの「カートに入れる」ボタンを紐付けしなければならないので
固定ページテンプレにそのまま記述してもどうしようもない。

ここでプログラムの知識があればこの記述を変えていけば紐付けできるのかもしれないが私にはもちろんないので、元からある商品詳細ページの上記のテンプレタグで出力されている「カートへ入れる」ボタンをブラウザchromeの要素の検証で調べると下記のように出力されていることを確認。

<input name="zaikonum[10][example1]" type="hidden" id="zaikonum[10][example1]" value="">
<input name="zaiko[10][example1]" type="hidden" id="zaiko[10][example1]" value="0">
<input name="gptekiyo[10][example1]" type="hidden" id="gptekiyo[10][example1]" value="0">
<input name="skuPrice[10][example1]" type="hidden" id="skuPrice[10][example1]" value="168000">
<input name="inCart[10][example1]" type="submit" id="inCart[10][example1]" class="skubutton submit_b" value="カートへ入れる" onclick="return uscesCart.intoCart('10','example1')" />


よって、これをコピーしてpage2.phpに張り付けたところボタンが出現された。
ちなみに上記の[example1]の部分は商品コードである。紐付けしたい商品の商品コードをここに記述しなければならない。
また、今回はこのボタンを画像にしたかったため、input type="submit"のタグにクラス名「submit_b」を付加させている。
ボタンがロールオーバーするようjqueryをheadタグ内に記述し、マウスオーバーしている場合としてない場合のボタン画像を2つサーバーに上げ(button_off.png/button_on.png)、style.cssに下記を追加。

input.submit_b{
  cursor: pointer;
  display: block;
  width: 任意;
  height: 任意;
  border: none;
  text-indent: -9999px; //「カートへ入れる」という文字を削除
  background: url(img/lp1/button_off.png) no-repeat 0 0;
}

input.submit_b:hover {
  background: url(img/lp1/button_on.png) no-repeat;
}

以上。やっぱりプログラム勉強したら強くなるだろうな。

【参考URL】
https://www.xenophy.com/webdesign/2211