# @ssjs/collective-look-widget

> ## Requirements

Latest version **0.1.74** (published 2018-08-21) · 0 weekly downloads

## Install

```sh
npm install @ssjs/collective-look-widget
pnpm add @ssjs/collective-look-widget
yarn add @ssjs/collective-look-widget
bun add @ssjs/collective-look-widget
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.74 |
| Published | 2018-08-21 |
| First published | 2018-07-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 8.* |
| Dependencies | 16 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ssjs |

## Links

- npm: https://www.npmjs.com/package/@ssjs/collective-look-widget
- npm.io page: https://npm.io/package/@ssjs/collective-look-widget

## Dependencies (16)

- [vue](https://npm.io/package/vue.md) ^2.5.17
- [vuex](https://npm.io/package/vuex.md) ^3.0.1
- [bowser](https://npm.io/package/bowser.md) ^1.9.4
- [spin.js](https://npm.io/package/spin.js.md) ^4.0.0
- [vue-motion](https://npm.io/package/vue-motion.md) ^0.2.3
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.1
- [vuex-class](https://npm.io/package/vuex-class.md) ^0.3.1
- [vue2-hammer](https://npm.io/package/vue2-hammer.md) ^2.0.1
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^2.0.4
- [@ssjs/web-common](https://npm.io/package/@ssjs/web-common.md) ^2.3.0
- [lodash-decorators](https://npm.io/package/lodash-decorators.md) ^6.0.0
- [vue2-touch-events](https://npm.io/package/vue2-touch-events.md) ^1.0.0
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^6.0.0
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^7.0.0
- [@ssjs/shopstyle-ts-codegen](https://npm.io/package/@ssjs/shopstyle-ts-codegen.md) ^9.5.0
- [@webcomponents/webcomponentsjs](https://npm.io/package/@webcomponents/webcomponentsjs.md) ^2.0.4

## Recent versions

- 0.1.74 (latest) — 2018-08-21
- 0.1.73 — 2018-08-20
- 0.1.72 — 2018-08-20
- 0.1.71 — 2018-08-20
- 0.1.70 — 2018-08-20
- 0.1.69 — 2018-08-20
- 0.1.68 — 2018-08-20
- 0.1.67 — 2018-08-20
- 0.1.66 — 2018-08-20
- 0.1.65 — 2018-08-20
- 0.1.64 — 2018-08-20
- 0.1.63 — 2018-08-20
- 0.1.62 — 2018-08-20
- 0.1.61 — 2018-08-20
- 0.1.60 — 2018-08-20
- … 58 more at https://npm.io/package/@ssjs/collective-look-widget/versions

## README

# Collective Look Widget

## Requirements

You will need to be on **node version 8** to build and run this project.

While not a requirement, installing nvm will help you switch between different versions of node. The full instructions for installing nvm are [here](https://github.com/creationix/nvm), or just run this script

```bash
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
```


## Getting started

```bash
# If using nvm, run this to use the correct version of node
nvm use
npm install
```

#### Compiles and hot-reloads for development
```
npm run serve
```

#### Compiles and minifies for production
```
npm run build
```

## Embedding

Embedding the widget is pretty simple

```html
<div class="sc-look-widget" sc-widget-id="abc123"></div>
<script src="https://domain.com/path/to/build/output.js"></script>
```

_Note that this widget is also backwards compatible with the previous embed format
using `data-options="{...}"`_

## Encapsulation

This widget embeds a self-encapsulated Vue component into it's host page. Typically doing this would lead to all sorts of problems with the parent pages styles breaking
our widget.

In order to get around this we do several things:

* __Reset styles with [all: initial](https://developer.mozilla.org/en-US/docs/Web/CSS/all)__ (with a polyfill for IE)
  * This means _no_ styles inherit. This includes our own, so you must be explicit about all styles of all elements
  * This protects us from rules like `img { float: left !important; }`. Keep in mind we're on anyone's site, you never know what kind of crazy css they will have
* __Maximize specificity by postprocessing CSS to include !important__ with [PostCSS Safe Important](https://github.com/Crimx/postcss-safe-important)
  * This, combined with our `@include scope` mixin which increases our selector specificty via nested ID selectors, helps us ensure we override any other CSS on the page for our own content
* __[Vue Scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html)__
  * This simply ensures our styles don't affect the surrounding page or the wrong components
* __Class prefixing with `.sc-*`__
  * This simply helps ensure we aren't affected by parent selectors. E.g. using class `.loading` would risk the parent page having such a class defined, but namespacing all classes prefixed with `.sc-` helps us ensure we don't inherit any styles we don't want to

## Testing

The development page contains a bookmarklet in the lower right corner that you can drag to your bookmarks bar. Simply visit a page with a look widget and click on
the bookmarklet to replace the existing one with the latest widget code from your local server

Some example URLs to use the bookmarklet on are:

* https://gabbydalfen.com/shop-my-instagram-2/
* http://www.obsessionsnow.com/shop-ig/
* https://thevivaluxury.com/instagram-shop/
* https://takeaim.nu/shop/


## Creating new components

Use this boilerplate snippet for new vue components to ensure you
set the right CSS scoping and encapsulation defaults

```html
<template>
  <!-- Template here -->
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class NewComponent extends Vue {
  // Component logic here
}
</script>

<style scoped lang="scss">
@import '../scss/common.scss';

@include scope {
  /* Styles here */
}
</style>
```

---
_Source: https://npm.io/package/@ssjs/collective-look-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._