@ssjs/collective-look-widget NPM

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, or just run this script

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

Getting started

# 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

<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 (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
- 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
- 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:

Creating new components

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

<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>