markjwarman
Circle Member-
Posts
8 -
Joined
-
Last visited
markjwarman's Achievements
-
Hey @tuanphan, I've attached a video - you'll see that everything looks great but when I expand the accordion, the content goes off screen. I've found two solutions that almost work. This is one: JS $(function() { var $window = $(window); var lastScrollTop = $window.scrollTop(); var wasScrollingDown = true; var $sidebar = $(".pdp-form-wrapper.hidden-sm-down"); if ($sidebar.length > 0) { var initialSidebarTop = $sidebar.position().top; $window.scroll(function(event) { var windowHeight = $window.height(); var sidebarHeight = $sidebar.outerHeight(); var scrollTop = $window.scrollTop(); var scrollBottom = scrollTop + windowHeight; var sidebarTop = $sidebar.position().top; var sidebarBottom = sidebarTop + sidebarHeight; var heightDelta = Math.abs(windowHeight - sidebarHeight); var scrollDelta = lastScrollTop - scrollTop; var isScrollingDown = (scrollTop > lastScrollTop); var isWindowLarger = (windowHeight > sidebarHeight); if ((isWindowLarger && scrollTop > initialSidebarTop) || (!isWindowLarger && scrollTop > initialSidebarTop + heightDelta)) { $sidebar.addClass('fixed'); } else if (!isScrollingDown && scrollTop <= initialSidebarTop) { $sidebar.removeClass('fixed'); } var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown); var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown); if (dragBottomDown) { if (isWindowLarger) { $sidebar.css('top', 0); } else { $sidebar.css('top', -heightDelta); } } else if (dragTopUp) { $sidebar.css('top', 0); } else if ($sidebar.hasClass('fixed')) { var currentTop = parseInt($sidebar.css('top'), 10); var minTop = -heightDelta; var scrolledTop = currentTop + scrollDelta; var isPageAtBottom = (scrollTop + windowHeight >= $(document).height()); var newTop = (isPageAtBottom) ? minTop : scrolledTop; $sidebar.css('top', newTop); } lastScrollTop = scrollTop; wasScrollingDown = isScrollingDown; }); } }); CSS .pdp-form-wrapper.hidden-sm-down { position: fixed; } But that makes the sidebar jump up or down the screen suddenly when scrolling. And the other is this but as you scroll further on the page the sidebar moves different amounts and when you scroll back up to the top of the page, the sidebar ends up in the wrong place vertically. So sorry - really hard to explain and the upload limits for attachments won't let me share more videos. JS $(function () { var element = $('.pdp-form-wrapper.hidden-sm-down'); var originalY = element.offset().top; var lastOffset = $(document).scrollTop(); var diffToBottom = element.height() - $(window).height(); $(window).on('scroll', function (event) { var scrollTop = $(window).scrollTop(); var currentOffset = $(document).scrollTop(); var isScrollingDown = currentOffset > lastOffset; if (scrollTop > (diffToBottom + element.height())) { if (!element.hasClass('relative')) { element.css('top', scrollTop - (originalY + diffToBottom) + 'px'); element.addClass('relative'); } if (isScrollingDown) { var newTop = scrollTop < lastOffset ? 0 : scrollTop - (originalY + diffToBottom); } else if (scrollTop < element.offset().top) { var newTop = scrollTop - (originalY); } element.stop(false, false).animate({ top: newTop }, 300); } else { if (scrollTop < originalY) { element.removeClass('relative'); } element.stop(false, false).animate({ top: scrollTop - (originalY) }, 300); } lastOffset = currentOffset; }); }); CSS .relative { position: relative; } Thanks, Mark fixed-menu.mov
- 6 replies
-
- product
- product-page
-
(and 2 more)
Tagged with:
-
product-page 2 column stacked images on product page
markjwarman replied to danielbalazs's topic in Fonts, colors and images
Hey @tuanphan Yes - that's what I'd like the page to look like. Thanks, Mark -
markjwarman started following 2 column stacked images on product page
-
product-page 2 column stacked images on product page
markjwarman replied to danielbalazs's topic in Fonts, colors and images
Hi @tuanphan - was there a solution to this? I tried to hack my way around this by only uploading 1 image into the main product details section and then adding a gallery into the additional info block but that caused an issue on mobile as the product page uses the images from the main product details section to create a carousel. It also causes an issue with the sticky sidebar on desktop as it gets covered up as the gallery scrolls into view. https://tarpon-glockenspiel-p4x5.squarespace.com/shop/p/lawrence-jacket-zczh9 password: barnfield Thanks! Mark -
As always - your work is fantastic and super fast @tuanphan, thank you! Because I have an accordion block within the sidebar, when the viewport is vertically limited, information can get cut off when it's expanded. If you open up the tab for 'Payment' I've added in some dummy text to show you what I mean. Essentially, I need the sticky sidebar to allow for scrolling when the content is longer than the screen. I've found 2 potential solutions but can't wrap my head around applying it within Squarespace. Could you please take a look for me? https://css-tricks.com/a-dynamically-sized-sticky-sidebar-with-html-and-css/ http://jsfiddle.net/poi33/ffymzm5e/ Many thanks! Mark
- 6 replies
-
- product
- product-page
-
(and 2 more)
Tagged with:
-
Hi @tuanphan, I've gone through each of the forum posts I can find on this subject but no luck. I'm guessing there must be a parent element that's interfering somewhere but I can't track it down. I'm trying to get all of the product details to be sticky so that a customer still has access to all the info they need while scrolling through all the images. If you could take a look, I'd really appreciate it! https://tarpon-glockenspiel-p4x5.squarespace.com/shop/p/lawrence-jacket-zczh9 password: barnfield Thanks! Mark
- 6 replies
-
- product
- product-page
-
(and 2 more)
Tagged with:
-
Hi @codeandtonic Thanks for the above - I've given it a shot and although the script does redirect to the contact page, it looks like the default action of attempting to add the product to the cart still gets triggered. Any chance you could take a look for me? https://tarpon-glockenspiel-p4x5.squarespace.com/shop/p/lawrence-jacket-zczh9 password: barnfield Thanks! Mark
-
paul2009 reacted to a post in a topic: Limit quantities at the product level not the variant level
-
Limit quantities at the product level not the variant level
markjwarman replied to markjwarman's topic in Commerce
Thanks for the speedy reply Paul. I'd seen you mention Trunk on another post and had a quick look. I couldn't immediately see that it would be the answer for this specific situation but I'll sign up to a trial now and give it a shot. If all works out, I'll update this post. Thanks again! Mark -
Hi all, I'll soon be opening up preorders for my first jacket. The overall quantity will be limited to 300 units but this could be spread out across any number of either Small, Medium, Large, XL or XXL. I won't know until I open up preorders to the public. In an ideal world, I would set 300 as an overall quantity and as the orders get placed in each size, Squarespace would remove them from this number. As far as I can tell, I can only limit the inventory at the variant level. I need the variant inventory to be flexible but the overall inventory for the product to be fixed. Does that make sense? I have a feeling this won't be possible in Squarespace but I'm struggling to figure out the right search terms to see if it's possible on any other platform. Many thanks! Mark