¡Huy! Este email no tiene permiso para la apertura de ticket. Por favor, póngase en contacto con el responsable de tu tienda para facilitar el acceso.

El control de búsqueda <vtex.cmc:fullTextSearchBox />

El control <vtex.cmc:fullTextSearchBox /> es responsable por generar la caja de búsqueda. Además del campo de investigación del control renderizar un combo para restringir una búsqueda en un departamento. Abajo tenemos un ejemplo del control sin ninguna aplicación de CSS:

controle-busca-cru

La búsqueda es una funcionalidad que debe estar disponible en todas las páginas de una tienda y es sugerido que el control sea insertado adentro de uno subtemplate. Normalmente el control de búsqueda es usado adentro del subtemplate del header de la tienda.

HTML renderizado por el control:

 

<fieldset class="búsqueda">

<legend>Buscar en el sitio</legend>

<label>Buscar</label>

<select id="ftDept4aceafb578de4c7caf31e06bcc8d45b9">

<option value="">Todo el sitio</option>

<option value="1000000">Integración</option>

<option value="1">Electrodomésticos</option>

<option value="3">Moda</option>

</select>

<input type="hidden" id=ftIdx4aceafb578de4c7caf31e06bcc8d45b9 value="" />

<input id="ftBox4aceafb578de4c7caf31e06bcc8d45b9" class="fulltext-search-box"

type="text" size="20" accesskey="b" />

<input id="ftBtn4aceafb578de4c7caf31e06bcc8d45b9" type="button"

value="Buscar" class="btn-buscar" />

</fieldset>

 

 

La funcionalidad de autocomplete ya está previsto en este control y es necesario apenas personalizar su CSS. El autocomplete es activado así que un cliente digitar 3 caracteres del campo de búsqueda. Abajo el HTML que es generado por el autocomplete:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 10; top: - 3334px; left: 667.5px; display: none; position: relative; width: 507px;">

<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="- 1">adidas em Modelos</a></li>

<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="- 1">adidas em Tênis</a></li>

<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="- 1">adidas em Lançamentos</a></li>

<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="- 1">adidas em Masculino</a></li>

<li class="ui-menu-item" role="menuitem">

<a class="ui-corner-all" tabindex="-1">

<img src="http://www.authenticfeet.com.br/archivos/ids/188460-25-25/Mini-Bola- Brazuca-WC-14-Glider.jpg" width="25" height="25" alt="Mini-Bola-Brazuca-WC-4-Glider"> minibola adidas brazuca glider - copa do mundo</a></li>

<li class="ui-menu-item" role="menuitem">

<a class="ui-corner-all" tabindex="-1">

<img src="http://www.authenticfeet.com.br/archivos/ids/189014-25-25/Tenis-adidas-Springblade-Feminino.jpg" width="25" height="25" alt="Tenis-adidas-Springblade-Feminino"> tênis adidas springblade feminino</a>

</li>

<li class="ui-menu-item" role="menuitem">

<a class="ui-corner-all" tabindex="-1">

<img src="http://www.authenticfeet.com.br/arquivos/ids/188855-25-25/Tenis-adidas-Dynamic-Fusion-50-Feminino.jpg" width="25" height="25" alt="Tenis-adidas-Dynamic-Fusion-50-Feminino"> tênis adidas dynamic fusion 50 feminino</a>

</li>

</ul>

 

Ejemplos de cómo puede ser personalizado el control:

controle-busca-autocomplete

controle-busca-exemplo

controle-busca-exemplo1

 



¿Tiene más preguntas? Enviar una solicitud

Comentarios

Tecnología de Zendesk