Preview Mode

The preview mode functionality allows content editors to preview Prismic content changes before publishing them to the live site.

Components

PreviewMode Block

Elgentos\PrismicIO\Block\PreviewMode

The PreviewMode block handles the integration of Prismic's preview script and is automatically added to pages when preview mode is enabled.

Preview Controller

Elgentos\PrismicIO\Controller\Preview\Index

Handles preview requests and redirects to the appropriate page.

Configuration

Preview mode can be enabled in the Magento admin:

<prismicio>
    <content>
        <allow_preview>1</allow_preview>
    </content>
</prismicio>

Implementation

Preview Script Integration

The module automatically adds the Prismic preview script to your pages when preview is enabled:

const PRISMICIO_PREVIEW_URL = 'https://static.cdn.prismic.io/prismic.js?new=true&repo=';

Preview Flow

1. Editor clicks preview in Prismic
2. Request is sent to /prismicio/preview/index
3. PreviewController validates the token
4. Controller resolves the document URL
5. User is redirected to the preview page

Security Considerations

The preview controller: - Only works when preview mode is enabled - Validates preview tokens - Falls back to 404 for invalid requests

Template Integration

<referenceBlock name="before.body.end">
    <block ifconfig="prismicio/content/allow_preview" 
           name="prismicio_preview_html" 
           class="Elgentos\PrismicIO\Block\PreviewMode" 
           template="Elgentos_PrismicIO::preview-mode.phtml" />
</referenceBlock>

API Methods

PreviewMode Block

public function getApiEndpoint(): string
public function getRepoName(): string
public function getPreviewUrl(): string

Preview Controller

public function execute()

Best Practices

1. Security
2. Only enable preview in necessary environments
3. Use HTTPS for preview requests

4. Implement proper access controls

5. Performance

6. Preview script is only loaded when preview is enabled
7. Preview requests are not cached

8. Preview mode is disabled by default

9. Implementation

10. Use proper preview URLs in Prismic configuration
11. Handle preview timeouts appropriately
12. Consider preview in multi-store setups

Troubleshooting

Common issues and solutions:

1. Preview Not Working
2. Verify preview mode is enabled
3. Check preview URL configuration in Prismic

4. Validate preview token handling

5. Preview Script Issues

6. Check CSP configuration
7. Verify repository name resolution

8. Monitor browser console for errors

9. Preview Routing

10. Verify LinkResolver configuration
11. Check store-specific preview handling
12. Review preview URL generation