Shortcode Widget - Creative Elements

The Shortcode widget is a powerful tool that allows you to insert Smarty variables, hooks, widgets or include template files directly into your layout. It is primarily intended for advanced users who are comfortable working with PrestaShop's Smarty system. This enables several possibilities:

Displaying Variables

By adding this widget and configuring it with Smarty code, you can display information directly from PrestaShop's core variables, adapting the content based on the current page context (like showing product details on a product page or category information on a category page). This widget is designed for users who need more flexibility than standard content options allow.

The core strength of this widget lies in its ability to access PrestaShop's native Smarty variables:

Basic Variables: You can directly use core variables available on the page where the widget is displayed by enclosing the variable name in curly braces, like {$shop} or {$product}.
Accessing Variable Properties (Data Members): You can access specific pieces of data within these variables using dot notation. For example, to get the name property from the $product variable, you would use {$product.name}.

Note: The set of available Smarty variables changes depending on the type of page the widget is rendered on. A variable like {$product} will contain data on a product page but will likely be undefined or empty on the homepage or a CMS page. Therefore, it's essential to know the context in which you are placing the widget.

Here are some useful variables and properties according to page types:

Global Variables

These variables are generally accessible across the front office.

{$shop}: Shop details (e.g., {$shop.name}, {$shop.logo}, {$shop.email}).
{$language}: Current language details (e.g., {$language.id}, {$language.iso_code}, {$language.is_rtl}).
{$currency}: Current currency details (e.g., {$currency.id}, {$currency.iso_code}, {$currency.sign}).
{$customer}: Logged-in customer info (e.g., {$customer.firstname}, {$customer.email}, {$customer.id}).
{$urls}: Various shop URLs (e.g., {$urls.base_url}, {$urls.current_url}).
{$page}: Current page info (e.g., {$page.page_name}, {$page.meta.title}, {$page.meta.description}).
{$configuration}: Array of shop configuration settings.
{$cart}: Current shopping cart representation (e.g., {$cart.products_count}).

Product Variables

Variables available on the single product view page.

{$product}: Main variable with extensive product details:
- {$product.id_product}, {$product.id_product_attribute}
- {$product.name}, {$product.description}, {$product.description_short}
- {$product.link_rewrite}, {$product.canonical_url}
- {$product.price}, {$product.price_amount}, {$product.regular_price}, {$product.specific_prices}
- {$product.reference}, {$product.ean13}, {$product.isbn}, {$product.upc}
- {$product.quantity}, {$product.allow_oosp}, {$product.available_for_order}
- {$product.show_price}, {$product.show_condition}, {$product.condition}
- {$product.images}, {$product.cover}
- {$product.attributes}, {$product.features}
- {$product.attachments}, {$product.customization_fields}
- {$product.pack_items}, {$product.accessories}
- {$product.manufacturer_name}, {$product.manufacturer_url}
- {$product.add_to_cart_url}, {$product.minimal_quantity}
- {$product.quantity_discounts}, {$product.product_flags}
{$combinations}: Array mapping attribute IDs to combination details (price, quantity, image, etc.).
{$groups}: Array organizing attributes by group for display.

Product Miniature Variables

Variables available on listing pages in the product miniatures.

{$product}: Main variable with extensive product details:
- {$product.id_product}, {$product.id_product_attribute}
- {$product.name}, {$product.description}, {$product.description_short}
- {$product.link_rewrite}, {$product.canonical_url}
- {$product.price}, {$product.price_amount}, {$product.regular_price}, {$product.specific_prices}
- {$product.reference}, {$product.ean13}, {$product.isbn}, {$product.upc}
- {$product.quantity}, {$product.allow_oosp}, {$product.available_for_order}
- {$product.show_price}, {$product.show_condition}, {$product.condition}
- {$product.images}, {$product.cover}
- {$product.attributes}, {$product.features}
- {$product.attachments}, {$product.customization_fields}
- {$product.pack_items}, {$product.accessories}
- {$product.manufacturer_name}, {$product.manufacturer_url}
- {$product.add_to_cart_url}, {$product.minimal_quantity}
- {$product.quantity_discounts}, {$product.product_flags}
{$combinations}: Array mapping attribute IDs to combination details (price, quantity, image, etc.).
{$groups}: Array organizing attributes by group for display.

Category/Listing Variables

Variables found on pages that display lists of products.

{$listing}: Main variable for product lists:
- {$listing.products}: Array of simplified product objects for the current page.
- {$listing.pagination}: Object with pagination details (total items, pages, current page, etc.).
- {$listing.sort_orders}: Array of available sorting options.
- {$listing.sort_selected}: Label of the current sort order.
- {$listing.label}: Title for the listing (Category name, "Search results", etc.).
{$category}: (Category page only) Object with current category details (e.g., {$category.id_category}, {$category.name}, {$category.description}, {$category.image}).
{$subcategories}: (Category page only) Array of subcategories.
{$manufacturer}: (Manufacturer page only) Manufacturer details object.
{$supplier}: (Supplier page only) Supplier details object.
{$search_string} / {$query}: (Search results page only) The user's search term.

CMS Variables

Variables used on Content Management System pages.

CMS Category page:

{$cms_category}: CMS category object.
{$sub_categories}: Array of sub-categories.
{$cms_pages}: Array of CMS pages in this category.

CMS page:

{$cms}: CMS page content object.
- {$cms.id_cms}, {$cms.meta_title}, {$cms.meta_description}
- {$cms.content}: HTML content of the page.

Tip: To list the available attributes of a variable, you can print the entire variable within the Shortcode widget on the specific page where it is available. This will help you inspect its structure and identify which properties you can use in your templates.

Printing the {$category} variable in the Shortcode widget

Examples:

<-- Display Product Name (Use on Product Page) -->
<h2> {$product.name} </h2>

<-- Display Product Reference & Price (Use on Product Page) -->
Ref: {$product.reference} - Price: {$product.price}

<-- Display Category Name (Use on Category Page) -->
Current Category: {$category.name}

<-- Display Shop Name (Generally Available) -->
Welcome to {$shop.name}! Our phone: {$shop.phone}

<-- Display Customer First Name (Available when logged in) -->
Hello, {$customer.firstname}!

Including Hooks

You can include any PrestaShop hook using the {hook} tag. This allows rendering additional module outputs inside your layout.

Parameters:

h: the name of the hook

Optional Parameters:

mod: only include output from the specified module
excl: exclude specific module(s) from the hook execution
Additional variables can be passed as needed (e.g., product=$product).

Examples:

<!-- Including a basic hook -->
{hook h='displayFooter'}

<!-- Including a basic hook specifying a module with additional variable passed --> 
{hook h='displayFooterProduct' mod='creativeelements' product=$product}

Including Widgets

You can render modules that implement PrestaShop's WidgetInterface using the {widget} tag.

Parameters:

name: the technical name of the module

Optional Parameters:

hook: the hook context in which to render the widget
Additional variables can be passed as needed (e.g., product=$product).

Examples:

<!-- Including a module widget -->
{widget name='ps_emailsubscription'}

<!-- Including a module widget specifying a hook -->
{widget name='ps_emailsubscription' hook='displayFooter'}

Including Template Files

You can include template files from your theme or modules by specifying the appropriate relative path using the {include} tag.

Parameters:

file : the relative path of the file

Optional Parameters:

Additional variables can be passed as needed (e.g., foo='bar').

Examples:

<!-- Including a theme file -->
{include file='_partials/breadcrumb.tpl'} 

<!-- Including a module file --> 
{include file='module:ps_emailsubscription/views/templates/hook/newsletter.tpl'}