Shopwired平台下Twig动态画廊名称定义技术问询

Great question! Your core idea of dynamically generating the gallery setting name from the page title is solid, but we need to add robustness, handle edge cases, and ensure the setup works end-to-end in Shopwired. Here's the complete step-by-step implementation:

1. Prepare Theme Settings for Dynamic Galleries #

First, you need to create corresponding gallery fields in your Shopwired theme settings that match the naming pattern you're using (gallery_ + lowercase, cleaned page title):

• Go to your Shopwired admin → Design → Theme Editor → Edit Theme Settings
• Add a new "Gallery" field for each page where you want a unique dynamic gallery. For example:
  • If your page title is "Home Page", name the field gallery_home_page
  • If your page title is "Product Showcase", name it gallery_product_showcase
• Make sure the field machine names follow a consistent format: lowercase, spaces replaced with underscores, no special characters (Shopwired doesn't allow symbols in setting field names).

2. Refine the Twig Variable with Cleanup Logic #

Your initial code uses title|lower, but page titles often have spaces or special characters that won't match the setting field names. We need to clean the title to align with our setting naming rules:

{# Render carousel #}
{# Clean the page title to match theme setting field naming rules #}
{% set cleaned_title = title|lower|replace({' ': '_'})|regex_replace('/[^a-z0-9_]/', '') %}
{% set gallery_name = 'global.theme.settings.gallery_' ~ cleaned_title %}

• |lower: Converts the title to lowercase
• |replace({' ': '_'}): Replaces spaces with underscores to match our setting field names
• |regex_replace('/[^a-z0-9_]/', ''): Removes any special characters (like commas, exclamation marks) that aren't allowed in Shopwired setting names

3. Add Fallback Logic for Missing Galleries #

To prevent broken content if a page doesn't have a corresponding gallery set up, add a fallback to your default gallery (like your original gallery_location):

{# Check if the dynamic gallery exists; if not, use the default #}
{% if attribute(global.theme.settings, 'gallery_' ~ cleaned_title) is defined %}
  {% set gallery_name = 'global.theme.settings.gallery_' ~ cleaned_title %}
{% else %}
  {% set gallery_name = 'global.theme.settings.gallery_location' %}
{% endif %}

Alternatively, use the default filter for a more concise version:

{% set dynamic_gallery = attribute(global.theme.settings, 'gallery_' ~ cleaned_title) %}
{% set gallery_name = dynamic_gallery is defined ? 'global.theme.settings.gallery_' ~ cleaned_title : 'global.theme.settings.gallery_location' %}

4. Full Rendered Gallery Code Example #

Putting it all together with the actual gallery rendering (assuming your existing gallery logic uses the gallery variable):

{# Dynamic Gallery Setup #}
{% set cleaned_title = title|lower|replace({' ': '_'})|regex_replace('/[^a-z0-9_]/', '') %}
{% set dynamic_gallery_key = 'gallery_' ~ cleaned_title %}

{# Fallback to default gallery if dynamic one doesn't exist #}
{% if attribute(global.theme.settings, dynamic_gallery_key) is defined %}
  {% set gallery = attribute(global.theme.settings, dynamic_gallery_key) %}
{% else %}
  {% set gallery = global.theme.settings.gallery_location %}
{% endif %}

{# Render the carousel using the selected gallery #}
{% if gallery %}
  <div class="carousel">
    {% for image in gallery %}
      <img src="{{ image.url }}" alt="{{ image.alt_text|default('Gallery image') }}" />
    {% endfor %}
  </div>
{% else %}
  {# Optional: Show a placeholder if no gallery exists at all #}
  <div class="carousel-placeholder">
    <p>No gallery images available</p>
  </div>
{% endif %}

5. Testing & Validation #

• Test with pages that have matching gallery settings: Verify the correct images load
• Test with pages without a matching gallery: Ensure the default gallery loads instead of breaking
• Test with page titles containing special characters (e.g., "About Us!"): Confirm the cleaned title converts to about_us and matches the corresponding setting field

内容的提问来源于stack exchange，提问作者Stuart