Quicq gebruiken op een Afosto site

In dit document wordt uitgelegd hoe Quicq geactiveerd kan worden op een Afosto webshop.

Order Management Systeem


  1. Ga naar "Contract" in de Afosto app . Wanneer Quicq nog niet geactiveerd is, kan dit hier.
  2. Ga naar de "Quicq" app
  3. Ga naar "Proxies"
  4. "Toevoegen"
    1. Sleutel: een url-vriendelijke naam. Bijvoorbeeld: "henksbloemenpaleis"
    2. Routes -> Pad: "*" (default)
    3. Routes -> Uri: ga naar de Afosto webshop
      1. inspecteer een afbeelding!image (4).png
      2. kopieer de url in het "src" attribuut tot en met de string (plus trailing slash) die achter "afosto.com" staat. In dit voorbeeld: https://afosto-cdn-01.afosto.com/mczfw/
      3. Append een *
      4. Plak de waarde in het veld. https://afosto-cdn-01.afosto.com/mczfw/*
  5. De rest van de benodigde velden worden automatisch gevuld. Klik op "Opslaan"

image (2).png

Webshop platform


  1. Ga naar het portal van de betreffende shop via app.afosto.com
  2. Ga naar "Plugins"
  3. Installeer de plugin "Afbeelding optimalisatie"
  4. Ga naar de instellingen van de plugin
    1. Proxy naam: De waarde die je ingevoerd hebt bij "Sleutel" in bovenstaande stappen. In dit voorbeeld: "henksbloemenpaleis"
    2. Actief: check

image (3).png

Implementatie in het template (Twig kennis vereist)


Wanneer het om een oudere Afosto shop gaat, kan het zijn dat er aanpassingen in de code van het template gemaakt moet worden. Raadpleeg hiervoor de website beheerder. Nu Quicq actief is, worden alle afbeeldingen met een afbeeldingsfilter getransformeerd naar een gecomprimeerd formaat.

  • Ga naar de editor via "Vormgeving/huisstijl"

  • Zoek een afbeelding in een bestand. (bijvoorbeeld in macros/displays/products.twig waarin de code voor een productcard staat)

  • Kijk of de "src" of "data-src" tag de afbeeldingsfilter hebben.

    • Afbeelding zonder afbeeldingsfilter: src="{{product.image_default.thumbs.400"
    • Afbeelding met afbeeldingsfilter: src="{{product.image_default.thumbs.400|image({"w": 400, "h": 400})}}"

Een afbeelding zonder afbeeldingsfilter zal door Quicq genegeerd worden. In het tweede voorbeeld comprimeert Quicq de betreffende afbeelding in 400x400.

Er zijn drie variabelen die gevuld kunnen worden in de afbeeldingsfilter:

  1. "w" (width): De breedte van de afbeelding in cijfers zonder suffix in pixels
  2. "h" (height): De hoogte van de afbeelding in cijfers zonder suffix in pixels
  3. "c" (crop): Wanneer de afbeelding een andere resolutie heeft dan de boven gespecificeerde waarden, zal deze wanneer "1" de afbeelding bijsnijden tot de gespecificeerde grootte. De standaardwaarde is "0", waarbij de overtollige ruimte met wit gevuld wordt.

Aangezien Quicq niet functioneert zonder de afbeeldingsfilter, is het belangrijk dat alle afbeeldingen in het template voorzien worden van de filter.

Een afbeelding die klaar is voor Quicq zou er bijvoorbeeld zo uit kunnen zien:

<img src="{{product.image_default.filename|image({"w": 1920, "h": 1080, "c": 1})}}" alt="{{"Foto van"|t}} {{product.name}}" title="{{product.name}}" class="lazyload"/>