ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webデザインフレームワークは多数ありますが、多機能なものほど縛りが強く、自分の思うようにデザインできないことがあります。そんな中、最近ではWeb Componentという概念によって、一つのコンポーネント単位でのUIも出てきています。

今回紹介するShop.jsはECサイトで使われる要素を小さなUIコンポーネントとしてまとめたライブラリになります。

Shop.jsの使い方

cartというタグがこのように表示されます。

洋服の数量を変えれば金額もアップデートされます。

checkoutタグで決済UIが出ます。

横から出てくるタイプのカート。

モーダル型の決済UI。

Shop.jsを使うことで商品一覧やカート、決済機能だけを手軽に組み込めるようになります。大量の商品がある中では利用が難しそうですが、数点の商品だけを厳選して扱うショップであれば良さそうです。

Shop.jsはHTML5/JavaScript製のオープンソース・ソフトウェア(BSD License)です。

Shop.js - One Library For All Your Ecommerce Needs

hanzo-io/shop.js: ?️ Ecommerce UI components and framework powered by El.js and Hanzo.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2