NicoleN Posted February 9 Share Posted February 9 (edited) As a style blogger, I love the idea of quick shoppable links, so I want to find a way to insert code after my blog post excerpts, OR ideally, be able to just paste my code (it's a javascript code) directly into the excerpt itself in order to display a "shop the post" widget carousel of affiliate products from my LTK. (I pasted the code into one of my blog post excerpts here for reference: https://www.neutrallynicole.com/blog-ltk — obviously it shows up as text but I would like it to show the actual widget) I've attached screenshots of what I have now vs. what I would like to to look like using custom code. My site is currently on 7.0 but I will be switching to 7.1 within the next month. I see a lot of bloggers on WP that have this sort of plugin and I can't find a way to replicate it for Squarespace so I would love to find someone who is capable of creating this sort of function for me (I will pay you of course!). Thanks so much in advance! 🙂 Edited February 9 by NicoleN Link to comment
tuanphan Posted February 11 Share Posted February 11 Can you paste widget code here + share link to your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
NicoleN Posted February 15 Author Share Posted February 15 On 2/11/2024 at 7:16 AM, tuanphan said: Can you paste widget code here + share link to your site? Sure! This is the link to my site: https://www.neutrallynicole.com. I was testing the idea on a separate non-linked blog here: https://www.neutrallynicole.com/blog-ltk Here is the widget code: <div class="shopthepost-widget" data-widget-id="5042831"><script type="text/javascript">!function(w,i,d,g,e,t){d.getElementById(i)||(element=d.createElement(t),element.id=i,element.src="https://widgets.rewardstyle.com"+e,d.body.appendChild(element)),w.hasOwnProperty(g)===!0&&"complete"===d.readyState&&w[g].init()}(window,"shopthepost-script",document,"__stp","/js/shopthepost.js","script")</script><div class="rs-adblock"><img src="https://assets.rewardstyle.com/production/35d334331b834e6e41e4f03813372a832b67c146/images/search/350.gif" onerror='this.parentNode.innerHTML="Disable your ad blocking software to view this content."' style="width: 15px; height: 15px"><noscript>JavaScript is currently disabled in this browser. Reactivate it to view this content.</noscript></div></div> Link to comment
tuanphan Posted February 17 Share Posted February 17 Something like this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
NicoleN Posted February 22 Author Share Posted February 22 On 2/17/2024 at 6:06 AM, tuanphan said: Something like this? Oh wow that's so awesome! You're a genius! Would it be possible to make the carousel a little smaller so it shows 3-4 items like in my attached screenshot? Link to comment
tuanphan Posted February 24 Share Posted February 24 First, to make it works, you can use this code to bottom of Code Injection > Footer <script> $(document).ready(function(){ $(".summary-excerpt.summary-excerpt-only p").each(function(){ $(this).html($(this).text()); }); }); </script> To make it show more images, try this code to Custom CSS box /* Slide image in excerpt */ .stp-product { width: 80px !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
NicoleN Posted February 28 Author Share Posted February 28 On 2/23/2024 at 11:33 PM, tuanphan said: First, to make it works, you can use this code to bottom of Code Injection > Footer <script> $(document).ready(function(){ $(".summary-excerpt.summary-excerpt-only p").each(function(){ $(this).html($(this).text()); }); }); </script> To make it show more images, try this code to Custom CSS box /* Slide image in excerpt */ .stp-product { width: 80px !important; } The code worked for 7.0, but is there a way to make this work for 7.1? I'm going to switch my site to 7.1 next month and didn't realize that the code wouldn't work for the new version. Here's the link to a new 7.1 demo site where I tried to test it: https://primrose-raccoon-9ycp.squarespace.com/?password=demo Apologies! Link to comment
Solution tuanphan Posted March 2 Solution Share Posted March 2 Add this line to top of Code Injection Footer code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
NicoleN Posted March 8 Author Share Posted March 8 On 3/2/2024 at 12:09 AM, tuanphan said: Add this line to top of Code Injection Footer code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> Perfect! Thanks again Tuan! You're the best! 🙂 Link to comment
bewell Posted October 7 Share Posted October 7 I am lookng for this solution too! heres the blog page: https://www.villagewellness.net/holistic-integrative-medicine-main-line-philly I want to add the code to the excerpt of the first page for acupuncture instead of the "book now" link - any suggestion would be amazing! thanks! heres the code: <a href="https://app.acuityscheduling.com/schedule.php?owner=13550625&appointmentType=category:Acupuncture" target="_blank" class="acuity-embed-button" style="background: #b668bd; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block;">Schedule Appointment</a> <link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/13550625.css" id="acuity-button-styles" /> <script src="https://embed.acuityscheduling.com/embed/button/13550625.js" async></script> Link to comment
tuanphan Posted October 7 Share Posted October 7 1 hour ago, bewell said: I am lookng for this solution too! heres the blog page: https://www.villagewellness.net/holistic-integrative-medicine-main-line-philly I want to add the code to the excerpt of the first page for acupuncture instead of the "book now" link - any suggestion would be amazing! thanks! heres the code: <a href="https://app.acuityscheduling.com/schedule.php?owner=13550625&appointmentType=category:Acupuncture" target="_blank" class="acuity-embed-button" style="background: #b668bd; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block;">Schedule Appointment</a> <link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/13550625.css" id="acuity-button-styles" /> <script src="https://embed.acuityscheduling.com/embed/button/13550625.js" async></script> You mean this item only? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
bewell Posted October 7 Share Posted October 7 yes - well i want to add to every blog - but the code will be slightly different Link to comment
tuanphan Posted October 9 Share Posted October 9 On 10/8/2024 at 12:24 AM, bewell said: yes - well i want to add to every blog - but the code will be slightly different I just tested it on my test site, you try checking to see if it is what you want https://www.loom.com/share/da4cf566542048dd903dfb8bdef21e9a Process Add this code to Blog Page Header Injection <a href="https://app.acuityscheduling.com/schedule.php?owner=13550625&appointmentType=category:Acupuncture" target="_blank" class="acuity-embed-button" style="background: #b668bd; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block;">Schedule Appointment</a> <link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/13550625.css" id="acuity-button-styles" /> <script src="https://embed.acuityscheduling.com/embed/button/13550625.js" async></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function() { $('article.blog-basic-grid--container.entry.blog-item:first-child').on('click', function(event) { event.preventDefault(); // Ngăn chặn hành động mặc định nếu cần $('.acuity-embed-button')[0].click(); // Kích hoạt popup của nút }); }); </script> <style> .acuity-embed-button { z-index: 999999999999999999999; position: fixed; opacity: 0; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
bewell Posted October 9 Share Posted October 9 wow Tuan - close! thank you!! But i want just the "Book Now" to link to the scheduler. any thoughts? Link to comment
tuanphan Posted October 11 Share Posted October 11 On 10/9/2024 at 8:05 PM, bewell said: wow Tuan - close! thank you!! But i want just the "Book Now" to link to the scheduler. any thoughts? Use this new code <a href="https://app.acuityscheduling.com/schedule.php?owner=13550625&appointmentType=category:Acupuncture" target="_blank" class="acuity-embed-button" style="background: #b668bd; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block;">Schedule Appointment</a> <link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/13550625.css" id="acuity-button-styles" /> <script src="https://embed.acuityscheduling.com/embed/button/13550625.js" async></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function() { $('article.blog-basic-grid--container.entry.blog-item:first-child .blog-excerpt').on('click', function(event) { event.preventDefault(); // Ngăn chặn hành động mặc định nếu cần $('.acuity-embed-button')[0].click(); // Kích hoạt popup của nút }); }); </script> <style> .acuity-embed-button { z-index: 999999999999999999999; position: fixed; opacity: 0; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
bewell Posted October 13 Share Posted October 13 got it. thanks so much! now how can i do that for every book now button - so it pops up to a different schedule for that specific service? Link to comment
tuanphan Posted October 15 Share Posted October 15 On 10/13/2024 at 8:27 PM, bewell said: got it. thanks so much! now how can i do that for every book now button - so it pops up to a different schedule for that specific service? Do you have 3 or 4 different schedule code? I can test again easier, I think with 1 code, maybe won't work properly Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment