Hiển thị sản phẩm trên Template Median UI

Trong Template Median UI bạn có thể thêm những sản phẩm cần bán và hiển thị chúng ra trang chủ 1 cách đơn giản. Tuy nhiên nó chỉ là mô phỏng cho giống 1 sản phẩm được bán bởi 1 trang có chức năng bán hàng.

Hiển thị sản phẩm trên Template Median UI

Hãy thêm đoạn code sau vào bài viết sản phẩm, nhớ là phải thêm tag Product vào bài viết thì ngoài trang chủ nó mới hiển thị được đúng định dạng.

<div class='separator'>
  <img alt='title_here' src='image_url_here'/>
</div>

<!--[ Price to show in homepage ]-->
<div class='pPric pPad' data-text='Price'>200.000 ₫</div>
<!--more-->

<div class='pInfo pPad'>
  <div class='L'><small>Size</small><span>Small, Medium, Large, X Large</span></div>
  <div class='R'><small>Color</small><span>Merah, Kuning, HIjau, Biru</span></div>
</div>
<div class='pInfo o pPad'><small>Sample</small><span>Nullam congue euismod euismod, mauris lacinia pellentesque vehicula</span></div>

<div class='pMart'>
  <small>atau Belanja melalui '<b>Market Place</b>' favorit anda :</small>
  
  <!--[ Change attribute href='#' to add url ]-->
  <a title='Tokopedia' href='#' target='_blank' rel='noopener'>
    <img class='lazy' data-src='https://cdn.statically.io/favicons/tokopedia.com' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
  </a>
  <a title='Bukalapak' href='#' target='_blank' rel='noopener'>
    <img class='lazy' data-src='https://cdn.statically.io/favicons/bukalapak.com' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
  </a>
  <a title='Shopee' href='#' target='_blank' rel='noopener'>
    <img class='lazy' data-src='https://cdn.statically.io/favicons/shopee.co.id' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
  </a>
  <a title='Lazada' href='#' target='_blank' rel='noopener'>
    <img class='lazy' data-src='https://cdn.statically.io/favicons/lazada.co.id' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
  </a>
</div>

<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>

<!--[ Tabs header/title, replace class attribute to class='tbHd scrlH stick' if you want to create a floating tab title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label for='fTabs-1' data-text='Deskripsi'></label>
  <label for='fTabs-2' data-text='Pengiriman'></label>
  <label for='fTabs-3' data-text='Keterangan'></label>
</div>

<div class='tbCn'>
  <!--[ Tabs content ]-->
  <div class='tbText-1'>
    First tab here... 

  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-2'>
    Second tab here...
  
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-3'>
    Third tab here...

  </div>
</div>

Demo

Rp. 200.000

SizeSmall, Medium, Large, X Large

ColorMerah, Kuning, HIjau, Biru

SampleNullam congue euismod euismod, mauris lacinia pellentesque vehicula

atau Belanja melalui 'Market Place' favorit anda :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus. Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus.

In imperdiet ultrices iaculis. Proin consequat, massa ut hendrerit lacinia, eros nibh finibus justo, ut consectetur nibh orci vitae massa. Ut sodales lobortis sollicitudin. Phasellus eget mi dictum neque mollis vehicula. Vestibulum et dolor accumsan, volutpat est quis, posuere tortor. Maecenas euismod turpis eu metus elementum tempor. Pellentesque in ullamcorper massa. Pellentesque lectus ipsum, dignissim nec ornare et, laoreet eget ex. Duis convallis lorem vitae consequat mattis. Aenean dui lectus, auctor eu dui et, gravida pellentesque velit. In vitae justo lacus. Vivamus id imperdiet sapien. Mauris non maximus purus. Nulla facilisi.

Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo. Cras placerat sit amet libero sit amet rhoncus. Aenean ultrices vitae erat ut malesuada. Vivamus fringilla mollis leo, ut tempus nibh feugiat sollicitudin. Phasellus sodales maximus turpis, eget sollicitudin tortor volutpat ac.

Tuy nhiên nếu không dùng Tag Product thì nó sẽ không hiển thị chính xác trên trang. Vậy nếu muốn nó hiển thị với tag khác thì phải làm như thế nào.

Hãy vào chỉnh sửa Template tìm và đổi tất cả các chữ "Product" thành tên mới bạn muốn hiển thị dạng sản phẩm. Bây giờ bài viết bạn cũng phải đổi thành tag mới nó mới hiển thị đúng nhé.