Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

jpeter

Member
  • Content Count

    58
  • Joined

  • Last visited

2 Followers

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. @Carrian You'll want to add another product variant. Here's an article describing how to do that https://support.squarespace.com/hc/en-us/articles/206540687-Adding-basic-product-variants
  2. @rodri333 You can get away with this using JS, here's the code: (function () { if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { var elements = document.querySelectorAll('.event-time-12hr'); if(elements) { elements.forEach(function (el) { var time = el.textContent; el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1'); }); } } })(); Be sure to add the JS code between <script> tag, e.g. <script> // Add JS code here </script> Here's a video of me running the script using Chrome's dev console: Nx2trLElSa.mp4
  3. @veganedge It appears to be working fine. Perhaps you just needed to give the DNS settings time to update. See video below: Nn92lGvCas.mp4
  4. @Ptphotography You can add the following JavaScript and CSS below. Feel free to update the TEXT variable in the JavaScript code to whatever you want: JavaScript (function(document){ // Customize TEXT variable. var TEXT = 'Cart'; /******************************************************************** * DO NOT MODIFY CODE BELOW, unless you know what you're doing. *******************************************************************/ if(document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ var cartInner = document.querySelector('.Cart-inner'); if(cartInner) { var qty = document.querySelector('.icon-cart-quantity'); var div = document.createElement('div'); div.setAttribute('class', 'Cart-inner-content'); div.innerHTML = TEXT; cartInner.insertBefore(div, qty); } } })(document); CSS .Cart-inner { display: flex; align-items: center; } .Cart-inner-content { text-transform: uppercase; } .icon-cart-quantity, .sqs-cart-quantity { position: static; padding: initial; font-size: 0.8rem; } .icon-cart-quantity { margin-left: 5px; position: static !important; } .sqs-cart-quantity:after { content: ')'; } .sqs-cart-quantity:before { content: '('; } .header .header-actions-action--cart a.icon { width: auto; height: auto; padding: .8rem; background-color: #eee; } .header .header-actions-action--cart svg.icon--cart { width: 25px; height: 20px; padding: 0 5px 0 0; } .header-display { /* flex-wrap: wrap; */ } .header-actions--right { /* width: 100%; */ } @media (min-width: 1180px) { .header-actions-action--cart a.icon { position: absolute; bottom: -2rem; right: 1rem; } } Be sure to add the JavaScript between <script> tags and the CSS between <style> tags, example: <style> /* Add CSS Code here */ </style> <script> // Add JS code here </script> I would use Site-wide code injection, see article https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript
  5. @Falconer You can add the JS below. This will treat the text as a clickable. JavaScript (function(document){ if(document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ addClosestPolyfill(); delegate(document, 'click', '.gallery-caption-grid-masonry', function(evt){ var item = evt.target.closest('.gallery-masonry-item.has-clickthrough'); if(item) { item.querySelector('a').click(); } }); } function delegate (target, eventName, selector, handler) { target.addEventListener(eventName, function (event) { if (matches(event)) { handler(event); } }); function matches(event) { const element = event.target.closest(selector); return element !== null; }; } function addClosestPolyfill(){ if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; } if (!Element.prototype.closest) { Element.prototype.closest = function(s) { var el = this; do { if (Element.prototype.matches.call(el, s)) return el; el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1); return null; }; } } })(document); Be sure to add the code to <script> tags, example: <script> // add js code here </script>
  6. @Falconer You can try adding the CSS below to the page .gallery-caption-grid-masonry { opacity: 0; z-index: -1; transition: all .2s; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; color: #fff; height: 100%; padding: 0; } .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before { background-color: rgba(0, 0, 0, 0.4); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .5s; } .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; height: auto; } .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; } .gallery-masonry-item:hover .gallery-caption-grid-masonry:before { opacity: 1; transition: all .5s; } .gallery-caption-grid-masonry .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; font-size: 1.3rem; } This will add the following effect: z8f5SMZ9Is.mp4
  7. @sheilabuchanan Update the .page-section:nth-child(7) .content-wrapper CSS selector to .page-section:nth-child(7) > .content-wrapper The difference is adding the direct child combinator ">" so we target just the child of the section instead of its grand children.
  8. @Arch yeah you'll need to paste the code into each products Additional Information tab, not via Code Injection in the header or footer, and change the variables accordingly.
  9. @Arch Not sure what you mean by "it will appear the same on all the products", so you should only need to fill in TITLE_SUBTEXT_HTML for the products that have 1 variant because it looks like Squarespace doesn't add a select field in those instances. Otherwise, it'll use the value from the Color select field if there is one.
  10. @Arch Updated the code above to hide the Color option and include the TITLE_SUBTEXT_HTML variable as an empty string value which can be filled in for products that only have 1 variant.
  11. @Arch If you want to add the color to the checkout, you should do the following: 1. Create a new variant called Color and give all the options the same color, see screenshot: 2. Use the follow JS code below. This will: automatically choose the color option as the value for the user hide the new select list created by new variant option dynamically add the color below the title (no need to add update the color in the JS code as before) for products with only 1 variant, fill in the empty string value of the TITLE_SUBTEXT_HTML variable Doing it this way should show the color on at the checkout. (function(document){ // Edit HTML between the quotes. var BUTTON_PRETEXT_HTML = '<p><a href="#">View size guide</a></p>'; // Fill in the empty string below with HTML for items that only have one variant. // e.g. var TITLE_SUBTEXT_HTML = '<p>White</p>'; var TITLE_SUBTEXT_HTML = ''; /**************************************************************** * DO NOT MODIFY CODE BELOW, unless you know what you're doing. ****************************************************************/ // Execute code based on if it's in the header or footer if(document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ addClosestPolyfill(); var buttonContainer = document.querySelector('.sqs-add-to-cart-button-wrapper'); var productTitle = document.querySelector('.ProductItem-details-title'); var colorSelectField = document.querySelector('[data-variant-option-name="Color"]'); var div, color; if((TITLE_SUBTEXT_HTML || colorSelectField) && productTitle) { if(colorSelectField){ // Auto select the color as the default value for the Color field color = colorSelectField.options[1].value; colorSelectField.value = color; triggerChange(colorSelectField); // Hide the Color field from the user. colorSelectField.closest('.variant-option').style.display = 'none'; } // Create div to add our HTML to and add it after the title div = document.createElement('div'); div.setAttribute('class', 'ProductItem-details-title-subtext'); div.innerHTML = TITLE_SUBTEXT_HTML || '<p>' + color + '</p>'; productTitle.parentNode.insertBefore(div, productTitle.nextElementSibling); } if(buttonContainer) { div = document.createElement('div'); div.setAttribute('class', 'sqs-add-to-cart-button-pretext'); div.innerHTML = BUTTON_PRETEXT_HTML; buttonContainer.insertBefore(div, buttonContainer.firstChild); } } function triggerChange(el) { if (typeof(Event) === 'function') { // modern browsers el.dispatchEvent(new Event('change')); } else { // for IE and other old browsers // causes deprecation warning on modern browsers var evt = window.document.createEvent('UIEvents'); evt.initUIEvent('change', true, false, window, 0); el.dispatchEvent(evt); } } function addClosestPolyfill(){ if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; } if (!Element.prototype.closest) { Element.prototype.closest = function(s) { var el = this; do { if (Element.prototype.matches.call(el, s)) return el; el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1); return null; }; } } })(document);
  12. @Arch Instead of placing the JS code in the footer, you should be able to update each product by adding the JS code as a code block under the Additional Info tab for each product, see video example: QHyQ9XfVlx.mp4
  13. @chichi I would use code injection and place it in the footer, see article https://support.squarespace.com/hc/en-us/articles/205815908
  14. @laurenjaynehughes You can add the following CSS to overwrite the left and right padding: CSS: /* Target the section that contains instagram strip */ [data-section-id="5ee267268d3c4e3e60b9302b"] > .content-wrapper { padding-right: 0 !important; padding-left: 0 !important; }
  15. @Hamps Yes, they should work.
×
×
  • Create New...