Neu Template if über Bildschirmgröße

[BlueEyePhoenix]

Hallo Community,

hab da mal eine Frage und zwar möchte in den Produktdetails in der Details.tpl zwei ansichten für Dektop und Mobil einrichten. Habe dies über Class definition versucht:

       <div class="row hidden-lg hidden-mg hidden-sm">

                       {block name="mobile"}
                       <div class="col-xs-7">
                       {include file="productdetails/mobasket.tpl"}
                       </div>
                       {/block}
                       {block name="mobile2"}
                       <div class="col-xs-5 text-right">
                         {if isset($Artikel->Preise->strPreisGrafik_Detail)}
                                {assign var=priceImage value=$Artikel->Preise->strPreisGrafik_Detail}
                            {else}
                                {assign var=priceImage value=null}
                            {/if}
                            {include file="productdetails/price.tpl" Artikel=$Artikel price_image=$priceImage tplscope="detail"}
                       </div>
                       {/block}
                       {block name="productdetails-info-stock"}
                        {if $Artikel->Preise->nAnzahl1 == 0}
                        <div class="col-xs-12" style="text-align:center; margin-top: 15px;">
                            {include file="productdetails/stock.tpl"}
                        </div>
                        {/if}
                        {/block}
                    </div>

                    <div class="row hidden-xs">
                        {block name="productdetails-info-price"}
                        <div class="col-xs-6">
                            {if isset($Artikel->Preise->strPreisGrafik_Detail)}
                                {assign var=priceImage value=$Artikel->Preise->strPreisGrafik_Detail}
                            {else}
                                {assign var=priceImage value=null}
                            {/if}
                            {include file="productdetails/price.tpl" Artikel=$Artikel price_image=$priceImage tplscope="detail"}
                        </div>
                        {/block}
                        {block name="productdetails-info-stock"}
                        <div class="col-xs-6 text-right">
                            {include file="productdetails/stock.tpl"}
                        </div>
                        {/block}
                    </div>
                    {*WARENKORB anzeigen wenn keine variationen mehr auf lager sind?!*}
                    <div class="hidden-xs">
                    {include file="productdetails/basket.tpl"}
                    </div>

Dies Funktioniert auch ganz grob nur kommt es beim Plugin vom Paypal zu kleineren Problemen. Beim Ratenkauf kann die Vorschau nur vom oberen Html code (momentan Mobil) angezeigt werden. Nun möchte ich, dass mit Wenn Dann auf die Bildschirmgröße umstellen. Hat da jemand eine Idee ob dies funktioniert oder wie ich die zwei Codes trennen kann das Paypal bei beiden Versionen Mobil sowie Desktop funktioniert.

Schon mal vielen Dank im Voraus.

 

[martinwolf]

Wenn Du mit den Klassen hidden-XXX arbeitest, hat das den essentiellen Nachteil, dass Du immer beide HTML-Strukturen lädst, obwohl nur eine sichtbar ist.
Besser wäre es, den Code auch wirklich nur dann zu rendern wenn er gebraucht wird. Hierfür bietet Dir das Standard EVO jedoch keine Möglichkeit. Muss also eine eigene Funktion her welche anhand des Viewports des Geräts diese Information irgendwo speichert worauf Du dann templateseitig zugreifen kannst.

 

[BlueEyePhoenix]

Hmm dann muss ich mal schauen ob ich was finde wie ich es mit einem Viewport umsetze.

 

[BlueEyePhoenix]

Ich muss schon sagen es ist doch komplizierter als ich dachte.