Sisters Beauty Center:
Shopify per Centri Estetici

Costruzione URL di prenotazione con servizi pre-selezionati, direttamente nel template Liquid.

{%- comment -%} Build single-service Treatwell deep link {%- endcomment -%}
{%- if has_tw -%}
  {%- capture single_tw_url -%}
    https://www.treatwell.it/availability
    ?venueId={{ venue_id }}
    &proposedServices=[{
      "menuItemId":"{{ tw_item }}",
      "optionIds":["{{ tw_option }}"]
    }]
  {%- endcapture -%}
{%- endif -%}

JavaScript che genera dinamicamente l'URL con tutti i servizi selezionati dall'utente.

function updateFloatingBar() {
  var checked = section.querySelectorAll('.ssm__item.is-checked');
  var services = [];

  checked.forEach(function (item) {
    services.push({
      menuItemId: item.dataset.twItem,
      optionIds: [item.dataset.twOption]
    });
  });

  // Generate multi-service Treatwell URL
  var url = 'https://www.treatwell.it/availability'
    + '?venueId=' + venueId
    + '&proposedServices='
    + encodeURIComponent(JSON.stringify(services));

  floatingBtn.href = url;
}

Sistema di filtri per categoria con re-trigger delle animazioni CSS al cambio filtro.

filters.forEach(function (btn) {
  btn.addEventListener('click', function () {
    var filter = this.dataset.filter;

    // Toggle active state
    filters.forEach(f => f.classList.remove('is-active'));
    this.classList.add('is-active');

    // Show/hide categories with re-triggered animation
    categories.forEach(function (cat) {
      if (filter === 'all' || cat.dataset.filterGroup === filter) {
        cat.removeAttribute('hidden');
        cat.style.animation = 'none';
        cat.offsetHeight; // Force reflow
        cat.style.animation = '';
      } else {
        cat.setAttribute('hidden', '');
      }
    });
  });
});