DEEN
Show all results

Custom Products

The Plugin "Custom Products (v2)" provides you the opportunity to design articles completely customizable. This is important for all articles, whereby variants aren't sufficient. These articles can be configured individually, e.g. articles with names printed on them. The "v2" in the title of this plugin signifies that the plugin "Custom products" is available in a new version. In this documentation we would like to explain how to install and configure it as you wish.

Installation

This extension can be found in our Shopware Store, the easiest way to find a specific plugin is the search-bar. Complete the order process and login to the backend of your store. Navigate to Configuration > Plugin manager > My purchases. You need to login and click the refresh button. Your new extension is now listed and can be installed. After installing the extension go to the menu entry installed and refresh. Activate the extension. Finally delete the cache under Settings > Cache/Performance > Clear Shop Cache and refresh the backend.

Migration of the data of the first version of Custom Products

If you already used the first version of "Custom Products", your're able to migrate your groups and options to the new version. Concerning this, you can find the button "Migration" (1)

After clicking this button, the following window will be opened. All those groups are listed there, which you can carry into the new version of the plugin (1). After you choose the desired groups to migrate, you can begin it with a click on "Start migration now" (2). In the process, you can set if you'd like to hide the migration button after these steps (3).

In the ensuing overview you can control the progress and result of the migration. There, a progress bar signalizes the progress of the migration (1). In the area "Migration progress" you can see if your group were migrated successfully (2). If something happens during migration, that requires your attention, it can be examined in a concurrent log by clicking the corresponding icon (3).

If the migration was successfully, you can find your created template in the overview of the new "Custom Products" module. Concerning the settings of the orders, which was completed with the old version before: You can read the details of this orders in the internal comment of them.

Please remember at all costs to check the migration on a test system beforehand and to create a backup of your data at any rate, before starting this migration. This way, you're able to react quickly in a possible case of an error.

The first and second version of the plugin "Custom Products" can cause side effects if they're both installed at the same time. Because of this reason, please notice that the first version should be deinstalled and the chache should be cleared to ensure the functionality.

If you import or export article data, the options will not assign automatically!

The configuration of the plugin

As a first step, it might be useful to familiarise with the configuration of the plugin. Similar to the old version, some settings are required to integrate the plugin optimally. These settings are located in the plugin manager, as you open the plugin to edit or under Configuration > Basic settings > Additional Settings > Custom Products (v2).
 

At this place, you can edit the following settings:

  • Validity of the Custom Products Configurations (1) : You can define here, how long (in days) the configurations of the articles should be saved in your shop. More information about this topic can be found in the next paragraph.
  • Hide the migration button (2) : At this point, you can hide or show the migration button as you wish.

Validity of the Custom Products Configurations

In the plugin "Custom Products", the particular configurations of the articles (or the exact configuration of the articles by your customers) will be saved in your shop for a particular time. These configurations can be called up via nan alphanumeric value that's added to the link of the corresponding article. This way, the customer is able to call his configuration up and to forward it to others.

These configurations are stored in your database and can be removed after the particular timespan by the cronjob "CustomProducts Hash GarbageCollector". To define this timespan, you can use the corresponding setting.

You have to configure the cronjob first, so that it runs correctly. Thereto, the activation of the plugin "Cron" is necessary. Detailed information about the configuration and usage of Cronjobs can be found here.

First steps

When you open the plugin, the following window will be opened:
 

In this overview you can find all templates, that were created before (4). This overview will be empty of course, if you open the plugin the first time. Via the button "Add item" (1) you're able to create new templates, while using "Delete all selected" (2) will remove all selected templates. Using the search bar (3), you can find your favourite template easily. In addition, you may delete single template, open them to edit or copy them by using the corresponding icons (5).

Templates and options

The windows to create a template is divided in three areas: "Configuration"(1), "Products" (2) and "Options" (3).

Configuration

At this point, you define the basic settings of your template. These settings can be defined here:
 

  • Internal name (1): This is the internal name of the template, which is used to its identification. Therefore, it has to be unique.
  • Display name (2): Here you can set the name of the template, which will serve as the name displayed in the frontend. This name will be displaed in all articles connected to this template and in the checkout.
  • Description (3): This description can be put to use if you want to display further information in your template.
  • Image (4): At this point you can provide an image, that will be displayed in the template as well.
  • Active (5): Here it will be defined, if the template is active or not and will be shown in your article according to this.
  • Step-by-Step mode (6): In this place, you can enable the Step-by-Step mode for your template. You can find further information on this topic in the paragraph "Step-by-Step mode"
  • The user is obligated to confirm their input (7): Here you can activate the possibility of a confirmation about the correctness of the details of the customer's configuration. This means, that the customer has to confirm that his configuration and all its data is correct. Otherwise he's not able to proceed to the checkout. You can find more information about that in the corresponding paragraph of this documentation.
  • Show variants above options (8): For variant articles, you can specify here whether the variants of a product should be displayed above the options of the custom product. If the checkbox is not activated, they will be displayed under the Custom Products options.
 

In this new version, it's possible to add the articles in the Custom Products templates directly. This is implemented in the tab "Products". The following view will be provided to you:

Via the search filed (1) the desired articles can be found over their names or article numbers. Via one mouse click, you add these articles to your template.

To add an option to your template

In the third tab "Options", you can assign the options to your template and to your articles, accordingly. This way, you provide the possibility to individualize the articles. This tab is constructed as following:
 

Similar to the overview over the templates, all available option will be displayed at this point. When clicking "Add item" (1) you have the possibility to add new options to the tepmalte as well as to delete selected options via the button "Delete all selected (2)". In addition, you open your option to edit them or delete a particular option via the familiar buttons. By the way, you can edit the name of your option only by clicking it and alter the order of your options by drag and drop.

If you like to add new options, the following window will be opened, with five options of configuration:
 

At this point, you're able to set the following, first information:

  • Name (1): This name will be the title of the option, that appears in the frontend.
  • Description (2): Here you can record your description for this option.
  • Type (3): This is the type, that the option occupies. As soon as you took your pick here, further settings for your option will be loaded. More information on this option types and their possibilities can be seen in the process of this paragraph and the paragraph "Different option types".
  • Order number (4): In this field, you can define the order number of this option.
  • Required field (5): In this setting, you can determine if this option is obligatory for the customer. If this setting is active, the customer is only able to proceed to the checkout, if he already effected an input in this option.+
  • Collaps (6): The customer needs to epand the field in order to make a selection, please note that this option is only available if it's a required field (5).

Once you choose an option type, additional possibilities to configure the option will be provided. These possibilities can differ between these options. Using the example of a checkbox, the window for configuring the option looks like this:
 

  • Prices (1): In this area, you can provide the surcharges for the option. This surcharge can be defined depending on the customer group and have a particular tax rate.
  • Surcharge once (2): Which this checkbox, you can set if the surcharges should be calculated once. If you set this active, the customer has to pay the surcharge just one time, independent of the amount of the article.
  • Add (3): You create and add the values of the checkbox here. More information about this procedure are located in the paragraph "Defining values"

Different option types

Text: Using this type, you create a simple text field, in which the customer places small texts.

Text area: In option of this types, simple but more larger texts can be entered.

Number field: In this field, only numbers can be entered. For options like this, a minimum and maximum value as well as an interval can be configured.

Checkbox: With this option you can provide multiple, prefabricated possibilities to choose, which will be displayed with a checkbox in your frontend. In this case, the customer can choose one or more values.

Combobox: In this option, you can provide a menu to expand, in which the customer can choose his answer by clicking one of the entries.

Multiselect: In this display format, you can show one or more possible values to the customer, which will be presented in a multiselect. The entries in it can be selected by clicking, multiple selection is possible by using the CRTL-key while selecting.

Radio select : Via this option you can let the customer choose between various values, while allowing just one selection.

Select colour: You can configure a colour selection via this option.

Select image: At this point you can provide various image to the customer, so he can choose one or more from them. These images have to be uploaded via the media manager.

File upload: Using this type, you're able to allow your customers to upload various files. Correlating, you can decide in the backend over the size and amount of files that can be uploaded. In general, the following file types are permitted: png, jpg, jpeg, tiff, svg, gif, txt, ai, eps, pdf.

Image upload: Via this optiontype, only images can be uploaded. Similar to the file-upload, you can define the amount and size of the uploaded files.

Date field: Here you can make it possible for the customers to name a date. By the way, it's possible to configure a day interval.

Time field: Via this option type, you can provide a time input in your article. Here, it's also possible to set a timespan.

HTML editor: Using this type, you 're able to add a HTML-editor to your article, which makes a formatted text input possible.

Defining values

Some of these option types require prefectured input possibilities, between which the customer can choose later in the article. Because of this fact you get the possibility to add values in these affected options. This occurs in the following window:

  • Name (1): This is the name of the value, which will be provided as a possible choice in the frontend.
  • Order number (2): Via this field, you're able to assign an order number to the field.
  • Default value (3): If you like to set a preset value, you can define the corresponding default value here.
  • Prices (4): At this point, you can define a surcharge for your value, similar to the options.
  • Surcharge once (5): If the surcharge of the value should be calculated once, you can set this here.

Using "Apply", the value will be inherited into the option. If you want to discard the value, you can leave the window over "Cancel".

Step-by-Step Mode

You can activate the so-called "Step-by-Step mode" in your template. This brings a completely new display format along. In this mode, the configuration can be done step by step, similar to a possibility of a shopping advisor. It looks like this in the frontend:
 

The customer is able to click though the configuration gradually or rotate freely between these options. If the customer is satisfied with his configuration, he can attach it to the article by clicking "Assume configuration" and add the article to the checkout as usual.

The user is obligated to confirm their input

To protect yourself against incorrect data by the customer, the plugin provides an opportunity to let the customer confirm his inputs before he proceeds to the checkout. Therefore you can activate the setting "The user is obligated to confirm their input". In this case, the customer must confirm the correctness of his inputs. Otherwise, he is not able to continue his order.
 

Connecting the template out of the article

You can create or edit a template out of the article module as well. Therefore you find an area for Custom Products in the tab "Basic info".

If the article has already a template connected to it, this template is mentioned next to "Custom Product template" (1). Using the button "Configure now "(2), you can edit the template. If the article doesn't have a template yet, you can create one using the same button. A click on it leads you to the Custom Products module.

Custom Products in the Frontend: To buy an individual article

In this paragraph, we want to show you how this whole configuration looks like in the frontend. To show an example, we created an article and furnished it with options. Thus, a configured article can look like this in the frontend, if step-by-step mode isn't set active:
 

If you click on "Add to shopping cart", the article can be bought without configuration, as long as you didn't define any required fields. If some required fields are defines, the customer gets a hint on which inputs are missing. If surcharges are set for some options, they will be shown in the article as soon as the the customer configures the corresponding options. This overview over the prices is divided up in unit - or once prices.

After the article is configured as the customer wishes, he can add it to his shopping cart. This looks as following:
 

The separate configuration will be displayed as own positions in the shopping cart so that the customer gets the best overview over the configuration of his articles. In addition, he can open his configuration again using "Open configuration". The further checkout processes as usual.

Overview of the order positions in the backend

In the order positions of a finished order, you can read the configuration of the customer's article. Therefore you can open an overview over the selected options by clicking the Custom Products icon (1).:
 

This overview looks like the module from the following screenshot and contains all data of the customer so that the individualized article can be examined completely. Possible available files or images can be opened directly as well.
 

Order documents

In the document of the order, all options will be displayed as own positions, like it's the case in the shopping cart.

eMail-Template sORDER

Via using the corresponding variables, it's possible to add the information for Custom Products to the email template sORDER. You can examine the available variables under "Variable Information".

The following example shows a position list of an html email, in which the CustomProducts information are displayed.


 
<table width="80%" border="0" style="font-family:Arial, Helvetica, sans-serif; font-size:10px;">
    <tr>
      <td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Artikel</strong></td>
      <td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Pos.</strong></td>
      <td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Art-Nr.</strong></td>
      <td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Menge</strong></td>
      <td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Preis</strong></td>
      <td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Summe</strong></td>
    </tr>    
    
    {foreach item=details key=position from=$sOrderDetails}
    {if !$details.swag_custom_product_original_mode}
    <tr>
      <td rowspan="2" style="border-bottom:1px solid #cccccc;">
          {if $details.image.src.0 && $details.modus == 0} 
          
          <img style="height: 57px;" height="57" src="{$details.image.src.0}" alt="{$details.articlename}" />
           
          {/if}</td>
      <td>{$position+1|fill:4} </td>
      <td>{$details.ordernumber|fill:20}</td>
      <td>{$details.quantity|fill:6}</td>
      <td>{$details.price|padding:8}{$sCurrency}</td>
      <td>{$details.amount|padding:8} {$sCurrency}</td>
    </tr>
    <tr>
      <td colspan="5" style="border-bottom:1px solid #cccccc;">{$details.articlename|wordwrap:80|indent:4}          
        {if $details.custom_product_adds}
          {foreach item=custom_value key=position from=$details.custom_product_adds}
          <br><br><i><b>{$custom_value.name}: (+{{$custom_value.netPrice+$custom_value.tax}|number_format:2:",":"."} {$sCurrency}):</b><br/>{if $custom_value.type == textfield || $custom_value.type == textarea || $custom_value.type == numberfield || $custom_value.type == date || $custom_value.type == time || $custom_value.type == wysiwyg} {$custom_value.selectedValue.0}{/if}
          {if $custom_value.type == imageupload}{foreach item=image key=position from=$custom_value.values}<img width="50" height="50" src="{$image.path}"/><br/>{/foreach}{/if}
          {if $custom_value.type == multiselect || $custom_value.type == checkbox || $custom_value.type == fileupload || $custom_value.type == colorselect || $custom_value.type == radio || $custom_value.type == select}{foreach item=select key=position from=$custom_value.values} {$select.name} (+{{$select.netPrice+$select.tax}|number_format:2:",":"."} {$sCurrency})<br/>{/foreach}{/if}
          {if $custom_value.type == imageselect}{foreach item=image key=position from=$custom_value.values}<img width="50";height="50px" src="{$image.value}"/>{$image.name} (+{{$image.netPrice+$image.tax}|number_format:2:",":"."} {$sCurrency})<br/>{/foreach}{/if} 
          {/foreach}          
        {/if} 
       </td>
    </tr>
    {/if}
    {/foreach} 
  </table>
 
 

Was this article helpful?

Version

5.5 or newer

Contents