[BASE]商品ページ作成とURLの確認

まいった。

必須タグ

商品ページ内の必須タグは2つ。

{ItemAttentionTag}
{IllegalReportTag}

こんな感じで出力される

<p class="attention">  ※この商品は定期便です。毎月1回のお届け予定です。  </p>
<p class="attention"> ※価格は1回分の価格になります。 </p>
<p id="currencyWarning" class="attention">  </p>
<p class="attention">※こちらの価格には消費税が含まれています。</p>
<p></p>
<p class="attention free">※この商品は<span class="free__text">送料無料</span>です。</p>
<p class="attention">※この商品は海外への発送は行なえません。</p>
<a id="openIllegalReport" href="javascript:void(0);" data-url="/illegal_reports/report/****">通報する</a> <div id="irBG" class="irBG"></div> <div id="irContainer" class="irContainer"> <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css?1666333892">
	<script type="text/javascript" src="/js/jcap/md5.js?1666333892"></script>
	<script type="text/javascript" src="/js/jcap/jcap.js?1666333892"></script>
	<script type="text/javascript" src="/js/jcap/f_jcap.js?1666333892"></script>

<script>
($=>{
var errorFlg = false;
var jcaps = sjcap();
var jfldid = jcaps['jfldid'];
var jfldcls = jcaps['jfldcls'];
var jfldsz = jcaps['jfldsz'];
var imgdir = jcaps['imgdir'];
var imdid = jcaps['imgid'];
$( "#jcap_text" ).attr( 'class',jfldid );
$( "#jcap_text" ).attr( 'name',jfldid );
$( "#jcap_text" ).attr( 'size',jfldsz );
$( "#jcap_text" ).attr( 'id',jfldid );
$( "#jcap_img" ).attr( 'src','/js/jcap/'+decodeURIComponent( imgdir ) + imgid + ".jpg" );
})(__BASE_JQUERY__);
</script>

<style type="text/css">
	#colorbox {
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
	#cap_form{
		display: none;
	}
	.ErrorMessages{
		color:#f00;
		font-size:10.5px;
	}
</style>
<div id="inline_content" style="padding:10px 30px;background:#fff;">
	<form action="/items/****" id="x_illegalReportForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"><input type="hidden" name="data[_Token][key]" value="98d66c35980a7489a36523b5e2651a9d9a0ca01cb7de4e8a8a25bee0865c47b25bbd45eca83191a77d754b68ad965e2621c0345cecefbb434ff9bd505e665c87" id="Token2089672070" autocomplete="off"></div>	<input type="hidden" value="****" id="item_id">
	<legend>違反商品の通報</legend>

	<input type="hidden" name="data[IllegalReport][item_id]" value="****" id="IllegalReportItemId"><div class="input select"><select name="data[IllegalReport][title]" required="required" id="IllegalReportTitle">
<option value="0">商品が法律に違反している</option>
<option value="1">金額が不正</option>
<option value="2">その他</option>
</select></div><div class="input textarea"><textarea name="data[IllegalReport][message]" placeholder="内容をご記入ください。" required="required" id="x_illegalReportMessage" cols="30" rows="6"></textarea></div><a class="btn btn-danger" id="checkSubmit">通報する</a><div style="display:none;"><input type="hidden" name="data[_Token][fields]" value="e1374aa857fc255e71f387b4a23f01ad53423177%3AIllegalReport.item_id" id="TokenFields595836144" autocomplete="off"><input type="hidden" name="data[_Token][unlocked]" value="" id="TokenUnlocked800083496" autocomplete="off"></div></form>	<div id="cap_form">
		<p class="ErrorMessages">error</p>
		<p><input type="text" id="uword" name="uword" class="uword" size="20"></p>
		<p><img id="jcap_img" src="/js/jcap/cimg/173.jpg" width="220" height="60" alt="/"></p>
		<input class="btn btn-danger" type="submit" onclick="jcap_c();" value="通報する">
	</div>
</div>
</div> <style> .irBG{
    display:none;
    background:rgba(255,255,255,0.85);
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:10000;
}
.irContainer{
    display:none;
    background-color:#fff;
    border:1px solid #eee;
    border-radius:5px;
    box-shadow:rgba(179, 179, 179, 0.701961) 0px 0px 6px 4px;
    -webkit-box-shadow:rgba(179, 179, 179, 0.701961) 0px 0px 6px 4px;
    -moz-box-shadow:rgba(179, 179, 179, 0.701961) 0px 0px 6px 4px;
    height: auto;
    min-height:310px;
    margin:auto;
    position: absolute;
        right:0; left:0;
    width:285px;
    z-index:20000;
}
#irContainer #inline_content{
    text-align: left;
}
#irContainer select{
    margin:0 0 10px 0  !important;
}
#irContainer .btn.btn-danger{
    box-sizing: border-box;
    color:#fff !important;
    font-size:16px;
    text-align: center;
    text-shadow:none;
    text-decoration: none;
    margin:10px 0 0 0;
    width: 220px !important;
}
#reportMessage{
    display: none;
    background-color:#fff;
    border:1px solid #eee;
    border-radius:5px;
    box-shadow:rgba(179, 179, 179, 0.701961) 0px 0px 6px 4px;
    -webkit-box-shadow:rgba(179, 179, 179, 0.701961) 0px 0px 6px 4px;
    -moz-box-shadow:rgba(179, 179, 179, 0.701961) 0px 0px 6px 4px;
    font-size: 16px;
    font-weight: bold;
    height:100px;
    line-height: 100px;
    text-align: center;
    margin:auto;
    position: absolute;
        top:0; right:0; bottom:0; left:0;
    width:700px;
    z-index:20000;

} </style> <script> ($=>$(()=>{
    if($('#reportMessage').length){
        $('#irBG').show();
        $('#reportMessage').show();
        setTimeout(function(){
            $('#reportMessage').fadeOut(300);
            $('#irBG').fadeOut(400);
        }, 3000);
    }

    var reportPage = "";
    var url = $('#openIllegalReport').data('url');

    $.ajax({
        type: 'GET',
        url: url,
        dataType: 'html'
    }).done(function(data){
        reportPage = data;
    }).always(function(){
        if (reportPage.includes('<html')) {
            // かなしきかな後方互換のための仕様です
            // SPの場合は別窓で通報を開きますが、それをこの時点で判別できないので帰ってきた内容がページっぽかったら別窓で開くようにします
            // このページを append してしまうと、強い css やらがくっついてくるのでデザインが崩れてしまいます
            $('#openIllegalReport').off('click').attr('target', '_blank').attr('href', url)
            return
        }
        $('#irContainer').append(reportPage);
    });

    $('#openIllegalReport').on('click',function(){
        $('#irContainer').css('top',$(this).offset().top-300);
        $('#irBG').fadeIn(100,function(){
            $('#irContainer').fadeIn(300);
        });
    });

    $('#irBG').on('click',function(){
        $('#irContainer').fadeOut(100,function(){
            $('#irBG').fadeOut(100);
        });
    });
}))(__BASE_JQUERY__); </script>

遊び心なのか何なのか、BASEはコメントアウトでお気持ちの入った記述があったりしますね。

要するに注意文の<p>、通報用の<a>が表示される。

あって困るものじゃないのでちょうどいい場所に設置する。

商品URL

なぜかBASEは管理画面上で商品のURLが確認できない。WEB上で商品一覧を設置してないと、個別の商品URLが拾えない。でもまあURLにはルールがあるのでちょっと手を入れたら分かるようになってる。

https://【ドメイン】/items/【商品ID】

【商品ID】は管理画面上の商品編集画面のURLを見たら把握できる。

https://admin.thebase.in/shop_admin/items/edit/【商品ID】

動的なものじゃなく、特定商品へのバナーとかリンクを設置したい場合はこんな感じで。

商品画像の注意点

商品画像は20点まで設置できる。書出はループじゃなく、個別にblockで指定するのでとんでもなくダルい。

<div class="swiper">
    <div class="swiper-wrapper">
<div class="swiper-slide"><a href="{block:ItemImage1}{ItemImage1URL-origin}{/block:ItemImage1}{block:NoItemImage1}{ItemNoImageURL}{/block:NoItemImage1}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{block:ItemImage1}{ItemImage1URL-origin}{/block:ItemImage1}{block:NoItemImage1}{ItemNoImageURL}{/block:NoItemImage1}" alt=""></a></div>
{block:ItemImage2}<div class="swiper-slide"><a href="{ItemImage2URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage2URL-origin}" alt=""></a></div>{/block:ItemImage2}
{block:ItemImage3}<div class="swiper-slide"><a href="{ItemImage3URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage3URL-origin}" alt=""></a></div>{/block:ItemImage3}
{block:ItemImage4}<div class="swiper-slide"><a href="{ItemImage4URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage4URL-origin}" alt=""></a></div>{/block:ItemImage4}
{block:ItemImage5}<div class="swiper-slide"><a href="{ItemImage5URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage5URL-origin}" alt=""></a></div>{/block:ItemImage5}
{block:ItemImage6}<div class="swiper-slide"><a href="{ItemImage6URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage6URL-origin}" alt=""></a></div>{/block:ItemImage6}
{block:ItemImage7}<div class="swiper-slide"><a href="{ItemImage7URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage7URL-origin}" alt=""></a></div>{/block:ItemImage7}
{block:ItemImage8}<div class="swiper-slide"><a href="{ItemImage8URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage8URL-origin}" alt=""></a></div>{/block:ItemImage8}
{block:ItemImage9}<div class="swiper-slide"><a href="{ItemImage9URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage9URL-origin}" alt=""></a></div>{/block:ItemImage9}
{block:ItemImage10}<div class="swiper-slide"><a href="{ItemImage10URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage10URL-origin}" alt=""></a></div>{/block:ItemImage10}
{block:ItemImage11}<div class="swiper-slide"><a href="{ItemImage11URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage11URL-origin}" alt=""></a></div>{/block:ItemImage11}
{block:ItemImage12}<div class="swiper-slide"><a href="{ItemImage12URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage12URL-origin}" alt=""></a></div>{/block:ItemImage12}
{block:ItemImage13}<div class="swiper-slide"><a href="{ItemImage13URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage13URL-origin}" alt=""></a></div>{/block:ItemImage13}
{block:ItemImage14}<div class="swiper-slide"><a href="{ItemImage14URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage14URL-origin}" alt=""></a></div>{/block:ItemImage14}
{block:ItemImage15}<div class="swiper-slide"><a href="{ItemImage15URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage15URL-origin}" alt=""></a></div>{/block:ItemImage15}
{block:ItemImage16}<div class="swiper-slide"><a href="{ItemImage16URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage16URL-origin}" alt=""></a></div>{/block:ItemImage16}
{block:ItemImage17}<div class="swiper-slide"><a href="{ItemImage17URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage17URL-origin}" alt=""></a></div>{/block:ItemImage17}
{block:ItemImage18}<div class="swiper-slide"><a href="{ItemImage18URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage18URL-origin}" alt=""></a></div>{/block:ItemImage18}
{block:ItemImage19}<div class="swiper-slide"><a href="{ItemImage19URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage19URL-origin}" alt=""></a></div>{/block:ItemImage19}
{block:ItemImage20}<div class="swiper-slide"><a href="{ItemImage20URL-origin}" data-lightbox="simple-group" data-title="" data-alt=""><img src="{ItemImage20URL-origin}" alt=""></a></div>{/block:ItemImage20}
    </div>
</div>

登録した画像の枚数を出力できるタグがある。

{ItemImageCount}

出力できるのは良いんだけど、BASEには条件分岐がない。

つまりどういうことか。

「1枚だったら普通に表示、2枚以上だったらスライドを設置」ができない。

1枚だけ設置しても耐えられるスライダーを設置するしかない。

条件分岐で動作させるならjsと組み合わせるしかない。

swiperはサムネを設置するにはサムネ用のスライダーを作らなきゃいけないし、そのあたりのケアなんて考えただけでもめんどくさすぎる。

諦めるか、ガッツで乗り越えるか、試される。

スポンサーリンク

コメント

タイトルとURLをコピーしました