Custom Gateway - Customer Support


Welcome to the Custom Gateway Support Portal

Here you can raise support tickets and read articles on common queries using the topic sections and search below

Using the mobile personalisation app for responsive design

Follow

The Personalise-iT Module has been designed to enable you to display different personalisation apps for different webstores - making it ideal if you have a desktop and mobile website

However there is an increasing trend towards responsive design where the standard module will not work - so we have developed the following approach to help accomodate this

You will need to edit the following file: personaliseit/product/view/media.phtml. The file will either be in app/design/frontend/base/default/template or another folder specific for your current Magento template.

Find the following line:

document.getElementById('personalise-it-iframe').src = url;

And replace it with this block of code:

var mobile = window.matchMedia && window.matchMedia("(max-width: 770px)").matches;

    <?php $query = http_build_query(array('a2cpost' => 1, 'epa' => $epa, 'ep3dUrl' => $callback, 'guid' => $product->personaliseit_company_ref_id)) ?>

    if(mobile) {
        src = '<?php echo "{$product->personaliseit_m_iframe_url}&{$query}" ?>';
    } else {
        src = '<?php echo "{$product->personaliseit_iframe_url}&{$query}" ?>';
    }

    document.getElementById('personalise-it-iframe').src = src;

You can change the max-width media query to suit your needs.

Important

We have made the following assumptions:

  • That your products all have both the personalise_iframe_url and personaliseit_m_iframe_url fields set to sane values
  • That you aren't making using of the Flash, WebGL or Legacy Easypromo3D URL fields
  • That you haven't made any changes to the personaliseit/product/view/media.phtml or other modifications that might alter the modules default behaviour.

 

Was this article helpful?
0 out of 0 found this helpful

Comments