kellicox90

@squarepaste I purchased your plugin, and sent a follow up email as the plugin wouldn't work. I've not had a reply from you, and i sent the email through your website on the day i purchased which was 10 days ago. I thought maybe I can reach you here in case the email went to spam folder.

Hello! @jpeter

This is such great code, however i'm having a hard time getting it to work on my client site and i'm not sure why exactly.

The URL is kimco.com.au and the form is located within the floating button 'book a ride'. 

I'd like to use the conditional logic when a customer chooses 'yes' for the return trip field - i'd like the questions applicable to the return trip to then show - and hide those questions if they choose 'no'. 

I used this code from previous messages on this thread. Any help would be greatly appreciated.

Thanks in advance.

<script> (function () {

  const DELAY = 500; // Delays code execution so other scripts can run
  const SLIDE_UP_SPEED = 0; // Speed in milleseconds
  const SLIDE_DOWN_SPEED = 200; // Speed in milleseconds

  setTimeout(() => {

    const field = new ToggleFields();

    field
      .id(‘select-c6abe76b-5c3b-453a-a85a-766fd04a8c44’)
      .hasValues([
        'Yes’,
      ])
      .thenShow([
        '990097c0-0953-4586-ade0-954ae734fc4f', 
      'b7b357b4-1f39-4949-a07e-f21c53b03790',
      '23e35106-263c-4089-8c43-b596d07bbac4',
      '6c7845db-12aa-4572-9608-d454afd13581',
      '55ce8c26-7dd1-455c-8170-f9e9e68175a1',
      '67ab5e25-4126-4899-a826-e80d99c61003'
      ]);

  }, DELAY);

  /*********************************************************************
   * DO NOT ALTER BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING
   *********************************************************************/

  class ToggleFields {

    constructor() {
      this.parentEl = null;
      this.parents = {};
      this.dependenciesFields = [];
      this.values = [];
      this.showFields = [];
      this.valueMapping = null;
    }

    id(id) {
      if (typeof id == 'string') {

        // Get the parent element 
        const parentFieldId = document.querySelector('[id="' + id + '"]');
        const parentFieldName = document.querySelector('[name="' + id + '"]');
        let parent;
        
        if (parentFieldId) { this.parentEl = parentFieldId; }
        if (parentFieldName) { this.parentEl = parentFieldName }
        
        this.parentEl.valueMap = this.parentEl.valueMap || {};
        this.parents[this.parentEl.id || this.parentEl.name] = this.parentEl;
        
        if(!this.parentEl) {
          return this;
        }
        
      }

      return this;
    }

    hasValues(values) {
      if (!Array.isArray(values)) { return this; }

      this.values = values;

      if(this.parentEl) {
        values.forEach(value => {
          this.parentEl.valueMap[value] = this.parentEl.valueMap[value] ||  {
            fields: [],
            hidden: true
          };
        })
      }

      return this;
    }

    thenShow(fields) {

      if (!Array.isArray(fields)) { return this; }
      
      if(this.parentEl) {
        fields.forEach(field => {
          this.values.forEach(key => {
            this.parentEl.valueMap[key].fields.push(`#${field}`);
          });
        });
      }

      const fieldIds = fields.map(field => '#' + field);
      $(fieldIds.join(',')).hide();
      
      this.onLoad(() => {
        // Load jQuery if not loaded
        if (!window.jQuery) { return this.loadJquery(this.thenShow(fields)) }

        this.showFields = fields;

        // Assign jQuery to a variable
        const $ = jQuery;

        Object.keys(this.parents).forEach(id => {

          const parentEl = this.parents[id];

          if (!parentEl || parentEl.toggleFieldInit) { return; }
        
          parentEl.toggleFieldInit = true;
          // Show or hide the dependent field based on the PARENT_VALUE
          $(parentEl).on('change', (evt) => {
            const value = evt.target.value;
            
            Object.keys(parentEl.valueMap).forEach(key => {
              if(parentEl.valueMap[key].hidden == false) {
                $(parentEl.valueMap[key].fields.join(',')).slideUp(SLIDE_UP_SPEED);
                parentEl.valueMap[key].hidden = true;
              }
            })

            if(parentEl.valueMap[value]) {
              $(parentEl.valueMap[value].fields.join(',')).slideDown(SLIDE_DOWN_SPEED);
              parentEl.valueMap[value].hidden = false;
            }
          });

        });
      })

      return this;
    }

    loadJquery() {
      var s = document.createElement('script');
      s.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
      s.onload = this.thenShow(this.fields);
      document.body.appendChild(s);
    }

    onLoad(callback) {
      // Initialize after the page has been loaded
      if (document.readyState === 'complete') {
        setTimeout(callback, DELAY)
      } else {
        document.addEventListener("DOMContentLoaded", function () {
          setTimeout(callback, DELAY);
        }, false);
      }
    }

  }

})();

</script>

On 5/22/2024 at 5:29 PM, Beyondspace said:

@DanielGlazenburg Thank you for your interest! Florists and bakers are actually among our favorite clients, and we recently installed the Beyondspace Datepicker plugin on this page: Le Bouquet Floral Shop, configured with the exact settings you mentioned. Our datepicker can block the current date if the time has passed 11:00 AM, making the current date unavailable for selection.

While it’s true that due to Squarespace's limitations, the datepicker cannot be used on the Checkout form and Donation blocks, it can be set up for Form blocks and Product forms, including in the Quick View modal and on the /cart page. 

Feel free to reach out if you have any more questions or need further assistance!

@Beyondspace We are using your plugin successfully on our site, (florist). I am wondering about what you say here about the cart page. we have had a few thoughts regarding the multiple products and how it's frustrating that they need to pick a date twice say if they buy flowers and then add a candle to the order - is there a workaround for this?

I'm also trying to do this, has anyone got a solution?

ohhhh im sorry!!! Yes, it was a knee jerk message as I was in the backend testing other things in there!! Sorry for wasting your time, and also thank you for such a great workaround.

I'm also looking for a solution for this... any luck?

@creedon Hello! I've been following your instructions and successfully implemented the character limit to our product forms, however I went in to check something today and the code seems to be broken and i cant work out why. Is there any way you could take a look?

The URL is https://www.gisborneflowershoppe.com.au/shop/p/floral-arrangement-vivid
when you click add to cart, the custom form will come up. 

Your assistance on this is hugely appreciated! Thanks in advance.

Kelli

@tuanphan I'm wondering if you've been able to have the nested catagories for mobile. I just bought the plugin from Will, it's perfect, but i need the sub-menus on mobile too, the plugin only allows for the regular Main and Sub menus.

So eg. heirachy as follows

Our Treatments
Facials

- Hydrodermabrasion
- IPL SKIN REJUVINATION

Massage

- Relaxation
- Remedial

Hair Removal

- Waxing
- IPL
 

Hello!
Just wondering if anyone has successfully integrated the google map function into a squarespace form, or has an alternative suggestion to achieve this? My client is collecting data and would like accurate location information to be collected. Is this possible?

Thanks
Kelli

Please help.

Has anyone bought the date picker from beyond space? https://www.beyondspace.studio/squarespace-datepicker

I bought this, and I'm wondering if anyone in the forum could help me customise it. I've tried contacting support several times but not getting anywhere and my code knowledge for something like this is limited.

I've currently got the code set up to make the 2024 Victorian (Australia) public holidays unavailable, and also Sundays - we also have a lead time set up. But I'm concerned that the dates ahead aren't able to be customised. We also would like to customise to change the lead time for future products or events - like Christmas or special orders.

I'm not sure if I'm able to post the code in the forum but maybe someone who can help me maybe message me?

I haven't made it live on the website yet as i wanted to get these things sorted first.

Please help.

Has anyone bought the date picker from beyond space? https://www.beyondspace.studio/squarespace-datepicker

I bought this, and I'm wondering if anyone in the forum could help me customise it. I've tried contacting support several times but not getting anywhere and my code knowledge for something like this is limited.

I've currently got the code set up to make the 2024 Victorian (Australia) public holidays unavailable, and also Sundays - we also have a lead time set up. But I'm concerned that the dates ahead aren't able to be customised. We also would like to customise to change the lead time for future products or events - like Christmas or special orders.

I'm not sure if I'm able to post the code in the forum but maybe someone who can help me maybe message me?

I haven't made it live on the website yet as i wanted to get these things sorted first.

Sorry its gisbornesmashrepairs.com.au/towing

Hi @tuanphan the link is gisbornesmashrepairs.com/insurance

Hello

I'm wondering if anyone has any css to reduce the size of the post submit message pop up on mobile, it currently fills the whole page, I'd love for it to look more like the desktop version where it only takes up a small section (so its more obvious that its a closable pop-up)

Any help appreciated. Cheers

7 minutes ago, tuanphan said:

Use this code

@media screen and (max-width:640px) {
div#page-section-63ffad66f528547186f9170f>.row:nth-child(3) .span-2 {
    width: 50% !important;
    float: left !important;
}
}

 

Thanks so much this is perfect.

On 4/23/2023 at 10:45 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile Footer Images */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1680055391599_144574+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
}

 

Thanks @tuanphan This works perfectly, I'm just trying to get it to do the same thing on my /towing page (I've used an alternative footer for this section but with the same images that i'd like to be side by side) I cant seem to replicate it and get it to work, are you able to see?

Id also like to piggy back onto this thread, I have 2x images in the footer of a clients site that look huge on mobile, id like to place them side by side but cant seem to get the codes in the thread to work.

https://lime-raspberry-ywg5.squarespace.com/

PW GSR123

These are the 2 images that i'd like to be placed side by side on mobile. They are in the footer.

@tuanphan exactly

I have the same problem, jump links across my site aren't underlined when active.. any solutions?

URL https://lime-raspberry-ywg5.squarespace.com/

PW GSR123

Jump links are all in the services folder and on the /towing page (alternative navigation)

Any help much appreciated 🙂

@tuanphan Thank you so much these codes are great! Are you able to help with the second logo showing in the mobile menu? And to also make it work the same on the /towing page, where the logos have switched, i'd still like to see the relative second logo on the mobile menu for this page too?

Thanks again

#1. yes move phone button into second line under navigation (centred if possible).

#2. Clickable if possible

#3. Yes, just on the /towing page I have used Will Myers plugin to use an alternative header just for this page, so i'd like to switch to the "smash repair" logo on this page only

#4 Is it possible to match the sizing of the image to the size of the header logo? 

Thank you so much @tuanphan

@tuanphan I'm replying through this thread, please see above comment which shows what i'm trying to do. 
Additionally, I'd like to match the size of the image to the size of the header logo if this is possible too?
Thanks in advance.

Hi Everyone,

Super helpful thread!

I've gone through each step and managed most of it, however there's some edits i'd like to do if it's possible:

1. On the desktop view, i'd like to move the call to action button.

2. On the mobile menu, i'd like the second logo at the bottom, and the rest of the menu moved up to allow the space.

3. Also, i'm using a plugin for an alternative header and footer on the /towing page - i'm not sure if anyone here can help me to alternate the secondary logo on this page to switch it to the other logo?

URL: https://lime-raspberry-ywg5.squarespace.com/ 

PW: GSR123

Thanks in advance, very appreciated.

Hello! I've added the code and managed to get the 2x logos working on desktop, but cannot see a solution how to get it to show in the mobile view. Are you able to help?

URL https://lime-raspberry-ywg5.squarespace.com/ PW GSR123

Thanks in advance.

Hello!

I've added a testimonial slider as a Carousel List in a client website, however the sizing on mobile is off. There's far too much space between heading and body, and between body and arrows and I cant seem to find any settings that I can fix this for mobile. Can anyone help?