@akinon/projectzero 1.125.0 → 1.126.0-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 +8 -0
- package/app-template/.env.example +1 -0
- package/app-template/CHANGELOG.md +57 -0
- package/app-template/README.md +25 -1
- package/app-template/akinon.json +1 -1
- package/app-template/package.json +60 -60
- package/app-template/src/app/[pz]/account/profile/page.tsx +2 -2
- package/app-template/src/hooks/index.ts +2 -0
- package/app-template/src/middleware.ts +2 -1
- package/app-template/src/plugins.js +1 -0
- package/app-template/src/views/guest-login/index.tsx +1 -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,5 +1,13 @@
|
|
|
1
1
|
# @akinon/projectzero
|
|
2
2
|
|
|
3
|
+
## 1.126.0-rc.0
|
|
4
|
+
|
|
5
|
+
### Minor 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
|
|
10
|
+
|
|
3
11
|
## 1.125.0
|
|
4
12
|
|
|
5
13
|
## 1.124.0
|
|
@@ -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,5 +1,62 @@
|
|
|
1
1
|
# projectzeronext
|
|
2
2
|
|
|
3
|
+
## 1.126.0-rc.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 1a8622a9: ZERO-3392: Implemented AI Search functionality and update env
|
|
8
|
+
- b55acb76: 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
|
+
- 9f8cd3bc: 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
|
+
- b05c3543: 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
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
- Updated dependencies [b55acb76]
|
|
21
|
+
- Updated dependencies [760258c1]
|
|
22
|
+
- Updated dependencies [143be2b9]
|
|
23
|
+
- Updated dependencies [9f8cd3bc]
|
|
24
|
+
- Updated dependencies [bfafa3f4]
|
|
25
|
+
- Updated dependencies [d99a6a7d]
|
|
26
|
+
- Updated dependencies [591e345e]
|
|
27
|
+
- Updated dependencies [4de5303c]
|
|
28
|
+
- Updated dependencies [63a72000]
|
|
29
|
+
- Updated dependencies [95b139dc]
|
|
30
|
+
- Updated dependencies [c0228aff]
|
|
31
|
+
- Updated dependencies [3909d322]
|
|
32
|
+
- Updated dependencies [e18836b2]
|
|
33
|
+
- @akinon/next@1.126.0-rc.0
|
|
34
|
+
- @akinon/pz-similar-products@1.126.0-rc.0
|
|
35
|
+
- @akinon/pz-masterpass-rest@1.126.0-rc.0
|
|
36
|
+
- @akinon/pz-b2b@1.126.0-rc.0
|
|
37
|
+
- @akinon/pz-virtual-try-on@1.126.0-rc.0
|
|
38
|
+
- @akinon/pz-akifast@1.126.0-rc.0
|
|
39
|
+
- @akinon/pz-apple-pay@1.126.0-rc.0
|
|
40
|
+
- @akinon/pz-basket-gift-pack@1.126.0-rc.0
|
|
41
|
+
- @akinon/pz-bkm@1.126.0-rc.0
|
|
42
|
+
- @akinon/pz-checkout-gift-pack@1.126.0-rc.0
|
|
43
|
+
- @akinon/pz-click-collect@1.126.0-rc.0
|
|
44
|
+
- @akinon/pz-credit-payment@1.126.0-rc.0
|
|
45
|
+
- @akinon/pz-cybersource-uc@1.126.0-rc.0
|
|
46
|
+
- @akinon/pz-flow-payment@1.126.0-rc.0
|
|
47
|
+
- @akinon/pz-google-pay@1.126.0-rc.0
|
|
48
|
+
- @akinon/pz-gpay@1.126.0-rc.0
|
|
49
|
+
- @akinon/pz-haso@1.126.0-rc.0
|
|
50
|
+
- @akinon/pz-hepsipay@1.126.0-rc.0
|
|
51
|
+
- @akinon/pz-masterpass@1.126.0-rc.0
|
|
52
|
+
- @akinon/pz-multi-basket@1.126.0-rc.0
|
|
53
|
+
- @akinon/pz-one-click-checkout@1.126.0-rc.0
|
|
54
|
+
- @akinon/pz-otp@1.126.0-rc.0
|
|
55
|
+
- @akinon/pz-pay-on-delivery@1.126.0-rc.0
|
|
56
|
+
- @akinon/pz-saved-card@1.126.0-rc.0
|
|
57
|
+
- @akinon/pz-tabby-extension@1.126.0-rc.0
|
|
58
|
+
- @akinon/pz-tamara-extension@1.126.0-rc.0
|
|
59
|
+
|
|
3
60
|
## 1.125.0
|
|
4
61
|
|
|
5
62
|
### Patch Changes
|
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
|
|
package/app-template/akinon.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "projectzeronext",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.126.0-rc.0",
|
|
4
4
|
"private": true,
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"scripts": {
|
|
@@ -24,95 +24,95 @@
|
|
|
24
24
|
"test:middleware": "jest middleware-matcher.test.ts --bail"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@akinon/next": "1.
|
|
28
|
-
"@akinon/pz-akifast": "1.
|
|
29
|
-
"@akinon/pz-apple-pay": "1.
|
|
30
|
-
"@akinon/pz-b2b": "1.
|
|
31
|
-
"@akinon/pz-basket-gift-pack": "1.
|
|
32
|
-
"@akinon/pz-bkm": "1.
|
|
33
|
-
"@akinon/pz-checkout-gift-pack": "1.
|
|
34
|
-
"@akinon/pz-click-collect": "1.
|
|
35
|
-
"@akinon/pz-credit-payment": "1.
|
|
36
|
-
"@akinon/pz-cybersource-uc": "1.
|
|
37
|
-
"@akinon/pz-flow-payment": "1.
|
|
38
|
-
"@akinon/pz-google-pay": "1.
|
|
39
|
-
"@akinon/pz-gpay": "1.
|
|
40
|
-
"@akinon/pz-haso": "1.
|
|
41
|
-
"@akinon/pz-hepsipay": "1.
|
|
42
|
-
"@akinon/pz-masterpass": "1.
|
|
43
|
-
"@akinon/pz-masterpass-rest": "1.
|
|
44
|
-
"@akinon/pz-multi-basket": "1.
|
|
45
|
-
"@akinon/pz-one-click-checkout": "1.
|
|
46
|
-
"@akinon/pz-otp": "1.
|
|
47
|
-
"@akinon/pz-pay-on-delivery": "1.
|
|
48
|
-
"@akinon/pz-saved-card": "1.
|
|
49
|
-
"@akinon/pz-similar-products": "1.
|
|
50
|
-
"@akinon/pz-tabby-extension": "1.
|
|
51
|
-
"@akinon/pz-tamara-extension": "1.
|
|
52
|
-
"@akinon/pz-virtual-try-on": "1.
|
|
27
|
+
"@akinon/next": "1.126.0-rc.0",
|
|
28
|
+
"@akinon/pz-akifast": "1.126.0-rc.0",
|
|
29
|
+
"@akinon/pz-apple-pay": "1.126.0-rc.0",
|
|
30
|
+
"@akinon/pz-b2b": "1.126.0-rc.0",
|
|
31
|
+
"@akinon/pz-basket-gift-pack": "1.126.0-rc.0",
|
|
32
|
+
"@akinon/pz-bkm": "1.126.0-rc.0",
|
|
33
|
+
"@akinon/pz-checkout-gift-pack": "1.126.0-rc.0",
|
|
34
|
+
"@akinon/pz-click-collect": "1.126.0-rc.0",
|
|
35
|
+
"@akinon/pz-credit-payment": "1.126.0-rc.0",
|
|
36
|
+
"@akinon/pz-cybersource-uc": "1.126.0-rc.0",
|
|
37
|
+
"@akinon/pz-flow-payment": "1.126.0-rc.0",
|
|
38
|
+
"@akinon/pz-google-pay": "1.126.0-rc.0",
|
|
39
|
+
"@akinon/pz-gpay": "1.126.0-rc.0",
|
|
40
|
+
"@akinon/pz-haso": "1.126.0-rc.0",
|
|
41
|
+
"@akinon/pz-hepsipay": "1.126.0-rc.0",
|
|
42
|
+
"@akinon/pz-masterpass": "1.126.0-rc.0",
|
|
43
|
+
"@akinon/pz-masterpass-rest": "1.126.0-rc.0",
|
|
44
|
+
"@akinon/pz-multi-basket": "1.126.0-rc.0",
|
|
45
|
+
"@akinon/pz-one-click-checkout": "1.126.0-rc.0",
|
|
46
|
+
"@akinon/pz-otp": "1.126.0-rc.0",
|
|
47
|
+
"@akinon/pz-pay-on-delivery": "1.126.0-rc.0",
|
|
48
|
+
"@akinon/pz-saved-card": "1.126.0-rc.0",
|
|
49
|
+
"@akinon/pz-similar-products": "1.126.0-rc.0",
|
|
50
|
+
"@akinon/pz-tabby-extension": "1.126.0-rc.0",
|
|
51
|
+
"@akinon/pz-tamara-extension": "1.126.0-rc.0",
|
|
52
|
+
"@akinon/pz-virtual-try-on": "1.126.0-rc.0",
|
|
53
53
|
"@hookform/resolvers": "2.9.0",
|
|
54
54
|
"@next/third-parties": "14.1.0",
|
|
55
55
|
"@react-google-maps/api": "2.17.1",
|
|
56
|
-
"dayjs": "1.11.
|
|
57
|
-
"lossless-json": "2.0.
|
|
56
|
+
"dayjs": "1.11.13",
|
|
57
|
+
"lossless-json": "2.0.11",
|
|
58
58
|
"next": "14.2.25",
|
|
59
59
|
"next-auth": "4.24.5",
|
|
60
60
|
"next-pwa": "5.6.0",
|
|
61
|
-
"pino": "8.
|
|
61
|
+
"pino": "8.21.0",
|
|
62
62
|
"postcss": "8.4.49",
|
|
63
|
-
"react": "18.
|
|
64
|
-
"react-dom": "18.
|
|
63
|
+
"react": "18.3.1",
|
|
64
|
+
"react-dom": "18.3.1",
|
|
65
65
|
"react-google-recaptcha": "2.1.0",
|
|
66
66
|
"react-hook-form": "7.31.3",
|
|
67
67
|
"react-intersection-observer": "9.4.0",
|
|
68
|
-
"react-multi-carousel": "2.8.
|
|
69
|
-
"react-string-replace": "1.1.
|
|
70
|
-
"start-server-and-test": "2.0.
|
|
71
|
-
"tailwind-merge": "1.
|
|
68
|
+
"react-multi-carousel": "2.8.5",
|
|
69
|
+
"react-string-replace": "1.1.1",
|
|
70
|
+
"start-server-and-test": "2.0.8",
|
|
71
|
+
"tailwind-merge": "1.14.0",
|
|
72
72
|
"yup": "0.32.11"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
|
-
"@akinon/eslint-plugin-projectzero": "1.
|
|
75
|
+
"@akinon/eslint-plugin-projectzero": "1.126.0-rc.0",
|
|
76
76
|
"@semantic-release/changelog": "6.0.2",
|
|
77
77
|
"@semantic-release/exec": "6.0.3",
|
|
78
78
|
"@semantic-release/git": "10.0.1",
|
|
79
|
-
"@tailwindcss/typography": "0.5.
|
|
80
|
-
"@testing-library/dom": "8.
|
|
81
|
-
"@testing-library/jest-dom": "5.
|
|
82
|
-
"@testing-library/react": "13.
|
|
83
|
-
"@testing-library/user-event": "14.
|
|
79
|
+
"@tailwindcss/typography": "0.5.15",
|
|
80
|
+
"@testing-library/dom": "8.20.1",
|
|
81
|
+
"@testing-library/jest-dom": "5.17.0",
|
|
82
|
+
"@testing-library/react": "13.4.0",
|
|
83
|
+
"@testing-library/user-event": "14.5.2",
|
|
84
84
|
"@types/googlemaps": "3.43.3",
|
|
85
85
|
"@types/jest": "29.5.14",
|
|
86
|
-
"@types/react": "18.
|
|
87
|
-
"@types/react-dom": "18.
|
|
88
|
-
"@typescript-eslint/eslint-plugin": "6.
|
|
89
|
-
"@typescript-eslint/parser": "6.
|
|
86
|
+
"@types/react": "18.3.18",
|
|
87
|
+
"@types/react-dom": "18.3.5",
|
|
88
|
+
"@typescript-eslint/eslint-plugin": "6.21.0",
|
|
89
|
+
"@typescript-eslint/parser": "6.21.0",
|
|
90
90
|
"autoprefixer": "10.4.20",
|
|
91
91
|
"client-only": "0.0.1",
|
|
92
|
-
"clsx": "1.
|
|
92
|
+
"clsx": "1.2.1",
|
|
93
93
|
"currency-symbol-map": "5.1.0",
|
|
94
|
-
"eslint": "8.
|
|
95
|
-
"eslint-config-next": "14.2.
|
|
96
|
-
"eslint-config-prettier": "8.
|
|
97
|
-
"husky": "8.0.
|
|
94
|
+
"eslint": "8.57.1",
|
|
95
|
+
"eslint-config-next": "14.2.25",
|
|
96
|
+
"eslint-config-prettier": "8.10.0",
|
|
97
|
+
"husky": "8.0.3",
|
|
98
98
|
"jest": "29.7.0",
|
|
99
|
-
"jest-css-modules-transform": "4.
|
|
99
|
+
"jest-css-modules-transform": "4.4.2",
|
|
100
100
|
"jest-environment-jsdom": "29.7.0",
|
|
101
|
-
"lint-staged": "13.
|
|
102
|
-
"prettier": "2.
|
|
101
|
+
"lint-staged": "13.3.0",
|
|
102
|
+
"prettier": "2.8.8",
|
|
103
103
|
"react-number-format": "5.3.4",
|
|
104
|
-
"sass": "1.
|
|
104
|
+
"sass": "1.83.0",
|
|
105
105
|
"semantic-release": "19.0.5",
|
|
106
106
|
"server-only": "0.0.1",
|
|
107
|
-
"stylelint": "14.
|
|
107
|
+
"stylelint": "14.16.1",
|
|
108
108
|
"stylelint-config-sass-guidelines": "9.0.1",
|
|
109
109
|
"stylelint-config-standard": "25.0.0",
|
|
110
|
-
"stylelint-scss": "4.
|
|
110
|
+
"stylelint-scss": "4.7.0",
|
|
111
111
|
"stylelint-selector-bem-pattern": "2.1.1",
|
|
112
112
|
"tailwindcss": "3.4.17",
|
|
113
|
-
"ts-jest": "29.
|
|
114
|
-
"ts-node": "10.
|
|
115
|
-
"typescript": "5.
|
|
113
|
+
"ts-jest": "29.4.6",
|
|
114
|
+
"ts-node": "10.9.2",
|
|
115
|
+
"typescript": "5.7.3"
|
|
116
116
|
},
|
|
117
117
|
"resolutions": {
|
|
118
118
|
"**/postcss": "8.4.31"
|
|
@@ -252,7 +252,7 @@ export default function Page() {
|
|
|
252
252
|
<Input
|
|
253
253
|
label={t('account.my_profile.form.phone.placeholder')}
|
|
254
254
|
type="tel"
|
|
255
|
-
format={user_phone_format.replace(
|
|
255
|
+
format={user_phone_format.replace(/9/g, '#')}
|
|
256
256
|
mask="_"
|
|
257
257
|
allowEmptyFormatting={true}
|
|
258
258
|
control={control}
|
|
@@ -290,7 +290,7 @@ export default function Page() {
|
|
|
290
290
|
</div>
|
|
291
291
|
{errors && (
|
|
292
292
|
<div className="mt-1 text-sm text-error">
|
|
293
|
-
{errors.birthdate?.message}
|
|
293
|
+
{(errors.birthdate as { message?: string })?.message}
|
|
294
294
|
</div>
|
|
295
295
|
)}
|
|
296
296
|
</div>
|
|
@@ -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
|
@@ -152,6 +152,10 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
|
152
152
|
name: 'Tamara Payment Extension',
|
|
153
153
|
value: 'pz-tamara-extension'
|
|
154
154
|
},
|
|
155
|
+
{
|
|
156
|
+
name: 'Similar Products',
|
|
157
|
+
value: 'pz-similar-products'
|
|
158
|
+
},
|
|
155
159
|
{
|
|
156
160
|
name: 'Hepsipay',
|
|
157
161
|
value: 'pz-hepsipay'
|