Conditional sections in theme.js

[bomanimc]

Summary

For our site, we need to have a different footer design on the home page than the one we use on all of the other pages. There are two separate footer liquid snippets: transparent-footer.liquid (home page) and footer.liquid (all other pages).

To swap out these footers, I've added the following snippet of code in our theme.liquid:

{% if template == 'index' %}
      {% section 'transparent-footer' %}
{% else %}
      {% section 'footer' %}
{% endif %}

I noticed that when I first load the home page, I get the correct footer (transparent-footer.liquid). When I go to another page, I get the correct footer (footer.liquid). But when I return to the home page from one of the other pages, the incorrect footer (footer.liquid) displays. What should I do to correct this? This may be on the Shopify side, but I'm curious to know if there's anything about Slater that might be influencing something like this

So far, I've tried a variety of different variations on the if condition such as: {% if request.page_type == 'index' %} and {% if template.name contains 'index' %}

Exact Repro Steps

1. Go to https://dial-up-digital-development.myshopify.com/
2. In the URL bar for your browser, type https://dial-up-digital-development.myshopify.com/collections/all
3. Click the text in the middle of the header bar that says "HARTFORD" to back to the home page. At this point, you should see the issue.

Any support here would be greatly appreciated!

[diboune]

You can just create an new Layout page (just copy the main one into a new one) and replace the footer in this layout. Then u can use it in any template u want.

This way you don't have to use the logic at all

[bomanimc]

Thanks @aminediboune! I appreciate your quick response, but I don't yet fully understand how to execute the changes since I'm new to Shopify. My understanding of the changes would be:

1. Copy the current contents of theme.liquid into a new file. Possibly we could have home-theme.liquid and base-theme.liquid.
2. At this point, I'm not sure how I would associate different pages with these different layouts. What would be the next step here?

[diboune]

1. By default every "Template" will use the theme.liquid Layout ( So you need to keep a file named theme.liquid )

2. When you create a new Layout file ex. base-theme.liquid you can call it by going to the Template file you want and simply write in the first line {% layout 'base-theme.liquid' %}

Hope this explains it better

[bomanimc]

Thanks @aminediboune! That definitely helped to clarify! I tried this out, and unfortunately it didn't work for me. I still experienced the same behavior after trying to create a home-theme.liquid file and add the layout to the index.liquid (which may have been the wrong approach, but I felt that creating a specialized theme for the index page would be a bit cleaner than creating and adding a new layout to every other page).

What ended up working for me was changing a param on the operator routing, which I believe confuses Shopify's ability to correctly pass the template parameter into the code. I added the following snippet.

Here's what my new router definition in router.js looks like:

const router = operator('#root', [
  /**
   * creates a page transition
   * @see https://github.com/estrattonbailey/operator#transition-animation
   */
  {
    'path': '/',
    ignore: true,
  },
  () => new Promise(res => {
    document.body.classList.add('is-transitioning')
    setTimeout(res, 200)
    setTimeout(() => document.body.classList.remove('is-transitioning'), 300)
  })
])

Specifically, the ignore: true here helps things out. It looks like this will mess up the page transition to the home page, but I'm okay with that since our home page has a video background that doesn't necessarily look smooth loading in anyways.

Closing for now, but if anyone has additional context to add I'd be curious to hear!

[bomanimc]

Actually, I realize it's probably better to leave this open in case someone has a fix that would avoid having to use this hack-y approach.

[diboune]

My bad, I forgot to say that you need to set {% layout none %} in the first line of the new layout.

Even Layouts use the main layout.

[bomanimc]

Unfortunately, when I attempt this, it seems like theme.liquid is still overriding the custom layout files even with the addition of {% layout none %}. My steps were:

• Add {% layout none %} to home-theme.liquid.
• Add {% layout 'home-theme.liquid %} to index.liquid.
• Make a signaling change to theme.liquid to see if it's still affecting the index page.
• Notice that the change to theme.liquid is still showing up on the home (index) page.