1.0.12-dev-a1fb6e7 • Published 7 years ago

@tipser/tipser-elements v1.0.12-dev-a1fb6e7

Weekly downloads
8,996
License
ISC
Repository
github
Last release
7 years ago

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

Publishing new versions

  1. Merge develop to production with GitHub Pull Request
  2. Switch to production locally and run yarn release
  3. 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
4.4.1

3 years ago

4.4.0

3 years ago

4.4.3

3 years ago

4.4.2

3 years ago

4.5.0

3 years ago

4.5.1

2 years ago

4.3.0

3 years ago

4.2.3

3 years ago

4.2.2

3 years ago

4.2.4

3 years ago

4.2.1

3 years ago

4.2.0

3 years ago

4.1.0

3 years ago

3.3.30

3 years ago

3.3.31

3 years ago

4.0.12

3 years ago

4.0.11

3 years ago

4.0.14

3 years ago

4.0.13

3 years ago

4.0.7

3 years ago

4.0.9

3 years ago

4.0.8

3 years ago

3.3.28

3 years ago

3.3.29

3 years ago

4.0.10

3 years ago

4.0.5

4 years ago

4.0.6

3 years ago

3.3.27

4 years ago

4.0.4

4 years ago

4.0.1

4 years ago

4.0.0

4 years ago

4.0.3

4 years ago

4.0.2

4 years ago

3.3.18

4 years ago

3.3.19

4 years ago

3.3.24

4 years ago

3.3.25

4 years ago

3.3.26

4 years ago

3.3.21

4 years ago

3.3.22

4 years ago

3.3.23

4 years ago

3.3.14

4 years ago

3.3.15

4 years ago

3.3.17

4 years ago

3.3.13

4 years ago

3.3.12

4 years ago

3.3.11

4 years ago

3.3.9

4 years ago

3.3.10

4 years ago

3.3.8

4 years ago

3.3.7

4 years ago

3.3.6

4 years ago

3.3.1

4 years ago

3.3.5

4 years ago

3.3.4

4 years ago

3.3.3

4 years ago

3.3.2

4 years ago

3.3.0

4 years ago

2.3.32

4 years ago

3.2.2

4 years ago

3.2.1

4 years ago

3.2.3

4 years ago

3.2.0

4 years ago

3.1.12

4 years ago

3.1.13

4 years ago

3.1.11

4 years ago

2.3.31

4 years ago

3.1.9

4 years ago

3.1.10

4 years ago

3.1.7

4 years ago

3.1.8

4 years ago

3.1.6

4 years ago

3.1.5

4 years ago

3.1.4

4 years ago

3.1.3

5 years ago

3.1.2

5 years ago

3.1.1

5 years ago

3.1.0

5 years ago

3.0.26

5 years ago

3.0.25

5 years ago

3.0.23

5 years ago

3.0.24

5 years ago

3.0.22

5 years ago

2.3.30

5 years ago

3.0.21

5 years ago

2.3.29

5 years ago

3.0.20

5 years ago

3.0.19

5 years ago

2.3.28

5 years ago

3.0.18

5 years ago

3.0.17

5 years ago

3.0.16

5 years ago

2.3.27

5 years ago

3.0.15

5 years ago

2.3.26

5 years ago

2.3.25

5 years ago

3.0.14

5 years ago

2.3.24

5 years ago

3.0.12

5 years ago

3.0.13

5 years ago

3.0.11

5 years ago

3.0.10

5 years ago

3.0.8

5 years ago

3.0.7

5 years ago

3.0.9

5 years ago

2.3.23

5 years ago

3.0.6

5 years ago

2.3.17

5 years ago

2.3.16

5 years ago

2.3.19

5 years ago

2.3.18

5 years ago

2.3.13

5 years ago

2.3.12

5 years ago

2.3.15

5 years ago

2.3.14

5 years ago

2.3.11

5 years ago

2.3.20

5 years ago

2.3.22

5 years ago

2.3.21

5 years ago

3.0.4

5 years ago

3.0.3

5 years ago

3.0.5

5 years ago

3.0.2

5 years ago

2.3.10

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.3.9

5 years ago

2.3.8

5 years ago

2.3.6

5 years ago

2.3.5

5 years ago

2.3.7

5 years ago

2.3.4

5 years ago

2.3.0

5 years ago

2.3.2

5 years ago

2.3.3

5 years ago

2.2.14

5 years ago

2.2.13

5 years ago

2.2.12

5 years ago

2.2.11

5 years ago

2.2.10

5 years ago

2.2.9

5 years ago

2.2.8

5 years ago

2.2.7

5 years ago

2.2.6

5 years ago

2.2.5

5 years ago

2.2.4

5 years ago

2.2.3

5 years ago

2.2.2

5 years ago

2.2.1

5 years ago

2.2.0

5 years ago

2.1.69

5 years ago

2.1.68

5 years ago

2.1.67

5 years ago

2.1.66

5 years ago

2.1.65

5 years ago

2.1.64

5 years ago

2.1.63

5 years ago

2.1.62

5 years ago

2.1.61

5 years ago

2.1.60

5 years ago

2.1.57

5 years ago

2.1.56

5 years ago

2.1.53

5 years ago

2.1.52

5 years ago

2.1.50

5 years ago

2.1.51

5 years ago

2.1.49

5 years ago

2.1.48

5 years ago

2.1.47

5 years ago

2.1.46

5 years ago

2.1.45

5 years ago

2.1.44

5 years ago

2.1.43

5 years ago

2.1.42

5 years ago

2.1.41

5 years ago

2.1.40

6 years ago

2.1.38

6 years ago

2.1.37

6 years ago

2.1.36

6 years ago

2.1.35

6 years ago

2.1.34

6 years ago

2.1.33

6 years ago

2.1.32

6 years ago

2.1.31

6 years ago

2.1.30

6 years ago

2.1.29

6 years ago

2.1.28

6 years ago

2.1.27

6 years ago

2.1.26

6 years ago

2.1.25

6 years ago

2.1.23

6 years ago

2.1.22

6 years ago

2.1.21

6 years ago

2.1.20

6 years ago

2.1.19

6 years ago

2.1.18

6 years ago

2.1.17

6 years ago

2.1.16

6 years ago

2.1.15

6 years ago

2.1.14

6 years ago

2.1.12

6 years ago

2.1.13

6 years ago

2.1.11

6 years ago

2.1.10

6 years ago

2.1.9

6 years ago

2.1.8

6 years ago

2.1.7

6 years ago

2.1.6

6 years ago

2.1.5

6 years ago

2.1.4

6 years ago

2.1.3

6 years ago

2.1.2

6 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.11

6 years ago

2.0.10

6 years ago

2.0.9

6 years ago

2.0.8

6 years ago

2.0.5

6 years ago

2.0.6

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.0.120

6 years ago

1.0.119

6 years ago

1.0.118

6 years ago

1.0.117

6 years ago

1.0.116

6 years ago

1.0.115

6 years ago

1.0.114

6 years ago

1.0.113

6 years ago

1.0.112

6 years ago

1.0.111

6 years ago

1.0.110

6 years ago

1.0.109

6 years ago

1.0.108

6 years ago

1.0.107

6 years ago

1.0.106

6 years ago

1.0.105

6 years ago

1.0.104

6 years ago

1.0.103

6 years ago

1.0.102

7 years ago

1.0.101

7 years ago

1.0.100

7 years ago

1.0.99

7 years ago

1.0.98

7 years ago

1.0.97

7 years ago

1.0.96

7 years ago

1.0.93-1

7 years ago

1.0.95

7 years ago

1.0.94

7 years ago

1.0.93

7 years ago

1.0.92

7 years ago

1.0.90

7 years ago

10.0.89-123

7 years ago

1.0.89-4

7 years ago

1.0.89

7 years ago

1.0.89-3

7 years ago

1.0.89-2

7 years ago

1.0.89-0

7 years ago

1.0.88

7 years ago

1.0.88-1

7 years ago

1.0.87

7 years ago

1.0.86

7 years ago

1.0.85

7 years ago

1.0.84

7 years ago

1.0.83

7 years ago

1.0.82

7 years ago

1.0.81

7 years ago

1.0.79

7 years ago

1.0.78

7 years ago

1.0.76

7 years ago

1.0.75

7 years ago

1.0.74

7 years ago

1.0.73

7 years ago

1.0.71

7 years ago

1.0.69

7 years ago

1.0.68

7 years ago

1.0.67

7 years ago

1.0.65

7 years ago

1.0.66

7 years ago

1.0.64

7 years ago

1.0.63

7 years ago

1.0.62

7 years ago

1.0.60

7 years ago

1.0.59

7 years ago

1.0.58

7 years ago

1.0.57

7 years ago

1.0.56

7 years ago

1.0.53

7 years ago

1.0.52

7 years ago

1.0.50

7 years ago

1.0.49

7 years ago

1.0.48

7 years ago

1.0.46

7 years ago

1.0.45

7 years ago

1.0.44

7 years ago

1.0.43

7 years ago

1.0.41

7 years ago

1.0.40

7 years ago

1.0.39

7 years ago

1.0.36

7 years ago

1.0.35

7 years ago

1.0.34

7 years ago

1.0.31

7 years ago

1.0.30

7 years ago

1.0.29

7 years ago

1.0.28

7 years ago

1.0.27

7 years ago

1.0.26

7 years ago

1.0.25

7 years ago

1.0.24

7 years ago

1.0.23

7 years ago

1.0.22

7 years ago

1.0.21

7 years ago

1.0.20

7 years ago

1.0.19

7 years ago

1.0.18

7 years ago

1.0.15

7 years ago

1.0.14

7 years ago

1.0.12

7 years ago

1.0.11

7 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

0.0.49

7 years ago

0.0.46

7 years ago

0.0.45

7 years ago

0.0.43

7 years ago

0.0.40

7 years ago

0.0.38

7 years ago

0.0.37

7 years ago

0.0.27

7 years ago

0.0.26

7 years ago

0.0.25

7 years ago

0.0.24

7 years ago

0.0.21

7 years ago

0.0.20

7 years ago

0.0.19

7 years ago

0.0.18

7 years ago

0.0.17

7 years ago