Shop - Localization & tracking


Setting up the shop, locales, and currencies

To set up the shop, follow these steps:

  • After installing the plugin, go to the setting panel in your admin interface
  • Here you will need to add currencies for each of the locales you have set up in /site/index.php
  • Finally, go to each product and set the name/intro for each locale and add a price for each currency. Note: If you checked automatic ECB calculation during the currency setup, you will not need to add prices for anything other than the default currency
  • If you want multiple locales with the same currency, you will need to add an additional currency with the same name.

Configuration and language files

There are a few important conf and lang files that you can create in your _project folder to override the default shop version. In each case, you can copy the files from /plugins/shop/conf or /plugins/shop/lang and just edit what you need.

  • /conf/shop.conf.ini – these are the default email and contact infos used by the shop in outgoing emails, and in some other places. You can set up localized versions of these files (one for each locale) if you set use_localized_client_info = true – see below for more info.
  • /lang/shop_client.en_US.lang.ini – if you set use_localized_client_info to true, you can create a local version of shop variables for each locale that you have created in /site/index.php. this is a good way to have unique company contact info for each language. here is an example.
  • /lang/shop.en_US.lang.ini – this file contains all of the shop functions translated. if you want to change the text of buttons, modify something in the cart, etcetc. here is the place to do it. localizing this file is not recommended unless you really need to.

Overriding default view files

You can override the shop’s default template files by creating a local copy in your /app/view/ folder. Here are the more important files (relative to the view folder):

  • /shop/thankyou.html – this is the thank you page displayed after the order is completed
  • /widget/shop/cart.html – the cart html file
  • /widget/shop/checkout.html – the checkout html file
  • /widget/shop/tracking_conversion.html – the tracking code to be placed within the thankyou page
  • /widget/shop/tracking_conversion.en_US.html – the tracking code localized to a specific locale which will override the global tracking_conversion.html file (see below for more info)

Overriding confirmation emails

You can override the shop’s confirmation email HTML by adding a template file:

  • /shop/email/visszaigazolo_level.html – this is the confirmation email sent after the order is submitted

Click here to view the default email contents and the associated language variables.

You should also check out this information on updating and localizing company data.

Analytics eCommerce tracking code

You can access the {{order}} object within the tracking_conversion.html pages (as long as you include it from the thankyou page, which it is by default).

For the new analytics.js Analytics codes, use the code below (for old ga.js, change the Analytics code first or see docs):

<!-- ecommerce code -->
<script>
  ga('ecommerce:addTransaction', {
    'id': '{{order.ordernum}}',         // order ID - required
    'affiliation': 'Store Name',        // affiliation or store name
    'revenue': '{{order.totalprice}}',  // total - required
    'tax': '{{order.tax}}',             // tax
    'shipping': '{{order.shipping}}',   // shipping
  });
  {% foreach order.data.orderitems as item %}
    ga('ecommerce:addItem', {
      'id': '{{order.ordernum}}',                               // Transaction ID. Required.
      'name': '{{item.name|escapejs}}',                         // Product name. Required.
      'sku': '{{item.code|escapejs}}',                          // SKU/code.
      'category': '{{item.mainpropertyname|escapejs}}',         // Category or variation.
      'price': '{{item.perprice}}',                             // Unit price.
      'quantity': '{{item.quantity}}'                           // Quantity.
    });
    ga('ecommerce:send');
  {% endforeach %}
</script>

Using localized Analytics and Remarketing codes

Localized tracking codes (remarketing, analytics, etc.) can be created with the localized include tag: insertlocale.

As with /widget/shop/tracking_conversion.en_US.html above, this comes down to using the proper tag to include the file within your template. Here’s how we did it:

{% insertlocale '/widget/shop/tracking_conversion.html' %}

The code above will automatically search for a ‘local’ version of the html template by (in case of en_US) looking for /widget/shop/tracking_conversion.en_US.html first. If it is found, that file is included. If it is not found, the default locale is searched for. Finally, if that is also not found, the file is loaded without any locale.

IMPORTANT NOTE! The insertlocale will only search in your /app/view/ folder – other plugin folders are not yet supported! If it fails to find any localized files it will work just like standard insert tag after that, so it will not throw an error – it just will ignore localized files outside of your /app/view/ folder.

So if in the above example the current locale is en_US and the default is hu_HU, the following order will prevail:

  1. /app/view/widget/shop/tracking_conversion.en_US.html
  2. /app/view/widget/shop/tracking_conversion.hu_HU.html
  3. /app/view/widget/shop/tracking_conversion.html
  4. /plugins/*/view/widget/shop/tracking_conversion.html (will now search through plugins in order)

ANOTHER IMPORTANT NOTE! If you have a local version, for example tracking_conversion.hu_HU.html then the global version tracking_conversion.html will NOT be included – local versions always override global versions.

Translating/localizing product names and prices

To translate product data the preferred method is to use the built-in translation connection field:

Intro in default language: {{product.data.intro}}
Intro in currently selected language: {{product.translation.intro}}

Connections also work as expected with translations enabled:

WordPress post id: {{product.data.wppost.id}}
Wordpress post id translated: {{product.translation.wppost.id}}

You can also invoke the translate filter to translate to a specific language:

{{product.translation.name|translate:'hu_HU'}}

To display the local price (in the currently selected currency), you need to use the following variables (assuming there is a {{product}} currently set):

{{product|local_price}} {{shop.currency.name}}
Outlast Web & Mobile Development (c) 2019 | Privacy Policy |