Building Multi-Language Storefronts: Snippets, Translations, and Locale Handling in Shopware 6.7

Shopware 6.7 introduces significant enhancements for building multi-language storefronts, making it easier than ever to create localized e-commerce experiences. This blog post explores the technical aspects of snippets, translations, and locale handling that developers need to understand when implementing internationalization in Shopware 6.7.

Understanding Shopware 6.7 Translation Architecture#

Shopware 6.7 has refined its translation system by introducing more granular control over language handling and providing better integration with modern storefront development practices. The platform now offers improved support for dynamic content translation, making it easier to manage complex multi-language storefronts.

The core translation architecture in Shopware 6.7 revolves around three primary components: snippets, translations, and locale management. These components work together to provide a comprehensive internationalization solution that scales from simple bilingual sites to complex multilingual platforms.

Snippet Management and Usage#

Snippets in Shopware 6.7 represent the fundamental building blocks of translation. They are key-value pairs stored in YAML files that can be accessed throughout the application using specific syntax patterns.

Defining Snippets#

Snippets are defined in config/translation/<language_code>.yaml files:

# config/translation/en.yaml
frontend:
  navigation:
    home: "Home"
    products: "Products"
    about: "About Us"
  product:
    price: "Price"
    stock: "In Stock"

Accessing Snippets in Templates#

In Twig templates, snippets are accessed using the trans filter or the sw-translation component:

{# Using trans filter #}
{{ 'frontend.navigation.home'|trans }}

{# Using sw-translation component #}
<sw-translation key="frontend.navigation.home"></sw-translation>

Programmatic Snippet Access#

In PHP services, snippets can be accessed through the snippet service:

use Shopware\Core\Framework\Translation\SnippetService;

class ProductController
{
    public function __construct(private readonly SnippetService $snippetService)
    {
    }
    
    public function getProductPage(): Response
    {
        $snippet = $this->snippetService->get('frontend.product.price', 'en');
        return new Response($snippet);
    }
}

Advanced Translation Handling#

Shopware 6.7 introduces enhanced translation handling through the Translation entity and improved database integration. The platform now supports more sophisticated translation workflows, including:

Translation Fallback Mechanisms#

The system implements intelligent fallback logic that automatically falls back to default language content when specific translations are missing:

// In translation service
public function getTranslation(string $key, string $languageId): ?string
{
    $translation = $this->translationRepository->search(
        new Criteria([new EqualsFilter('key', $key)]),
        Context::createDefaultContext()
    );
    
    if ($translation->getTotal() > 0) {
        return $translation->first()->getValue();
    }
    
    // Fallback to default language
    return $this->getDefaultTranslation($key);
}

Dynamic Translation Loading#

The new translation loading mechanism supports dynamic loading of translations based on user preferences and context:

// Frontend JavaScript implementation
class TranslationService {
    constructor() {
        this.currentLocale = this.getBrowserLocale();
        this.translations = {};
    }
    
    async loadTranslations(locale) {
        const response = await fetch(`/api/translations/${locale}`);
        this.translations[locale] = await response.json();
    }
}

Locale Handling and Management#

Shopware 6.7 provides robust locale handling capabilities that enable developers to manage complex internationalization requirements effectively.

Locale Configuration#

The locale configuration is managed through the config/packages/shopware.yaml file:

# config/packages/shopware.yaml
shopware:
    locale:
        default: 'en-GB'
        available:
            - 'en-GB'
            - 'de-DE'
            - 'fr-FR'
        fallback: 'en-GB'

Locale Detection and Switching#

The platform automatically detects user locales based on browser settings and provides mechanisms for manual locale switching:

// Locale detection service
class LocaleDetectionService
{
    public function detectLocale(Request $request): string
    {
        $locale = $request->query->get('locale');
        if ($locale && $this->isValidLocale($locale)) {
            return $locale;
        }
        
        $acceptLanguage = $request->headers->get('Accept-Language');
        return $this->parseAcceptLanguage($acceptLanguage);
    }
}

Currency and Region Support#

Shopware 6.7 enhanced currency handling to properly support different regional requirements:

// Currency conversion service
class CurrencyService
{
    public function convertPrice(float $amount, string $fromCurrency, string $toCurrency): float
    {
        $exchangeRate = $this->getExchangeRate($fromCurrency, $toCurrency);
        return $amount * $exchangeRate;
    }
    
    public function formatPrice(float $price, string $currency, string $locale): string
    {
        $formatter = new NumberFormatter($locale, NumberFormatter::CURRENCY);
        return $formatter->formatCurrency($price, $currency);
    }
}

Technical Implementation Patterns#

Component-Based Translation#

Shopware 6.7 encourages component-based translation approaches that improve maintainability:

// Vue.js component with translation support
export default {
    name: 'ProductCard',
    props: ['product'],
    computed: {
        productTitle() {
            return this.$tc('frontend.product.title', 1, { 
                name: this.product.name 
            });
        }
    }
}

API Translation Endpoints#

The platform provides dedicated endpoints for translation management:

// Translation controller
class TranslationController extends AbstractController
{
    #[Route('/api/translations/{locale}', methods: ['GET'])]
    public function getTranslations(string $locale): Response
    {
        $snippets = $this->snippetRepository->search(
            new Criteria(),
            Context::createDefaultContext()
        );
        
        return new JsonResponse([
            'locale' => $locale,
            'snippets' => $snippets->getElements()
        ]);
    }
}

Performance Considerations#

Caching Strategies#

Shopware 6.7 implements intelligent caching for translations to improve performance:

class TranslationCache
{
    public function getTranslation(string $key, string $locale): ?string
    {
        $cacheKey = "translation_{$locale}_{$key}";
        
        if ($this->cache->has($cacheKey)) {
            return $this->cache->get($cacheKey);
        }
        
        $translation = $this->loadTranslation($key, $locale);
        $this->cache->set($cacheKey, $translation, 3600);
        
        return $translation;
    }
}

Lazy Loading#

The platform supports lazy loading of translations to optimize initial page load times:

// Lazy translation loader
class LazyTranslationLoader {
    static async loadTranslations(locale) {
        if (!this.translations[locale]) {
            const response = await fetch(`/api/translations/${locale}?lazy=true`);
            this.translations[locale] = await response.json();
        }
        return this.translations[locale];
    }
}

Best Practices for Multi-Language Development#

Consistent Naming Conventions#

Maintaining consistent naming conventions across all translation files ensures better maintainability:

# Good: Consistent structure
frontend:
  product:
    title: "Product Title"
    description: "Product Description"
    price: "Price"

# Avoid: Inconsistent structure
product:
  title: "Product Title"
  description: "Product Description"
  frontend:
    price: "Price"

Translation Testing#

Implement comprehensive translation testing to ensure all content displays correctly:

// Translation test case
class TranslationTest extends TestCase
{
    public function testTranslationExists(): void
    {
        $this->assertNotNull(
            $this->snippetService->get('frontend.navigation.home', 'en')
        );
    }
}

Conclusion#

Shopware 6.7 provides a robust foundation for building multi-language storefronts with enhanced translation capabilities, improved locale handling, and better performance optimization. By leveraging the platform's snippet system, translation services, and locale management features, developers can create scalable internationalization solutions that meet diverse business requirements.

The technical improvements in Shopware 6.7 make it easier to implement complex multilingual e-commerce experiences while maintaining performance and scalability. Whether you're building a simple bilingual site or a sophisticated global platform, the enhanced translation architecture provides the tools needed for success.

Remember to implement proper caching strategies, maintain consistent naming conventions, and thoroughly test your translations across different locales to ensure optimal user experience across all supported languages.