Mindzek

Site URL: https://www.ugnesstory.com Hi all, I have implemented multilingual solution to my site with https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template solution for EN and LT language. But I am experiencing issues with links as I can't duplicate URL's if I am using dropdown menu, as per below: So, I have original stores placed to not linked navigation pages which I simply set up as en/store and lt/parduotuve. Then I created two dropdown menus with links. With links I have no problems, because I can use URL to make it work - https://www.ugnesstory.com/lt/parduotuve/kaklo-papuosalai and https://www.ugnesstory.com/en/store/necklaces for example. The problem is with dropdown buttons Parduotuvė and Store itself, as I can't use URL like https, but I need to use directly path like lt/parduotuve and en/store, but these paths are already taken to setup original Store and Parduotuvė in not linked navigation menu. So, if I do not set up dropdown buttons as lt/parduotuve and en/store they will be always visible and it doesn't matter what language I use for my page. In conclusion to this I just set URL slugs for dropdown buttons as /store and /parduotuve and tried to additionally hide /store and/parduotuve when either LT or EN language is selected with this code: /* HIDE /parduotuve LINK WHEN ENGLISH IS SELECTED */ if (lang === 'en') { $('a[href="/parduotuve"]').hide(); // Hide /parduotuve link when EN is active } /* HIDE /store LINK WHEN LITHUANIAN IS SELECTED */ if (lang === 'lt') { $('a[href="/store"]').hide(); // Hide /store link when LT is active } Everything looking great on desktop and mobile for LT - /parduotuve, but I am having issues with /store, because when I am pressing Store nothing happens and seems dropdown menu just not working for EN version. Please see video attached. RPReplay_Final1729020812.MP4 So, I hope that somebody can help me with this, as I can't find how to solve this. Thank you very much in advance! My full code: <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = 'lt'; var lang = location.pathname.split("/")[1]; var defaultClass = 'lang-'+defaultLanguage+''; var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']"; if (lang == "" || lang.length > 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+''); $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () { var langType = $(this).attr('href').split("/")[1]; var multiLanguageClass = 'multilanguage lang-' + langType + ''; if (undefined !== langType && langType.length <= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $('nav button').each(function () { var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0]; var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + ''; if (undefined !== langTypeFolder && langTypeFolder.length <= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == "en") { $('a[href="/"]').attr("href", "/en/home/"); $('body').addClass('body-lt'); } /* ADD EXCLUSION NAV ITEMS */ $('.exclude-me,.exclude-me a').addClass('exclude'); $('.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control').addClass('exclude'); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $('.multilanguage:not(".lang-'+lang+',.exclude")').remove(); /* SETUP LANGUAGE SWITCHER */ $('body').prepend('<div class="language"><a href="/lt/namai" class="lang-lt">LT</a><span class="separator">|</span><a href="/en/home" class="lang-en">EN</a></div>'); /* HIDE /parduotuve LINK WHEN ENGLISH IS SELECTED */ if (lang === 'en') { $('a[href="/parduotuve"]').hide(); // Hide /parduotuve link when EN is active } /* HIDE /store LINK WHEN LITHUANIAN IS SELECTED */ if (lang === 'lt') { $('a[href="/store"]').hide(); // Hide /store link when LT is active } }); </script>

Hi @tuanphan , With your provided CSS you only stopping the hover effect? Am I correct? Because, for fluent hover I was using below codes: Header: <script> document.addEventListener("touchstart", function(){}, true); </script> CSS: element:hover, element:active { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none /*only to disable context menu on long press*/ } And as I mentioned it just magically stopped working. Mindaugas

Hi @Mdhanjal No, the issue remains, situation is still the same as you could see in the video. When I touch the product image the image just goes white.

Hi all, Few days ago hover effect in my shop stopped working on mobile. I know that it was working perfectly, but it just stopped and now by touching it showing a blank/white screen instead of second picture of my product. Nothing changed on the desktop version, the issue is only on mobile. Does anyone started experiencing this? I wrote to Squarespace, as no additional code was added from my side, which could maybe initiate the problem. adding video. Thank you ! RPReplay_Final1722773381.MP4

Hi @cnsCreative Thank you for looking into this. Could you please advise me regarding the index pages and folders? Both homepages were done identically form my view just by adding additional sections, so it was not like build in one section. And it's interesting that it shows that code is on all pages, as I put the code only in specific page settings (page settings -> advanced -> PAGE HEADER CODE INJECTION)

Hi @HoaLT, Thank you for quick input regarding this. Now I tried below code by removing what you advised to do: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(function() { $.scrollify({ section : ".page-section", }); }); </script> But unfortunately with this snap scroll do not work in both test pages. But as I mentioned below is working on 1 test page, but not on the main one: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script> <script> $(function() { $.scrollify({ section : ".page-section", }); }); </script>

Hi all, I am using below code for snap scrolling implementation in my site, at the moment I am in a testing phase and I experiencing issue where code is working in test page, but not working in my main page which should go on production. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script> <script> $(function() { $.scrollify({ section : ".page-section", }); }); </script> I am using this test page to play - https://raspberry-nonagon-28dn.squarespace.com (password - lasttest) and here as you can see code is working correctly, and snap scroll is working. But when I added this code to my main page, which is hidden at the moment - https://www.ugnesstory.com/home-1 (password - testingas) I could not get snap scroll function to work. For both main pages I added code to page settings -> advanced -> PAGE HEADER CODE INJECTION. I want this to work only in the homepage. So, I hope that someone also had similar issues and could advise how can I solve this, as I think some of other codes are blocking this, but unfortunately I can't solve this.. Thanks anyone in advance!

Hi again, I am saying that this "snap-scrolling" code do not work for me. I tried to make two sections as a try, but there is no effect when scrolling in mobile and desktop. So, I am wondering does sections should be specific height, or I need to change something in Squarespace sections settings as well in order to make this code work. Please see what results I had with code and two sections and footer. UGNÈS STORY– „Google Chrome“ 2023-11-05 22-56-31.mp4 Thank you!

Hi, I tried to add additional section, made height - Large which took each section per screen and put a code in Code injection - Header, but there is no changes after all when I try to scroll. Why this do not work? Is it depends on height of the pictures, or there should be different type of sections? Thank you again in advance.

Hi @Ziggy, Thank you for looking into this. I am aware about parallax picture settings in Squarespace. The main thing what I want to achieve is to change section with one scroll, just as per example in codepen. Maybe you can help me to found/achieve that snap-scrolling from codepen? Thank you in advance!

Hi, Thank you for looking into this! Maybe I didn't clarify enough what I meant by my post. I want to have more steady screen while swiping left or right, as per now in Squarspace when you are trying to change pictures by swiping it just gets shaky and bouncy. Please see example, what I meant: RPReplay-Final1698694147.MP4

Hi, Below should really hide quantity box. If it's really not working please try this , as it should move box from the viewport:

Hello, We are looking for people who were tried or successfully achieved parallax effect as per below or something similar: https://codepen.io/eehayman/pen/qdGZJr We would love to hear if it's possible to adapt this in Squarespace desktop and mobile in the first place. So if someone can give a hint were to start, or any developers interested in this, we can discuss this privately as well. Thanks! https://www.ugnesstory.com/

Hi again! Maybe you had a chance to look into this?

Hi @tuanphan Sorry, page is www.ugnesstory.com

Hi, We are using SIMPLE format as well and we have the same issue as you, which appeared not long ago. Great news that Squarespace is working on it.

Hello, Maybe somebody find this as a problem and found way to fix this. As I couldn't find any related discussion regarding this. When you are sliding/swiping through product images on mobile the screen goes up or down and sliding do not stay steady. (attached example) RPReplay_Final1696960387.mp4 Is it possible to have kind of locked screen or more steady image swiping and avoid jumpy screen?

Hi, Thank you for looking into this. We kind of understand that this is not really an easy task to do for free, so we are open for prices and possible solutions, just looking were to start.

Hello, I want to add product where customer can create jewelery by himself by giving him variants. Does anyone had interest or even found the solution on how to make lightbox by pressing variant in the product and when the variant is pressed lightbox occour with additional variants to select? A bit hard to explain by words, so I will try to show examples. We have option to make variants with dropdown menu: Is there a known way by pressing Step 1/Step 2/Step 3 have a seperate lightbox pop-up instead of dropdowns and when the lightbox will appear customer will have variants to select by pressing on photo like this:

Hello, I am using same code as per below and everything is perfect for me in alignment and category navigation bar is visible in all categories: /* Show category nav links */ div.nested-category-tree-wrapper { display: flex !important; float: none !important; min-width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } section.products.collection-content-wrapper.products-list { flex-direction: column !important; display: flex; } .nested-category-tree-wrapper>ul { width: 100% !important; display: flex; justify-content: center; align-items: center; } .nested-category-tree-wrapper>ul li { margin-left: 2vw; } nav.nested-category-breadcrumb { display: none !important; } ul.nested-category-children { display: none !important; } li.category-item:first-child a { padding-bottom: 0 !important; } But the question is does it possible to make category navigation bar also visible inside the selected product item? Below is all categories in shop: Below is inside the selected product item: Site: https://www.ugnesstory.com/parduotuve/kaklo-papuosalai Many thanks!