@gojiraf/floating-ecommerce-display-test 1.5.3 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +112 -112
- package/dist/gj-ctc-production.js +2 -0
- package/dist/gj-ctc-production.js.LICENSE.txt +169 -0
- package/dist/gj-ctc-staging.js +1 -1
- package/package.json +70 -68
package/README.md
CHANGED
|
@@ -1,112 +1,112 @@
|
|
|
1
|
-
# Floating Ecommerce Display - Iframe
|
|
2
|
-
|
|
3
|
-
<div align="center">
|
|
4
|
-
|
|
5
|
-
| Staging Version | Production Version |
|
|
6
|
-
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
7
|
-
| [](https://www.npmjs.com/package/@gojiraf/floating-ecommerce-display-test) | [](https://www.npmjs.com/package/@gojiraf/floating-ecommerce-display-prod) |
|
|
8
|
-
|
|
9
|
-
</div>
|
|
10
|
-
|
|
11
|
-
## Table of Contents
|
|
12
|
-
|
|
13
|
-
1. [Introduction](#introduction)
|
|
14
|
-
2. [Features](#features)
|
|
15
|
-
3. [Scripts](#scripts)
|
|
16
|
-
4. [Usage](#usage)
|
|
17
|
-
5. [Folder Structure](#folder-structure)
|
|
18
|
-
6. [How to work in this project](#how-to-work-in-this-project)
|
|
19
|
-
|
|
20
|
-
## Introduction
|
|
21
|
-
|
|
22
|
-
This project focuses on the implementation of an iFrame that embeds Live and is distributed to clients through a script. By employing an iFrame and a specialized script, it facilitates the dynamic delivery of real time experiences to end users, offering a practical and scalable solution for integrating Live into clients' sites.
|
|
23
|
-
|
|
24
|
-
## Features
|
|
25
|
-
|
|
26
|
-
- Show Live icon
|
|
27
|
-
- Autoplay iframe when a page is open
|
|
28
|
-
- Open iframe when press in Live icon
|
|
29
|
-
- Open Live in new tab when press in Live icon
|
|
30
|
-
- Change position of Live icon
|
|
31
|
-
|
|
32
|
-
## Script
|
|
33
|
-
|
|
34
|
-
The script accepts the following parameters
|
|
35
|
-
|
|
36
|
-
- showLiveButton - to show the live icon
|
|
37
|
-
- position - to put the icon on the left side or right side
|
|
38
|
-
- openNewTab - to open the live in a new tab
|
|
39
|
-
- autoPlayIframe - to leave the iframe open
|
|
40
|
-
- storeId - id of the client's store
|
|
41
|
-
- marginBottom - to define position of button in bottom, by default value is 0
|
|
42
|
-
- allowClose - to allow user to close live button
|
|
43
|
-
|
|
44
|
-
### Example Script
|
|
45
|
-
|
|
46
|
-
```javascript
|
|
47
|
-
<script
|
|
48
|
-
src="https://unpkg.com/@gojiraf/floating-ecommerce-display-prod/dist/gj-ctc-production.js"
|
|
49
|
-
autoPlayIframe="true"
|
|
50
|
-
openNewTab="false"
|
|
51
|
-
showLiveButton="true"
|
|
52
|
-
position="right"
|
|
53
|
-
storeId="<storeId>"
|
|
54
|
-
marginBottom="55"
|
|
55
|
-
allowClose="true"
|
|
56
|
-
></script>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
## Usage
|
|
60
|
-
|
|
61
|
-
For use this project you need to start a Live and run the command `npm run server:dev` to start a project in local
|
|
62
|
-
|
|
63
|
-
- Simulate params of script in file App.tsx
|
|
64
|
-
|
|
65
|
-
```typescript
|
|
66
|
-
const simulatedProps: AppProps = {
|
|
67
|
-
position: 'left',
|
|
68
|
-
autoPlayIframe: true,
|
|
69
|
-
openLiveNewTab: false,
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
return <ClickToCall {...simulatedProps} />;
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## Folder Structure
|
|
76
|
-
|
|
77
|
-
```bash
|
|
78
|
-
| |-- src/
|
|
79
|
-
| |-- app.tsx
|
|
80
|
-
| |-- index.tsx
|
|
81
|
-
| |-- App.css
|
|
82
|
-
| |-- index.css
|
|
83
|
-
| |-- components/
|
|
84
|
-
| |-- Forms/
|
|
85
|
-
| |-- Iframe/
|
|
86
|
-
| |-- Kit/
|
|
87
|
-
| |-- ClickToCall.tsx
|
|
88
|
-
| |-- FloatingLive.tsx
|
|
89
|
-
| |-- RedirectCard.tsx
|
|
90
|
-
| |-- ...
|
|
91
|
-
|-- README.md
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
## How to work in this project
|
|
95
|
-
|
|
96
|
-
#### Two branchs:
|
|
97
|
-
|
|
98
|
-
- dev - for staging
|
|
99
|
-
- main - for production
|
|
100
|
-
|
|
101
|
-
#### Git flow:
|
|
102
|
-
|
|
103
|
-
- Create a new branch from dev and do the PR against the same branch.
|
|
104
|
-
- Once the PR has been merged against the dev branch, you need to create another PR against the main branch to take the changes to production.
|
|
105
|
-
|
|
106
|
-
#### Deploy changes:
|
|
107
|
-
|
|
108
|
-
- For Deploy changes you need access to gojiraf npm account -
|
|
109
|
-
`You must consult the corresponding person for access`
|
|
110
|
-
- Once you have access to gojiraf npm account you need to open terminal and run `npm login`
|
|
111
|
-
- Then run the script publish corresponding to each environment
|
|
112
|
-
- Don't forguet to change package.json name with -prod or -test and the version of package
|
|
1
|
+
# Floating Ecommerce Display - Iframe
|
|
2
|
+
|
|
3
|
+
<div align="center">
|
|
4
|
+
|
|
5
|
+
| Staging Version | Production Version |
|
|
6
|
+
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
7
|
+
| [](https://www.npmjs.com/package/@gojiraf/floating-ecommerce-display-test) | [](https://www.npmjs.com/package/@gojiraf/floating-ecommerce-display-prod) |
|
|
8
|
+
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
## Table of Contents
|
|
12
|
+
|
|
13
|
+
1. [Introduction](#introduction)
|
|
14
|
+
2. [Features](#features)
|
|
15
|
+
3. [Scripts](#scripts)
|
|
16
|
+
4. [Usage](#usage)
|
|
17
|
+
5. [Folder Structure](#folder-structure)
|
|
18
|
+
6. [How to work in this project](#how-to-work-in-this-project)
|
|
19
|
+
|
|
20
|
+
## Introduction
|
|
21
|
+
|
|
22
|
+
This project focuses on the implementation of an iFrame that embeds Live and is distributed to clients through a script. By employing an iFrame and a specialized script, it facilitates the dynamic delivery of real time experiences to end users, offering a practical and scalable solution for integrating Live into clients' sites.
|
|
23
|
+
|
|
24
|
+
## Features
|
|
25
|
+
|
|
26
|
+
- Show Live icon
|
|
27
|
+
- Autoplay iframe when a page is open
|
|
28
|
+
- Open iframe when press in Live icon
|
|
29
|
+
- Open Live in new tab when press in Live icon
|
|
30
|
+
- Change position of Live icon
|
|
31
|
+
|
|
32
|
+
## Script
|
|
33
|
+
|
|
34
|
+
The script accepts the following parameters
|
|
35
|
+
|
|
36
|
+
- showLiveButton - to show the live icon
|
|
37
|
+
- position - to put the icon on the left side or right side
|
|
38
|
+
- openNewTab - to open the live in a new tab
|
|
39
|
+
- autoPlayIframe - to leave the iframe open
|
|
40
|
+
- storeId - id of the client's store
|
|
41
|
+
- marginBottom - to define position of button in bottom, by default value is 0
|
|
42
|
+
- allowClose - to allow user to close live button
|
|
43
|
+
|
|
44
|
+
### Example Script
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
<script
|
|
48
|
+
src="https://unpkg.com/@gojiraf/floating-ecommerce-display-prod/dist/gj-ctc-production.js"
|
|
49
|
+
autoPlayIframe="true"
|
|
50
|
+
openNewTab="false"
|
|
51
|
+
showLiveButton="true"
|
|
52
|
+
position="right"
|
|
53
|
+
storeId="<storeId>"
|
|
54
|
+
marginBottom="55"
|
|
55
|
+
allowClose="true"
|
|
56
|
+
></script>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Usage
|
|
60
|
+
|
|
61
|
+
For use this project you need to start a Live and run the command `npm run server:dev` to start a project in local
|
|
62
|
+
|
|
63
|
+
- Simulate params of script in file App.tsx
|
|
64
|
+
|
|
65
|
+
```typescript
|
|
66
|
+
const simulatedProps: AppProps = {
|
|
67
|
+
position: 'left',
|
|
68
|
+
autoPlayIframe: true,
|
|
69
|
+
openLiveNewTab: false,
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
return <ClickToCall {...simulatedProps} />;
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Folder Structure
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
| |-- src/
|
|
79
|
+
| |-- app.tsx
|
|
80
|
+
| |-- index.tsx
|
|
81
|
+
| |-- App.css
|
|
82
|
+
| |-- index.css
|
|
83
|
+
| |-- components/
|
|
84
|
+
| |-- Forms/
|
|
85
|
+
| |-- Iframe/
|
|
86
|
+
| |-- Kit/
|
|
87
|
+
| |-- ClickToCall.tsx
|
|
88
|
+
| |-- FloatingLive.tsx
|
|
89
|
+
| |-- RedirectCard.tsx
|
|
90
|
+
| |-- ...
|
|
91
|
+
|-- README.md
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## How to work in this project
|
|
95
|
+
|
|
96
|
+
#### Two branchs:
|
|
97
|
+
|
|
98
|
+
- dev - for staging
|
|
99
|
+
- main - for production
|
|
100
|
+
|
|
101
|
+
#### Git flow:
|
|
102
|
+
|
|
103
|
+
- Create a new branch from dev and do the PR against the same branch.
|
|
104
|
+
- Once the PR has been merged against the dev branch, you need to create another PR against the main branch to take the changes to production.
|
|
105
|
+
|
|
106
|
+
#### Deploy changes:
|
|
107
|
+
|
|
108
|
+
- For Deploy changes you need access to gojiraf npm account -
|
|
109
|
+
`You must consult the corresponding person for access`
|
|
110
|
+
- Once you have access to gojiraf npm account you need to open terminal and run `npm login`
|
|
111
|
+
- Then run the script publish corresponding to each environment
|
|
112
|
+
- Don't forguet to change package.json name with -prod or -test and the version of package
|