Mois : janvier 2015

[Magento] Afficher l’ensemble des propriétés d’un objet

Exemple : l’objet $item est appelé dans le template summary.phtml.
Ce tableau stocke et permet d’afficher tout un ensemble d’informations sur un produit ajouté au panier.

Pour afficher les propriétés de l’objet $item :

Résultat en front :

Array
(
[item_id] => 70
[quote_id] => 51
[created_at] => 2015-01-30 09:08:42
[updated_at] => 2015-01-30 09:08:42
[product_id] => 2
[store_id] => 1
[parent_item_id] =>
[is_virtual] => 0
[sku] => test_b_produit
[name] => testB
[description] =>
[applied_rule_ids] =>
[additional_data] =>
[free_shipping] =>
[is_qty_decimal] => 0
[no_discount] => 0
[weight] => 10.0000
[qty] => 1
[price] => 8
[base_price] => 8
[custom_price] =>
[discount_percent] => 0
[discount_amount] => 0
[base_discount_amount] => 0
[tax_percent] => 0
[tax_amount] => 0
[base_tax_amount] => 0
[row_total] => 8
[base_row_total] => 8
[row_total_with_discount] => 0.0000
[row_weight] => 10
[product_type] => simple
[base_tax_before_discount] =>
[tax_before_discount] =>
[original_custom_price] =>
[redirect_url] =>
[base_cost] =>
[price_incl_tax] => 8
[base_price_incl_tax] => 8
[row_total_incl_tax] => 8
[base_row_total_incl_tax] => 8
[hidden_tax_amount] => 0
[base_hidden_tax_amount] => 0
[gift_message_id] =>
[weee_tax_disposition] => 0
[weee_tax_row_disposition] => 0
[base_weee_tax_disposition] => 0
[base_weee_tax_row_disposition] => 0
[weee_tax_applied] => a:0:{}
[weee_tax_applied_amount] => 0
[weee_tax_applied_row_amount] => 0
[base_weee_tax_applied_amount] => 0
[base_weee_tax_applied_row_amnt] =>
[stock_id] => 1
[image_url] =>
[image] => /c/h/charlotte-pirroni-miss-cote-dazur.jpg
[qty_options] => Array
(
)

[product] => Array
(
[entity_id] => 2
[entity_type_id] => 4
[attribute_set_id] => 4
[type_id] => simple
[sku] => test_b_produit
[has_options] => 0
[required_options] => 0
[created_at] => 2014-11-24 13:36:52
[updated_at] => 2014-12-10 15:07:46
[name] => testB
[image] => /c/h/charlotte-pirroni-miss-cote-dazur.jpg
[small_image] => /c/h/charlotte-pirroni-miss-cote-dazur.jpg
[thumbnail] => /c/h/charlotte-pirroni-miss-cote-dazur.jpg
[url_key] => testb
[url_path] => testb.html
[msrp_enabled] => 2
[msrp_display_actual_price_type] => 4
[gift_message_available] =>
[status] => 1
[visibility] => 4
[tax_class_id] => 0
[is_recurring] => 0
[weight] => 10.0000
[price] => 8.0000
[special_price] =>
[msrp] =>
[special_from_date] =>
[special_to_date] =>
[batch_prices] => Array
(
)

[website_batch_prices] => Array
(
)

[initial_price] => 8.0000
[final_price] =>
[batch_special_prices] => Array
(
)

[website_batch_special_prices] => Array
(
)

[initial_special_price] =>
[is_salable] => 1
[stock_item] => Array
(
[item_id] => 2
[product_id] => 2
[stock_id] => 1
[qty] => 19.0000
[min_qty] => 0.0000
[use_config_min_qty] => 1
[is_qty_decimal] => 0
[backorders] => 0
[use_config_backorders] => 1
[min_sale_qty] => 1.0000
[use_config_min_sale_qty] => 1
[max_sale_qty] => 0.0000
[use_config_max_sale_qty] => 1
[is_in_stock] => 1
[low_stock_date] =>
[notify_stock_qty] =>
[use_config_notify_stock_qty] => 1
[manage_stock] => 0
[use_config_manage_stock] => 1
[stock_status_changed_auto] => 0
[use_config_qty_increments] => 1
[qty_increments] => 0.0000
[use_config_enable_qty_inc] => 1
[enable_qty_increments] => 0
[is_decimal_divided] => 0
[type_id] => simple
[stock_status_changed_automatically] => 0
[use_config_enable_qty_increments] => 1
[product_name] => testB
[store_id] => 1
[product_type_id] => simple
[product_status_changed] => 1
[product_changed_websites] =>
[ordered_items] => 1
)

[stock_tax_class_ids] => Array
(
)

[do_not_use_category_id] => 1
[request_path] => testb.html
[tier_prices] => Array
(
)

[tier_price] => Array
(
)

[is_in_stock] => 1
[store_id] => 1
[customer_group_id] => 0
[group_price] => Array
(
)

[group_price_changed] => 0
)

[tax_class_id] => 0
[is_recurring] => 0
[has_error] =>
[calculation_price] => 8
[original_price] => 8
[is_nominal] =>
[base_calculation_price] => 8
[converted_price] => 8
[base_original_price] => 8
[taxable_amount] => 8
[base_taxable_amount] => 8
[is_price_incl_tax] =>
[base_weee_tax_applied_row_amount] => 0
[discount_tax_compensation] => 0
)

Admettons qu’on souhaite afficher la propriété [sku] de l’objet $item :

Admettons qu’on souhaite afficher la propriété [created_at] de l’objet $item :

Autre méthode possible :

[jQuery] Vérifier qu’un élément est visible ou masqué

Source : check if a element is display:none or block on click. Jquery

On peut utiliser les pseudo-classes CSS :visible pour les éléments visibles et :hidden pour trouver les éléments invisibles.

Pour vérifier la présence d’un élément en particulier :

Note pour moi-même : je ne sais pas pourquoi j’avais posté un exemple avec la pseudo-classe :visible et la méthode .length == 0… Vérifier la présence dans le DOM d’un élément possédant une certaine classe (puis agir dessus) fonctionne mieux sans la pseudo-classe et en affectant la valeur de 1 à length :

Les éléments sont considérés comme visibles si ils prennent de la place dans le document. Les éléments visibles ont une largeur et/ou une hauteur dont la valeur est plus grande que zéro (source).

On peut également utiliser is() avec :visible :

Si on souhaite vérifier la valeur de la propriété display, on peut utiliser attr() :

Si la propriété CSS display est employée, elle peut avoir les valeurs suivantes :

  • display: none
  • display: inline
  • display: block
  • display: list-item
  • display: inline-block

[Magento 1.9] Modifier le mode d’affichage standard des erreurs de saisie des formulaires, orchestré via Prototype.js

Dans Magento, le comportement après validation d’un formulaire (mode d’affichage des erreurs de saisie) est défini dans le fichier js/prototype/validation.js. Les options disponibles sont les suivantes :

Ajouter les classes validation-passed et validation-error aux <div class="input-box"> qui englobent chaque champ de formulaire

On a la possibilité de surcharger une option définie par défaut de manière spécifique en déclarant la nouvelle valeur comme ci-dessous directement dans un template phtml :

Cette ré-écriture doit se faire avant que l’objet Validation soit invoqué dans le template. Résultat :

validation

Ajouter un wrapper <span class="control-wrapper" /> autour de chaque champ de formulaire

Attention : il faut obligatoirement avoir mis en place les classes validation-passed et validation-error aux <div class="input-box"> qui englobent chaque champ de formulaire

Lorsque votre charte graphique prévoit d’afficher des icônes de réussite ou d’échec à droite des champs après soumission des informations renseignées dans un formulaire (phase de vérification), il peut être utile (à des fins d’habillage CSS) d’ajouter un <span class="control-wrapper" /> autour de chaque champ.

input-wrapper

Pour ce faire, il faut surcharger un bout de code se trouvant en standard dans js/prototype/validation.js. Vous pouvez créer un nouveau fichier skin/frontend/nom_du_theme/js/validation.js dans lequel vous allez mettre le code suivant :

Vous pourrez ensuite aisément mettre en place l’apparition des icônes de validation ou d’échec par le biais de CSS :

Ressources externes utiles :

[CSS] Créer des boutons avec des flèches en CSS3 sans markup supplémentaire avec la propriété border et la pseudo-classe :after

Générateur de flèches en CSS3.
Simulation : http://jsfiddle.net/frontenddeveloper/caocL8dp/8/, mixin SASS.

css_arrows

[CSS] Des boutons radio et des cases à cocher de formulaire sexys et accessibles

From scratch (pas de markup imposé)

Simulation : http://jsfiddle.net/frontenddeveloper/3w5gvhyL/.

Ressource externe (Accessible) : https://github.com/stevenMouret/css-custom-radio-checkbox.

Markup formulaires Drupal 7

Valable également si le module Webform est utilisé.

[CSS] Un fil d’Ariane (breadcrumb) sexy

Quelques exemples glanés sur le net : CSS3 breadcrumbs, 6 graceful css breadcrumb Navigation designs.

Version 1 (avec une bordure)

breadcrumb_style_02

Simulation : http://jsfiddle.net/frontenddeveloper/vx3nm1mL/.

Source HTML pour le fil d’Ariane :

Source CSS pour le fil d’Ariane :

Version 2

CSS_breadcrumb

Simulation : http://jsfiddle.net/frontenddeveloper/x1daubg9/.

[Bootstrap 3] Un layout 5 colonnes responsive avec Twitter Bootstrap 3

Ressources en ligne :

Méthode SASS pour 5 colonnes (concept Bootstrap)

Fonctionne et génère la batterie complète de styles nécessaires :

Ne fonctionne pas (génère des classes pour 12 colonnes) :

Méthode pré-processeur pour 5 colonnes de largeurs égales

Source : Five equal columns in twitter bootstrap.
Méthode qui génère moins de code, mais uniquement des briques de largeur égale (20%).

SASS

LESS

Méthode alternative pour une palette complète sur 5 colonnes (CSS)

Source : Quick tips: 5 columns layout with Twitter Bootstrap, 5 equal columns Bootstrap grid layout with 1, 2, 3, 4 of five.