Popup in Shopify

Dit heeft me veel tijd gekost. Ook Google leek het niet echt te weten. Maar zolang er anderen zijn die wat betreft een bepaald onderwerp op internet hun antwoorden zoeken, is het mogelijk om gebruik te maken van alle stukjes antwoorden om zo toch tot een oplossing te komen. Net een puzzel. Ik houd het even kort want het is te laat geworden.

Doel, probleem, wat er bereikt moet worden:
De klant heeft een Shopify website. Nu wil de klant dat als iemand een menu item aanklikt er een popup venster geopend wordt met een vraag en dat de bezoeker pas verder kan na beantwoorden van de vraag.

Oplossing
De oplossing heet Facebox. Te vinden via http://defunkt.io/facebox/ Ook is daar een summiere uitleg te vinden. Nu lijkt het makkelijk maar dat is het niet als dit in Shopify geintegreerd moet worden. Stappenplan:
– De javascript files en de css file (facebox.css) uploaden via de "add asset" optie in Shopify
– binnen theme.liquid de verwijzing naar deze files plaatsen waarbij als eerste jquery.js geladen moet worden en dan pas facebox.js; Ziet er zo uit:

{{ 'jquery.js' | asset_url | script_tag }} <script> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() }) </script> {{ 'facebox.js' | asset_url | script_tag }}

Het stukje script

jQuery(document).ready(function($) { $(‘a[rel*=facebox]’).facebox() })

is er tussengevoegd om het mogelijk te maken om via een makkelijke verwijzing: rel="facebox" elke link te laten openen in een lightbox popup.
– Ik maak een pagina binnen Shopify aan met daarin de informatie of html die ik wil tonen binnen de popup.
– Nu nog opzoeken in theme.liquid waar ik die rel="facebox" ga plaatsen. Ik vervang:

<a href="{{ link.url }}" >{{ link.title | escape }}</a>

door:

<a href="#info" rel="facebox">{{ link.title | escape }}</a>

en daaronder plaats ik:

<div style="display:none;" id="info">{{ pages.verification.content }}</div>

Kortom: er is nu geen menulink meer die linkt naar een andere pagina, maar wel een menu titel en bij klikken op dit titel, opent zich een facebox popup met daarin de html die ik heb geplaatst in de pagina Verification. Nu wil ik dat de bezoeker wel naar de pagina kan die eigenlijk achter de menulink schuil gaat en dat doe ik door:
– voordat ik de rel="facebox" plaats, laad ik de pagina in Firefox en kopieer ik de html van het menu en die html plaats ik binnen de html van de pagina Verification. Vervolgens activeer ik rel="facebox", bij klikken op een menuitem wordt standaard de pagina Verification geopend in een mooie popup en daar kan de bezoeker na het doorlopen van vragen en informatie nog een keer overwegen om op de menulink te klikken en wordt vervolgens netjes doorverwezen naar de gewenste inhoud.

Groeten!