Select Page

Akeneo Visual Swatch Attribute – Webkul Blog

Kavita Singh
Published: December 29, 2022

Akeneo Visual Swatch Attribute: This module allows you to create a visual swatch attribute type that can further be used in products and product models in Akeneo.

Basic Requirements

  • This module works with Akeneo, Akeneo 6.0.x. Download Akeneo from here
  • Node and Yarn packages need to be installed.
  • Also works with Akeneo Cloud Flexibility Mode which is a PAAS Edition of Akeneo

Feature

  • Create a Visual Swatch type attribute with the options and swatch value.
  • Can upload images in options of visual swatch attribute.
  • Can select color if images are not uploaded for visual swatch attribute options.
  • Make a family variant axis for the visual swatch attribute.
  • Export Visual Swatch attribute options in CSV and XLSX.

Installation

Two different types of module installation processes are available for the module.

  1. Composer Installation
  2. Manual Installation

Installation using Composer Installation

Read This Blog

Before beginning the composer installation

1: Get the ACCESS KEYS [Create a support ticket]
2: In Akeneo composer.json, add our repository as well as the installation script.

Searching for an experienced
Akeneo Company ?
Read More


For Akeneo 6.x 

{
  "scripts": {
        "post-update-cmd": [
    "vendor/webkul/visualswatchattributebundle/src/Webkul/VisualSwatchAttributeBundle/install/config.sh COMPOSER=true NO_DOCKER=true"
        ],
        "post-install-cmd": [
           "vendor/webkul/visualswatchattributebundle/src/Webkul/VisualSwatchAttributeBundle/install/config.sh COMPOSER=true NO_DOCKER=true"
        ],
        "post-create-project-cmd": [
          "vendor/webkul/visualswatchattributebundle/src/Webkul/VisualSwatchAttributeBundle/install/config.sh COMPOSER=true NO_DOCKER=true"
       ]
   },
  "repositories": [{
    "type": "composer",
    "url": "https://akeneorepo.webkul.com/"
  }]
}

For Akeneo <=5.x 

{
  "scripts": {
        "post-update-cmd": [
           "vendor/webkul/visualswatchattributebundle/composer_install.sh"
        ],
        "post-install-cmd": [
           "vendor/webkul/visualswatchattributebundle/composer_install.sh"
        ],
        "post-create-project-cmd": [
          "vendor/webkul/visualswatchattributebundle/composer_install.sh"
       ]
   },
  "repositories": [{
    "type": "composer",
    "url": "https://akeneorepo.webkul.com/"
  }]
}

3: Use composer to install the extension.

         composer require webkul/visualswatchattributebundle

4: Complete the authentication form.
5: Send a Message of Success
6: Delete your browser’s cache.

Manual Installation for Version 6.x

  •  After unzipping the appropriate extension zip, merge the “src” folder into the akeneo project.
  • From the PIM directory, run the following command over the NO-DOCKER Instance.
./src/Webkul/VisualSwatchAttributeBundle/install/config.sh COMPOSER=false NO_DOCKER=true
  • After that run the command below over the PIM directory’s DOCKER instance.
./src/Webkul/VisualSwatchAttributeBundle/install/config.sh COMPOSER=false NO_DOCKER=false

Manual Installation for Version 4.0.x to 5.0.x

To know how to install the Akeneo Visual Swatch Attribute module in Akeneo, please follow the below steps:

1. First, unzip the respective extension zip, then merge the “src” folder into the Akeneo project root directory.

src-folder

2. Then goto config/Bundles.php then add the line:

Webkul\VisualSwatchAttributeBundle\VisualSwatchAttributeBundle::class => ['all' => true],

in return array.

3 – After that copy the “config” folder into akeneo project root directory for routing.

confi

4 – You have to navigate first to Akeneo installation directory (Ex: cd /opt/bitnami/apps/akeneo/htdocs). After SSH, you have to run the command to your Akeneo server by the terminal.

    php bin/console visualswatchattribute:setup:install;

5 – If you are using php-fpm. Then you need to restart the php-fpm services and apache web server.

For Akeneo 5

sudo service php-fpm7.4 restart

For Akeneo 4

sudo service php-fpm7.3 restart

Docker Installation Command :

For Akeneo 5

alias docker_php='docker-compose run -u www-data --rm php php';
alias docker_yarn='docker-compose run -u node --rm node yarn';
docker_php bin/console cache:clear --env=prod;
docker_php bin/console pim:installer:assets --symlink --clean --env=prod;
docker_php bin/console d:s:u --force;
docker_yarn run webpack;
docker_yarn run update-extensions;
docker_yarn run less;

For Akeneo 4

alias docker_php='docker-compose run -u www-data --rm php php';
alias docker_yarn='docker-compose run -u node --rm node yarn';
docker_php bin/console cache:clear --env=prod;
docker_php bin/console pim:installer:assets --symlink --clean --env=prod;
docker_php bin/console d:s:u --force;
docker_yarn run webpack;
docker_yarn run less;

Uninstall Module: For Akeneo 4.0.x to 5.0.x

After uninstalling the Visual Swatch Attribute Connector then you need to run the below command:(Run the following command after ssh to your akeneo server by terminal)

php bin/console d:q:s "delete from pim_catalog_attribute where attribute_type="pim_catalog_visual_swatch""

Uninstall Module: For Akeneo 6

  • From the PIM directory, run the command below over the NO-DOCKER Instance.
./src/Webkul/VisualSwatchAttributeBundle/uninstall/uninstall.sh COMPOSER=false NO_DOCKER=true
  • Run the command below over the PIM directory’s DOCKER instance.
./src/Webkul/VisualSwatchAttributeBundle/uninstall/uninstall.sh COMPOSER=false NO_DOCKER=false
  • After uninstalling the Visual Swatch Attribute Connector then you need to run the below command: (Run the following command after ssh to your akeneo server by terminal)
php bin/console d:q:s "delete from pim_catalog_attribute where attribute_type="pim_catalog_visual_swatch""

Create a Visual Swatch Attribute

So, after installing the Akeneo Visual Swatch Attribute module, log in to your dashboard in Akeneo. Next, select Settings>Attributes.

Settings-3

After that click on Create Attribute to create new attributes.

Attributes-3

Then, click the Create Attribute button. A pop-up window will appear; select Visual Swatch attribute type.

Attributes-4

After that, you have to enter the code and label to create a new attribute.

Attributes-15

In the Properties section, enter any value in Code then select any Attribute Group in which you want to assign this new visual swatch attribute.

Attributes-Create-2

Enter the table attribute label with translations and click the Save button.

A new tab labeled “Option” will appear in the attribute once you click the save button.

Attribute-Image-Visual-Swatch-Attribute-Edit

You have to enter the code of the option and label it in all locals.

In swatch once you will click on the drop-down button then you see the following option:

  • Choose a color
  • Upload a file
  • Clear
Screenshot-from-2022-12-28-13-19-07

Choose a color: The color picker will pop up once you select the option. Place your cursor in the color picker and choose the color you wish to use in the swatch.

Screenshot-from-2022-12-28-13-29-04

 

Upload a file: In this, you can select the image which you want to add to the swatch instead of images.

Clear: Once you will click on the option clear the old image or color which you have selected will be deleted.

Assign Family to Visual Swatch

You must first assign them to a Family in order to use visual swatch attributes. In the next step is to navigate to Settings>Families>Edit>Add Attributes.

Family-Accessories-Edit-6

Click the Save button after selecting your new attribute.

Family-Accessories-Edit-7

After that, you can add the attribute while creating a variant to create a variant click on variants>> add variants.

Family-Accessories-Edit-11

Fill in the details and select the variant level and variant axis level.

Note: If you have enabled the option localizable and scopable in the attribute will create the visual swatch attribute the variant will be not created.

Family-Accessories-Edit-12

Create product

After that go to Products and create a product with the same family in which you have added the visual swatch attribute.

Product-Bag-Edit-26

After that choose the swatch from the drop-down that applies to the selected products and click Save.

Product-Bag-Edit-27

By clicking the + icon, you can add any other options you may have missed to include while creating the attribute.

Product-Bag-Edit-28

Once you select the option, a new tab will open in which you must enter the code, label, and swatch that you want to add.

Product-Bag-Edit-29

Product Model:

To create a product in Akeneo, go to Navigation to Products, then click the Create button. Now, you need to choose the product type – Product Model.

Now enter the required SKU, choose a family, variant then click the Save button.

Products-10

After that, you need to provide product information according to the requirements. Then enter basic product details such as product name, description, SKU, price, etc.

Product-model-Visual-Swatch-Product-Model-Edit-4

After that, you can add variants by clicking on add variants.

Product-model-Visual-Swatch-Product-Model-Edit-5

Then select the variant which you want to add by clicking on the drop-down.

Product-model-Visual-Swatch-Product-Model-Edit-3

Then enter the code and click on the save button. A new visual swatch variant will be added.

Product-Visual-Swatch-Product-Model-Edit

If you have enabled the visual swatch attribute for use in the grid then you can check the attribute in the filter section.

Products-14

Export Job

After that to export your product data you need to create a job profile and execute it.

Job Profiles

However here you will find two different types of export job profiles for every use case:-

Export-profiles-management-17

First, go to Exports > Create Export Profile and enter a unique code, label and select a job profile

Export-profiles-management-18

After that, click the Save button to view the export job profile you created. And fill in all the detail in the export job.

Export-profile-Visual-Swatch-Attribute-Options-export-in-CSV-Edit

Export Now

After creating the export profile, click on the Export Now button. The execution of the export process will begin, and the page will refresh continually to update the information.

Export-profile-Visual-Swatch-Attribute-Options-export-in-CSV-Show

Execution Process

After that, wait for the execution process to complete and check the errors.

Process-tracker-Show-job-25

After the click on the Download Generated files, you can download the CSV files.

Screenshot-from-2022-12-28-15-23-34

Support

Thank you for reading this documentation. For any queries or doubts, reach out to us at [email protected]. You can also raise a ticket at our HelpDesk System.

Please explore our Akeneo Development Services and Quality Akeneo Extensions.

Source: webkul.com