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
Link to comment

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.

Link to comment

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

Link to comment
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
Link to comment
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.

Link to comment
Quote

the code hasn't had any effect on this page.

Two issues. You've lost a top part of my code. The code starts with <script>. You've added a CSS ruleset to hide your calculator code block. Remove it.

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.

Link to comment

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.

Link to comment

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.

Link to comment

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?

Link to comment
  • Solution
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.

Link to comment

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.