0
228
ViewsShopify cómo agregar filtro de precios a la página
Necesito agregar un filtro de precios a la página, donde puedo elegir el rango de precios 
así en el ejemplo del tema del amanecer
Este es el archivo de colección
select id="sort-by-price"> {% assign sort_by = collection.sort_by | default: collection.default_sort_by %} {% for option in collection.sort_options %} <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}> {{ option.name }} </option> {% endfor %} </select>archivo de facetas
{%- liquid assign sort_by = results.sort_by | default: results.default_sort_by assign total_active_values = 0 if results.url assign results_url = results.url else assign terms = results.terms | escape assign results_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by endif -%}que necesito agregar
1 answers
Answer question0
El filtro de rango de precios de Dawn se basa en JavaScript, no en Liquid.
- El componente se llama
PriceRangey se define como un elemento personalizado denominadoprice-range. Puede encontrarlo aquí:https://github.com/Shopify/dawn/blob/main/assets/facets.js#L211 - El código líquido detrás de esto está aquí: https://github.com/Shopify/dawn/blob/a8ded5267f8ecce6bb6757fc8b907bb93431b1aa/snippets/facets.liquid#L221
- CSS: https://github.com/Shopify/dawn/blob/main/assets/component-facets.css#L346
Sin embargo, eso no es todo ya que la lógica en ese componente solo maneja su propio estado. Al cambiar las entradas, notará que la URL cambia:
https://****.myshopify.com/collections/bundle?filter.v.price.gte=5&filter.v.price.lte=11
el rango de precios está bajo la forma de filtros de facetas que tiene su propia lógica en el mismo archivo:
La pila de llamadas para este caso particular se puede encontrar en el panel de herramientas de desarrollo de Chrome en la pestaña de red
FacetFiltersForm :
- formulario escucha los cambios:
facetForm.addEventListener('input', this.debouncedOnSubmit.bind(this)); this.debouncedOnSubmit = debounce((event) => { this.onSubmitHandler(event); }, 500);Cuando ocurre "enviar" (que es básicamente cualquier cambio de entrada), el controlador de envío creará una cadena de consulta utilizando la función createSearchParams()
Luego se dispara el envío de formulario:
this.onSubmitForm(forms.join('&'), event) onSubmitForm(searchParams, event) { FacetFiltersForm.renderPage(searchParams, event); }- Que intentará representar la página utilizando los datos obtenidos en:
FacetFiltersForm.renderSectionFromFetch(url, event); static renderSectionFromFetch(url, event) { fetch(url) .then(response => response.text()) .then((responseText) => { const html = responseText; FacetFiltersForm.filterData = [...FacetFiltersForm.filterData, { html, url }]; FacetFiltersForm.renderFilters(html, event); FacetFiltersForm.renderProductGridContainer(html); FacetFiltersForm.renderProductCount(html); }); }Básicamente, desea copiar la lógica de todas las facetas y ajustarla a sus necesidades.