search

OxfamFairTrade / ob2c

Distributed WooCommerce network powered by WordPress Multisite.
https://shop.oxfamwereldwinkels.be
8 stars 4 forks source link

Productdetailpagina's #11

Closed freeaanzee closed 4 years ago

freeaanzee commented 4 years ago

Templatestructuur van OWW-site overnemen, maar met de afwijkende veldnamen (import aanpassen waar nodig) én enkele bijkomende elementen:

Quid related content onderaan? Via API integraal HTML opvragen uit OWW-site, eventueel m.b.v. Relevanssi? We willen vermijden dat we volledige content objecten (recepten, nieuwsberichten, ...) moeten synchroniseren met het webshopplatform. Voorlopig beperken we ons tot het tonen van enkele gelijkaardige producten (= default Woocommerce related content op basis van categorie/tags).

Vormgeving: zoals in OWW-site.

freeaanzee commented 4 years ago

Zowel de promotekst ('Voorwaarden') als de productbeschrijving ('Lees meer', indien langer dan één regel) bevatten een knop die de langere tekst doet uitklappen. Zo vermijden we dat de koopknop te veel naar onder geduwd wordt.

Kan bv. met Readmore.js geïmplementeerd worden, wordt op oww.be reeds gebruikt op enkele campagnepagina's.

Productpagina's op oww.be zullen volledig onbereikbaar worden, dus lay-out daar is niet meer van belang!

freeaanzee commented 4 years ago

Bij de labeltjes, die ook op de cataloguspagina's moeten verschijnen, zijn er 4 opties:

De extra klasses worden volgens een bepaalde logica toegevoegd aan het begin van elk productblok dat WooCommerce uitspuwt. Tot nu toe waren de labeltjes opgezet als simpele :before/:after pseudo-elementjes. Maar als er meerdere labels tegelijk actief zijn overschrijven ze elkaar en begint de miserie ... Ik stel voor om dus toch wat templating toe te voegen aan zowel single-product als loop.

mathysp commented 4 years ago

Kan je voor het stukje herkomst de markup beschikbaar maken ook?

<p class="herkomst">Herkomst: Dominicaanse Republiek, Paraguay, Sri Lanka</p>

Ik zou daar een container class op willen zetten voor de max-width.

mathysp commented 4 years ago

Voor:

Ik lijk hier in het oxfam theme geen color-value voor te vinden. Heb je een voorstel?

Deze had ik al overgenomen: $green-bio: #61a534; $yellow-new: #ffc049; $red-promo: #ff1d34;

mathysp commented 4 years ago

Paar issues die we dinsdag even moeten overlopen:

Andere zaken:

Nog @ToDo voor mij:

De rest zou in orde moeten zijn. Laatste code werd gecommit.

freeaanzee commented 4 years ago
  • 'Afhaling' => .pickup-only

Ik lijk hier in het oxfam theme geen color-value voor te vinden. Heb je een voorstel?

Dat mag het blauw zijn dat nog vermeld stond bij .product_shipping_class-breekbaar (de oude manier waarop ik dat labeltje afleidde): $see-through-blue. Wordt zichtbaar bij glazen flessen, bv. https://dev.oxfamwereldwinkels.be/producten/snacks-drinks/fruitsap/1-liter/sinaasappelsap-1-l/.

freeaanzee commented 4 years ago
  • Product teaser op homepage krijgt extra "promo" label

Ah klopt, vroeger gebruikten we een tag om promo's aan te duiden. Je mag deze lijnen wissen in _refactor.scss. Zijn overbodig geworden, en veroorzaken die dubbele verschijning.

  • Layout/Markup van product detail moet wat meer uit elkaar getrokken worden (nu kan ik de modal niet goed plaatsen, tenzij absoluut, maar dat zou ik liever vermijden)

OK, ik bekijk dat maandag. Had ook al het gevoel dat we in die wireframe iets te veel samengeduwd hebben. Daar paste het nog net, maar het is niet realistisch in de praktijk.

  • Voor het add-to-cart icon heb ik nu gewoon hetzelfde shop-2.svg icon gebruikt. Je kan nadien een ander icoon toevoegen en de background-rule aanpassen.

Perfect, dat ligt nog net binnen mijn capaciteiten 😄. (We hebben blijkbaar een iconenset, maar die moet nog in SVG's opgeknipt worden.)

freeaanzee commented 4 years ago

Kan je voor het stukje herkomst de markup beschikbaar maken ook?

<p class="herkomst">Herkomst: Dominicaanse Republiek, Paraguay, Sri Lanka</p>

Ik zou daar een container class op willen zetten voor de max-width.

Done, zit nu in product-origin.php. Ik voegde al een wrapper toe.

Ik heb de hele grijze blok nog wat opgeknipt, zodat het een pak duidelijker is waar de HTML zit (én we blokjes eenvoudiger kunnen verschuiven naar gelang de beschikbare info). Enige impact voor jou is dat je even wat margin-bottom zult moeten geven aan de nieuwe wrapper .product-info-panel (want elke p:last-child krijgt geen margin-bottom). Scusi.

De ingrediëntenlijst en partnerhighlights (onder de foto) mogen bullet points tonen vooraan.

freeaanzee commented 4 years ago

Fading effect op afgebroken productteksten is perfect, laten we dit als afgewerkt beschouwnen!