@tipser/tipser-elements NPM

tipser-elements package

Tipser Elements is a React components library from Tipser enabling you to add shopable content to your site with minimal effort. You can add simple components like products with buy buttons, collections of products and articles, but also more complex grids or whole pages.

The package allows you to use Tipser's product repository and create inline shops embedded into your pages as well as the entire websites.

Quick Start with NPM version

Install with npm: npm install @tipser/tipser-elements
Install with yarn: yarn add @tipser/tipser-elements

Follow the instructions in Available Components section to add particular components to your app.

Quick React example

<App 
    options = {{
        env: "prod",
        lang: "en"
    }}
    basePath="/"
    id="45d4anZqSAmI848SQKmaSI" 
/>

Quick start with scripted injectable version

They are a ready-to-use out-of-the-box solution to be placed on your website, using React even though your own website doesn’t.

Script to be injected

The script should be added in the body section of the page. Please see widget config section to get more details on configuration options.

(function(){

    // --------------------------------------
    // TIPSER WIDGET CODE CONFIG STARTS HERE
    // --------------------------------------
    var widgetConfig = {
        posId: 'xxxxxx',
        lang: 'de',
        env: 'prod',
        openOldDialog: true,
        primaryColor: 'black'
        // HERE GOES ADDITIONAL WIDGET OPTIONS
    };

    var basePath = '/shop'; // default /
    var tipserElementIdToBeMount = "xxxxx";
    var domElementSelectorWhereToMount = "#tipser_shop";

    // --------------------------------------
    // END OF CONFIG
    // --------------------------------------

    var head = document.head;
    var link = document.createElement("link");

    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = "https://cdn.tipser.com/tipser-publishers/" + widgetConfig.posId + "-latest.css";

    head.appendChild(link);
    
    (function(d, s, id){
        var js, tjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.async = false; js.id = id;
        js.src = "https://cdn.tipser.com/tipser-widget2/Core-tipser-elements-latest.js";
        js.onload = js.onreadystatechange = function() {
            var rs = this.readyState; if (rs && rs != "complete" && rs != "loaded") return;
            var tipserEl = new tipserWidget.Core.TipserElementModule(widgetConfig);
                tipserEl.mount(tipserElementIdToBeMount, document.querySelector(domElementSelectorWhereToMount), basePath);
        }
        tjs.parentNode.insertBefore(js, tjs);
    }(document, "script", "tipser-js-core"));

})();

window.addEventListener('message', function(event) {
    var tab = document.getElementById('twshoptab');
    if (!tab) {
        console.warn('no Tipser shopping cart is visible on page.');
    }
    if (event.data.command && event.data.command === 'tipser.api.cartItemsCountChange') {
        if (event.data.payload && event.data.payload.count > 0) {
            tab.style.display='block';
        } else {
            tab.style.display='none';
        }
    }
});

Widget config options explained

Custom styling

Available components

Backend source of components

Main (root) components

Main components are dedicated to render the whole structure or to configure nested components.

App
Site
Tipser Element

Content components

Content components are the building blocks of Tipser Elements. Components may contain other components as act as hierachy.

Article
Brand
Collection
Container
Grid
Image
Column Layout
Horizontal Menu
Link
Menu
Slot
SlottableLink
Page
Product
Site

Developing Tipser Elements

Running locally

Clone the project from git
Run yarn install
Run yarn start then you can see the demo page under: http://localhost:3001/

Please note that the project is dependent on another internal tipser npm package: @tipser/tipser-sdk, which is occassionally updated. To enforce usage of the most recent tipser-sdk version run yarn add @tipser/tipser-sdk.

Publishing new versions

Merge develop to production with GitHub Pull Request
Switch to production locally and run yarn release
Merge production back to develop (to sync version number in package.json)

In a less common scenario when you need to update minor or major version instead of patch version, replace yarn release command with one of the following commands:

npm version minor && git push --follow-tags
npm version major && git push --follow-tags

Testing the library in other projects without releasing it

Sometimes it's handy to see how the changes in tipser-elements work in client apps before a new version of tipser-elements is ready to be deployed to NPM.

The following commands make it possible: 1. In tipser-elements directory run: yarn build && yarn link to build and create a symlink for the locally modified version 2. In the client app directory run: yarn link @tipser/tipser-elements to switch to the locally modified version 3. After every subsequent change rebuild tipser-elements with yarn build command or use yarn start for continuous rebuilds