Appointment only option

Ask the Community General Questions
1

Hello
It would be nice to have the possibility to add “by appointment only” in the bussiness hours to certain days of the week instead of times.

1 Like
3

Hi there, @Kobus_Brummer :wave:

Do I understand right that for some days you’d like to show hours and for another ones “by appointment only”?

If it is, please specify the days when you’d like to display “by appointment only”. I’ll be happy to check with the devs if it’s feasible :slightly_smiling_face:

4

Hello Max

That is correct. I would to make tuesday and wednesday “ by appointment only”. Thanks for the quick respons.

Mvg. Kobus Brummer

1 Like
5

Thanks!

I’ve passed it on to the devs and will get back to you tomorrow :slightly_smiling_face:

6

Hi @Kobus_Brummer :wave:

Our devs confirmed that it’s possible. I’ll get back to you once the solution is ready :slightly_smiling_face:

7

Thanks :smiley:

1 Like
8

Hi there, @Kobus_Brummer :wave:

Here is the code we’ve added to the Custom JS section on the Style tab of your widget’s settings:

const textReplacement = 'by appointment only';

const widgetClass = '.elfsight-app-9acc3546-bc99-46ad-9ac8-513a1c9f47ea';

const waitForElement = (selector, root = document) => new Promise(res => {
  let i = 0;

  const check = () => {
    const component = root.querySelector(selector);

    if (component) {
      res(component);
    } else if (i !== 50) {
      setTimeout(check, 100);
      i++;
    }
  };

  check();
});

function updateCurrentActivity() {
  const todayDay = (new Date()).getDay();
  if (todayDay === 2 || todayDay === 3) {
    const time = document.querySelector('[class*="content__Block-sc"] [class*="status-indicator__Title-sc"]');
    time.textContent = textReplacement;
  }
}

function updateTranslation(isSmall) {
  let block;
  if (isSmall) {
    block = document.querySelector('[class*="WidgetBackground__Content-sc"] [class*="content__Block-sc"]:last-child');
  } else {
    block = document.querySelector('[class*="schedule-block__ItemsContainer-sc"]');
  }
  block.querySelector('[class*="typography__Container-sc"]:nth-child(4) [class*="schedule-work-hours__Item-sc"]').textContent = textReplacement;
  block.querySelector('[class*="typography__Container-sc"]:nth-child(6) [class*="schedule-work-hours__Item-sc"]').textContent = textReplacement;
  updateCurrentActivity(isSmall);
}

let isSmall;

function callback(entries) {
  const entry = entries[0];
  if (entry.contentRect.width < 584 &&
    (isSmall === false || typeof isSmall === 'undefined')) {
    updateTranslation(true);
    isSmall = true;
  } else if (entry.contentRect.width >= 584 &&
    (isSmall === true || typeof isSmall === 'undefined')) {
    updateTranslation(false);
    isSmall = false;
  }
}

const resizeObserver = new ResizeObserver(callback);

waitForElement(`${widgetClass} [class*='WidgetBackground__Content-sc']`)
  .then(() => {
    const widgetContainer = document.querySelector(`${widgetClass} [class*='WidgetBackground__Content-sc']`);
    resizeObserver.observe(widgetContainer);
  });

You can change the text in the 1st line of the code:

image

Note: Custom JS do not operate in preview mode, so, you’ll see the changes only on the page where your widget is installed


Check it out and let me know if you like the result :slightly_smiling_face:

1 Like
9

Thanks Max this works perfect.

1 Like