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.