Étiquette : options

[Magento 2] Créer des Swatches (ou échantillons) pour afficher toutes les options et prix d’un produit configurable dans la liste des catégories et des produits

11/02/2020 / admin

Testé fonctionnel Magento 2.3!

Ressources en ligne m’ayant permises d’arriver à mes fins:

La documentation officielle de Magento 2 sur la création de Swatches (échantillons)
Want to display price in configurable products each options in magento 2 qui donne une bonne partie de la solution côté code, mais qui a nécessité encore quelques adaptations
Un peu de documentation sur les méthodes parseInt() et sa remplaçante dans ma solution parseFloat()
How to replace all dots in a string using JavaScript?

Créer un produit configurable

A la création des configurations, vous allez créer un attribut dont le type d’entrée catalogue pour le propriétaire de la boutique sera Texte échantillon (Text Swatches). Ceci permettra d’afficher les différentes options de votre produit configurable comme Magento 2 le fait pour les couleurs par exemple.

Boutiques > Produit [Attributs]
Propriétés > Propriétés de l’attribut:
Type d’entrée catalogue pour le propriétaire de la boutique: Texte échantillon
Propriétés > Gérer les échantillons (valeurs de votre attribut) > ajouter des échantillons. Attention: la valeur saisie dans le champ « Admin » sera celle affichée en front (?!)

Propriétés du front office > Propriétés du front office

Utiliser dans la navigation par filtres: Filtrable (avec résultats)

Visible sur les pages du catalogue de la boutique: Oui

Utiliser dans les listes de produits: Oui

Utiliser pour le tri des listes produits: Oui

Remarque importante: la visibilité pour chacune de vos configuration doit être sur Non visible individuellement.

Modifier le fichier `vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js`

Archive contenant le fichier final modifié: swatch-renderer.

NDLA: pardon pour ce contenu moitié anglais/moitié français repris en partie de ce post sur StackOverflow. Et attention car je n’ai pas repris ligne pour ligne les directives données dans ce dit post. J’ai amélioré le code notamment sur certains aspects que je décris au moment venu.

Dans Magento 2, la gestion des différentes options/swatches/échantillons des produits configurables se fait via javaScript, dans ce fichier plus précisément: vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js. Il faudra donc commencer par le surcharger dans app/design/frontend/Vendor/default/Magento_Swatches/web/js/swatch-renderer.js.

Dans ce fichier, les valeurs de chaque échantillon sont générées via la fonction _RenderSwatchOptions.

Modification #1: `_RenderSwatchOptions` do not get data of $widget veriable. So, I have make below change.

Avant:

_RenderSwatchOptions: function (config, controlId)

1	_RenderSwatchOptions: function (config, controlId)

Après modification:

_RenderSwatchOptions: function (config, controlId, $widget)

1	_RenderSwatchOptions: function (config, controlId, $widget)

Change #2: search with `_RenderSwatchOptions` and change argument from where this function call from `swatch-renderer.js` file

Avant:

options = $widget._RenderSwatchOptions(item, controlLabelId),

1	options = $widget._RenderSwatchOptions(item, controlLabelId),

Après modification:

options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),

1	options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),

Change #3: Now I can get the value of $widget object in to `_RenderSwatchOptions` function but not abel to get price value of options.

So, to add option id wise price please add below code below the line change which applied in #2.

Avant:

var item = this,
controlLabelId = 'option-label-' + item.code + '-' + item.id,
options = $widget._RenderSwatchOptions(item, controlLabelId),

var item = this,

controlLabelId = 'option-label-' + item.code + '-' + item.id,

options = $widget._RenderSwatchOptions(item, controlLabelId),

Après modification… De nombreux axes d’amélioration du code trouvé sur StackOverflow ici:

Le prix retourné était un nombre entier (pour un prix de 12,50 € renseigné en backoffice, c’est la valeur 12 s’affichait) à cause de l’utilisation de la méthode parseInt() (qui renvoie seulement un entier) que j’ai remplacé par la méthode parseFloat() (qui renvoie également les décimales). J’ai également utilisé la méthode toFixed(2) avec une valeur de « 2 » pour afficher deux chiffres après la virgule.
Le prix retourné via la méthode parseFloat() séparait les décimales avec un caractère . au lieu d’une virgule. J’ai donc mis en place un remplacement automatique via la méthode replace (replace(/\./g,',').

$.each(this.options.jsonConfig.attributes, function () {
    var item = this;

    $widget.optionsMap[item.id] = {};

    // Aggregate options array to hash (key => value)
    $.each(item.options, function () {
        if (this.products.length > 0) {
            $widget.optionsMap[item.id][this.id] = {
                price: parseFloat(
                    $widget.options.jsonConfig.optionPrices[this.products[0]].finalPrice.amount, 10
                ).toFixed(2).replace(/\./g,','),
                products: this.products
            };
        }
    });

    var controlLabelId = 'option-label-' + item.code + '-' + item.id,
        options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),
        select = $widget._RenderSwatchSelect(item, chooseText),
        input = $widget._RenderFormInput(item),
        listLabel = '',
        label = '';

$.each(this.options.jsonConfig.attributes, function () {

var item = this;

$widget.optionsMap[item.id] = {};

// Aggregate options array to hash (key => value)

$.each(item.options, function () {

if (this.products.length > 0) {

$widget.optionsMap[item.id][this.id] = {

price: parseFloat(

$widget.options.jsonConfig.optionPrices[this.products[0]].finalPrice.amount, 10

).toFixed(2).replace(/\./g,','),

products: this.products

};

}

});

var controlLabelId = 'option-label-' + item.code + '-' + item.id,

options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),

select = $widget._RenderSwatchSelect(item, chooseText),

input = $widget._RenderFormInput(item),

listLabel = '',

label = '';

Change #4: Add price div into `_RenderSwatchOptions` function.

My attribute is swatch options with type = text. So, I made below changes.

Avant:

if (type === 0) {
    // Text
    html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +    
        '</div>';
}

if (type === 0) {

// Text

html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +

'</div>';

}

Après modification… Un tout petit axe d’amélioration du code trouvé sur StackOverflow ici:

J’ai rajouté la devise €, mais de façon totalement fixe (pas récupérée dynamiquement). C’est encore un axe d’amélioration.

if (type === 0) {
    // Text
    html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +
        '<div class="custom-option-price">' + $widget.optionsMap[config.id][id]['price'] + ' €</div>'+
        '</div>';
} else if (type === 1) {

if (type === 0) {

// Text

html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +

'<div class="custom-option-price">' + $widget.optionsMap[config.id][id]['price'] + ' €</div>'+

'</div>';

} else if (type === 1) {

[Gulp] Passer des options pour lancer des tâches spécifiques suivant l’environnement (–dev –prod par exemple) avec yargs et gulp-if

19/10/2017 / admin

Source: Is it possible to pass a flag to Gulp to have it run tasks in different ways?

Yargs

Gulp doesn’t offer any kind of util for that, but you can use one of the many command args parsers. I like yargs. Should be:

var argv = require('yargs').argv;

gulp.task('my-task', function() {
    return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)
        .pipe(sass({style:'nested'}))
        .pipe(autoprefixer('last 10 version'))
        .pipe(concat('style.css'))
        .pipe(gulp.dest(options.SCSS_DEST));
});

var argv = require('yargs').argv;

gulp.task('my-task', function() {

return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)

.pipe(sass({style:'nested'}))

.pipe(autoprefixer('last 10 version'))

.pipe(concat('style.css'))

.pipe(gulp.dest(options.SCSS_DEST));

});

Combinaison de Yargs et de Gulp-if

You can also combine it with gulp-if to conditionally pipe the stream, very useful for dev vs. prod building:

var argv = require('yargs').argv,
    gulpif = require('gulp-if'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify');

gulp.task('my-js-task', function() {
  gulp.src('src/**/*.js')
    .pipe(concat('out.js'))
    .pipe(gulpif(argv.production, uglify()))
    .pipe(gulpif(argv.production, rename({suffix: '.min'})))
    .pipe(gulp.dest('dist/'));
});

var argv = require('yargs').argv,

gulpif = require('gulp-if'),

rename = require('gulp-rename'),

uglify = require('gulp-uglify');

gulp.task('my-js-task', function() {

gulp.src('src/**/*.js')

.pipe(concat('out.js'))

.pipe(gulpif(argv.production, uglify()))

.pipe(gulpif(argv.production, rename({suffix: '.min'})))

.pipe(gulp.dest('dist/'));

});

And call with gulp my-js-task or gulp my-js-task --production.

Remarque: selon les cas, on peut vouloir n’exécuter une tâche que dans le cas ou l’argument --dev n’a pas été précisé. Il suffit de mettre un caractère ! (signifiant « différent de ») devant la condition:

.pipe(plugins.if(!argv.dev, plugins.uglify()))

1	.pipe(plugins.if(!argv.dev, plugins.uglify()))

Autre alternative (moins pratique, mais qui fonctionne aussi) : gulp-options.

[Gulp] Stocker ses options de configuration dans un fichier JSON externe surveillé (gulp watch)

31/03/2017 / admin

Sources :

Doc officielle à propos des fichiers externes de configuration au format JSON : Gulp recipes – Using external config file
M’a donné la solution : Gulp Minify & Concat Javascript
M’ont seulement mis sur la voie : Javascript: get package.json data in gulpfile.js, How To Keep Your Gulp Configuration Options In A JSON File
How to Simplify Your Development Workflow with Gulp

Problématique :

Ce message laissé sur Stack Overflow. J’utilise Gulp pour minifier 2 types bien distincts de fichiers JS :

L’ensemble des fichiers JS stockés dans un dossier ./src/js qui sont des plugins custom écrits spécifiquement pour les besoins du projet ou des vendor (ou « third-party ») plugins surchargés et modifiés spécifiquement pour les besoins du projets.

Une sélection de fichiers JS stockés dans un dossier ./src/vendor/[...] qui sont des vendor plugins que je souhaite utiliser en l’état, sans les modifier (composant Bootstrap, Modernizr, ou autre…).

J’utilise un fichier de configuration externe gulpconf.json pour (notamment) constituer une liste de chemins vers les third-party plugins que je souhaite ajouter aux sources de mon projet. Ce fichier ressemble à ceci :

{
  "js" : {
    "vendor" : [
      "./src/vendor/browser-detection/src/browser-detection.js",
      "./src/vendor/foundation/js/foundation.js",
      "./src/vendor/modernizr/lib/metadata.js",
      "./src/vendor/jquery-mobile/js/events/navigate.js",
      "./src/vendor/jquery-mobile/js/events/touch.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.autocomplete.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.effect-clip.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.effect-bounce.js"
    ]
  }
}

{

"js" : {

"vendor" : [

"./src/vendor/browser-detection/src/browser-detection.js",

"./src/vendor/foundation/js/foundation.js",

"./src/vendor/modernizr/lib/metadata.js",

"./src/vendor/jquery-mobile/js/events/navigate.js",

"./src/vendor/jquery-mobile/js/events/touch.js",

"./src/vendor/jquery-ui/ui/jquery.ui.autocomplete.js",

"./src/vendor/jquery-ui/ui/jquery.ui.effect-clip.js",

"./src/vendor/jquery-ui/ui/jquery.ui.effect-bounce.js"

]

}

Le problème est que lorsque je lance ma tâche gulp watch, des modifications (typiquement, l’ajout d’un chemin vers un nouveau vendor plugin que je souhaite ajouter à mon projet) sont détectées dans mon fichier de config mais elles ne sont pas appliquées. Exemple des logs que j’obtiens :

[09:26:53] File /home/cms/project/themes/starter/gulpconf.json was changed
[09:26:53] Starting 'clear_vendor_cache'...
[09:26:53] Finished 'clear_vendor_cache' after 1.56 ms
[09:26:53] Starting 'js'...
[09:26:53] Finished 'js' after 4.67 ms

[09:26:53] File /home/cms/project/themes/starter/gulpconf.json was changed

[09:26:53] Starting 'clear_vendor_cache'...

[09:26:53] Finished 'clear_vendor_cache' after 1.56 ms

[09:26:53] Starting 'js'...

[09:26:53] Finished 'js' after 4.67 ms

Solution :

A partir du JSON fourni plus haut, dans le gulpfile.js placer ces différentes parties :

var appFiles = {
  scripts: [paths.scripts.src + '*.js', './gulpconf.json']
};

var appFiles = {

scripts: [paths.scripts.src + '*.js', './gulpconf.json']

};

var fs = require('fs');
var gulpconf = "./gulpconf.json";

1 2	var fs = require('fs'); var gulpconf = "./gulpconf.json";

gulp.task('js:vendor',function(){
  var json = JSON.parse(fs.readFileSync(gulpconf)),
  vendorjs = json.js.vendor;

  gulp.src(vendorjs)
    .pipe(plugins.uglify())
    .pipe(plugins.rename(function(opt) {
      opt.basename = opt.basename.replace(/\./g,'-');
      return opt;
    }))    
    .pipe(plugins.size())
    .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('js:custom', function() {
  gulp.src(paths.scripts.src + '*.js')
    .pipe(plugins.uglify())
    .pipe(plugins.rename(function(opt) {
      opt.basename = opt.basename.replace(/\./g,'-');
      return opt;
    }))    
    .pipe(plugins.size())
    .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('js:vendor',function(){

var json = JSON.parse(fs.readFileSync(gulpconf)),

vendorjs = json.js.vendor;

gulp.src(vendorjs)

.pipe(plugins.uglify())

.pipe(plugins.rename(function(opt) {

opt.basename = opt.basename.replace(/\./g,'-');

return opt;

}))

.pipe(plugins.size())

.pipe(gulp.dest(paths.scripts.dest));

});

gulp.task('js:custom', function() {

gulp.src(paths.scripts.src + '*.js')

.pipe(plugins.uglify())

.pipe(plugins.rename(function(opt) {

opt.basename = opt.basename.replace(/\./g,'-');

return opt;

}))

.pipe(plugins.size())

.pipe(gulp.dest(paths.scripts.dest));

});

gulp.task('watch', ['sprite:svg', 'style', 'js:vendor', 'js:custom'], function(){
  gulp.watch('./src/images/sprites/svg/*.svg', ['sprite:svg']);
  gulp.watch(appFiles.styles, ['style']).on('change', function(evt) {
    changeEvent(evt);
  });
  gulp.watch(appFiles.scripts, ['js:vendor', 'js:custom']).on('change', function(evt) {
    changeEvent(evt);
  });
  gulp.watch(paths.sprite.src, ['sprite']).on('change', function(evt) {
    changeEvent(evt);
  });
});

gulp.task('watch', ['sprite:svg', 'style', 'js:vendor', 'js:custom'], function(){

gulp.watch('./src/images/sprites/svg/*.svg', ['sprite:svg']);

gulp.watch(appFiles.styles, ['style']).on('change', function(evt) {

changeEvent(evt);

});

gulp.watch(appFiles.scripts, ['js:vendor', 'js:custom']).on('change', function(evt) {

changeEvent(evt);

});

gulp.watch(paths.sprite.src, ['sprite']).on('change', function(evt) {

changeEvent(evt);

});

Articles récents

Catégories

Archives

Méta

Étiquette : options

[Magento 2] Créer des Swatches (ou échantillons) pour afficher toutes les options et prix d’un produit configurable dans la liste des catégories et des produits

Créer un produit configurable

Modifier le fichier `vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js`

Modification #1: `_RenderSwatchOptions` do not get data of $widget veriable. So, I have make below change.

Change #2: search with `_RenderSwatchOptions` and change argument from where this function call from `swatch-renderer.js` file

Change #3: Now I can get the value of $widget object in to `_RenderSwatchOptions` function but not abel to get price value of options.

Change #4: Add price div into `_RenderSwatchOptions` function.

[Gulp] Passer des options pour lancer des tâches spécifiques suivant l’environnement (–dev –prod par exemple) avec yargs et gulp-if

Yargs

Combinaison de Yargs et de Gulp-if

[Gulp] Stocker ses options de configuration dans un fichier JSON externe surveillé (gulp watch)

Problématique :

Solution :

Créer un produit configurable

Modifier le fichier vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

Modification #1: _RenderSwatchOptions do not get data of $widget veriable. So, I have make below change.

Change #2: search with _RenderSwatchOptions and change argument from where this function call from swatch-renderer.js file

Change #3: Now I can get the value of $widget object in to _RenderSwatchOptions function but not abel to get price value of options.

Change #4: Add price div into _RenderSwatchOptions function.

Yargs

Combinaison de Yargs et de Gulp-if

Problématique :

Solution :

Modifier le fichier `vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js`

Modification #1: `_RenderSwatchOptions` do not get data of $widget veriable. So, I have make below change.

Change #2: search with `_RenderSwatchOptions` and change argument from where this function call from `swatch-renderer.js` file

Change #3: Now I can get the value of $widget object in to `_RenderSwatchOptions` function but not abel to get price value of options.

Change #4: Add price div into `_RenderSwatchOptions` function.