Add text block for navigation at the bottom of store pages

Site URL: https://www.fabmo.org/fabric-1

Is there a way to add a block below the product list (but above the footer) on a store page? We want to repeat the navigation in the store "intro block" below the product listings, so visitors remember our products are spread across more than 1 page (because of the Squarespace 7.0 200 product limit).

On 5/12/2021 at 9:20 PM, lwist said:

Site URL: https://www.fabmo.org/fabric-1

Is there a way to add a block below the product list (but above the footer) on a store page? We want to repeat the navigation in the store "intro block" below the product listings, so visitors remember our products are spread across more than 1 page (because of the Squarespace 7.0 200 product limit).

Add to Design > Custom CSS

/* Store page - add text */
.ProductList-grid:after {
    content: "More products..";
    display: block;
    text-align: center;
    color: black;
    visibility: visible;
    opacity: 1;
    font-size: 28px;
    margin-bottom: 20px;
}

Thanks! How do I include the URLs for each of the navigation links we want to repeat?

19 hours ago, lwist said:

Thanks! How do I include the URLs for each of the navigation links we want to repeat?

You mean

add both text + link?

Yes. I want to add a list of text links to navigate to the other store pages.

15 hours ago, lwist said:

Yes. I want to add a list of text links to navigate to the other store pages.

Okay. It will be?

More products..

Link 1 - Link 2 - Link 3 - Link 4 - Link 5...

Is this right?

Yes, exactly.

Since I assume the link block would have to appear on every Store page (instead of only on products spanning more than one page, like Fabric), we would need to repeat all the navigation links at the bottom. So the source code would look like this (with the class for the current page set to 'class="Header-nav-folder-item Header-nav-folder-item--active"' so it's not linked):

 <a href="/fabric-1" class="Header-nav-folder-item" data-test="template-nav">Fabric 1</a>
 <a href="/fabric-2" class="Header-nav-folder-item" data-test="template-nav">Fabric 2</a>
 <a href="/fabric-3" class="Header-nav-folder-item" data-test="template-nav">Fabric 3</a>
 <a href="/fabric-4" class="Header-nav-folder-item" data-test="template-nav">Fabric 4</a>           
 <a href="/notions" class="Header-nav-folder-item" data-test="template-nav">Notions</a>
<a href="/paper" class="Header-nav-folder-item" data-test="template-nav">Paper</a>
<a href="/tile" class="Header-nav-folder-item" data-test="template-nav">Tile</a>
<a href="/books" class="Header-nav-folder-item" data-test="template-nav">Books</a>
<a href="/yarn" class="Header-nav-folder-item" data-test="template-nav">Yarn</a>
<a href="/miscellaneous" class="Header-nav-folder-item" data-test="template-nav">Miscellaneous</a>
<a href="/gift-cards" class="Header-nav-folder-item" data-test="template-nav">Gift Cards</a>

On 5/20/2021 at 3:36 AM, lwist said:

Yes, exactly.

Since I assume the link block would have to appear on every Store page (instead of only on products spanning more than one page, like Fabric), we would need to repeat all the navigation links at the bottom. So the source code would look like this (with the class for the current page set to 'class="Header-nav-folder-item Header-nav-folder-item--active"' so it's not linked):

 <a href="/fabric-1" class="Header-nav-folder-item" data-test="template-nav">Fabric 1</a>
 <a href="/fabric-2" class="Header-nav-folder-item" data-test="template-nav">Fabric 2</a>
 <a href="/fabric-3" class="Header-nav-folder-item" data-test="template-nav">Fabric 3</a>
 <a href="/fabric-4" class="Header-nav-folder-item" data-test="template-nav">Fabric 4</a>           
 <a href="/notions" class="Header-nav-folder-item" data-test="template-nav">Notions</a>
<a href="/paper" class="Header-nav-folder-item" data-test="template-nav">Paper</a>
<a href="/tile" class="Header-nav-folder-item" data-test="template-nav">Tile</a>
<a href="/books" class="Header-nav-folder-item" data-test="template-nav">Books</a>
<a href="/yarn" class="Header-nav-folder-item" data-test="template-nav">Yarn</a>
<a href="/miscellaneous" class="Header-nav-folder-item" data-test="template-nav">Miscellaneous</a>
<a href="/gift-cards" class="Header-nav-folder-item" data-test="template-nav">Gift Cards</a>

If we could limit the link block to only the Fabric 1, Fabric 2, Fabric 3, and Fabric 4 page, then it would be fine to only list those links at the bottom.

 

Thanks so much for your help!

Lisa

 

You can add this Code Block to Footer, then we will use code to move it to bottom of store pages.

If you just want to copy the Intro to the bottom of the page I suggest this alternative.

Please see Move or Copy Store Intro After Products List.

Set copyIntro as follows.

        copyIntro : true /* value is false or true. true means copy the intro
                            instead of moving it */
        

Let us know how it goes.

Thanks so much for helping with this! I added your code to the Page Header Code Injection for the fabric-4 store page (which uses the Moksha template), but I don't see the links from the Intro repeated after the product list.  Can you tell what's wrong? We're running on Squarespace 7.0.

You need to move the following code from Settings > Advanced > Code Injection > FOOTER to Settings > Advanced > Code Injection > HEADER. This will allow jQuery to load before my code needs it.

<script async="" defer="" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

Let us know how it goes.

We don't currently include a jquery script in our Footer code injection. I can put one or both of the scripts you included into the Header code injection on my test page. Do I need both the one in your reply:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

and the one cited in your code block:

<script async="" defer="" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

 Or were you assuming one of those scripts was already being injected into our footer and I would only need to move that one?

Ah. Interesting. We have a small mystery! 🙂 jQuery is installed on your site somewhere. I can access it in the console on your site.

I assumed it was in Code Injection > FOOTER. My bad.

Check in Settings > Advanced > Code Injection > HEADER. Is it there?

I can see it listed in the head tag of the document.

Let us know what you find.

Thanks for helping investigate this. The cloudflare jquery reference isn't in the HEADER code injection either. Maybe it's being pulled from our /scripts folder.

I can try to verify that. But since the jquery code is already listed within our head tag, shouldn't your code "copy store intro after products list" code be able to use it? Could there be another reason why it's not duplicating the intro after the products list?

Thanks again for your help on this! 

jQuery is being loaded after my code for sure.

I think I'm on the trail of where the jQuery is coming from. Hold up on any more investigations at this point.

Do you have Google recaptcha enabled for any form or newsletter blocks on your site?

We have Constant Contact Active Forms injected into our site Footer, and Squarewebsites Uploader injected into our site Header. I'm guessing one of those is pulling in jQuery.

I injected your code into the Header of the specific page I'm testing it on (not into the site Header) so I can see how it works before potentially rolling it out site wide. Would it be safe to inject the same jQuery code into the test page Header before your code even though it will be repeated later? I don't mind having my test page take a speed hit while validating this works before rolling it out. Does that make sense?  

Quote

I injected your code into the Header of the specific page

That is what my instructions recommend. If you need a site wide effect then the code may need to be rewritten.

Quote

Would it be safe to inject the same jQuery code into the test page Header before your code

For testing sure. Generally though you want to try to avoid having multiple versions of jQuery installed.

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

Let us know what you find and if you post the url for your test page we can take a look to see how it works.