►
From YouTube: PWA Studio Community Sync 21 April, 2021
Description
Topics this week include global/theming updates, latest on wishlist and a recent PWA launch from Absolunet.
A
Then
we
want
to
allocate
some
time
for
chris
from
absolute
to
share
their
recent
launch
and
also
the
pull
request
is
prepared
for
the
desktop
optimization
of
the
layout
navigation
and
if
we
have
any
time
left
for
the
team
to
share
the
progress
on
the
wish
list.
We'll
also
do
that
so
with
that
I'd
like
to
give
a
spot
to
jimmy
to
share
what
his,
what
he's
done
with
the
centralized
theme
and
so
far,
okay.
B
Yes,
yep
cool,
so
as
you're
all
familiar
with
most
of
many
is
css
currently
looks
something
like
this
here.
We're
looking
at
the
product
full
detail
page,
it
is
generally
not
centrally
driven
right.
All
of
the
css
exists
in
css
modules,
which
are
one-to-one
with
components,
and
while
this
gives
us
a
lot
of
control,
it
avoids
you
know,
collisions
in
the
global
namespace
and
allows
us
to
lazy
load
over
time
gives
us
a
lot
of
things
we
need
in
order
to
beat
it
via
pwa.
B
It
is
not
centrally
driven,
except
for,
like
colors,
all
of
the
all
of
the
centrally
driven
css.
We
have
lives
here.
In
this
token
css
file,
and
even
that's
not
used
everywhere.
So
in
order
to
have
real,
centralized
theming,
where
you
could
change
the
whole
look
and
feel
of
the
site
from
one
place,
we
need
some
sort
of
central
config,
and
then
we
need
to
have
that
config
consulted
by
all
of
our
css
modules,
as
it
turns
out,
most
theming
systems
would
only
work
by
having
that
central
config
turn
into
a
big
css
file.
B
That
was
loaded
immediately
on
first
load
and
that's
not
going
to
work
for
us.
So
what
I've
been
exploring
as
an
alternative
is
using
tailwind
to
create
a
proof
of
concept
that
would
be
a
hybrid
approach
between
our
current
css
modules
and
something
centralized
and
driven
from
a
config
file.
So
here's
a
look
at
what
that
proof
of
concept
looks
like
just
right
now.
It's
the
it's
a
recreation
of
the
product
page
and
what
that
looks
like
on
the
code
side
is
it's
a
theme.
It
is
a
preset
in
the
language
of
tailwind.
B
B
Config
file
contains
a
number
of
plugins,
and
then
it
has
a
theme
section
where
you
essentially
define
all
of
the
styles
of
your
application,
so
colors
font,
size
line
heights
and
they're
typically
done
in
scales.
You
know
so
some
sort
of
numeric
scale
or
size
scale
and
then
the
plugins
that
you
have
can
consult
this
theme
in
order
to
get
the
configured
value
and
what
it's
going
to
do.
B
They
show
up
on
the
dom
node,
in
addition
to
the
unique
identifier
that
came
from
css
modules,
so
here
the
the
first
class
which
I've
tucked
an
emoji
into
just
so
you
can
tell
it's
the
unique
one
that
one
represents
the
unique
to
this
component,
unique
to
this
element
class
from
css
modules
and
then
the
others
right
have
been
composed
on
from
one
right.
These
are
based
on
your
theme.
B
B
A
A
C
A
D
Awesome.
Thank
you
all
right.
Let
me
get
a
screen
share
up
all
right,
so
hopefully
everyone's
seeing
the
structure
site
at
the
minute,
but
this
is
the
first
peterborough
studio
launch
we've
done
here
at
absolute
net
and
we're
actually
we're
pretty
happy
with
it.
It's
performing
pretty
well
and
client's
super
happy
so
yeah.
I
just
figured
we'll
give
a
bit
of
a
rundown
a
bit
of
a
demo
of
what
we've
built
here.
It
is
fairly
custom.
D
D
They
have,
I
don't
know
70
80
stores
across
canada
and
yeah.
We
moved
them
from
magento
one
to
magento
too,
with
pwa
studios,
so
they
get
pretty
high
traffic.
So
we
went
with
the
pwa
option
for
performance,
mainly
so
home
page
here
is
all
built
with
page
builder,
which
is
really
good,
pretty
happy
with
how
that
works.
With
the
integration
there
on
pws
studio,
we've
got
some
instagram
stuff
here.
Some
category
quick
links
as
well,
and
we've
built
these
nice
category
pages.
D
We've
integrated
the
cms
contents
in
this
box
to
the
the
header.
We've
got
light
navigation
for
desktop.
We
can
hide
and
show
that
as
well.
We've
got
video
for
products
and
we
have
stock
statuses
everywhere
as
well,
which
is
really
nice.
If
we
go
through
to
a
product
page,
for
example,
we
have
a
lot
of
different
shipping
options
here,
so
we
have
pickup
in
they've,
got
mega
store,
mega,
centers
physical
stores
and
then
in-home
delivery
and
multiple
in-home
delivery
options.
D
So
we
display
all
those
available
for
customers
here,
and
we
have
you
know,
promotional
information
around
shipping.
They
have
a
lot
of
box
issue
complexity
as
well
like
multiple
boxes
per
product,
so
we
have
an
integration
with
ship
hq
to
handle
our
logic.
There,
integration
with
reviews
as
well,
which
is
not
standard,
and
then,
if
we
go
through
to
shopping
cart,
for
example,
we've
built
the
it
was
based
on
the
original
pwa
studio
mini
cart.
D
So
we've
done
up
in
canada,
we
have
maneris
as
one
of
the
popular
payment
methods,
so
we
have
moneros
integrated
and
also
paypal
express
for
the
multiple
payment
options
there.
So
the
the
checkout
flow
is
sort
of
a
carryover
for
magento
one.
We
built
a
custom
checkout
for
them
there,
but
it
worked
really
well,
so
we
kind
of
brought
that
forward
to
m2
as
well.
D
D
D
D
Really
quick:
oh
a
couple
of
other
cool
things
we
added,
so
all
images
are
optimized
through
cloudflare,
so
we
have
cloudflare
as
our
cdn.
So
everything
goes
through
cloudflare
with
the
correct
resize
logic.
So
image
comes
from
the
back
end
of
magento
to
cloudflare.
It
gets
automatically
resized
based
on
the
device,
the
browser
whatever
and
it's
rendered
here.
D
So
we
have
list
track
for
email.
Marketing
reviews
is
native
magento
reviews,
we've
just
built
the
components
and
the
graphql
for
that
yeah
and
then
we're
not
using
a
yapo
or
bizarre
voice
or
anything
like
that.
It's
just
native
reviews
what
else
we've
got
fedex
and
canada
post
for,
but
that's
through
ship
hq
an
endless
track
and
then
instagram
as
well.
We
have
these
structured
style
tags
for
the
instagram
stuff
and
I
think
that's
it
from
an
integration
perspective.
D
E
D
D
E
Yeah
yeah!
That's
that's
really
good
thanks
for
that,
because
I
wanted
to
know
like
how
it
you
know,
pwa
like
truly
using
the
store
as
a
pwm
like
works
for
people
like
how
do
they
like
it.
It
comes
with
other
benefits,
like
you
know,
offline
capabilities
and
stuff
that
probably
you
wouldn't
get
from
the
other
app
like
another
store.
E
C
D
D
We're
not
using
the
we're,
not
caching
the
queries
in
cloudflare
we're
using
varnish,
so
we
have
the
standard
varnish
caching
around
that
and
the
obvious
drawbacks
of
with
graphically
varnish
until
they
fix
the
issues.
That's
like
logged
in
queries,
there'll
be
issues
there,
but
I
we
we
had
multiple
iterations
of
performance
improvements
on
this
project,
so
I
think
I
went
through
two
or
three
different
assessments
where
we
analyzed
the
site
during
our
development
process
and
adopted
input
like
performance
improvements
around.
D
You
know,
usage
of,
like
the
amount
of
queries
that
we're
doing
and
you're
trying
to
cut
down
on
that
kind
of
stuff.
We
have
some
improvements
coming
out
in
the
next
couple
of
weeks
around
the
mini
card
performance
at
the
minute,
we're
probably
doing
a
future
many
graphql
queries,
but
we'll
be
reducing
that
in
the
coming.
D
A
D
G
G
G
D
We've
added
a
couple
of
configuration
options.
Oh
he
can't
hear
us
right
now
a
couple
of
configuration
options,
so
the
number
of
open
filters
by
default
is
configurable,
we're
limiting
it
to
the
top
three
by
default
and
then
yeah
that
the
rest
are
going
to
be
collapsed.
Just
so,
it
doesn't
extend
too
far
down
the
page
and
it's
also
configurable,
where
we
toggle
between
show
more
show
less.
I
think
we
set
the
default
at
10,
but
if
you
want
that
five,
it's
just
a
parameter
which
you
can
change
quite
easily.
D
There's
a
few
other
things
we're
going
to
have
some
open
questions,
we'll
probably
give
the
feedback
directly
in
the
ticket
or
in
the
pr
elena.
Just
some
open
questions
around
some
like
interactivity
elements
and
things
like
that.
We've
gone
through
like
one
or
two
iterations
on
the
sort
by
best
match
button
as
well.
D
It
was
like
very
dominating
on
the
eyes,
so
we've
kind
of
like
toned
down
how
strong
it
was
because
it
kept
drawing
your
eye
away
from
like
all
the
categories
and
stuff,
because
it
was
just
sort
of
sitting
out
there
and
being
so
yeah.
It
came
together
pretty
quick,
so
I
think
we're
pretty
happy
with
how
it's
looking
so
far,
but
yeah
yeah
definitely
open
to
some
feedback,
we'll
get
the
initial
pr
in
yeah
start
getting
feedback,
but
yeah.
D
D
Yeah
and
adobe
photo
to
answer
your
question
is
we're
just
hiding
and
showing
the
elements
right
now
there
isn't
a
way
currently
in
pwa
studio,
to
like
we're,
lazy
loading,
the
components
for
the
filter,
modal
and
for
the
desktop
side,
but
there
isn't
a
way
currently
to
like
remove
things
from
the
dom
based
on
the
window
size.
That
would
be
great
right.
E
D
It's
the
same:
it's
a
limitation
that
was
identified
with
the
mega
menu
implementation,
because
if
you
look
at
menu
mega
menu,
there's
always
the
mega
menu,
dom
elements
and
the
mobile
nav
dom
elements.
So
it's
basically
the
same
problem
we
have
here
and
it's
a
bigger
issue
that
needs
to
be
solved
in
pwa
studio.
H
D
D
B
Cool
yeah,
I
mean,
I
think
it
looks
great.
I
think
it's
it's
definitely
like,
as
it
should
be
to
have
those
filters
exposed
on
desktop
you
know,
but
but
yeah
if
you're,
if
you're
looking
for
help,
you
know
on
a
way
to
unmount,
you
know
at
various
resolutions.
I
think
that
there
are
ways
we
can
do
that.
So
if
there's
a
pr
or
something
like
that,
I'd
be
happy
to
take
a
look
and
add
some
comments.