# @seasons/try-with-seasons

> try-with-seasons.js is a script that renders a Seasons widget on third-party brand partner site product pages to prompt users to try the product on Seasons.

Latest version **1.0.7** (published 2021-02-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install @seasons/try-with-seasons
pnpm add @seasons/try-with-seasons
yarn add @seasons/try-with-seasons
bun add @seasons/try-with-seasons
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2021-02-03 |
| First published | 2020-12-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | omarrasheed, l2succes, daniel_vebman, faiyam.rahman, javamonn, kierangillen |

## Links

- npm: https://www.npmjs.com/package/@seasons/try-with-seasons
- npm.io page: https://npm.io/package/@seasons/try-with-seasons

## Recent versions

- 1.0.7 (latest) — 2021-02-03
- 1.0.6 — 2021-01-11
- 1.0.5 — 2020-12-15
- 1.0.4 — 2020-12-15
- 1.0.3 — 2020-12-09
- 1.0.2 — 2020-12-09
- 1.0.1 — 2020-12-09
- 1.0.0 — 2020-12-02

## README

# Try With Seasons

try-with-seasons.js is a script that renders a Seasons widget on third-party brand partner site product pages to prompt users to try the product on Seasons.

## Usage

You can include the widget as a script tag in your html, or via npm. Included below are some examples of including as a script tag.

### Manual

Include the script within the third-party site HTML:

```html
<script type="text/javascript">
  const script = document.createElement("script");
  script.onload = () => {
    TryWithSeasons.render({
      containerElement: document.getElementById("try-with-seasons"),
      type: TryWithSeasons.WidgetType.CTA_DARK,
    });
  };
  script.src = "https://wearseasons.com/scripts/try-with-seasons.js";
  document.head.appendChild(script);
</script>
```

A variety of widget types are available for rendering: [WidgetType](./src/types.ts)

Optionally, an object of type `ProductDetails` may be passed to `TryWithSeasons.render`. If it is not included, product details are resolved according to the structured data included within the HTML.

If product details can not be resolved, or if the corresponding product can not be found on Seasons or is not currently available, nothing is rendered.

### Shopify

Right now, Shopify support requires manual integration into the site theme. As an example, we can walkthrough including the script into the demo [Seasons Shopify](https://seasons-nyc.myshopify.com/admin).

1. Navigate to the [Theme code editor](https://seasons-nyc.myshopify.com/admin/themes/74994286652), found by looking in the left-hand navigation, "SALES CHANNELS" -> "Online Store" -> "Themes" -> "Actions" -> "Edit code"
2. Within `Templates/product-template.liquid`, copy `<div id="try-with-seasons" />` into the desired placement. It will serve as the `containerElement` for the widget:

![screenshot-1](screenshots/screenshot-1.png)

3. Within `Layout/theme.liquid`, add a script tag to load in and render the desired widget:

![screenshot-2](screenshots/screenshot-2.png)

4. Assuming you did everything correctly, your Shopify storefront should look like the following:

![screenshot-3](screenshots/screenshot-3.png)

### Seasons Metadata

Seasons may need to update product metadata in order to establish the "link" between internal and external products. If you install the script correctly but do not see the widget render, contact Seasons about updating the metadata.

---
_Source: https://npm.io/package/@seasons/try-with-seasons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._