Download the PHP package setono/sylius-variant-link-plugin without Composer

Sylius Variant Link Plugin

In a standard Sylius shop it is not possible to link directly to variants. That problem is what this plugin solves.

Screenshots

Installation

Step 1: Download the plugin

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:

This command requires you to have Composer installed globally, as explained in the installation chapter of the Composer documentation.

Step 2: Enable the plugin

Then, enable the plugin by adding it to the list of registered plugins/bundles in config/bundles.php file of your project:

Step 3: Import routing

Step 4: Install assets

Step 5: Override product show template

Start by copying the file vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Resources/views/Product/show.html.twig to templates/bundles/SyliusShopBundle/Product/show.html.twig

Here are two commands that will do just that (only do this if you haven't overridden this template yet):

In the template we need three things:

1. Include a template
2. Include a javascript file
3. Run a javascript function

1. Include variant links template

Add this twig line within the content block: {% include '@SetonoSyliusVariantLinkPlugin/_variantLinks.html.twig' with {'variants': product.variants} %}

2 and 3. Include javascript file and run function

In the javascripts block append this:

See this file for an example of these three changes.

Usage

Link to a variant

See example.

View a product

If you have a product with slug product-1 which has a variant with code variant-code-1 the above twig statement will return /en_US/products/product-1/variant-code-1 on a default Sylius installation.

So try and go to that URL and you will see the respective variant is selected and the price is correct for the respective variant.

Output variant values instead of product values

On the product show page (/en_US/products/slug) the product code is outputted, but let's say you want to output the variants code instead. Then you just do it like this:

If you want to do that multiple places you can of course set the product variant like so:

Easy peasy!

Extending

I want to use something else than variant code for the URL

Let's say you have a store with clothes and you want to use the size of clothes in the URL to determine the variant. You want to end up with URLs like /en_US/products/product-1/medium.

To do this you need to implement two interfaces:

• ProductVariantFromIdentifierResolverInterface
• ProductVariantUrlGeneratorInterface

Implementing ProductVariantFromIdentifierResolverInterface

Now define the service:

Implementing ProductVariantUrlGeneratorInterface

Now define the service:

Notice that if you're using autowiring you only need the aliases.