# sellin-blog-plugin

> Simple components for converting blog to e-shop.

Latest version **0.0.1** (published 2021-12-06) · 0 weekly downloads

## Install

```sh
npm install sellin-blog-plugin
pnpm add sellin-blog-plugin
yarn add sellin-blog-plugin
bun add sellin-blog-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2021-12-06 |
| First published | 2021-12-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 38.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | asayapin |

## Links

- npm: https://www.npmjs.com/package/sellin-blog-plugin
- npm.io page: https://npm.io/package/sellin-blog-plugin

## Recent versions

- 0.0.1 (latest) — 2021-12-06

## README

# 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">`

---
_Source: https://npm.io/package/sellin-blog-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._