E-Commerce-Website-Formular für virtuelles Anprobieren
Dies ist ein AI-Bereich Automatisierungsworkflow mit 16 Nodes. Hauptsächlich werden If, Ftp, Form, Wait, FormTrigger und andere Nodes verwendet, kombiniert mit KI-Technologie für intelligente Automatisierung. KI-gesteuerter virtueller Anproberaum mit einem Klick für WooCommerce, Shopify und Prestashop
- •Möglicherweise sind Ziel-API-Anmeldedaten erforderlich
Verwendete Nodes (16)
Kategorie
{
"id": "bnkWL5ReJLmi9DKA",
"meta": {
"instanceId": "a4bfc93e975ca233ac45ed7c9227d84cf5a2329310525917adaf3312e10d5462",
"templateCredsSetupCompleted": true
},
"name": "Form Visual Try-on for Ecommerce webiste",
"tags": [],
"nodes": [
{
"id": "ec6c9aa4-aa67-4f76-bda5-2d8368995993",
"name": "Bei Formularübermittlung",
"type": "n8n-nodes-base.formTrigger",
"position": [
-680,
200
],
"webhookId": "ca1c314d-46c6-4eeb-b6a5-359de7601906",
"parameters": {
"options": {
"appendAttribution": false
},
"formTitle": "Virtual Try On",
"formFields": {
"values": [
{
"fieldLabel": "Nome",
"placeholder": "Nome",
"requiredField": true
},
{
"fieldName": "Product",
"fieldType": "hiddenField"
},
{
"fieldType": "file",
"fieldLabel": "Me",
"requiredField": true,
"acceptFileTypes": ".jpg,.png"
}
]
},
"formDescription": "Upload your image and virtually try on the dress"
},
"typeVersion": 2.2
},
{
"id": "12941dfe-2c91-4270-87a4-510f83c7aa65",
"name": "FTP",
"type": "n8n-nodes-base.ftp",
"position": [
-420,
200
],
"parameters": {
"path": "=/eolianpenthouse.dev.eureweb.it/test/{{$now.format('yyyyyyLLddHHii')}}-{{ $json.Me[0].filename }}",
"operation": "upload",
"binaryPropertyName": "Me"
},
"credentials": {
"ftp": {
"id": "VRMB0CWVo86cIM26",
"name": "FTP account (Eolian DEV)"
}
},
"typeVersion": 1
},
{
"id": "d5524925-4d2d-4c95-9efc-c877004e65b0",
"name": "URL-Bild abrufen",
"type": "n8n-nodes-base.httpRequest",
"position": [
-680,
460
],
"parameters": {
"url": "=https://queue.fal.run/fal-ai/kling/requests/{{ $json.request_id }}",
"options": {},
"authentication": "genericCredentialType",
"genericAuthType": "httpHeaderAuth"
},
"credentials": {
"httpHeaderAuth": {
"id": "daOZafXpRXLtoLUV",
"name": "Fal.run API"
}
},
"typeVersion": 4.2
},
{
"id": "87300ee2-366e-469b-85bf-9dbd1d5de850",
"name": "Status abrufen",
"type": "n8n-nodes-base.httpRequest",
"position": [
240,
200
],
"parameters": {
"url": "=https://queue.fal.run/fal-ai/kling/requests/{{ $('Create Image').item.json.request_id }}/status ",
"options": {},
"authentication": "genericCredentialType",
"genericAuthType": "httpHeaderAuth"
},
"credentials": {
"httpHeaderAuth": {
"id": "daOZafXpRXLtoLUV",
"name": "Fal.run API"
}
},
"typeVersion": 4.2
},
{
"id": "8db4508e-b82a-4134-85c7-44b2162d5da6",
"name": "Notiz",
"type": "n8n-nodes-base.stickyNote",
"position": [
-300,
-980
],
"parameters": {
"color": 6,
"width": 340,
"height": 540,
"content": "## Me\n"
},
"typeVersion": 1
},
{
"id": "f4765a45-0ad4-49d6-8227-9cc3e050b429",
"name": "Notiz1",
"type": "n8n-nodes-base.stickyNote",
"position": [
-700,
-980
],
"parameters": {
"color": 6,
"width": 360,
"height": 540,
"content": "## Product\n"
},
"typeVersion": 1
},
{
"id": "79a6158d-fb3c-4293-82cc-e344aa21db37",
"name": "Notiz2",
"type": "n8n-nodes-base.stickyNote",
"position": [
80,
-980
],
"parameters": {
"color": 4,
"width": 340,
"height": 540,
"content": "## Result\n"
},
"typeVersion": 1
},
{
"id": "032557a3-1ced-47d3-8e72-b1e3057d9e46",
"name": "Notiz3",
"type": "n8n-nodes-base.stickyNote",
"position": [
-700,
-1260
],
"parameters": {
"color": 3,
"width": 740,
"height": 240,
"content": "# Functionality\n\nThis low-code automation enables all eCommerce store visitors to upload a **photo of themselves and virtually “try on”** a garment in just a few clicks. \n\nWith this workflow, **WooCommerce, Prestashop, Shopify** and more merchants can offer a cutting-edge “virtual try-on” feature with minimal development effort, enhancing customer engagement and reducing product returns.\n\n"
},
"typeVersion": 1
},
{
"id": "6a740b21-b95f-4c8e-bb92-c205e52e3925",
"name": "Abgeschlossen?",
"type": "n8n-nodes-base.if",
"position": [
420,
200
],
"parameters": {
"options": {},
"conditions": {
"options": {
"version": 2,
"leftValue": "",
"caseSensitive": true,
"typeValidation": "strict"
},
"combinator": "and",
"conditions": [
{
"id": "383d112e-2cc6-4dd4-8985-f09ce0bd1781",
"operator": {
"name": "filter.operator.equals",
"type": "string",
"operation": "equals"
},
"leftValue": "={{ $json.status }}",
"rightValue": "COMPLETED"
}
]
}
},
"typeVersion": 2.2
},
{
"id": "f33040d8-cbac-4c21-845b-10397c5210cc",
"name": "Notiz5",
"type": "n8n-nodes-base.stickyNote",
"position": [
-700,
-80
],
"parameters": {
"width": 740,
"height": 180,
"content": "## STEP 3 - ECOMMERCE\nIn production environment, the \"Product\" field must be dynamically filled with the url of the product dress image (e.g. https://n3wstorage.b-cdn.net/n3witalia/camicia-seta.png).\n\nOn the ecommerce, create a \"Try On\" button and the following url to open in pop-up format https://URL_N8N/form/ca1c314d-46c6-4eeb-b6a5-359XXXXXX?Product=IMAGE_URL"
},
"typeVersion": 1
},
{
"id": "0799d997-c38e-4c84-8096-0f2ef04b0223",
"name": "Bild erstellen",
"type": "n8n-nodes-base.httpRequest",
"position": [
-180,
200
],
"parameters": {
"url": "https://queue.fal.run/fal-ai/kling/v1-5/kolors-virtual-try-on",
"method": "POST",
"options": {},
"jsonBody": "={\n \"human_image_url\": \"https://eolianpenthouse.dev.eureweb.it/test/{{$now.format('yyyyyyLLddHHii')}}-{{ $json.Me[0].filename }}\",\n \"garment_image_url\": \"{{ $('On form submission').item.json.Product }}\"\n} ",
"sendBody": true,
"sendHeaders": true,
"specifyBody": "json",
"authentication": "genericCredentialType",
"genericAuthType": "httpHeaderAuth",
"headerParameters": {
"parameters": [
{
"name": "Content-Type",
"value": "application/json"
}
]
}
},
"credentials": {
"httpHeaderAuth": {
"id": "daOZafXpRXLtoLUV",
"name": "Fal.run API"
}
},
"typeVersion": 4.2
},
{
"id": "63e29ad5-5965-4a2c-98f5-bc89124a6b21",
"name": "Notiz6",
"type": "n8n-nodes-base.stickyNote",
"position": [
-700,
-400
],
"parameters": {
"width": 740,
"height": 140,
"content": "## STEP 1 - GET API KEY (YOURAPIKEY)\nCreate an account [here](https://fal.ai/) and obtain API KEY.\nIn the node \"Create Image\" set \"Header Auth\" and set:\n- Name: \"Authorization\"\n- Value: \"Key YOURAPIKEY\""
},
"typeVersion": 1
},
{
"id": "67188445-73c4-4070-b1f8-6e21beb3e1fa",
"name": "Formular",
"type": "n8n-nodes-base.form",
"position": [
-240,
460
],
"webhookId": "69559b3a-3175-4864-8e41-2892eaa80d8e",
"parameters": {
"operation": "completion",
"redirectUrl": "={{ $json.image.url }}",
"respondWith": "redirect"
},
"typeVersion": 1
},
{
"id": "1a65532e-abb9-4c3f-99c3-ddf35e7ed5e4",
"name": "Notiz7",
"type": "n8n-nodes-base.stickyNote",
"position": [
-700,
-220
],
"parameters": {
"width": 740,
"height": 100,
"content": "## STEP 2 - FTP\nFTP space or S3 bucket to temporarily upload your image to"
},
"typeVersion": 1
},
{
"id": "cf2e4f76-e658-4aa3-a6c0-9a85bb1749e6",
"name": "Bild abrufen",
"type": "n8n-nodes-base.httpRequest",
"position": [
-460,
460
],
"parameters": {
"url": "={{ $json.image.url }}",
"options": {}
},
"typeVersion": 4.2
},
{
"id": "04573589-8467-4768-9451-177aa2d19f57",
"name": "10 Sek. warten",
"type": "n8n-nodes-base.wait",
"position": [
60,
200
],
"webhookId": "351bd496-a9cc-445c-86f6-a56189df0028",
"parameters": {
"amount": 10
},
"typeVersion": 1.1
}
],
"active": false,
"pinData": {},
"settings": {
"executionOrder": "v1"
},
"versionId": "c42ea134-5e24-4e45-9a6b-0f0765c4c13c",
"connections": {
"12941dfe-2c91-4270-87a4-510f83c7aa65": {
"main": [
[
{
"node": "0799d997-c38e-4c84-8096-0f2ef04b0223",
"type": "main",
"index": 0
}
]
]
},
"67188445-73c4-4070-b1f8-6e21beb3e1fa": {
"main": [
[]
]
},
"cf2e4f76-e658-4aa3-a6c0-9a85bb1749e6": {
"main": [
[
{
"node": "67188445-73c4-4070-b1f8-6e21beb3e1fa",
"type": "main",
"index": 0
}
]
]
},
"6a740b21-b95f-4c8e-bb92-c205e52e3925": {
"main": [
[
{
"node": "d5524925-4d2d-4c95-9efc-c877004e65b0",
"type": "main",
"index": 0
}
],
[
{
"node": "04573589-8467-4768-9451-177aa2d19f57",
"type": "main",
"index": 0
}
]
]
},
"87300ee2-366e-469b-85bf-9dbd1d5de850": {
"main": [
[
{
"node": "6a740b21-b95f-4c8e-bb92-c205e52e3925",
"type": "main",
"index": 0
}
]
]
},
"0799d997-c38e-4c84-8096-0f2ef04b0223": {
"main": [
[
{
"node": "04573589-8467-4768-9451-177aa2d19f57",
"type": "main",
"index": 0
}
]
]
},
"04573589-8467-4768-9451-177aa2d19f57": {
"main": [
[
{
"node": "87300ee2-366e-469b-85bf-9dbd1d5de850",
"type": "main",
"index": 0
}
]
]
},
"d5524925-4d2d-4c95-9efc-c877004e65b0": {
"main": [
[
{
"node": "cf2e4f76-e658-4aa3-a6c0-9a85bb1749e6",
"type": "main",
"index": 0
}
]
]
},
"ec6c9aa4-aa67-4f76-bda5-2d8368995993": {
"main": [
[
{
"node": "12941dfe-2c91-4270-87a4-510f83c7aa65",
"type": "main",
"index": 0
}
]
]
}
}
}Wie verwende ich diesen Workflow?
Kopieren Sie den obigen JSON-Code, erstellen Sie einen neuen Workflow in Ihrer n8n-Instanz und wählen Sie "Aus JSON importieren". Fügen Sie die Konfiguration ein und passen Sie die Anmeldedaten nach Bedarf an.
Für welche Szenarien ist dieser Workflow geeignet?
Experte - Künstliche Intelligenz
Ist es kostenpflichtig?
Dieser Workflow ist völlig kostenlos. Beachten Sie jedoch, dass Drittanbieterdienste (wie OpenAI API), die im Workflow verwendet werden, möglicherweise kostenpflichtig sind.
Verwandte Workflows
Davide
@n3witaliaFull-stack Web Developer based in Italy specialising in Marketing & AI-powered automations. For business enquiries, send me an email at info@n3w.it or add me on Linkedin.com/in/davideboizza
Diesen Workflow teilen