Skip to main content

Page Contact

Widget que configura completamente la página de formulario de contacto de la tienda. Gestiona textos, imágenes, el árbol de preguntas guiadas y los campos del formulario, que se envían a Salesforce Service Cloud (WebToCase). El formulario es un componente Vue que guía al usuario en hasta tres niveles de preguntas antes de mostrar el formulario o un bloque de información relevante.


Vista previa

Página de contacto


Comportamiento

  • Flujo guiado de 3 niveles: El usuario elige una categoría (primer desplegable → contain.steps), luego una subcategoría (segundo desplegable → step.answers) y, si aplica, una opción adicional (tercer desplegable → answer.inner_answers).

  • Formulario dinámico o bloque informativo: En función de las propiedades has_form y show_info_text de la opción seleccionada, el componente puede mostrar tres comportamientos distintos:

    has_formshow_info_textResultado
    truefalseMuestra el formulario. El campo description actúa como placeholder del textarea.
    truetrueMuestra el bloque informativo (description) y el formulario debajo.
    falsetrueMuestra solo el bloque informativo (description). No hay formulario.
  • Campos filtrados por in_form: Cuando se muestra el formulario, solo aparecen los campos cuyo id esté listado en el array in_form de la opción elegida. El array global form actúa como catálogo; se reutilizan los mismos campos en todas las opciones que los necesiten.

  • Envío estándar (WebToCase): Todos los envíos utilizan HTTP POST a urls.form. El campo file existe en la estructura pero en la versión actual siempre es false.

  • Pantalla de confirmación: Cuando la URL contiene ?sended=ok, el componente muestra la imagen de mujer y el mensaje texts.thanks en lugar del formulario.

  • Textos e imágenes internacionalizables: Cada locale tiene su propio content asset con sus propios textos e imágenes.


Configuración

Content Asset

El widget se configura mediante un JSON en Business Manager → Content Assets. El ID del content asset se asigna como página de contenido de SFCC y se accede a través de $url('Page-Show', 'cid', 'contact')$.

{
"images": {
"logo_hawk": "pages/contact-form/img/logo-hawkers-black.svg?$staticlink$",
"logo_img_man": "pages/contact-form/img/logo-contact-man.png?$staticlink$",
"logo_img_woman": "pages/contact-form/img/logo-contact-woman.png?$staticlink$"
},
"texts": {
"intro": "WELCOME TO OUR CUSTOMER SERVICE CONTACT FORM",
"intro_button": "WHAT'S YOUR QUERY?",
"select_first_question": "How can we help you?",
"select_second_question": "Have you received your order?",
"select_third_question": "SELECT THE REASON FOR YOUR INQUIRY",
"select_fourth_question": "SELECT THE REASON FOR YOUR RETURN",
"send_button": "SUBMIT",
"thanks": "<strong>Thank you for contacting us!</strong><br>We have received your message and sent you a confirmation email. If you can't find it, please check your spam or promotions folders.<br>We will contact you as soon as possible.",
"disabled_option": "None",
"brand": "Hawkers",
"max_size_files": "Max. file size: 15MB",
"pending": "Customer Service",
"received": "hk_received",
"not_received": "hk_not_received",
"org_id": "00D0Y000000qrxB"
},
"contain": {
"name": "Class_case__c",
"subname": "Subject_case__c",
"refund_reason": "Return_reason_case__c",
"steps": [
{
"question": "Inquiries about my order",
"id": "hk_order",
"value": "ORDER",
"answers": [
{
"title": "I haven't received my order",
"id": "hk_not_received",
"value": "NOT_RECEIVED",
"inner_answers": [
{
"title": "I haven't received the order confirmation email",
"id": "NOT_RECEIVED_CONFIRMATION_EMAIL",
"value": "NOT_RECEIVED_CONFIRMATION_EMAIL",
"type": "INCIDENCE",
"description": "✉️ The confirmation email may take up to <strong>10 minutes to arrive</strong>. If you don't see it in your inbox, please also check your <strong>spam or promotions</strong> folders.<br><br>👉 If you still haven't received it after that time, please complete the following form so we can help you.",
"has_form": true,
"show_info_text": true,
"in_form": ["00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "Check the status of my order",
"id": "NOT_RECEIVED_TRACKING",
"value": "NOT_RECEIVED_TRACKING",
"type": "INCIDENCE",
"description": "Track the status of your order through <a class='tw-text-blue tw-underline' href='$httpsURL('Order-ShowTracking')$'>this link</a>",
"has_form": false,
"show_info_text": true,
"in_form": ["Numero_de_Pedido__c", "00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "Problem with the delivery of my order",
"id": "NOT_RECEIVED_ORDER",
"value": "NOT_RECEIVED_ORDER",
"type": "INCIDENCE",
"description": "",
"has_form": true,
"show_info_text": false,
"in_form": ["Numero_de_Pedido__c", "00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "I need to change the delivery address or details",
"id": "CHANGE_ORDER_ADDRESS",
"value": "CHANGE_ORDER_ADDRESS",
"type": "REQUEST",
"description": "We will do everything possible to manage the change of address. Please tell us which details you need to change (postcode, street, telephone number, etc.).",
"has_form": true,
"show_info_text": false,
"in_form": ["Numero_de_Pedido__c", "00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "I want to change or remove items from my order",
"id": "MODIFY_ORDER_PRODUCTS",
"value": "MODIFY_ORDER_PRODUCTS",
"type": "REQUEST",
"description": "We will do everything possible to manage the change of products in your order. Please tell us which product(s) you wish to exchange and for which product(s).",
"has_form": true,
"show_info_text": false,
"in_form": ["Numero_de_Pedido__c", "00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
}
]
},
{
"title": "I have received my order",
"id": "hk_received",
"value": "RECEIVED",
"inner_answers": [
{
"title": "A product is missing or I received the wrong one",
"id": "RECEIVED_ORDER_WRONG",
"value": "RECEIVED_ORDER_WRONG",
"type": "INCIDENCE",
"description": "Sorry for the inconvenience. Let us know which item is missing or incorrect. If needed, we'll request further details.",
"has_form": true,
"show_info_text": false,
"in_form": ["Numero_de_Pedido__c", "00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "I received a defective product or want to file a warranty claim",
"id": "RECEIVED_PRODUCT_DEFECT",
"value": "RECEIVED_PRODUCT_DEFECT",
"type": "INCIDENCE",
"description": "We're sorry about this. Please briefly describe the defect. If we need more information, we'll request it from you.",
"has_form": true,
"show_info_text": false,
"in_form": ["Numero_de_Pedido__c", "00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "I received my order correctly, but I want to know how to return it",
"id": "RECEIVED_ORDER_REFUND",
"value": "RECEIVED_ORDER_REFUND",
"type": "REQUEST",
"description": "Manage your return quickly and easily through our portal:<br><br>👉 <a class='tw-text-blue tw-underline' href='https://returns.hawkersco.com/'>Access the returns portal</a>",
"has_form": false,
"show_info_text": true,
"in_form": ["Numero_de_Pedido__c", "00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "Check the status of my refund",
"id": "NOT_RECEIVED_REFUND",
"value": "NOT_RECEIVED_REFUND",
"type": "INCIDENCE",
"description": "",
"has_form": true,
"show_info_text": false,
"in_form": ["Numero_de_Pedido__c", "00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "Request an invoice",
"id": "CUSTOMER_INVOICE",
"value": "CUSTOMER_INVOICE",
"type": "REQUEST",
"description": "If you want the invoice to be in your name, we need your National ID Number. If you prefer it to be in the name of a business, we will need your Tax ID Number. Also, don't forget to confirm your billing address.",
"has_form": true,
"show_info_text": false,
"in_form": ["Numero_de_Pedido__c", "00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
}
]
}
]
},
{
"question": "Other type of request",
"id": "hk_info",
"value": "OTHER",
"answers": [
{
"title": "I can't access my account",
"id": "OTHER_ACCOUNT_PROBLEM",
"value": "OTHER_ACCOUNT_PROBLEM",
"type": "QUESTION",
"description": "To access your account, we recommend resetting your password. If the problem persists, tell us the error message you are receiving.",
"has_form": true,
"show_info_text": false,
"in_form": ["00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "I've had an issue with payment or can't complete my purchase",
"id": "OTHER_PAYMENT_PROBLEM",
"value": "OTHER_PAYMENT_PROBLEM",
"type": "QUESTION",
"description": "Let us know the error or issue you're experiencing while completing your purchase or making the payment, and which products you're trying to buy.",
"has_form": true,
"show_info_text": false,
"in_form": ["00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "I can't apply a promo code or discount",
"id": "OTHER_PROMO_DISCOUNT",
"value": "OTHER_PROMO_DISCOUNT",
"type": "QUESTION",
"description": "To help you with the discount code, tell us the code you are trying to use, the error you encounter (if there is one) and the products you want to buy.",
"has_form": true,
"show_info_text": false,
"in_form": ["00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "Inquiry about product availability",
"id": "OTHER_PRODUCT_STOCK",
"value": "OTHER_PRODUCT_STOCK",
"type": "QUESTION",
"description": "To help you to find the model you are looking for, please tell us the product name or reference.",
"has_form": true,
"show_info_text": false,
"in_form": ["00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "Information about the return policy",
"id": "OTHER_RETURN_POLICY_INFO",
"value": "OTHER_RETURN_POLICY_INFO",
"type": "QUESTION",
"description": "<p>Returns are managed at <a href='https://returns.hawkersco.com/' target='_blank'>returns.hawkersco.com</a>. Refunds are issued within 1–10 business days.</p>",
"has_form": false,
"show_info_text": true,
"in_form": ["00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "Information about a product's features",
"id": "OTHER_INFO_PRODUCT_FEATURES",
"value": "OTHER_INFO_PRODUCT_FEATURES",
"type": "QUESTION",
"description": "Let us know the product or model you're asking about and the specific details you want to know (size, shape, material, dimensions, etc.).",
"has_form": true,
"show_info_text": false,
"in_form": ["00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
},
{
"title": "Other inquiry not related to an order",
"id": "OTHER_QUERY",
"value": "OTHER_QUERY",
"type": "QUESTION",
"description": "Explain in detail what you need to know or resolve and we will help you to solve the issue.",
"has_form": true,
"show_info_text": false,
"in_form": ["00N0Y00000PJFge", "00N0Y00000PJFgR", "email", "description", "legal_terms", "00N1i000001xaMZ"],
"select_options": [],
"file": false
}
]
}
]
},
"form": [
{
"id": "Numero_de_Pedido__c",
"title": "Order number",
"type": "text",
"name": "Numero_de_Pedido__c",
"maxLength": 100,
"value": "",
"class": "c-form__field",
"rows": 0,
"required": true,
"placeholder": ""
},
{
"id": "00N0Y00000PJFge",
"title": "Name",
"type": "text",
"name": "00N0Y00000PJFge",
"maxLength": 100,
"value": "",
"class": "c-form__field",
"rows": 0,
"required": true,
"placeholder": ""
},
{
"id": "00N0Y00000PJFgR",
"title": "Surname",
"type": "text",
"name": "00N0Y00000PJFgR",
"maxLength": 100,
"value": "",
"class": "c-form__field",
"rows": 0,
"required": true,
"placeholder": ""
},
{
"id": "email",
"title": "E-Mail",
"type": "email",
"name": "email",
"maxLength": 80,
"value": "",
"class": "c-form__field",
"rows": 0,
"required": true,
"placeholder": ""
},
{
"id": "description",
"title": "PLEASE GIVE US MORE DETAILS",
"type": "textarea",
"name": "description",
"maxLength": 400,
"value": "",
"class": "c-form__field",
"rows": 4,
"required": false,
"placeholder": ""
},
{
"id": "legal_terms",
"title": "I have read and accept HAWKERS' <a href=$url('Page-Show', 'cid', 'privacy-policy')$ target='_blank'>privacy policy</a> and the <a href=$url('Page-Show', 'cid', 'terms')$ target='_blank'>terms and conditions</a>",
"type": "checkbox",
"name": "legal_terms",
"maxLength": "",
"value": 1,
"class": "c-form__checkbox",
"rows": 0,
"required": true,
"placeholder": ""
},
{
"id": "00N1i000001xaMZ",
"title": "I agree to receive commercial information from HAWKERS group and from other companies they collaborate with",
"type": "checkbox",
"name": "00N1i000001xaMZ",
"maxLength": "",
"value": 1,
"class": "c-form__checkbox",
"rows": 0,
"required": false,
"placeholder": ""
}
],
"urls": {
"form": "https://webto.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8",
"formFiles": "https://saldum.my.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8",
"lightningComponent": "https://saldum.my.salesforce-sites.com/WEBTOCASEDEMOcodemsio"
}
}

Propiedades

images

PropiedadTipoObligatorioDescripción
images.logo_hawkstringRuta al logo de Hawkers mostrado en la cabecera. Debe terminar en ?$staticlink$.
images.logo_img_manstringImagen decorativa de hombre, visible antes de que el usuario pulse el botón inicial.
images.logo_img_womanstringImagen decorativa de mujer, visible en la pantalla de confirmación post-envío.

texts

PropiedadTipoObligatorioDescripción
texts.introstringTexto de bienvenida mostrado sobre el botón inicial.
texts.intro_buttonstringTexto del botón que despliega el formulario.
texts.select_first_questionstringEtiqueta del primer desplegable (categoría).
texts.select_second_questionstringEtiqueta del segundo desplegable (subcategoría para hk_order).
texts.select_third_questionstringEtiqueta del tercer desplegable (opción) y del segundo para hk_info.
texts.select_fourth_questionstringNoEtiqueta del cuarto desplegable (motivo de devolución). Reservado, actualmente no activo.
texts.send_buttonstringTexto del botón de envío del formulario.
texts.thanksstringMensaje HTML mostrado en la pantalla de confirmación tras enviar el formulario.
texts.disabled_optionstringTexto de la opción deshabilitada por defecto en todos los desplegables.
texts.brandstringValor del campo oculto Brand__c enviado a Salesforce (ej. "Hawkers").
texts.max_size_filesstringNoTexto informativo sobre el tamaño máximo de archivos adjuntos (ej. "Max. file size: 15MB").
texts.pendingstringValor del campo oculto SS_Pending__c enviado a Salesforce.
texts.receivedstringID del paso hk_received para identificarlo internamente.
texts.not_receivedstringID del paso hk_not_received para identificarlo internamente.
texts.org_idstringID de organización de Salesforce. Se envía como campo oculto orgid al hacer POST.

contain

PropiedadTipoObligatorioDescripción
contain.namestringNombre del campo POST que recoge la categoría principal (ej. "Class_case__c").
contain.subnamestringNoNombre del campo POST para el asunto/subcategoría (ej. "Subject_case__c").
contain.refund_reasonstringNoNombre del campo POST para el motivo de devolución (ej. "Return_reason_case__c").
contain.stepsarrayArray de categorías de primer nivel del formulario.

contain.steps[]

PropiedadTipoObligatorioDescripción
questionstringTexto visible en el primer desplegable.
idstringIdentificador interno. Condiciona la lógica del formulario: "hk_order" o "hk_info".
valuestringValor enviado a Salesforce como categoría (ej. "ORDER", "OTHER").
answersarraySubcategorías que aparecen en el segundo desplegable.

contain.steps[].answers[]

PropiedadTipoObligatorioDescripción
titlestringTexto visible en el segundo desplegable.
idstringIdentificador interno de la respuesta.
valuestringValor usado como asunto en Salesforce.
typestringTipo de caso Salesforce: "INCIDENCE", "REQUEST" o "QUESTION".
descriptionstringNoTexto HTML informativo. Según show_info_text, se muestra como bloque visible o como placeholder del textarea.
show_info_textbooleanSi true, renderiza description como bloque informativo visible encima del formulario (o en su lugar si has_form es false).
has_formbooleanSi true, muestra el formulario con los campos de in_form.
in_formarrayArray de IDs de campos del catálogo global form que se mostrarán para esta selección.
filebooleanReservado para integración con Lightning de Salesforce. Actualmente siempre false.
select_optionsarrayNoOpciones de un cuarto desplegable (motivo de devolución). Reservado, actualmente no activo en el componente.
inner_answersarrayNoTercer nivel de opciones, disponible solo para hk_order. Tiene las mismas propiedades que answers[] (excepto inner_answers anidado).

form

Catálogo global de todos los campos disponibles. Se definen una sola vez y se reutilizan por referencia en in_form.

PropiedadTipoObligatorioDescripción
idstringIdentificador único del campo. Se referencia en in_form.
titlestringEtiqueta visible del campo. Admite HTML (útil para los checkboxes con enlaces legales).
typestringTipo de campo: "text", "email", "textarea" o "checkbox".
namestringNombre del campo POST enviado a Salesforce (ID de campo API o nombre estándar).
maxLengthnumberNoLongitud máxima (aplica a text, email y textarea).
valuestring|numberNoValor por defecto. En checkboxes, el valor enviado al marcar (ej. 1).
classstringNoClase CSS del campo (ej. "c-form__field", "c-form__checkbox").
rowsnumberNoNúmero de filas visibles (solo para textarea).
requiredbooleanSi true, el campo es obligatorio y se marca con asterisco rojo.
placeholderstringNoPlaceholder del campo. Puede sobreescribirse con el description de la opción seleccionada.

Campos definidos actualmente

idCampo SalesforceTipoObligatorioDescripción
Numero_de_Pedido__cNumero_de_Pedido__ctextNúmero de pedido.
00N0Y00000PJFge00N0Y00000PJFgetextNombre del cliente.
00N0Y00000PJFgR00N0Y00000PJFgRtextApellidos del cliente.
emailemailemailCorreo electrónico.
descriptiondescriptiontextareaNoCampo de texto libre para detalles.
legal_termslegal_termscheckboxAceptación de política de privacidad y T&C.
00N1i000001xaMZ00N1i000001xaMZcheckboxNoConsentimiento para comunicaciones comerciales.

urls

PropiedadTipoObligatorioDescripción
urls.formstringEndpoint de Salesforce WebToCase para el envío estándar del formulario.
urls.formFilesstringEndpoint alternativo de Salesforce para envíos con archivos adjuntos (reservado).
urls.lightningComponentstringURL del componente Lightning de Salesforce para adjuntos (reservado, no activo).

Notas y consejos

Ficheros

pages/contact.isml

Añadir un nuevo campo al formulario
  1. Añade el campo al catálogo global form con un id único.
  2. Referencia ese id en el array in_form de las opciones donde deba aparecer.
  3. No es necesario duplicar la definición: un mismo campo puede usarse en múltiples opciones.
Añadir una opción que solo muestre información (sin formulario)

Configura has_form: false y show_info_text: true. El description puede contener HTML enriquecido con enlaces, listas o estilos Tailwind. Úsalo para opciones como "Política de devoluciones" o "Estado del pedido" donde basta con redirigir al usuario:

{
"has_form": false,
"show_info_text": true,
"description": "Gestiona tu devolución en <a href='https://returns.hawkersco.com/'>nuestro portal</a>."
}
Imágenes locales

Todas las rutas de imágenes deben terminar en ?$staticlink$ para que SFCC resuelva correctamente la ruta estática del cartucho.

IDs de campos Salesforce

Los IDs de campos como 00N0Y00000PJFge (Nombre) o Numero_de_Pedido__c son identificadores de campos API de Salesforce Service Cloud. Cambiarlos sin coordinarlo con el equipo de Salesforce hará que los datos no se guarden en el CRM.