Sellin blog

Simple components for converting blog to e-shop.

Uses Svelte, Typescript, Rollup

Contents

• product badge
• cart
• checkout form

Styling guide

available components and their structure is following:

• ProductBadge - short banner with product info and add to cart button: .product-main
  • product pic: .product-pic
  • product info: .product-text, optional .product-link
    • title: .product-title
    • summary: .product-summary
  • add to cart button with price: .product-price.add-to-cart-button
• BuyButton - single button with product name, price and single phrase "add to cart": .buy-button-container
  • title: .buy-button-title
  • price: .buy-button-price
  • add to cart text: .buy-button-message
• Cart - button with popover with hidden part:
  • button: .cart-icon
  • popover: .cart-popover
    • empty cart - single div with .cart-empty
      • else:
        • clear button: .cart-clear
        • list of
          • container: .cart-entry
            • product info: .cart-product-info
              • image container: .cart-product-image
                • image: .cart-product-image-tag
              • title: .cart-product-title
            • price container: .cart-item-price
              • counter: .counter-body
                • dec button: .counter-btn.counter-dec
                • input: .counter-input
                • inc button: .counter-btn.counter-inc
            • remove button: .cart-item-remove
        • total price: .cart-total
    • promocode entry:
      • text field: .cart-promocode-input
        • input: .cart-promocode-value
      • apply button: .cart-promocode-apply
      • response:
        • while waiting: .cart-promocode-waiting
        • on response: .cart-promocode-message
        • on failure: .cart-promocode-unexpected-failure
    • checkout button: .cart-checkout-button
    • checkout container: .cart-checkout
      • container: .checkout-content
        • table: .checkout-table
          • rows: .checkout-row
            • row first cell (title): .checkout-row-title
            • row second cell (value): .checkout-row-item
              • input: .checkout-input
        • place order button: .checkout-place-order-button
        • while waiting for response: .checkout-waiting
        • when received: .checkout-place-order-ok
        • when failed to get response: .checkout-unexpected-failure

Usage

This package is a base which requires a bit of changes in order to work properly:

• Api interface implementation

In order to use (assuming you will work in my-project directory):

• npx degit sveltejs/template my-project
• cd my-project
• node scripts/setupTypeScript.js
• npm i
• npm i -D srs-games-sellin-blog-<version>.tgz
• remove everything but main.ts
• create your implementation of Api interface
• put export default hydrator(new A()).run(document); at the end of main.ts
• in your html files, add <script defer src="path-to-bundle">, <div class="product" target="your product id">, <div class="cart">