0.0.1 • Published 2 years ago
sellin-blog-plugin v0.0.1
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
- title:
- add to cart button with price:
.product-price.add-to-cart-button
- product pic:
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
- title:
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
- image:
- title:
.cart-product-title
- image container:
- price container:
.cart-item-price
- counter:
.counter-body
- dec button:
.counter-btn.counter-dec
- input:
.counter-input
- inc button:
.counter-btn.counter-inc
- dec button:
- counter:
- remove button:
.cart-item-remove
- product info:
- container:
- total price:
.cart-total
- clear button:
- else:
- promocode entry:
- text field:
.cart-promocode-input
- input:
.cart-promocode-value
- input:
- apply button:
.cart-promocode-apply
- response:
- while waiting:
.cart-promocode-waiting
- on response:
.cart-promocode-message
- on failure:
.cart-promocode-unexpected-failure
- while waiting:
- text field:
- 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
- input:
- row first cell (title):
- rows:
- 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
- table:
- container:
- empty cart - single div with
- button:
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 ofmain.ts
- in your html files, add
<script defer src="path-to-bundle">
,<div class="product" target="your product id">
,<div class="cart">
0.0.1
2 years ago