Productgrid-weergave & theming (Drupal 7): verschil tussen versies

Uit De Vliegende Brigade
Naar navigatie springen Naar zoeken springen
(Nieuwe pagina aangemaakt met 'Hoe zorg ik voor weergave van producten zoals bv. op de home page van [https://www.manandshaving.nl/ manandshaving.nl]? Dat zit vernuftig in elkaar: * Weergave in...')
 
 
(30 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 1: Regel 1:
−
Hoe zorg ik voor weergave van producten zoals bv. op de home page van [https://www.manandshaving.nl/ manandshaving.nl]? Dat zit vernuftig in elkaar:
+
Hoe zorg je in Drupal 7 voor een leuke opmaak van producten? Bv. in een grid op de home page?
  
−
* Weergave in een box met een lijntje eromheen
+
== View mode + display + view + context ==
−
* Twee kolommen met daaronder een horizontale balk
 
−
* In de linkerkolom een productafbeelding. Onduidelijk hoe deze aligned is.
 
−
* In de rechterkolom: Titel, productomschrijving, prijs & leverstatus. Deze kolom is aligned met de bovenkant van de box
 
−
* Items in de horizontale balk zijn ''alligned'' met de onderkant van de box waar alles in zit
 
  
−
De complete HTML-code voor zo'n blok:
+
Er zijn verschillende wegen die naar Rome leiden. Een route die mij goed bevalt:
 +
 
 +
=== Defineer een view mode ===
 +
 
 +
{|
 +
|[[file:20160517-1945.png|thumb|Defineer een nieuwe ''view mode'' (bv. ''product teaser'') met behulp van de [[Display Suite-module (Drupal) | Display Suite-module]] ]]
 +
|}
 +
 
 +
=== Maak een display aan ===
 +
 
 +
{|
 +
|[[file:20160517-1948.png|thumb|Klik op ''Manage display'' bij het betreffende content-type]]
 +
|[[file:20160517-1950.png|thumb|Kies rechtsboven de betreffende ''view mode''. Configureer onderaan het scherm (hier niet te zien) de layout qua kolommen, en bepaal waar welke velden komen]]
 +
|}
 +
 
 +
Ik gebruik meestal de ''Two-colum stacked'' layout. Bijbehorende sjabloon-sugesties:
  
 
<pre>
 
<pre>
−
<div class="productBlok spacer">
+
* ds-2col-stacked--node.tpl.php
 +
* ds-2col-stacked--node-home-page-product-display.tpl.php
 +
* ds-2col-stacked--node-product-display.tpl.php
 +
* ds-2col-stacked--node-product-display-home-page-product-display.tpl.php
 +
* ds-2col-stacked--node--{id}.tpl.php
 +
</pre>
  
−
/* productHead = Linker- & rechterkolom */
+
=== Incorporeer deze display in een view ===
−
/* productHead = Linker- & rechterkolom */
 
−
 
−
<div class="productHead">
 
−
 
−
/* productRight */
 
−
 
−
<div class="productRight">
 
−
<div class="productTitle">
 
−
<h2>
 
−
<a href="/product/414/barc_scheercrème_cutting_up_180ml.aspx">Barc scheercrème Cutting Up 180ml</a>
 
−
</h2>
 
−
</div>
 
−
<div class="productOmschrijving">
 
−
<p>Barc Cutting Up is een verrijkte en volle scheercrème voor minimale irritatie en maximaal scheercomfort. Bevat geen alcohol, parfum, zeep of olie. Geschikt voor de gevoelige huid.</p><br>
 
−
<div class="productBedrag">23,95</div><br>
 
−
<div class="DirectShipment">
 
−
status:<b style="color: #008800;">Direct leverbaar</b>
 
−
</div>
 
−
</div>
 
−
</div>
 
  
−
/* productLeft */
+
{|
−
+
|[[file:20160517-1954.png|thumb|''Show: content'' met als optie de ''view mode''. Ipv. ''content'' kun je ook ''Display suite'' kiezen. Geen idee wat het verschil is]]
−
<div class="productLeft">
+
|[[file:20160517-1955.png|thumb|Om producten in een grid op de home page te tonen, heb ik 'm nodig als ''block'' (denk ik)]]
−
<a href="/product/414/barc_scheercrème_cutting_up_180ml.aspx">
+
|}
−
<img class="productAfbeelding" src="/pictures/1/90x135/Barc_scheercreme_cutting_up_6x9.jpg" alt="Barc scheercrème Cutting Up 180ml">
 
−
</a>
 
−
</div>
 
  
−
<div class="float-clearing"> </div>
+
=== Gebruik deze view in een context ===
−
 
−
</div> /* productHead */
 
−
 
−
 
−
/* productFooter */
 
−
/* productFooter */
 
−
 
−
<div class="productFooter">
 
−
<div class="productPrijsBlok">
 
−
<div class="btnProductDetailsAction">
 
−
<a href="/product/414/barc_scheercrème_cutting_up_180ml.aspx">Meer informatie</a>
 
−
</div>
 
−
<div class="addToCart overview">
 
−
<div onclick="javascript:HandleCart('414', 1);return false;">
 
−
<a onclick="return false;" href="#">Bestel</a>
 
−
</div>
 
−
</div>
 
−
<div class="float-clearing"> </div>
 
−
</div>
 
−
<div class="float-clearing"> </div>
 
−
</div>
 
  
−
</div> /* productBlok spacer */
+
{|
 +
|[[file:20160517-1956.png|thumb|Context ''home_sweet_home'' gedefineerd, met als voorwaarde dat het ''path'' gelijk is aan ''<front>'']]
 +
|[[file:20160517-1957.png|thumb|Binnen deze context wordt ]]
 +
|}
  
−
<div class="float-clearing"> </div>
+
== Body: Toon teaser ipv. alles ==
−
</pre>
+
 
 +
* In producttype-displays kun je niet aangeven dat je iets met de ''teaser'' wilt doen
 +
* Op product-display-niveau kun je niet aangeven dat je iets met de ''teaser'' wilt doen. [https://www.drupal.org/node/514318 Deze posting] suggereert dat er een tandwieltje achter het body-veld zou staan waarin je oa. teaser-lengte kunt instellen. Dat lijkt niet te werken en sommige commentaren leggen uit dat niet meer gaat als er al content is ingevoerd
 +
* In een ''product-display-view'' werk je normaliter niet op veld-niveau, maar geef je alleen aan welke 'bundle' je wilt gebruiken. Als ik ''fields'' als bron gebruikte, zag ik zo snel geen oplossing.
 +
 
 +
== Zie ook ==
 +
 
 +
* [[Display Suite-module (Drupal)]]
 +
* [[Labels verbergen in Views (Drupal)]]
 +
 
 +
== Bronnen ==
 +
 
 +
''' Body teaser weergeven '''
 +
 
 +
* http://drupal.stackexchange.com/questions/60948/how-to-display-the-summary-teaser-over-the-body-in-a-full-content-view - Body teaser weergeven
 +
* https://www.drupal.org/node/514318

Huidige versie van 20 mei 2016 om 14:35

Hoe zorg je in Drupal 7 voor een leuke opmaak van producten? Bv. in een grid op de home page?

View mode + display + view + context

Er zijn verschillende wegen die naar Rome leiden. Een route die mij goed bevalt:

Defineer een view mode

Defineer een nieuwe view mode (bv. product teaser) met behulp van de Display Suite-module

Maak een display aan

Klik op Manage display bij het betreffende content-type
Kies rechtsboven de betreffende view mode. Configureer onderaan het scherm (hier niet te zien) de layout qua kolommen, en bepaal waar welke velden komen

Ik gebruik meestal de Two-colum stacked layout. Bijbehorende sjabloon-sugesties: 

* ds-2col-stacked--node.tpl.php
* ds-2col-stacked--node-home-page-product-display.tpl.php
* ds-2col-stacked--node-product-display.tpl.php
* ds-2col-stacked--node-product-display-home-page-product-display.tpl.php
* ds-2col-stacked--node--{id}.tpl.php

Incorporeer deze display in een view

Show: content met als optie de view mode. Ipv. content kun je ook Display suite kiezen. Geen idee wat het verschil is
Om producten in een grid op de home page te tonen, heb ik 'm nodig als block (denk ik)

Gebruik deze view in een context

Context home_sweet_home gedefineerd, met als voorwaarde dat het path gelijk is aan <front>
Binnen deze context wordt

Body: Toon teaser ipv. alles

  • In producttype-displays kun je niet aangeven dat je iets met de teaser wilt doen
  • Op product-display-niveau kun je niet aangeven dat je iets met de teaser wilt doen. Deze posting suggereert dat er een tandwieltje achter het body-veld zou staan waarin je oa. teaser-lengte kunt instellen. Dat lijkt niet te werken en sommige commentaren leggen uit dat niet meer gaat als er al content is ingevoerd
  • In een product-display-view werk je normaliter niet op veld-niveau, maar geef je alleen aan welke 'bundle' je wilt gebruiken. Als ik fields als bron gebruikte, zag ik zo snel geen oplossing.

Zie ook

Bronnen

Body teaser weergeven

Overgenomen van "https://wiki.devliegendebrigade.nl/index.php?title=Productgrid-weergave_%26_theming_(Drupal_7)&oldid=4668"