Jump to content

How to move one of the blocks in additional information to the description section for only one shop product page

Go to solution Solved by creedon,

Recommended Posts

Posted (edited)

Hi Brains trust,

I've been searching the forum and trying different things, however I've not been able to crack this problem. I would like to move one of the two blocks in the additional information section to the description section, and only for one specific product page in my shop. The second block (text or accordion - I'm testing these) in the additional information section can stay where it is.

The block I'd like to move is a code block in which I've inserted a quote calculator. I've already hidden all the items in the description section, except for the title/name which is fine to stay. The result I'm after is just the title/header and under that the quote calculator in the description section. 

The URL is https://www.terratag.com.au/shop/p/test-terra-tag (hidden from the shop page but product page is visible with that link). The page item is #item-6662a29e5791c906af965e6a.

I can move all additional information blocks to the description for all pages, however I can't work out how to target and move just one block on one page. Any help would be greatly appreciated.

Many thanks

Edited by Terratag
Posted

Please see the following.

Set up the example setting provided in the code to the following.

      '#block-yui_3_17_2_1_1717714453497_9184' : {
      
        selectorDestination : '.ProductItem .ProductItem-details',
        
        action : 'append', // value is append, prepend or replace
        
        // selectorParentDestination is optional, use when you want to first
        // find a selector destination but then work up the ancestor hierarchy
        // to manipulate it
        
        selectorParentDestination : '[enter selector parent destination here between single quotes replacing square brackets]',
        
        // selectorCopy when true will make a copy of the source element and use
        // it instead of the actual selectorSource. value is false or true
        
        sourceCopy : false,
        
        },

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted

Hi @creedon thank you for your reply. That solution looks like it's saying to add 3 different codes - one to custom CSS, one to code injection header and one to code injection footer. It looks like it's saying to remove the calculator from my product page, and add it to a section at the bottom of the footer, and hide that section. That looks like it's more related to showing something on multiple pages, which isn't what I'm wanting to do.

I just want to move the code block (quote calculator) from the additional information to the description for that page. That calculator will not show on any other pages. 

I'm wondering if there's a simpler solution. Perhaps by modifying something like the below so that it targets and moves just the first additional information block to the description section, and just applying to that one page?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<script>

  $(document).ready(function() {

                              $('section.ProductItem-additional').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');

               });

</script>

 

Many thanks

Posted (edited)

Hi again, I've had a go at adding the code you kindly provided the link to. I don't know if I'm reading the instructions wrong, however I'm obviously doing something wrong as the code hasn't had any effect on this page. I've not added anything to the footer. If you could let me know where I've gone wrong please that would be awesome. 

Edited by Terratag
Posted
Quote

That solution looks like it's saying to add 3 different codes - one to custom CSS, one to code injection header and one to code injection footer.

The code is generalized to cover a number of situations.

Quote

It looks like it's saying to remove the calculator from my product page, and add it to a section at the bottom of the footer, and hide that section.

It is not. Using the footer is to move common content into a page. In your case you don't need to do that.

The core functionality of the code is to move a source element to a destination, which is exactly what you need to do.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted

Thank you @creedon, I replaced the footer code to include everything, including the <script> at the start, and removed what I thought was the CSS to hide the calculator code block, however I still don't have it right. I've tried a few edits, but they haven't worked. Sorry, this is probably simple, however I just don't know specifically what I should be changing. Would you mind please taking another quick look and listing what code I should add or remove from where. Perhaps message me if it's licenced and should not be posted here. Thank you for your patience.

Posted

You are missing some lines.

Change...

        sourceCopy : false,
           
    // do not change anything below, there be the borg here

...to...

        sourceCopy : false,
        
        },
        
      };
      
    // do not change anything below, there be the borg here

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted

Thanks again @creedon, that has almost got this working perfectly. The product name is appearing under the calculator code block, however I'd like it at the top. Earlier in the CSS I have code to show the ProductItem-details-excerpt in the order 1 position, which doesn't appear to be setting the product name at the top. Any idea how to fix that?

  • Solution
Posted
Quote

The product name is appearing under the calculator code block, however I'd like it at the top.

You could do something like the following.

div#block-yui_3_17_2_1_1717714453497_9184 {

  order : 9;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

  • 2 months later...
Posted
8 hours ago, Jen-X said:

you guys are always so helpful. I'm struggling hard on this one and can't find a solution.

Have you considered using variants? If you have a product that has a Individual Educator price and a School Licence price, this seems like a perfect use for variants.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted
2 minutes ago, Jen-X said:

Well, that would be perfect, except they are downloadable PDFs and Squarespace doesn't do variants for digital products.

Ah yes then that would exclude the ability to use variants. It is unfortunate that SS placed this unseemingly unnecessary restriction on digital products.

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.