Idea of multiple theme on a single channel in Sylius - symfony

Question

For my project I was in need of multiple theme designs for different devices, but in one channel now, can select just one theme.
For example,
If I have channel "Japan" which sell in Japan, I want multiple themes for each devices : mobile, tablet and PC. So users will see the theme depend on their device.
I need some ideas about creating multiple theme/style for different devices with single channel.
So, Any ideas?

Answer 1

Okay, so the service that is responsible for the current theme is the sylius.context.theme service. If you use Sylius full stack, then the ChannelBasedThemeContext will be used (see: https://github.com/Sylius/SyliusCoreBundle/blob/master/Theme/ChannelBasedThemeContext.php). As you can see in it’s source code, it simply finds a theme you have installed by theme themeName property on the current channel. Knowing this, we can implement our own by implementing ThemeContextInterface. Because in your case you probably want to fall back to the default behaviour when the theme japan_mobile does not exist, we are gonna decorate the sylius.context.theme service, instead of replacing it!
So let’s start by creating Acme\AppBundle\Theme\DeviceBasedThemeContext:
namespace Acme\AppBundle\Theme\DeviceBasedThemeContext;
use Sylius\Bundle\ThemeBundle\Context\ThemeContextInterface;
use Sylius\Bundle\ThemeBundle\Repository\ThemeRepositoryInterface;
use Sylius\Component\Channel\Context\ChannelContextInterface;
use Sylius\Component\Channel\Context\ChannelNotFoundException;
use Sylius\Component\Core\Model\ChannelInterface;
final class DeviceBasedThemeContext implements ThemeContextInterface
{
/**
* #var ThemeContextInterface
*/
private $decoratedThemeContext;
/**
* #var ChannelContextInterface
*/
private $channelContext;
/**
* #var ThemeRepositoryInterface
*/
private $themeRepository;
/**
* #param ThemeContextInterface $decoratedThemeContext
* #param ChannelContextInterface $channelContext
* #param ThemeRepositoryInterface $themeRepository
*/
public function __construct(
ThemeContextInterface decoratedThemeContext,
ChannelContextInterface $channelContext,
ThemeRepositoryInterface $themeRepository
) {
$this->decoratedThemeContext = $decoratedThemeContext;
$this->channelContext = $channelContext;
$this->themeRepository = $themeRepository;
}
/**
* {#inheritdoc}
*/
public function getTheme()
{
try {
/** #var ChannelInterface $channel */
$channel = $this->channelContext->getChannel();
$deviceThemeName = $channel->getThemeName().’_’.$this->getDeviceName();
// try to find a device specific version of this theme, if so, it will use that one
if ($theme = $this->themeRepository->findOneByName($deviceThemeName) {
return $theme;
}
// fallback to use the default theme resolving logic
return $this->decoratedThemeContext->getTheme();
} catch (ChannelNotFoundException $exception) {
return null;
} catch (\Exception $exception) {
return null;
}
}
private function getDeviceName()
{
// here you should return the proper device name
return ‘mobile’;
}
}
Now that we have the theme context finished, we have to make the service container recognise it, we are doing that by decorating the existing sylius.theme.context service (a.k.a. the ChannelBasedThemeContext).
So in your services.xml add the following service:
<service id="acme.context.theme.device_based" class="Acme\AppBundle\Theme\DeviceBasedThemeContext"
decorates=“sylius.theme.context”>
<argument type=“service” id=“acme.context.theme.device_based.inner”/>
<argument type=“service” id=“sylius.context.channel”/>
<argument type=“service” id=“sylius.repository.theme”/>
</service>
And you are done! If you clear your caches it should now try to load japan_mobile first, if it does not exist it will simply load the japan theme (giving that the current channel has japan as its theme name).
I hope this is a clear enough instruction to help get you going, for injecting a service that can detect a proper device name is not so hard to do I guess, but if you can’t figure it out let me know and I will extend this by implementing that too.