@akinon/projectzero 2.0.6-beta.0 → 2.0.6-rc.0
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/CHANGELOG.md +7 -1
- package/app-template/.env.example +1 -0
- package/app-template/CHANGELOG.md +69 -32
- package/app-template/README.md +25 -1
- package/app-template/next.config.mjs +4 -1
- package/app-template/package.json +41 -41
- package/app-template/src/app/global-error.tsx +22 -0
- package/app-template/src/hooks/index.ts +2 -0
- package/app-template/src/plugins.js +1 -0
- package/app-template/src/proxy.ts +2 -1
- package/app-template/src/views/header/search/index.tsx +13 -5
- package/app-template/src/views/product/slider.tsx +85 -38
- package/commands/plugins.ts +4 -0
- package/dist/commands/plugins.js +4 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
# @akinon/projectzero
|
|
2
2
|
|
|
3
|
-
## 2.0.6-
|
|
3
|
+
## 2.0.6-rc.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 143be2b9: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
|
|
8
|
+
- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
|
|
9
|
+
- e18836b2: ZERO-4160: Restore scope in Sentry addon configuration in akinon.json
|
|
4
10
|
|
|
5
11
|
## 2.0.5
|
|
6
12
|
|
|
@@ -7,6 +7,7 @@ NEXT_PUBLIC_URL=http://localhost:3000
|
|
|
7
7
|
SERVICE_BACKEND_URL=https://02fde10fee4440269e695aa10707dfaf.lb.akinoncloud.com
|
|
8
8
|
SITEMAP_S3_BUCKET_NAME=0fb534
|
|
9
9
|
NEXT_PUBLIC_VIRTUAL_TRY_ON_API_URL=https://d2a26507c7094f359aba349b96a96881.lb.akinoncloud.com
|
|
10
|
+
NEXT_PUBLIC_ENABLE_IMAGE_SEARCH=true
|
|
10
11
|
|
|
11
12
|
# LOG_LEVEL_DEV=debug # For more details, please refer to the Logging documentation.
|
|
12
13
|
|
|
@@ -1,37 +1,74 @@
|
|
|
1
1
|
# projectzeronext
|
|
2
2
|
|
|
3
|
-
## 2.0.6-
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
3
|
+
## 2.0.6-rc.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 1a8622a9b: ZERO-3392: Implemented AI Search functionality and update env
|
|
8
|
+
- b55acb768: ZERO-2577: Fix pagination bug and update usePagination hook and ensure pagination controls rendering correctly
|
|
9
|
+
- 143be2b9: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
|
|
10
|
+
- 9f8cd3bc5: ZERO-3449: AI Search Active Filters & Crop Style changes have been implemented
|
|
11
|
+
- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
|
|
12
|
+
- c0228aff: ZERO-4159: Upgrade the package versions
|
|
13
|
+
- b05c35435: ZERO-2570: Category filters routes to absolute url
|
|
14
|
+
- e18836b2: ZERO-4160: Restore scope in Sentry addon configuration in akinon.json
|
|
15
|
+
- c3244a31: ZERO-4013: Update runtime version to node:25-alpine in project configuration
|
|
16
|
+
- Updated dependencies [b02e7a7a]
|
|
17
|
+
- Updated dependencies [0cf9ea23]
|
|
18
|
+
- Updated dependencies [324f97d5]
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
- Updated dependencies [eba125b2]
|
|
21
|
+
- Updated dependencies [823a4449]
|
|
22
|
+
- Updated dependencies [b55acb768]
|
|
23
|
+
- Updated dependencies [760258c1]
|
|
24
|
+
- Updated dependencies [5da13fff]
|
|
25
|
+
- Updated dependencies [143be2b9]
|
|
26
|
+
- Updated dependencies [7889b08f]
|
|
27
|
+
- Updated dependencies [fb4aa9b4]
|
|
28
|
+
- Updated dependencies [9f8cd3bc5]
|
|
29
|
+
- Updated dependencies [bfafa3f4]
|
|
30
|
+
- Updated dependencies [00b9f488]
|
|
31
|
+
- Updated dependencies [57d7eb30]
|
|
32
|
+
- Updated dependencies [d99a6a7d]
|
|
33
|
+
- Updated dependencies [9db81a71]
|
|
34
|
+
- Updated dependencies [591e345e]
|
|
35
|
+
- Updated dependencies [0df6bc1f]
|
|
36
|
+
- Updated dependencies [4de5303c5]
|
|
37
|
+
- Updated dependencies [63a72000]
|
|
38
|
+
- Updated dependencies [95b139dc]
|
|
39
|
+
- Updated dependencies [1d00f2d0]
|
|
40
|
+
- Updated dependencies [4ac7b2a1]
|
|
41
|
+
- Updated dependencies [4998a963]
|
|
42
|
+
- Updated dependencies [c0228aff]
|
|
43
|
+
- Updated dependencies [3909d322]
|
|
44
|
+
- Updated dependencies [e18836b2]
|
|
45
|
+
- @akinon/pz-flow-payment@2.0.6-rc.0
|
|
46
|
+
- @akinon/next@2.0.6-rc.0
|
|
47
|
+
- @akinon/pz-checkout-gift-pack@2.0.6-rc.0
|
|
48
|
+
- @akinon/pz-one-click-checkout@2.0.6-rc.0
|
|
49
|
+
- @akinon/pz-basket-gift-pack@2.0.6-rc.0
|
|
50
|
+
- @akinon/pz-masterpass-rest@2.0.6-rc.0
|
|
51
|
+
- @akinon/pz-pay-on-delivery@2.0.6-rc.0
|
|
52
|
+
- @akinon/pz-credit-payment@2.0.6-rc.0
|
|
53
|
+
- @akinon/pz-click-collect@2.0.6-rc.0
|
|
54
|
+
- @akinon/pz-multi-basket@2.0.6-rc.0
|
|
55
|
+
- @akinon/pz-masterpass@2.0.6-rc.0
|
|
56
|
+
- @akinon/pz-gpay@2.0.6-rc.0
|
|
57
|
+
- @akinon/pz-b2b@2.0.6-rc.0
|
|
58
|
+
- @akinon/pz-bkm@2.0.6-rc.0
|
|
59
|
+
- @akinon/pz-otp@2.0.6-rc.0
|
|
60
|
+
- @akinon/pz-similar-products@2.0.6-rc.0
|
|
61
|
+
- @akinon/pz-virtual-try-on@2.0.6-rc.0
|
|
62
|
+
- @akinon/pz-theme@2.0.6-rc.0
|
|
63
|
+
- @akinon/pz-akifast@2.0.6-rc.0
|
|
64
|
+
- @akinon/pz-apple-pay@2.0.6-rc.0
|
|
65
|
+
- @akinon/pz-cybersource-uc@2.0.6-rc.0
|
|
66
|
+
- @akinon/pz-google-pay@2.0.6-rc.0
|
|
67
|
+
- @akinon/pz-haso@2.0.6-rc.0
|
|
68
|
+
- @akinon/pz-hepsipay@2.0.6-rc.0
|
|
69
|
+
- @akinon/pz-saved-card@2.0.6-rc.0
|
|
70
|
+
- @akinon/pz-tabby-extension@2.0.6-rc.0
|
|
71
|
+
- @akinon/pz-tamara-extension@2.0.6-rc.0
|
|
35
72
|
|
|
36
73
|
## 2.0.5
|
|
37
74
|
|
package/app-template/README.md
CHANGED
|
@@ -12,6 +12,30 @@ Run `cp .env.example .env && yarn` command at project root and all dependencies
|
|
|
12
12
|
|
|
13
13
|
- `SITEMAP_S3_BUCKET_NAME`: S3 bucket name for XML sitemaps (e.g., "0fb534"). This is required for the sitemap route to function correctly.
|
|
14
14
|
|
|
15
|
+
### Optional Environment Variables
|
|
16
|
+
|
|
17
|
+
- `NEXT_PUBLIC_ENABLE_IMAGE_SEARCH`: Set to `true` to enable image search feature for all users. If not set or `false`, the feature will only be visible to users who have enabled it via localStorage.
|
|
18
|
+
|
|
19
|
+
## Image Search Feature
|
|
20
|
+
|
|
21
|
+
The image search functionality allows users to search for similar products by uploading images or cropping existing product images.
|
|
22
|
+
|
|
23
|
+
### Feature Visibility Control
|
|
24
|
+
|
|
25
|
+
The image search feature can be controlled in two ways:
|
|
26
|
+
|
|
27
|
+
1. **Environment Variable (Global)**: Set `NEXT_PUBLIC_ENABLE_IMAGE_SEARCH=true` to enable for all users
|
|
28
|
+
2. **localStorage (Individual Users)**: Users can enable it locally using browser developer tools
|
|
29
|
+
|
|
30
|
+
````
|
|
31
|
+
|
|
32
|
+
### Feature Locations
|
|
33
|
+
|
|
34
|
+
When enabled, the image search feature appears in:
|
|
35
|
+
|
|
36
|
+
- **Header Search**: Camera icon next to the search input
|
|
37
|
+
- **Product Detail Page**: "View Similar Styles" button on product images
|
|
38
|
+
|
|
15
39
|
### Build
|
|
16
40
|
|
|
17
41
|
To build the app, run the following command:
|
|
@@ -19,7 +43,7 @@ To build the app, run the following command:
|
|
|
19
43
|
```bash
|
|
20
44
|
cd projectzeronext # Project root
|
|
21
45
|
yarn build
|
|
22
|
-
|
|
46
|
+
````
|
|
23
47
|
|
|
24
48
|
### Develop
|
|
25
49
|
|
|
@@ -26,9 +26,12 @@ const withPwaConfig = withPWA({
|
|
|
26
26
|
const sentryConfig = {
|
|
27
27
|
silent: true,
|
|
28
28
|
dryRun: !process.env.SENTRY_DSN,
|
|
29
|
-
org: 'akinon'
|
|
29
|
+
org: 'akinon',
|
|
30
30
|
// project: 'enter_your_project_name_here',
|
|
31
31
|
// authToken: 'enter_your_auth_token_here'
|
|
32
|
+
sourcemaps: {
|
|
33
|
+
deleteSourcemapsAfterUpload: true
|
|
34
|
+
}
|
|
32
35
|
};
|
|
33
36
|
|
|
34
37
|
const enhancedConfig = withPzConfig(nextConfig);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "projectzeronext",
|
|
3
|
-
"version": "2.0.6-
|
|
3
|
+
"version": "2.0.6-rc.0",
|
|
4
4
|
"private": true,
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"scripts": {
|
|
@@ -24,33 +24,33 @@
|
|
|
24
24
|
"test:middleware": "jest middleware-matcher.test.ts --bail"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@akinon/next": "2.0.6-
|
|
28
|
-
"@akinon/pz-akifast": "2.0.6-
|
|
29
|
-
"@akinon/pz-apple-pay": "2.0.6-
|
|
30
|
-
"@akinon/pz-b2b": "2.0.6-
|
|
31
|
-
"@akinon/pz-basket-gift-pack": "2.0.6-
|
|
32
|
-
"@akinon/pz-bkm": "2.0.6-
|
|
33
|
-
"@akinon/pz-checkout-gift-pack": "2.0.6-
|
|
34
|
-
"@akinon/pz-click-collect": "2.0.6-
|
|
35
|
-
"@akinon/pz-credit-payment": "2.0.6-
|
|
36
|
-
"@akinon/pz-cybersource-uc": "2.0.6-
|
|
37
|
-
"@akinon/pz-flow-payment": "2.0.6-
|
|
38
|
-
"@akinon/pz-google-pay": "2.0.6-
|
|
39
|
-
"@akinon/pz-gpay": "2.0.6-
|
|
40
|
-
"@akinon/pz-haso": "2.0.6-
|
|
41
|
-
"@akinon/pz-hepsipay": "2.0.6-
|
|
42
|
-
"@akinon/pz-masterpass": "2.0.6-
|
|
43
|
-
"@akinon/pz-masterpass-rest": "2.0.6-
|
|
44
|
-
"@akinon/pz-multi-basket": "2.0.6-
|
|
45
|
-
"@akinon/pz-one-click-checkout": "2.0.6-
|
|
46
|
-
"@akinon/pz-otp": "2.0.6-
|
|
47
|
-
"@akinon/pz-pay-on-delivery": "2.0.6-
|
|
48
|
-
"@akinon/pz-saved-card": "2.0.6-
|
|
49
|
-
"@akinon/pz-similar-products": "2.0.6-
|
|
50
|
-
"@akinon/pz-tabby-extension": "2.0.6-
|
|
51
|
-
"@akinon/pz-tamara-extension": "2.0.6-
|
|
52
|
-
"@akinon/pz-theme": "2.0.6-
|
|
53
|
-
"@akinon/pz-virtual-try-on": "2.0.6-
|
|
27
|
+
"@akinon/next": "2.0.6-rc.0",
|
|
28
|
+
"@akinon/pz-akifast": "2.0.6-rc.0",
|
|
29
|
+
"@akinon/pz-apple-pay": "2.0.6-rc.0",
|
|
30
|
+
"@akinon/pz-b2b": "2.0.6-rc.0",
|
|
31
|
+
"@akinon/pz-basket-gift-pack": "2.0.6-rc.0",
|
|
32
|
+
"@akinon/pz-bkm": "2.0.6-rc.0",
|
|
33
|
+
"@akinon/pz-checkout-gift-pack": "2.0.6-rc.0",
|
|
34
|
+
"@akinon/pz-click-collect": "2.0.6-rc.0",
|
|
35
|
+
"@akinon/pz-credit-payment": "2.0.6-rc.0",
|
|
36
|
+
"@akinon/pz-cybersource-uc": "2.0.6-rc.0",
|
|
37
|
+
"@akinon/pz-flow-payment": "2.0.6-rc.0",
|
|
38
|
+
"@akinon/pz-google-pay": "2.0.6-rc.0",
|
|
39
|
+
"@akinon/pz-gpay": "2.0.6-rc.0",
|
|
40
|
+
"@akinon/pz-haso": "2.0.6-rc.0",
|
|
41
|
+
"@akinon/pz-hepsipay": "2.0.6-rc.0",
|
|
42
|
+
"@akinon/pz-masterpass": "2.0.6-rc.0",
|
|
43
|
+
"@akinon/pz-masterpass-rest": "2.0.6-rc.0",
|
|
44
|
+
"@akinon/pz-multi-basket": "2.0.6-rc.0",
|
|
45
|
+
"@akinon/pz-one-click-checkout": "2.0.6-rc.0",
|
|
46
|
+
"@akinon/pz-otp": "2.0.6-rc.0",
|
|
47
|
+
"@akinon/pz-pay-on-delivery": "2.0.6-rc.0",
|
|
48
|
+
"@akinon/pz-saved-card": "2.0.6-rc.0",
|
|
49
|
+
"@akinon/pz-similar-products": "2.0.6-rc.0",
|
|
50
|
+
"@akinon/pz-tabby-extension": "2.0.6-rc.0",
|
|
51
|
+
"@akinon/pz-tamara-extension": "2.0.6-rc.0",
|
|
52
|
+
"@akinon/pz-theme": "2.0.6-rc.0",
|
|
53
|
+
"@akinon/pz-virtual-try-on": "2.0.6-rc.0",
|
|
54
54
|
"@hookform/resolvers": "2.9.0",
|
|
55
55
|
"@next/third-parties": "16.2.4",
|
|
56
56
|
"@react-google-maps/api": "2.17.1",
|
|
@@ -59,21 +59,21 @@
|
|
|
59
59
|
"next": "16.2.4",
|
|
60
60
|
"next-auth": "5.0.0-beta.30",
|
|
61
61
|
"next-pwa": "5.6.0",
|
|
62
|
-
"pino": "8.
|
|
62
|
+
"pino": "8.21.0",
|
|
63
63
|
"postcss": "8.4.49",
|
|
64
64
|
"react": "19.2.5",
|
|
65
65
|
"react-dom": "19.2.5",
|
|
66
66
|
"react-google-recaptcha": "2.1.0",
|
|
67
67
|
"react-hook-form": "7.71.2",
|
|
68
68
|
"react-intersection-observer": "9.4.0",
|
|
69
|
-
"react-multi-carousel": "2.8.
|
|
70
|
-
"react-string-replace": "1.1.
|
|
71
|
-
"start-server-and-test": "2.0.
|
|
72
|
-
"tailwind-merge": "1.
|
|
69
|
+
"react-multi-carousel": "2.8.5",
|
|
70
|
+
"react-string-replace": "1.1.1",
|
|
71
|
+
"start-server-and-test": "2.0.8",
|
|
72
|
+
"tailwind-merge": "1.14.0",
|
|
73
73
|
"yup": "0.32.11"
|
|
74
74
|
},
|
|
75
75
|
"devDependencies": {
|
|
76
|
-
"@akinon/eslint-plugin-projectzero": "2.0.6-
|
|
76
|
+
"@akinon/eslint-plugin-projectzero": "2.0.6-rc.0",
|
|
77
77
|
"@semantic-release/changelog": "6.0.2",
|
|
78
78
|
"@semantic-release/exec": "6.0.3",
|
|
79
79
|
"@semantic-release/git": "10.0.1",
|
|
@@ -90,25 +90,25 @@
|
|
|
90
90
|
"@typescript-eslint/eslint-plugin": "6.7.4",
|
|
91
91
|
"@typescript-eslint/parser": "6.7.4",
|
|
92
92
|
"client-only": "0.0.1",
|
|
93
|
-
"clsx": "1.
|
|
93
|
+
"clsx": "1.2.1",
|
|
94
94
|
"currency-symbol-map": "5.1.0",
|
|
95
95
|
"eslint": "8.14.0",
|
|
96
96
|
"eslint-config-next": "16.2.4",
|
|
97
97
|
"eslint-config-prettier": "8.5.0",
|
|
98
98
|
"husky": "8.0.0",
|
|
99
99
|
"jest": "29.7.0",
|
|
100
|
-
"jest-css-modules-transform": "4.
|
|
100
|
+
"jest-css-modules-transform": "4.4.2",
|
|
101
101
|
"jest-environment-jsdom": "29.7.0",
|
|
102
|
-
"lint-staged": "13.
|
|
103
|
-
"prettier": "2.
|
|
102
|
+
"lint-staged": "13.3.0",
|
|
103
|
+
"prettier": "2.8.8",
|
|
104
104
|
"react-number-format": "5.3.4",
|
|
105
|
-
"sass": "1.
|
|
105
|
+
"sass": "1.83.0",
|
|
106
106
|
"semantic-release": "19.0.5",
|
|
107
107
|
"server-only": "0.0.1",
|
|
108
|
-
"stylelint": "14.
|
|
108
|
+
"stylelint": "14.16.1",
|
|
109
109
|
"stylelint-config-sass-guidelines": "9.0.1",
|
|
110
110
|
"stylelint-config-standard": "25.0.0",
|
|
111
|
-
"stylelint-scss": "4.
|
|
111
|
+
"stylelint-scss": "4.7.0",
|
|
112
112
|
"stylelint-selector-bem-pattern": "2.1.1",
|
|
113
113
|
"tailwindcss": "4.2.0",
|
|
114
114
|
"ts-jest": "29.2.6",
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useSentryUncaughtErrors } from '@akinon/next/hooks';
|
|
4
|
+
|
|
5
|
+
export default function GlobalError({
|
|
6
|
+
error,
|
|
7
|
+
reset
|
|
8
|
+
}: {
|
|
9
|
+
error: Error & { digest?: string };
|
|
10
|
+
reset: () => void;
|
|
11
|
+
}) {
|
|
12
|
+
useSentryUncaughtErrors(error);
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<html>
|
|
16
|
+
<body>
|
|
17
|
+
<h2>Something went wrong!</h2>
|
|
18
|
+
<button onClick={() => reset()}>Try again</button>
|
|
19
|
+
</body>
|
|
20
|
+
</html>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
@@ -14,7 +14,8 @@ export const config = {
|
|
|
14
14
|
'/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)',
|
|
15
15
|
'/(.*sitemap\\.xml)',
|
|
16
16
|
'/(.+\\.)(html|htm|aspx|asp|php)',
|
|
17
|
-
'/(.*orders\\/checkout-with-token.*)'
|
|
17
|
+
'/(.*orders\\/checkout-with-token.*)',
|
|
18
|
+
'/(.*orders\\/post-checkout.*)'
|
|
18
19
|
]
|
|
19
20
|
};
|
|
20
21
|
|
|
@@ -4,8 +4,7 @@ import { useEffect, useRef, useState } from 'react';
|
|
|
4
4
|
import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
|
|
5
5
|
import { closeSearch } from '@akinon/next/redux/reducers/header';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
|
-
|
|
8
|
-
import { Icon } from '@theme/components';
|
|
7
|
+
import { Icon, Input } from '@theme/components';
|
|
9
8
|
import Results from './results';
|
|
10
9
|
import { ROUTES } from '@theme/routes';
|
|
11
10
|
import { useLocalization, useRouter } from '@akinon/next/hooks';
|
|
@@ -42,6 +41,14 @@ export default function Search() {
|
|
|
42
41
|
};
|
|
43
42
|
}, [isSearchOpen, dispatch]);
|
|
44
43
|
|
|
44
|
+
const handleSearchTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
45
|
+
setSearchText(e.target.value);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const handleCloseSearch = () => {
|
|
49
|
+
dispatch(closeSearch());
|
|
50
|
+
};
|
|
51
|
+
|
|
45
52
|
return (
|
|
46
53
|
<>
|
|
47
54
|
<div
|
|
@@ -67,9 +74,9 @@ export default function Search() {
|
|
|
67
74
|
{t('common.search.results_for')}
|
|
68
75
|
</span>
|
|
69
76
|
<div className="flex items-center">
|
|
70
|
-
<
|
|
77
|
+
<Input
|
|
71
78
|
value={searchText}
|
|
72
|
-
onChange={
|
|
79
|
+
onChange={handleSearchTextChange}
|
|
73
80
|
onKeyDown={(e) => {
|
|
74
81
|
if (e.key === 'Enter' && searchText.trim() !== '') {
|
|
75
82
|
router.push(`${ROUTES.LIST}/?search_text=${searchText}`);
|
|
@@ -91,11 +98,12 @@ export default function Search() {
|
|
|
91
98
|
<Icon
|
|
92
99
|
name="close"
|
|
93
100
|
size={14}
|
|
94
|
-
onClick={
|
|
101
|
+
onClick={handleCloseSearch}
|
|
95
102
|
className="cursor-pointer"
|
|
96
103
|
/>
|
|
97
104
|
</div>
|
|
98
105
|
</div>
|
|
106
|
+
|
|
99
107
|
<Results searchText={searchText} />
|
|
100
108
|
</div>
|
|
101
109
|
</div>
|
|
@@ -36,53 +36,100 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
|
|
|
36
36
|
carouselRef.current?.next();
|
|
37
37
|
};
|
|
38
38
|
|
|
39
|
-
const handleThumbnailClick = (index) => {
|
|
39
|
+
const handleThumbnailClick = (index: number) => {
|
|
40
40
|
setActiveIndex(index);
|
|
41
41
|
carouselRef.current?.goToSlide(index);
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
return (
|
|
45
|
-
|
|
46
|
-
<div className="lg:
|
|
47
|
-
<div className="
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
45
|
+
<>
|
|
46
|
+
<div className="lg:grid lg:grid-cols-6">
|
|
47
|
+
<div className="lg:col-span-1">
|
|
48
|
+
<div className="flex flex-col items-center justify-center md:mr-[6px]">
|
|
49
|
+
<button
|
|
50
|
+
onClick={goToPrev}
|
|
51
|
+
className={twMerge(
|
|
52
|
+
'hidden justify-center p-2 mb-3 border border-gray-100 rounded-full cursor-pointer lg:block',
|
|
53
|
+
[activeIndex === 0 && 'cursor-not-allowed opacity-45']
|
|
54
|
+
)}
|
|
55
|
+
disabled={activeIndex === 0}
|
|
56
|
+
>
|
|
57
|
+
<Icon name="chevron-up" size={15} className="fill-[#000000]" />
|
|
58
|
+
</button>
|
|
59
|
+
<div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
|
|
60
|
+
{product?.productimage_set?.map((item, index) => (
|
|
61
|
+
<Image
|
|
62
|
+
key={index}
|
|
63
|
+
src={item.image}
|
|
64
|
+
alt={`Thumbnail ${index}`}
|
|
65
|
+
width={80}
|
|
66
|
+
height={128}
|
|
67
|
+
aspectRatio={80 / 128}
|
|
68
|
+
className={twMerge('cursor-pointer', [
|
|
69
|
+
activeIndex === index && 'border-2 border-primary'
|
|
70
|
+
])}
|
|
71
|
+
onClick={() => handleThumbnailClick(index)}
|
|
72
|
+
/>
|
|
73
|
+
))}
|
|
74
|
+
</div>
|
|
75
|
+
<button
|
|
76
|
+
onClick={goToNext}
|
|
77
|
+
className={twMerge(
|
|
78
|
+
'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
|
|
79
|
+
[
|
|
80
|
+
activeIndex === product.productimage_set.length - 1 &&
|
|
81
|
+
'cursor-not-allowed opacity-45'
|
|
82
|
+
]
|
|
83
|
+
)}
|
|
84
|
+
disabled={activeIndex === product.productimage_set.length - 1}
|
|
85
|
+
>
|
|
86
|
+
<Icon name="chevron-down" size={15} className="fill-[#000000]" />
|
|
87
|
+
</button>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div className="relative lg:col-span-5">
|
|
92
|
+
<FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />
|
|
93
|
+
|
|
94
|
+
<PluginModule
|
|
95
|
+
component={Component.ProductImageSearchFeature}
|
|
96
|
+
props={{
|
|
97
|
+
product,
|
|
98
|
+
activeIndex,
|
|
99
|
+
showResetButton: true
|
|
100
|
+
}}
|
|
101
|
+
/>
|
|
102
|
+
|
|
103
|
+
<CarouselCore
|
|
104
|
+
responsive={{
|
|
105
|
+
all: {
|
|
106
|
+
breakpoint: { max: 5000, min: 0 },
|
|
107
|
+
items: 1
|
|
108
|
+
}
|
|
109
|
+
}}
|
|
110
|
+
arrows={false}
|
|
111
|
+
swipeable={true}
|
|
112
|
+
ref={carouselRef}
|
|
113
|
+
afterChange={(previousSlide, { currentSlide }) => {
|
|
114
|
+
setActiveIndex(currentSlide);
|
|
115
|
+
}}
|
|
116
|
+
containerAspectRatio={{ mobile: 520 / 798, desktop: 484 / 726 }}
|
|
55
117
|
>
|
|
56
|
-
|
|
57
|
-
</button>
|
|
58
|
-
<div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
|
|
59
|
-
{product?.productimage_set?.map((item, index) => (
|
|
118
|
+
{product?.productimage_set?.map((item, i) => (
|
|
60
119
|
<Image
|
|
61
|
-
key={
|
|
120
|
+
key={i}
|
|
62
121
|
src={item.image}
|
|
63
|
-
alt={
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
122
|
+
alt={product?.name || 'Product image'}
|
|
123
|
+
draggable={false}
|
|
124
|
+
aspectRatio={484 / 726}
|
|
125
|
+
sizes="(min-width: 425px) 512px,
|
|
126
|
+
(min-width: 601px) 576px,
|
|
127
|
+
(min-width: 768px) 336px,
|
|
128
|
+
(min-width: 1024px) 484px, 368px"
|
|
129
|
+
fill
|
|
70
130
|
/>
|
|
71
131
|
))}
|
|
72
|
-
</
|
|
73
|
-
<button
|
|
74
|
-
onClick={goToNext}
|
|
75
|
-
className={twMerge(
|
|
76
|
-
'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
|
|
77
|
-
[
|
|
78
|
-
activeIndex === product.productimage_set.length - 1 &&
|
|
79
|
-
'cursor-not-allowed opacity-45'
|
|
80
|
-
]
|
|
81
|
-
)}
|
|
82
|
-
disabled={activeIndex === product.productimage_set.length - 1}
|
|
83
|
-
>
|
|
84
|
-
<Icon name="chevron-down" size={15} className="fill-[#000000]" />
|
|
85
|
-
</button>
|
|
132
|
+
</CarouselCore>
|
|
86
133
|
</div>
|
|
87
134
|
</div>
|
|
88
135
|
|
|
@@ -140,6 +187,6 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
|
|
|
140
187
|
))}
|
|
141
188
|
</CarouselCore>
|
|
142
189
|
</div>
|
|
143
|
-
|
|
190
|
+
</>
|
|
144
191
|
);
|
|
145
192
|
}
|
package/commands/plugins.ts
CHANGED
package/dist/commands/plugins.js
CHANGED
|
@@ -183,6 +183,10 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
|
183
183
|
name: 'Tamara Payment Extension',
|
|
184
184
|
value: 'pz-tamara-extension'
|
|
185
185
|
},
|
|
186
|
+
{
|
|
187
|
+
name: 'Similar Products',
|
|
188
|
+
value: 'pz-similar-products'
|
|
189
|
+
},
|
|
186
190
|
{
|
|
187
191
|
name: 'Hepsipay',
|
|
188
192
|
value: 'pz-hepsipay'
|