<?php
/**
  Template Name: Earth WelCart
 */
get_header();
?>
<!-- topslider -->
<div class="bloc l-bloc bgc-white" id="topslider">
	<div class="container bloc-lg-index">
		<div class="row">
			<div class="col-sm-12">
				<h1 class="text-center animated threeD-t mg-md fadeInUp">
					WORDPRESS ROCKET
				</h1>
				<h1 class="text-center mg-lg threeD-t animated fadeInUp animDelay02">
					<strong>E A R T H</strong>
				</h1>
				<p class="text-center mg-sm animated fadeInUp animDelay04">
					WORDPRESS ROCKETの提供する無料テーマ”EARTH”は、
				</p>
				<p class="text-center mg-sm animated fadeInUp animDelay04">
					ネットショプとブログが併存して運営できるWelcart用テンプレートです。
				</p>
				<p class="text-center mg-lg animated fadeInUp animDelay04">
					最新のweb技術を採用。レスポンシブでスマートフォンにも対応しています。
				</p>
				<div id="carousel-1" class="carousel slide" data-ride="carousel">
					<ol class="carousel-indicators">					
						<?php
						  $headers = get_uploaded_header_images();
						  $active = ' active';
						  $keypointer = 0;
						  foreach ( $headers as $header ) {
							  echo '<li data-target="#carousel-1" data-slide-to="'.$keypointer.'"></li>';
							  $active = '';
							  $keypointer++;
						  }
						?>
					</ol>
					<div class="carousel-inner">				
						<?php
						  $headers = get_uploaded_header_images();
						  $active = ' active';
						  $keypointer = 0;
						  foreach ( $headers as $header ) {
							  echo '<div class="item '.$active.' "><img src="' .esc_url( $header[url] ) .'" alt=""><div class="carousel-caption"></div></div>';
							  $active = '';
							  $keypointer++;
						  }
						?>						
					</div>
					<a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev"><span class="fa fa-chevron-left"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-1" role="button" data-slide="next"><span class="fa fa-chevron-right"></span><span class="sr-only">Next</span></a>
				</div>
			</div>
		</div>
		<div class="row voffset">
			<div class="col-sm-4">
				<div class="panel animated fadeIn panel-sq bgc-white-smoke">
					<div class="panel-body">
						<h4 class="mg-md">
							<span class="ion ion-ios-pricetags-outline icon-outer-space sm-shadow"> ハンドクラフト</span>
						</h4>
						<p>
							１点づつ手作りで制作しています。品質の高い素材だけを厳選、環境にも配慮しました。心を込めてお届けいたします。
						</p>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="panel animated fadeIn animDelay02 panel-sq bgc-white-smoke">
					<div class="panel-body">
						<h4 class="mg-md">
							<span class="ion ion-ios-locked-outline sm-shadow"> ペイパルで簡単カード決済</span>
						</h4>
						<p>
							ペイパルでクレジットカード払いが可能。コンビニ決済にも対応。セキュリティーが高いの安心してショッピングができます。
						</p>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="panel animated fadeIn animDelay04 panel-sq bgc-white-smoke">
					<div class="panel-body">
						<h4 class="mg-md">
							<span class="ion ion-ios-home-outline sm-shadow"> 1万円以上で全国無料配送</span>
						</h4>
						<p>
							合計金額が 1 万円以上の場合、送料は無料で全国に配送させていただきます。同梱してまとめて配送するのでお得です。
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- topslider END -->
<!-- divider -->
<div class="bloc l-bloc bgc-white" id="divider">
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<div class="divider-h">
					<span class="divider"></span>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- divider END -->
<!-- gallery -->
<div class="bloc l-bloc bgc-white" id="gallery">
	<div class="container bloc-lg">
		<div class="row">
			<div class="col-sm-12">
				<h1 class="text-center mg-md drag-obj sm-shadow animated fadeInUp">
					Gallery
				</h1>
				<p class="text-center sub-heading text-w-md sm-shadow animated fadeInUp animDelay02">
					お勧めのアイテム。
				</p>
			</div>
		</div>
		<div class="row voffset">
			<?php $reco_ob = new wp_query(array('cat'=>'2,3', 'posts_per_page'=>8, 'post_status'=>'publish')); ?>
			<?php if ($reco_ob->have_posts()) : while ($reco_ob->have_posts()) : $reco_ob->the_post(); usces_the_item(); ?>
			<?php if (usces_is_skus()) : ?>
				<div class="col-sm-3 display-inline-table">
					<a href="<?php the_permalink() ?>"><?php usces_the_itemImage($number = 0, $width = 290, $height = 400 ); ?></a>
					<div class="thumtitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php usces_the_itemName(); ?></a></div>
					<?php if (usces_is_skus()) : ?>
						<div class="price"><?php usces_crform( usces_the_firstPrice('return'), true, false ); ?></div>
					<?php endif; ?>
				</div>
				<?php endif; ?>
			<?php endwhile; else: ?>
			<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
			<?php endif; wp_reset_query(); ?>
		</div>
	</div>
</div>
<!-- gallery END -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>