Menu Close

    Akeneo Visual Swatch Attribute

    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 click on the option “clear,” the old image or color that you have selected will be deleted.

    Sort automatically options by alphabetical order: Once you will enable this option all the options will be listed in alphabetical order.

    Attribute-Color-Type-Visual-Swatch-Attribute-English-Edit

    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, locale-specific and scopable in the attribute will create the visual swatch attribute the variant will not be 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-30

    Once you will click on the save button you will see the new option in the list.

    Product-Bag-Edit-31

    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 Profiles

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

    • Attribute option export in CSV
    • Attribute option export in XLSX
    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-26

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

    After clicking on “Download Generated Files,” you can download the CSV files. Similarly, you can export the attribute in the XLSX file

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

    Once you click on “Download the generated archive,” you can download the visual swatch’s images.

    Process-tracker-Show-job-27

    Downloaded image file along with CSV as well XLSX file.

    file

    Once you will click on the files folder you will find all the images.

    Screenshot-from-2023-01-03-12-17-38-1

    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.

    Current Product Version - 1.0.0

    Supported Framework Version - 4.x.x & 5.x.x & 6.x.x

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Table of Content