Vox Mago Weebpal Drupal 7 Events theme guide for developers

https://www.weebpal.com/guides/drupal-7-events-theme-guide-developers

The Basic - Before You Start

Package

Features

System Configuration

Screenshots

Module requirements

Installation

Quick Installation Demo Profile

Installation Onepage Theme for Drupal developers

Taxonomy Configurations

Media Configurations

Content Type Configurations

Configure Date and time

Configuration People

Configuration Store Product

Add Store Products

Modify Simplenews newsletter type

Create Ticket type

Create Events type

Create FAQ type

Create News type

Create Sponsor type

Create Testimonials type

Configure Block types: Satatistic

Configure Field Collection

Create Homepage

Configure Languages

Add FlexSlider

Headline

3. Configure Language switcher dropdown block

4. Create and Configure Socials block

Als je het blok Sociale media instelt/bewerkt, en de source van de Blokinhoud opvraagt, dan bevat de lijst altijd uitsluitend non-breaking spaces (<li> </li>). Wil je een wijziging aan het blok doorvoeren, moet je altijd de juiste links weer kopiëren in de blokinhoud of ze verdwijnen effectief als non-breaking links. Hier de juiste blokinhoud:
<ul class="socials-list">
   <li><a href="https://www.facebook.com/voxmago" target="_blank" data-toggle="tooltip" data-placement="top" data-original-title="Facebook"><i class="fa fa-facebook"></i></a></li>
   <li><a href="https://www.flickr.com/photos/voxmago/albums/" target="_blank" data-toggle="tooltip" data-placement="top" data-original-title="Flickr"><i class="fa fa-flickr"></i></a></li>
   <li><a href="https://www.youtube.com/channel/UCi7N-uTgc2Drd4rSSXrAu-A" target="_blank" data-toggle="tooltip" data-placement="top" data-original-title="YouTube"><i class="fa fa-youtube-play"></i></a></li>
</ul>

5. Configure Shopping cart block view

6. Configure Shopping cart block block

Search form

Slideshow

Events block view

Speakers block

Tickets block

Happy Clients block >> Getuigenissen

Configure Newsletter: Subscribe : Custom block >> Nieuwsbrief

  • rechten aangepast zodat ook niet-ingelogde gebruikers kunnen inschrijven

Contact Us block

Lastest Tweet block

Frontpage view

Create Subpages

News Menu block

About us Page

Meet Our Team block

Happy Clients block

Why Choose Us? block

News page

News Grid page

Block : Laster New

Events Grid page >> Herbeleef

Events List page

Events Calendar page >> Agenda

Omdat niet alle concerten in eigen beheer worden gedaan, en we deze dus eigenlijk niet in het archief willen, een gewone 'basic page' gecreëerd met toekomstige concerten bestaande uit een bootstrap grid van drie kolommen (datum & uur, evenement, meer info-link). Zie broncode: agenda.txt.

Eveneens een custom bootstrap button gemaakt als link naar de organisator.

Custom bootstrap buttons kun je makkelijk hier maken: http://blog.koalite.com/bbg/ (bootstrap button generator).

Speakers Page >> Solisten / Koor / Dirigent

FAQ Page

Contact page

Gmap

Tickets

  • oorspronkelijk in Drupal Commerce , na 1 event terug naar !PHPJabbers Booking Calendar

Uw reservatie is genoteerd

Na Kwamarant ook hier de 'Uw reservatie is genoteerd' ge-beautified.
datum issue oplossing
06/03/2019 In tegenstelling tot v3.1 kun je na de reservatie de gebruiker niet afleiden naar een afzonderlijke pagina, je kunt alleen een vaste tekst weergeven, bv. Uw reservatie is genoteerd. Alleen ververst het scherm niet automatisch na de 'bedankt', dus als je een tweede reservatie wil doen, moet je als eindgebruiker slim genoeg zijn om nogmaals op 'Tickets' te klikken of een handmatige refresh (F5) te doen… Je kunt in de Event Booking Calendar bij de vertaling van de labels (Opties > Talen > Labels) wel html code, inclusief JavaScript, gebruiken in de vertaling - zie hieronder
<h2>BEDANKT!<BR><i class="fa fa-check" class="centerlead"></i></h2><p class="centerlead">Van harte dank voor uw reservatie.</p><p class="centerlead">U ontvangt weldra een mail van ons met de betalingsinstructies.<br />Na betaling is de reservatie voltooid.</p><p class="centerlead"><button class="btn btn-transparent" onclick="myFunction()"><BR>&nbsp;&nbsp;&nbsp;Nog een reservatie graag!&nbsp;&nbsp;&nbsp;<BR><BR></button></p><script>function myFunction() {  location.reload();}</script>

Ten behoeve daarvan ook de events/app/web/css/themes/theme1.css aangepast betreffende de h2 stijl & een bijkomende stijl voor de gecentreerde gewone tekst:
#pjWrapper .centerlead { text-align: center; margin-bottom:20px; font-size:16px; font-weight:300; line-height:1.4; }
#pjWrapper h2 { color: #841f1c; font-weight: 600; text-align: center; font-size: 48px; line-height: 48px; },

Shop: Wufoo → Drupal Basic Cart

  • oorspronkelijk een Wufoo-formuliertje, naderhand omgezet in Drupal Basic Cart

Drupal Basic Cart, een eenvoudige webshop: instructievideo

Structure > Content types / Structuur > Inhoudstypen [4'50"]

  • Er is een inhoudstype Bestelling / Order bijgekomen.
  • In principe kun je eender welk inhoudstype gebruiken als "winkelwaar", maar we gaan zelf nog een inhoudstype Product toevoegen:
    • vTab Publicatie-opties: Aangeraden op de voorpagina uitschakelen
    • vTab Weergave-instellingen: vinkje uit bij Auteur en datum tonen
    • vTab Reactie-instellingen: Standaardreactie-instelling voor nieuwe inhoud wijzigen naar Gesloten
    • Velden:
      • We wijzigen het label "Title" in Productnaam
      • We veranderen het label "Body" in Productbeschrijving
      • We voegen een veld Productafbeelding toe met als eigenschappen:
        • systeemnaam field_product_image,
        • wijzig de map in: product/[current-date:custom:Y]/[current-date:custom:m]
        • vinkje aan bij Alt-veld inschakelen

Instellingen > Basic cart > Basic cart: vTab INSTELLINGEN [6'30"]

  • De beschikbare inhoudstypes worden getoond: vink Product aan
  • Pas bij CURRENCY AND PRICE de munteenheid aan naar (had eerst EUR gebruikt, maar voor de medium-weergave in de Shop-view past het compactere €-symbool beter)
  • Price format: € 1.234,00
  • klik op Instellingen opslaan
Ga ter controle nu opnieuw naar Structuur > Inhoudstypen > Product
  • klik op de tab VELDEN BEHEREN
  • als het goed is, zie je hier nu twee extra velden: Price en Add to cart
Desgewenst kun je ook een redirect voorzien wanneer er iets wordt toegevoegd aan de winkelwagen.

Inhoud > Inhoud toevoegen [7'20"]

Voeg nu je winkelwaren toe:
  • klik op Product
  • vul de velden Productnaam, Productbeschrijving en Prijs in
  • klik op Opslaan
    • op mijn testomgeving kreeg ik bij het eerste product de melding Undefined index: add_to_cart in locale_field_entity_form_submit
    • daar heb ik dan de patch toegepast die ik hier vond: https://www.drupal.org/project/basic_cart/issues/2169975, maar mijn vermoeden is dat het vanaf het tweede product niet meer verschijnt!
    • op de live omgeving kreeg ik deze fout niet en heb ik de patch dan ook niet toegepast…

Structuur > Inhoudstypen > Product

VELDEN BEHEREN [8'50"]
  • klik naast Price op de link Bewerken
  • wijzig het "label" in Prijs
  • vinkje aan bij Verplicht veld
  • wijzig de Helptekst in Prijs van het product
  • klik op Opslaan
WEERGAVE BEHEREN [10'00"]
  • klap AANGEPASTE WEERGAVE-INSTELLINGEN open en zorg ervoor dat Volledige inhoud en teaser ingeschakeld zijn - sla zo nodig de wijzigingen op
  • bekijk vervolgens de instellingen van Volledige inhoud (knop bovenaan rechts in het tabje WEERGAVE BEHEREN)
  • zet bij het veld "Prijs" het LABEL op Inline
  • zet bij het veld "Add to cart" het LABEL op <Verborgen> en kies bij FORMAAT voor Add to cart button with quantity
  • zet ook bij "Productafbeelding" het label op <Verborgen>
  • klik op de knop Opslaan

Eerste aankoop [11'00"]

Ga nu naar de inhoud en kies een product dat je hebt gecrëeerd. Wijzig het aantal bv. in 2 en klik op de knop Add to cart / Aan winkelwagen toevoegen.

Er verschijnt een melding: Shopping cart updated / Winkelwagen bijgewerkt.

Net zoals in Drupal 8 heb ik (de vertaling van) dit bericht aangepast zodat het woord "Winkelwagen" linkt naar de winkelwagen:
Instellingen > Land- en taalinstellingen > Interface vertalen > Vertalen:

<a href="../cart" hreflang="nl">Winkelwagen</a> bijgewerkt.

Cart [11'05"]

De winkelwagen zelf is bereikbaar door de root-url aan te vullen met /cart.

Daar willen we uiteraard een link naartoe. De shop (view - zie verder) brengen we onder in het hoofdmenu, voor het winkelwagentje voegen we een blok toe dat we positioneren waar het winkelwagentje van Drupal Commerce oorspronkelijk stond:
  • Structuur > Blokken
  • + Blok toevoegen
    • Bloktitel: <none>
    • Blokbeschrijving: Winkelwagen (Basic cart)
    • Blokinhoud:
      • als list item (<li>) in een unordered list (<ul>) met dezelfde klasse als het menu met de links van de sociale media (socials-list)
      • met als href /drupal/cart
      • en met het juiste font-awesome-icoontje: fa-shopping-cart
<div class="view-footer">
   <ul class="socials-list">
         <li class="line-item-summary-view-cart first><a href="../cart" rel="nofollow"><i class="fa fa-shopping-cart"></i></a></li>
   </ul>
</div>
<?php
$path = $_SERVER['REQUEST_URI'];
$find = 'checkout';
$pos = strpos($path, $find);
$cart = basic_cart_get_cart();
$item_count = 0;
foreach ($cart as $nid => $item)
{
    $item_count = $item_count + $item->basic_cart_quantity;
}
if (($item_count != 0) and ($pos == false))
{
    return true;
}
else
{
    return false;
}
?>

Speel nu een beetje met de winkelwagen om te zien of alles werkt [11'40"]:
  • klik op het kruisje (Remove from cart) om een item te verwijderen
    of
  • wijzig het aantal en klik op Bijwerken om de totaalprijs bij te werken
Zorg er ook voor dat alle items onder elkaar verschijnen:

CSS-injector pagina cart

We gaan beginnen met de vlaggende invulvelden onder elkaar te tonen (label met daaronder bijbehorend veld):

.form-item {
 display: unset; /* elke orderregel op afzonderlijke lijn */
 /* margin: 15px; */ /* of 15px laten zodat de afzonderlijke regels niet in elkaar overlopen
}

Checkout [12'10"]

Klik op Checkout / Afrekenen om de afrekenprocedure te doorlopen:
  • niet alle vereiste velden zijn verplicht
  • een aantal velden is niet vertaald
  • er was iets fout met apostroffen in de mail subject:
    zie https://www.drupal.org/project/basic_cart/issues/3024240:
    ik wijzigde in .../sites/all/modules/basic_cart/basic_cart_order/basic_cart_order.module:
- $message['subject'] = t(check_plain(variable_get('basic_cart_admin_subject')));
+ $message['subject'] = t(decode_entities(filter_xss(variable_get('basic_cart_admin_subject'))));

CSS-injector pagina checkout

.form-item {
 display: inline-grid;
 margin: 0 0 15px;
}

Overigens kun je ook "handmatig" items toevoegen aan de winkelwagen met de volgende url-postfix:

.../cart/add/<node id>

Structuur > Inhoudstypen > Bestelling [13'10"]

Bewerk nu het inhoudstype Bestelling / Order (vertaling kan ook "Volgorde" zijn…) om waar nodig velden verplicht te maken en labels te vertalen:
  • laat het "label van het titelveld" evenwel onveranderd: Naam
  • sla op en ga naar Velden beheren van het inhoudstype "Bestelling"
  • corrigeer de labels van (of vertaal ze via Instellingen > Land- en taalinstellingen > Interface vertalen > Vertalen:
    • Title: Naam
    • Email: E-mailadres
    • Phone: Telefoonnr.
    • Address: Straat & huisnr. (maak dit veld ook verplicht)
    • Message: Bericht
      >> achteraf bleek dat wanneer je het veld Bericht leeg liet, dat er [node:body] verscheen in de bevestigingsmail - een spatie invullen als standaardwaarde bij de instellingen bleek te volstaan om dat euvel(tje) te verhelpen
  • ik heb de velden City & Zip Code verwijderd en vervangen door Postcode & plaats (systeemnaam field_zipcode_city; lengte: 60; max. lengte: 255) en dit veld ook verplicht gemaakt
  • desgewenst kun je ook een afzonderlijk afleveradres toevoegen
  • zet ze ook in de juiste volgorde
Bevestig nu je voorlopige bestelling. [15'00")]

Er verschijnt een bevestiging:
  • Thank you. - Thank you for placing an order on our website. We will contact you as soon as possible.
  • Van harte dank voor uw bestelling op onze website. Wij nemen zo snel mogelijk contact met u op.
Klik je weer op je winkelwagentje, dan verschijnt er dat het leeg is:
  • Your cart is empty.
De laatste melding kun je vertalen bij Instellingen > Land- en taalinstellingen > Interface vertalen > Vertalen:
  • Your cart is empty: Uw winkelwagen is leeg.
  • Shopping cart updated: Winkelwagen bijgewerkt.
Om de andere melding te vertalen, moet je bij de checkout-instellingen van Basic cart zijn:

Instellingen > Basic cart > Basic cart: vTab AFREKENEN [15'35"]

  • zorg dat het e-mailadres van de administrator correct is
  • wijzig de mails voor de administrator en de koper:
    • admin "onderwerp": Nieuwe bestelling ...
    • "Admin email": … - de standaard voorgestelde mail bevat wel de tokens voor de bestelde producten en de totaalprijs, dus behoud die!
    • koper "onderwerp": Uw bestelling op de site van ...
    • email koper: Beste … - ook hier bevat de standaard voorgestelde mail een aantal nuttige tokens: naam, bestelde producten, totaalbedrag
    • mocht je toch vereiste tokens gewist hebben, je kunt ze ook lager op deze pagina openklappen en achterhalen
  • wijzig ook de "titel" en de "tekst" van de THANK YOU PAGE

Bestellingen [16'30"]

Je kunt de bestellingen hier terugvinden:
  • Inhoud: van het type "Bestelling"
    of
  • Structuur > Bestellingen [onlogisch, maar wel het handigste overzicht]

Structuur > Overzichten / Views: Een nieuwe overzicht toevoegen [17'25"]

According to the instruction video
  • Overzichtsnaam: *Producten*
  • Weergeven: Inhoud van het type Product gesorteerd volgens *Titel*
  • een onopgemaakte lijst van teasers
  • vink aan: Een menulink aanmaken:
    • kies het menu *Hoofdmenu*
    • vul bij Linktekst Shop in
  • klik op Opslaan en afsluiten
  • Pas zo nodig de weergave van het inhoudstype Product aan:
    • Structuur > Inhoudstypen
    • klik op "Weergave beheren" naast "Product"
    • kies bovenaan rechts "Teaser"
    • zorg dat de velden die moeten zichtbaar zijn, bovenaan staan al dan niet met label:
      • Prijs: label Inline, formaat "Basic cart price format"
      • Add to cart: label <Verborgen>, formaat *Add to cart button with quantity*
    • klik op *Opslaan*
  • Bekijk dan de view:
    • klik op "Lees verder" om naar de inhoud te linken en keer terug
    • klik op "Aan winkelwagen toevoegen" en zie dat de melding verschijnt dat het product aan de cart werd toegevoegd
According to me

  • Overzichtsnaam: Shop
  • Weergeven: Inhoud van het type Product gesorteerd volgens Titel
  • een Bootstrap Grid van Velden
  • vink aan: Een menulink aanmaken:
    • kies het menu Hoofdmenu
    • vul bij Linktekst Shop in
  • klik op Opslaan en afsluiten
  • keer terug naar de view en klik op de Instellingen van de Bootstrap Grid
    • Number of columns per views row: Auto
    • Number of columns for medium devices: 4 (ipv 3: anders worden er 3 getoond, 1 op de volgende regel, en dan weer 3, 1, enz.)
  • Toepassen (alle weergaven)
  • Opslaan
  • Voeg de nodige velden toe door naast VELDEN te klikken op Toevoegen:
    • Inhoud: Productafbeelding
      • vinkje uit bij "Een label aanmaken"
      • Link de afbeelding naar Inhoud
    • Product: Prijs
      • vinkje uit bij "Een label aanmaken"
    • Inhoud: Nid
      • vinkje aan bij Uitsluiten van weergave (de node id gaan we hieronder bij Add to cart gebruiken)
    • Inhoud: Add to cart
      • vinkje uit bij "Een label aanmaken"
      • Opmaakhulpmiddel: Add to cart button
      • CSS-klassen: leegmaken
      • RESULTATEN HERSCHRIJVEN:
        • vinkje aan bij Uitvoer van dit veld herschrijven
        • Tekst: <i class="fa fa-shopping-cart"></i> Bestel nu! (*)
        • vinkje aan bij Dit veld als een link weergeven
        • Linkpad: /cart/add/[nid]
        • Link-klasse: form-submit (afgeleid uit de developer-tools bij gewone node-weergave)
  • Naderhand heb ik ook nog een koptekst toegevoegd (o.m. om aan te geven dat er ook verzendingskosten werden aangerekend). Klik daartoe naast KOP op Toevoegen:
    • in het venster kop toevoegen kies je Algemeen: Ongefilterde tekst en klik je op Toepassen (alle weergaven)
    • bij Label vul je in CD's/DVD's, en in het tekstveld zelf de gewenste tekst - vervolgens klik je weer op Toepassen (alle weergaven)
  • klik op Opslaan
(*) De meest bezochte Belgische webshops gebruiken de volgende shop-knoppen:
  • zalando: BESTEL NU!
  • ebay: Nu Kopen
  • MediaMarkt: cart Winkelwagen
  • Vanden Borre: cart KOOP NU
  • coolblue: cart
  • Hubo: cart Bestellen
  • Fnac: basket Toevoegen aan mandje
Nu wordt alles per node netjes onder elkaar getoond:
  • Afbeelding
  • Prijs
  • link Bestel nu!
Ik zou de prijs links onder de afbeelding en de link Bestel nu! rechts onder de afbeelding willen. Dat doen we via een CSS injector.
CSS-injector pagina shop
.views-field-price, .field {
 margin-bottom: 15px;
 float: left;
}
.views-field-add-to-cart, .field {
 margin-bottom: 15px;
 float: right;
}

add on only the listed pages: shop

Verzendingskosten

Naderhand bleek dat ik de verzendingskosten was vergeten vermelden. In het Wufoo-formuliertje stond dat gewoon vermeld, maar niet berekend dus. Basic cart voorziet daar ook niet in, maar via een computed field kun je dit wel meenemen in de berekening van de totaalprijs.

We hanteren een vast tarief van 5 euro, ongeacht de grootte van de bestelling.
Module Computed Field

Installeer en activeer de module Computed Field.
Veld 'Total with shipping' toevoegen aan Inhoudstype order/bestelling
  • Structuur > Inhoudstypen > Bestelling > Velden beheren
  • Voeg een veld Total with shipping toe van het type Berekend/Computed
  • Gebruik de volgende veldinstellingen:
    • Computed Code (PHP):
$totaalprijs=$entity->field_total_price[LANGUAGE_NONE][0]['value'];
$verzendkosten=5;
$totaalmetverzendkosten=$totaalprijs+$verzendkosten;
$entity_field[0]['value'] = $totaalmetverzendkosten;
    • DATABASEOPSLAGINSTELLINGEN >
    • Gegevenssoort: decimal
    • klik op Veldinstellingen opslaan (2x)
Mails voor admin en koper aanpassen in Instellingen van Basic cart

Voeg de totaalprijs met verzendingskosten toe aan de mails voor admin en aankoper:

Bestelde producten:
[basic_cart_order:products]
Bedrag: [node:field_total_price]
Verzendingskosten: € 5,00
Totaalbedrag: € [node:field_total_with_shipping],00

More Configurations

Site Information

Instellingen > Systeem > Websitegegevens Als je zaken bestelt via de shop, ontvang je een bevestigingsmail met als afzender info. Om daar Vox Mago in de plaats te zetten, moet je het volgende bestand aanpassen:

.../includes/mail.inc
-    $headers['From'] = $headers['Sender'] = $headers['Return-Path'] = $default_from;
+    $headers['Sender'] = $headers['Return-Path'] = $default_from;
+    $headers['From'] = variable_get('site_name', 'Drupal') . ' <' . $default_from . '>';
   }
-  if ($from) {
+  if ($from && $from != $default_from) {

De aanpassing in .../modules/simpletest/tests/mail.test heb ik niet gedaan.

Bronnen:

Appearance Settings

Language Configuration

Miscellaneous

Foutmeldingen uitschakelen op live site [8'15"]

  • Instellingen > Ontwikkeling > Logberichten en foutmeldingen
  • Kies bij "Soorten foutmeldingen die worden weergegeven" de optie Geen

Statistieken / Statistics

Verwijderde CSS injector rules

Een aantal CSS injector rules werd verwijderd…
  • na het stopzetten van Drupal Commerce
  • na de kleurwijziging van donker naar licht
Je vindt ze in DeletedCSSinjectorRules.txt.

Font Awesome: upgrading from v4 to v5

nog niet uitgevoerd

<a href="../cart" hreflang="nl">Winkelwagen</a> bijgewerkt. ???
Topic revision: r104 - 06 April 2019, StijnBousard
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback