Getting Start with Add Image Field in Akeneo !!
In Akeneo PIM, If you want to render the custom image field in product edit form, you need to create a new field. We will go through each step needed to achieve this task.
Supported Extensions: JPG, JPEG, GIF, PNG
Step1 :
Before rendering the image field you require to create image field module in public/js/product/form directory. after then you must register it in file requireJs.yml which present in your bundle directory Resources/config.
imageField.js
'use strict';
/*
* /src/Webkul/ExampleBundle/Resources/public/js/product/form/imageField.js
*/
define([
'jquery',
'pim/field',
'underscore',
'routing',
'pim/attribute-manager',
'webkul/template/field/media',
'pim/dialog',
'oro/mediator',
'oro/messenger',
'pim/media-url-generator',
'jquery.slimbox'
],
function ($, Field, _, Routing, AttributeManager, fieldTemplate, Dialog, mediator, messenger, MediaUrlGenerator) {
return Field.extend({
fieldTemplate: _.template(fieldTemplate),
events: {
'change .edit .field-input:first input[type="file"]': 'updateModel',
'click .clear-field': 'clearField',
'click .open-media': 'previewImage'
},
uploadContext: {},
renderInput: function (context) {
return this.fieldTemplate(context);
},
getTemplateContext: function () {
return Field.prototype.getTemplateContext.apply(this, arguments)
.then(function (templateContext) {
templateContext.inUpload = !this.isReady();
templateContext.mediaUrlGenerator = MediaUrlGenerator;
return templateContext;
}.bind(this));
},
renderCopyInput: function (value) {
return this.getTemplateContext()
.then(function (context) {
var copyContext = $.extend(true, {}, context);
copyContext.value = value;
copyContext.context.locale = value.locale;
copyContext.context.scope = value.scope;
copyContext.editMode = 'view';
copyContext.mediaUrlGenerator = MediaUrlGenerator;
return this.renderInput(copyContext);
}.bind(this));
},
updateModel: function () {
if (!this.isReady()) {
Dialog.alert(_.__(
'pim_enrich.entity.product.info.already_in_upload',
{'locale': this.context.locale, 'scope': this.context.scope}
));
}
var input = this.$('.edit .field-input:first input[type="file"]').get(0);
if (!input || 0 === input.files.length) {
return;
}
var formData = new FormData();
formData.append('file', input.files[0]);
this.setReady(false);
this.uploadContext = {
'locale': this.context.locale,
'scope': this.context.scope
};
$.ajax({
url: Routing.generate('pim_enrich_media_rest_post'),
type: 'POST',
data: formData,
contentType: false,
cache: false,
processData: false,
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', this.handleProcess.bind(this), false);
}
return myXhr;
}.bind(this)
})
.done(function (data) {
this.setUploadContextValue(data);
this.render();
}.bind(this))
.fail(function (xhr) {
var message = xhr.responseJSON && xhr.responseJSON.message ?
xhr.responseJSON.message :
_.__('pim_enrich.entity.product.error.upload');
messenger.enqueueMessage('error', message);
})
.always(function () {
this.$('> .akeneo-media-uploader-field .progress').cuploaderandmoverakeneoss({opacity: 0});
this.setReady(true);
this.uploadContext = {};
}.bind(this));
},
clearField: function () {
this.setCurrentValue({uploaderandmoverakeneo
filePath: null,
originalFilename: null
});
this.render();
},
handleProcess: function (e) {
if (this.uploadContext.locale === this.context.locale &&
this.uploadContext.scope === this.context.scope
) {
this.$('> .akeneo-media-uploader-field .progress').css({opacity: 1});
this.$('> .akeneo-media-uploader-field .progress .bar').css({
width: ((e.loaded / e.total) * 100) + '%'
});
}
},
previewImage: function () {
var mediaUrl = MediaUrlGenerator.getMediaShowUrl(this.getCurrentValue().data.filePath, 'preview');
if (mediaUrl) {
$.slimbox(mediaUrl, '', {overlayOpacity: 0.3});
}
},
setUploadContextValue: function (value) {
var productValue = AttributeManager.getValue(
this.model.get('values'),
this.attribute,
this.uploadContext.locale,
this.uploadContext.scope
);
productValue.data = value;
mediator.trigger('pim_enrich:form:entity:update_state');
}
});
}
);
Step 2:
After Creating the js module you must create image field template in public/templates/product directory. After then it is also required to register in Requirejs.yml file.
imageField.html
<div class="AknMediaField <%- value && value.data && value.data.filePath ? 'has-file' : '' %>" >
<% if (!value || !value.data || value.data.filePath === null) { %>
<input class="AknMediaField-fileUploaderInput" id="<%- fieldId %>" type="file" data-locale="<%- locale %>" data-scope="<%- scope %>" <%- editMode === 'view' ? 'disabled' : '' %>/>
<div class="AknMediaField-emptyContainer">
<span title="upload icon" class="AknMediaField-uploadIcon"/>
<span><%- _.__('pim_enrich.entity.product.media.upload')%></span>
</div>
<% } else { %>
<div class="AknMediaField-preview preview">
<% mediaThumbnailUrl = mediaUrlGenerator.getMediaShowUrl(value.data.filePath, 'thumbnail_small') %>
<% mediaPreviewUrl = mediaUrlGenerator.getMediaShowUrl(value.data.filePath, 'preview') %>
<% mediaDownloadUrl = this.getMediaDownloadUrl(value.data.filePath) %>
<% if ('pim_catalog_image' === attribute.type && null != mediaThumbnailUrl) { %>
<div class="AknMediaField-thumb file"><img src="<%- mediaThumbnailUrl %>" class="AknMediaField-image"/></div>
<% } else { %>
<div class="AknMediaField-thumb file">
<span title="upload icon" class="AknMediaField-uploadIcon"/>
</div>
<% } %>
<div class="AknMediaField-info info">
<div class="filename" title="<%- value.data.originalFilename %>"><%- value.data.originalFilename %></div>
<div class="AknButtonList AknButtonList--centered actions">
<% if ('pim_catalog_image' === attribute.type && null != mediaPreviewUrl) { %>
<span class="AknButtonList-item AknIconButton AknIconButton--grey open-media"><i class="icon icon-eye-open"></i></span>
<% } %>
<a href="<%- mediaDownloadUrl %>" class="AknButtonList-item AknIconButton AknIconButton--grey download-file" download><i class="icon icon-cloud-download"></i></a>
<span class="AknButtonList-item AknIconButton AknIconButton--grey clear-field <%- editMode === 'view' ? 'AknIconButton--hide' : '' %>"><i class="icon icon-trash"></i></span>
</div>
</div>
</div>
<% } %>
<div class="AknMediaField-progress AknProgress AknProgress--micro progress">
<div class="AknProgress-bar bar"></div>
</div>
</div>
Step 3:
Now we need to register both above files in the requirejs configuration file:
# src/webkul/ExampleBundle/Resources/config/requirejs.yml
config:
paths:
webkul/product/form/imagefield: webkul/js/product/form/imageField.js
webkul/template/product/imagefield: webkul/templates/product/form/imageField.html
Step 4:
Now add it to form:
After creating the js module and image field template now create form extension to add the field. in the directory resources/config/form_extensions
# src/webkul/ExampleBundle/Resources/config/form_extensions/product_edit.yml
extensions:
pim-product-edit-form-export-csv: # The form extension code (can be whatever you want)
module: webkul/product/form/imagefield # The requirejs module we just created
parent: pim-product-edit-form # The parent extension in the form where we want to be registered
targetZone: container
position: 90 # The extension position (lower will be first)
After adding it to the form extension you must clear the cache using following commands in terminal.
1. php bin/console c:c –env=prod
2. rm -rf ./var/cache/** && php bin/console pim:install:asset –env=prod && php bin/console assets:install web –symlink && yarn run webpack
After the refresh your web browser you will found new image field in product edit form.
Be the first to comment.