Insert a script in your site's <head> tag to load the Topsort Building Blocks library. Ensure the script has defer to load it without affecting your site load times. Replace x.y.z with the desired version, or use @latest to use the latest version of the library at all times.
```
<head>
  
  <script
    defer
    src="https://unpkg.com/@topsort/building-blocks@x.y.z/dist/index.js"
  ></script>
</head>
```

After the DOM is loaded, create an instance of the TopsortBlocks library. For example:

document.addEventListener("DOMContentLoaded", async () => {
  const tsBlocks = new TopsortBlocks();
});

Initialize it:

With defaults:

await tsBlocks.init({
  apiKey: "api-key-123",
  externalVendorId: "vendor-id-123",
});

With custom props:

await tsBlocks.init({
  apiKey: "api-key-123",
  externalVendorId: "vendor-id-123",
  // if you want to use a custom target class:
  promoteTargetClassName: "my-custom-promote-target",
  style: {
    // color RGBs acceptable in either format:
    primaryColorRgb: "50, 175, 200",
    secondaryColorRgb: "50, 175, 200",
    fontColorRgb: [50, 175, 200],

    button: {
      // defaults to "sm":
      borderRadius: "none" | "sm" | "full",
    },
  },
  text: {
    // defaults to "Promote":
    promoteButton: "Create Campaign",
    // defaults to "See Campaign":
    detailButton: "View Campaign",
  },
});

If there is no product related markup added, the only option to promote a product would be through a 'Promote My Shop' button which will add all vendor products to a campaign.

If you decide to integrate the product promotion feature, follow these steps:

In your markup, add the following HTML class and data attributes to the element(s) you want a Promote button appended to:

<div
  class="ts-promote-target some-other-custom-class"
  data-ts-product-id="product-id-123"
  data-ts-product-name="My Product"
  data-ts-product-img-url="https://picsum.photos/100"
>
  ...
</div>

This target class is also a static property of the TopsortBlocks class:

<div
  class={`${TopsortBlocks.promoteTargetClassName} my-custom-class`}
  data-ts-product-id="product-id-123"
  data-ts-product-name="My Product"
  data-ts-product-img-url="https://picsum.photos/100"
>
  ...
</div>

If you are using a custom promote target class name, use it instead:

<div
  class="my-custom-promote-target my-custom-class"
  data-ts-product-id="product-id-123"
  data-ts-product-name="My Product"
  data-ts-product-img-url="https://picsum.photos/100"
>
  ...
</div>

Call useProductPromotion to have the Promote buttons rendered, and each time you want to have the Promote buttons rerendered such as after navigating to a new page of products or filtering the product list:
```
tsBlocks.useProductPromotion();
```

Development

Running the demo

Install the dependencies:
```
npm install
```
Create and set up your .env file:
```
cp .env.example .env
```
Start the development server which runs the demo at localhost:8080:
```
npm run start
```

Adding new environment variables

Environment variables should not contain secrets (e.g. private API keys) since they will be injected into the published build. They are meant to change the behaviour between different environments such as calling a local, staging, or production Central Services API base URL.

To add a new env var:

Add its name to .env.example with an empty or default value:
```
MY_NEW_PUBLIC_VAR=
```
Add its name and value to your .env:
```
MY_NEW_PUBLIC_VAR="the actual value"
```
To have it injected into the app, add it to webpack.common.js in the DefinePlugin:

Remember to wrap the value in JSON.stringify() because the DefinePlugin does a find-and-replace and the value given to it must include actual quotes inside of the string itself.

For reference, see the Tip on the Webpack DefinePlugin docs.
```
new webpack.DefinePlugin({
 // ...the rest
 MY_NEW_PUBLIC_VAR: JSON.stringify(process.env.MY_NEW_PUBLIC_VAR),
}),
```
To inform TypeScript of this new global variable, add it to src/types.ts under the global declaration with its type:
```
declare global {
  // ...the rest
  const MY_NEW_PUBLIC_VAR: string;
}
```
To inform eslint of this new global variable, add it to .eslintrc.js under globals with a readonly value (assuming it's meant to be readonly):
```
globals: {
 // ...the rest
 MY_NEW_PUBLIC_VAR: "readonly",
},
```
Ensure you restart your dev server so webpack can pick up the latest changes.

Keywords

FAQs

What is @topsort/building-blocks?

Is @topsort/building-blocks popular?

Is @topsort/building-blocks well maintained?

Package last updated on 10 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@topsort/building-blocks