Je vous partage ici un petit code permettant de créer facilement un retour en haut de page qui est vachement lol.
Le principe est que ce dernier ne doit s’afficher que si on scroll suffisamment au sein de notre page.

Je ne vais pas détailler le code javascript car il est d’une simplicité exemplaire, le voici :

function return_to_top(){
	jQuery(window).scroll(function () {
		if(jQuery(window).scrollTop() > 500){
			jQuery('div#my_return_to_top').show('slide');
		}else{
			jQuery('div#my_return_to_top').hide('slide');
		}
	});

	jQuery('div#my_return_to_top').click(function(){
		jQuery('html, body').animate({scrollTop:0}, 'slow');
		return false;
	});
}

Petit tips rapidos, voici comment utiliser l’instance de la DB Magento pour exécuter une requête SQL :

$resource = Mage::getSingleton('core/resource');
$read= $resource->getConnection('core_read');
$select = $read->select()
->from('le_nom_de_ma_table')
->where('mon_champ = ?', $ma_valeur)
->where('mon_autre_champ = ?', $mon_autre_valeur);
$retour = $select->query();
$rows = $retour->fetchAll();

foreach($rows as $rec):
  $sauvegarder = $rec['nom_du_champ'];
endforeach;

Lors d’un développement récent, je cherchai à effectuer une rotation sur un ensemble d’éléments. Je suis tombé en farfouillant sur les forums sur un post de Calou où il présentait une solution à un autre soucis de rotation qu’il avait lui-même trouvé ailleurs (Thx Calou, t’es un Caïd).

J’ai de ce fait exploité davantage la chose ( ce qui m’a pris pas mal de temps, car franchement c’est pas simple ) afin de trouver des correspondances pour effectuer cet effet sous Internet Explorer (bah oui, sinon ce serait trop simple).
Ci-dessous vous trouverez comme d’habitude une démonstration ainsi que les sources de l’exemple.

Donc, pour les rotations sous ie, voici le principe :

.ma_rotation{
  -moz-transform: rotate(30deg); /* FF3.5 */
  -o-transform: rotate(30deg); /* Opera 10.5 */
  -webkit-transform: rotate(30deg); /* Saf3.1 , Chrome */
  filter: progid:DXImageTransform.Microsoft.Matrix(
            sizingMethod='auto expand',
            M11=0.699,
            M12=-0.630,
            M21=0.630,
            M22=0.699
    ); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
           SizingMethod='auto expand',
           M11=0.699,
           M12=-0.630,
           M21=0.630,
           M22=0.699
   )";  /* IE8 */
  zoom: 1;
}

Pas besoin de détailler les transform des navigateurs supportant le CSS3, ils sont on ne peut plus intuitifs.

En revanche, pour IE, c’est une toute autre paire de manches ! Il s’agit en fait de faire appel aux propriétés matricielles du navigateur afin de déformer notre image (attention, ceci entraine également un déplacement de l’image et un réajustement du design global est alors nécessaire).
Malgré le temps important que j’ai passé dessus, je ne suis pas encore en complète mesure de vous expliquer l’intérêt de chaque propriété, mais ai néanmoins réussi à créer toute une série d’angles pour placer mes éléments, ainsi les sources ici proposées peuvent servir de références afin de placer vos propres éléments.

Le hic (car il y en a toujours un avec IE) réside dans l’apparition d’une bordure noire autour de votre image, rendant ainsi ce script pas vraiment exploitable pour un module que vous souhaiteriez faire facturer, vous imposant donc de créer votre images déjà inclinées..

Bon, ça fait toujours un début si certains veulent poursuivre dans cette logique afin d’obtenir un rendu “parfait” :)
Merci donc de me faire signe si vous arrivez à virer ces bordures :p (Sans javascript).

La surcharge d’un controller sous Magento n’est pas très compliquée, mais nécessite tout de même de suivre une démarche précise. Dans cet exemple, nous allons surcharger un  controller étendant la gestion du compte client.

Bien, cet exemple part du principe que vous ayez déjà mis en place votre module qui aura pour vocation d’étendre ce controller. J’appellerai ici ce module ‘Etendu’, qui serait placé dans app/code/local/Charlous/Etendu (Charlous, c’est moi :p).

Nous créons donc notre AccountController.php qui se trouve dans app/code/local/Charlous/Etendu/controllers/Customer/ et qui contient le code suivant :

<?php
require_once 'app/code/community/Auguria/Sponsorship/controllers/Customer/AccountController.php';
class Charlous_Etendu_Customer_AccountController extends Auguria_Sponsorship_Customer_AccountController
{
   public function indexAction(){
        die('ça marche');
   }
}

Vous constaterez que je force l’include du controller source, ceci pour que toutes les fonctions non étendues aient tout de même leur petit effet.
Ensuite, je crée au sein de mon controller toutes les fonctions que je souhaite étendre et qui remplaceront donc celles initialement prévues. Pour l’exemple, je claque juste un die() sur l’action d’index. Donc si ça plante quand vous accédez à l’url votre_site.com/customer/account, vous devez avoir une jolie page blanche, témoignant de la réussite de votre surcharge.

Pour l’instant bien sur, rien ne se produit, il vous auparavant correctement renseigner votre config.xml – celui de votre module perso et donc sité dans app/code/local/Charlous/Etendu/etc/- de la manière suivante :

<!-- ... -->
<global>
   <rewrite>
    	<Charlous_Etendu_customer_account>
          <from><![CDATA[#^/customer/account/#]]></from>
          <to>/Charlous_Etendu/customer_account/</to>
        </Charlous_Etendu_customer_account>
   </rewrite>
   <!-- ... -->
</global>
<!-- ... -->

Dans vous insérez ces quelques lignes qui spécifient dont que désormais, tout pointage effectué vers le controller d’account sera redirigé vers votre AccountController perso.
Et voilà pour le controller, rien de très compliqué.

Étendre un Model

L’affichage du rendu html ou texte des adresses de livraison ne se fait pas dans un template.

Pourquoi faire simple ? Bah en fait je pense qu’ils ont voulu optimiser le tout pour ne pas avoir à dispatcher davantage le code en fonction du rendu souhaité (Rendu HTML, PDF ou Text).

Ce qui fait que le model fait appel à une structure xml.
Le contenu à modifier se trouve dans le config.xml situé à cet emplacement : /app/code/core/Mage/Customer/etc/config.xml.

<customer>
            <address>
                <formats>
                    <text translate="title" module="customer">
                        <title>Text</title>
                        <defaultFormat><![CDATA[
{{depend intitule_address}}{{var intitule_address}} : {{/depend}}{{depend prefix}}{{var prefix}} {{/depend}}{{var firstname}} {{depend middlename}}{{var middlename}} {{/depend}}{{var lastname}}{{depend suffix}} {{var suffix}}{{/depend}}
{{depend company}}{{var company}}{{/depend}}
{{if street1}}{{var street1}}
{{/if}}
{{depend street2}}{{var street2}}{{/depend}}
{{depend street3}}{{var street3}}{{/depend}}
{{depend street4}}{{var street4}}{{/depend}}
{{if city}}{{var city}},  {{/if}}{{if region}}{{var region}}, {{/if}}{{if postcode}}{{var postcode}}{{/if}}
{{var country}}
T: {{var telephone}}
{{depend fax}}F: {{var fax}}{{/depend}}
                        ]]></defaultFormat>
                    </text>
                    <oneline translate="title" module="customer">
                        <title>Text One Line</title>
                        <htmlEscape>true</htmlEscape>
                        <defaultFormat>
<![CDATA[{{depend intitule_address}}{{var intitule_address}} : {{/depend}}{{depend prefix}}{{var prefix}} {{/depend}}{{var firstname}} {{depend middlename}}{{var middlename}} {{/depend}}{{var lastname}}{{depend suffix}} {{var suffix}}{{/depend}}, {{var street}}, {{var city}}, {{var region}} {{var postcode}}, {{var country}}]]>
                        </defaultFormat>
                    </oneline>
                    <html translate="title" module="customer">
                        <title>HTML</title>
                        <htmlEscape>true</htmlEscape>
                        <defaultFormat><![CDATA[
{{depend intitule_address}}<strong>{{var intitule_address}}</strong><br />{{/depend}}
{{depend prefix}}{{var prefix}} {{/depend}}{{var firstname}} {{depend middlename}}{{var middlename}} {{/depend}}{{var lastname}}{{depend suffix}} {{var suffix}}{{/depend}}<br/>
{{depend company}}{{var company}}<br />{{/depend}}
{{if street1}}{{var street1}}<br />{{/if}}
{{depend street2}}{{var street2}}<br />{{/depend}}
{{depend street3}}{{var street3}}<br />{{/depend}}
{{depend street4}}{{var street4}}<br />{{/depend}}
{{if city}}{{var city}},  {{/if}}{{if region}}{{var region}}, {{/if}}{{if postcode}}{{var postcode}}{{/if}}<br/>
{{var country}}<br/>
{{depend telephone}}Tel: {{var telephone}}{{/depend}}
{{depend fax}}<br/>Fax: {{var fax}}{{/depend}}
            ]]></defaultFormat>
                    </html>
                    <pdf translate="title" module="customer">
                        <title>PDF</title>
                        <defaultFormat><![CDATA[
{{depend intitule_address}}{{var intitule_address}} : {{/depend}}{{depend prefix}}{{var prefix}} {{/depend}}{{var firstname}} {{depend middlename}}{{var middlename}} {{/depend}}{{var lastname}}{{depend suffix}} {{var suffix}}{{/depend}}|
{{depend company}}{{var company}}|{{/depend}}
{{if street1}}{{var street1}}
{{/if}}
{{depend street2}}{{var street2}}|{{/depend}}
{{depend street3}}{{var street3}}|{{/depend}}
{{depend street4}}{{var street4}}|{{/depend}}
{{if city}}{{var city}},  {{/if}}{{if region}}{{var region}}, {{/if}}{{if postcode}}{{var postcode}}{{/if}}|
{{var country}}|
{{depend telephone}}T: {{var telephone}}{{/depend}}|
{{depend fax}}<br/>F: {{var fax}}{{/depend}}|
            ]]></defaultFormat>
                    </pdf>
                    <js_template template="title" module="customer">
                        <title>Javascript Template</title>
                        <defaultFormat><![CDATA[#{prefix} #{firstname} #{middlename} #{lastname} #{suffix}<br/>#{company}<br/>#{street0}<br/>#{street1}<br/>#{street2}<br/>#{street3}<br/>#{city}, #{region}, #{postcode}<br/>#{country_id}<br/>T: #{telephone}<br/>F: #{fax}]]></defaultFormat>
                    </js_template>
                </formats>
            </address>
        </customer>

Je ne pense pas qu’il soit nécessaire de détailler davantage la logique ici exposée tant elle est intuitive :)
Vous constaterez tout de même que sont présents 3 affichages différents, un pour l’html, le pdf et le dernier pour un rendu texte (appelé notamment dans le select de choix de l’adresse lors de la validation d’une commande).

Bon alors j’ai pas mal cherché comment retirer du menu du compte client le recurring profiles en vain.

J’ai finalement trouvé cette info sur un forum que je me permet de vous retransmettre ici :

Il suffit de, dans le fichier app/design/frontend/votre_theme/default/layout/sales/recurring_profile.xml, mettre en commentaire les lignes suivantes.

<!-- <customer_account>
<reference name="customer_account_navigation" >
<action method="addLink" translate="label"><name>recurring_profiles</name><path>sales/recurring_profile/</path><label>Recurring Profiles</label></action>
</reference>
</customer_account> -->

Et voilà, il a disparu :p

Nous allons ici voir comment créer un Observer sous Magento.

A quoi sert donc un Observer ? Et bien c’est très simple ! Vous avez peut être déjà remarqué que Magento “diffuse” des évènements au cours des différentes actions que vous pouvez réaliser au sein du code. Cette même diffusion peut être utilisée afin de lancer l’exécution d’un script spécifique. Dans cet exemple, nous allons créer un observer sur la validation (le paiement) d’une commande.
( Une liste relativement exhaustive des différents évènements Magento est disponible en fin de post).

Tout d’abord, nous devons implémenter une petite config au sein du config.xml du module qui aura vocation à contenir le code exécuté. Il s’agit en fait de dire à Magento “Quand cet évènements se déclenchera, tu exécuteras le code suivant”.

<?xml version="1.0"?>
<config>
<!-- ..... -->
<global>
 <events>
   <sales_order_invoice_pay>
	<observers>
    	    <Charlous_Module_Observer>
		   <type>singleton</type>
		   <class>Charlous_Flux_Model_Observer</class>
		   <method>export</method>
 	    </Charlous_Flux_Observer>
	</observers>
    </sales_order_invoice_pay>
  </events>
  <!-- ... -->
 </global>
</config>

Cette configuration se fait donc entre les balises global puis events. Vous ouvrez une entrée au sein de laquelle vous allez déclarer le ou les évènements que vous souhaitez utiliser comme “écouteur”. L’évènement que j’utilise ici est sales_order_invoice_pay, il s’agit donc comme son nom l’indique, du moment où la commande est payée.

Comme vous pouvez le constater, lors de l’activation de l’évènement sales_order_invoice_pay, mon module “Charlous/Flux” sera appelé pour exécuter la méthode “export” de mon Observer se trouvant dans app/code/local/Charlous/Flux/Model/Observer.php

Il ne nous reste plus qu’à créer notre model Observer.php

Nous créons donc notre Observer.php dans le répertoire Model de notre module Magento, qui contient le code suivant :

class Charlous_Flux_Model_Observer extends Varien_Event_Observer{
	public function __construct(){}

	public function export($observer){
		/*Cette fonction sera appelé lorsqu'une commande sera payée*/
               die('ça marche !');
	}

Et voilà, ça marche :D
Enfin ça plante plutôt, bah oui avec un die() après une commande, il n’y a pas grand intérêt …
Bon sinon, je vous file ici un module qui reprend ce même code, ça pourra ainsi vous servir d’exemple :)
(Contenu à décompresser et à copier à la racine de l’apply Magento, comme n’importe quel module)

Voilà, maintenant vous avez compris comment implémenter un Observer :)
Pour vous aider, je vous donne ci-dessous une liste plus ou moins complète des différents événements :

Controller Routing Events

controller_action_layout_render_before_'.$this->getFullActionName
controller_action_layout_render_before
controller_action_nocookies
controller_action_noroute
controller_action_postdispatch
controller_action_predispatch
controller_front_init_before
controller_front_init_routers

Generic Object Saving Events

$this->_eventPrefix.'_add_is_active_filter
$this->_eventPrefix.'_delete_after
$this->_eventPrefix.'_delete_after_done
$this->_eventPrefix.'_delete_before
$this->_eventPrefix.'_delete_commit_after
$this->_eventPrefix . '_load_after
$this->_eventPrefix.'_load_after
$this->_eventPrefix . '_load_before
$this->_eventPrefix.'_move_after
$this->_eventPrefix.'_move_before
$this->_eventPrefix.'_'.$process.'_process_run_after
$this->_eventPrefix.'_'.$process.'_process_run_before
$this->_eventPrefix.'_save_after
$this->_eventPrefix.'_save_before
$this->_eventPrefix.'_save_commit_after
$this->_eventPrefix.'_validate_after
$this->_eventPrefix.'_validate_before

All Other Events

adminhtml_banner_edit_tab_content_before_prepare_form
adminhtml_block_eav_attribute_edit_form_init
adminhtml_block_html_before
adminhtml_catalog_category_tabs
adminhtml_catalog_category_tree_is_moveable
adminhtml_catalog_product_attribute_set_main_html_before
adminhtml_catalog_product_attribute_set_toolbar_main_html_before
adminhtml_catalog_product_edit_element_types
adminhtml_catalog_product_edit_prepare_form
adminhtml_catalog_product_edit_tab_attributes_create_html_before
adminhtml_catalog_product_form_prepare_excluded_field_list
adminhtml_cms_page_edit_tab_content_prepare_form
adminhtml_cms_page_edit_tab_design_prepare_form
adminhtml_cms_page_edit_tab_main_prepare_form
adminhtml_cms_page_edit_tab_meta_prepare_form
adminhtml_cmspage_on_delete
adminhtml_controller_action_predispatch_start
adminhtml_controller_catalogrule_prepare_save
adminhtml_controller_salesrule_prepare_save
adminhtml_customer_prepare_save
adminhtml_customer_save_after
adminhtml_product_attribute_types
adminhtml_sales_order_create_process_data
adminhtml_sales_order_creditmemo_register_before
adminhtml_staging_backup_edit_tab_rollback_after_prepare_columns
adminhtml_widget_container_html_before
adminhtml_widget_grid_filter_collection
admin_permissions_role_prepare_save
admin_session_user_login_failed
admin_session_user_login_success
admin_system_config_changed_section_{$section
admin_user_authenticate_after
api_user_authenticated
application_clean_cache
bundle_product_view_config
catalog_block_product_list_collection
catalog_category_change_products
catalog_category_prepare_save
catalog_category_tree_init_inactive_category_ids
catalog_category_tree_move_after
catalog_category_tree_move_before
catalog_controller_category_delete
catalog_controller_category_init_after
catalog_controller_category_init_before
catalog_controller_product_delete
catalog_controller_product_init
catalog_controller_product_init_after
catalog_controller_product_init_before
catalog_controller_product_view
catalog_helper_output_construct
catalogindex_get_minimal_price
catalogindex_plain_reindex_after
catalogindex_prepare_price_select
catalog_model_product_duplicate
catalog_prepare_price_select
catalog_product_collection_apply_limitations_after
catalog_product_collection_before_add_count_to_categories
catalog_product_collection_load_after
catalog_product_collection_load_before
catalog_product_compare_add_product
catalog_product_compare_item_collection_clear
catalog_product_compare_remove_product
catalog_product_edit_action
catalog_product_flat_prepare_columns
catalog_product_flat_prepare_indexes
catalog_product_flat_rebuild
catalog_product_flat_update_product
catalog_product_get_final_price
catalog_product_import_after
catalog_product_is_salable_after
catalog_product_is_salable_before
catalog_product_new_action
catalog_product_prepare_index_select
catalog_product_prepare_save
catalog_product_status_update
catalog_product_to_website_change
catalog_product_upsell
catalog_product_view_config
catalog_product_website_update
catalog_product_website_update_before
catalogrule_after_apply
catalogrule_before_apply
catalogsearch_reset_search_result
category_move
checkout_allow_guest
checkout_cart_add_product_complete
checkout_cart_info_item_unset_product_before
checkout_cart_product_add_after
checkout_cart_save_after
checkout_cart_update_items_after
checkout_cart_update_items_before
checkout_controller_onepage_save_shipping_method
checkout_multishipping_controller_success_action
checkout_onepage_controller_success_action
checkout_quote_destroy
checkout_quote_init
checkout_type_multishipping_set_shipping_items
checkout_type_onepage_save_order
checkout_type_onepage_save_order_after
cms_controller_router_match_before
cms_page_get_available_statuses
cms_page_prepare_save
cms_wysiwyg_config_prepare
core_block_abstract_prepare_layout_after
core_block_abstract_prepare_layout_before
core_block_abstract_to_html_after
core_block_abstract_to_html_before
core_collection_abstract_load_after
core_collection_abstract_load_before
core_layout_update_updates_get_after
core_locale_set_locale
customer_customer_authenticated
customer_login
customer_logout
customer_registration_is_allowed
customer_session_init
eav_attribute_get_backend_type_by_input
eav_attribute_get_default_value_by_input
eav_collection_abstract_load_before
enterprise_catalog_permissions_is_allowed_category
enterprise_giftcardaccount_add
enterprise_giftcardaccount_charge
enterprise_giftcardaccount_create
enterprise_staging_controller_staging_delete
http_response_send_before
log_log_clean_after
log_log_clean_before
log_visitor_collection_load_before
model_delete_after
model_delete_before
model_delete_commit_after
model_load_after
model_save_after
model_save_before
model_save_commit_after
on_enterprise_staging_merge
on_enterprise_staging_save
on_view_report
payment_method_is_active
prepare_catalog_product_index_select
prepare_catalog_product_price_index_table
resource_get_tablename
review_controller_product_init
review_controller_product_init_after
review_controller_product_init_before
review_review_collection_load_before
rss_catalog_category_xml_callback
rss_catalog_new_xml_callback
rss_catalog_special_xml_callback
rss_catalog_tagged_item_xml_callback
rss_order_new_collection_select
rule_environment_collect
sales_convert_order_item_to_quote_item
sales_convert_order_to_quote
sales_convert_quote_address_to_order
sales_convert_quote_address_to_order_address
sales_convert_quote_item_to_order_item
sales_convert_quote_payment_to_order_payment
sales_convert_quote_to_order
sales_order_creditmemo_cancel
sales_order_creditmemo_refund
sales_order_invoice_cancel
sales_order_invoice_pay
sales_order_item_cancel
sales_order_payment_cancel
sales_order_payment_cancel_creditmemo
sales_order_payment_cancel_invoice
sales_order_payment_capture
sales_order_payment_pay
sales_order_payment_place_end
sales_order_payment_place_start
sales_order_payment_refund
sales_order_payment_void
sales_order_place_after
sales_order_place_before
sales_quote_add_item
sales_quote_address_discount_item
sales_quote_item_collection_products_after_load
sales_quote_item_qty_set_after
sales_quote_item_set_product
sales_quote_remove_item
salesrule_rule_condition_combine
salesrule_validator_process
sales_sale_collection_query_before
sendfriend_product
staging_edit_action
staging_website_create_after
store_delete
store_group_save
tag_tag_product_collection_load_after
tax_rate_data_fetch
tax_settings_change_after
websiterestriction_frontend
wishlist_add_product
wishlist_items_renewed
wishlist_share

Petit tips sous Magento, voici comment lister les valeurs d’un attribut :

public function get_attribute_values($attribute_code){
    $attribute = Mage::getModel('eav/config')->getAttribute('catalog_product', $attribute_code);
    foreach ( $attribute->getSource()->getAllOptions(true, true) as $option){
		$attributeArray[] = Array($option['value'],$option['label']);
    }
    return $attributeArray;
}

Cette fonction retourne les valeurs ainsi que le label (Admin label) de l’attribut dont le code (ex: “color”) est passé en paramètre.

Salut tout le monde !
Alors ici nous allons rapidement voir comment réaliser un éditeur de Tag en javascript. Bon celui que je présente ici est assez simple, il permet simplement de placer des indicateurs révélant une information au survol.
Vous trouverez, comme d’hab’, une démo et les sources ci-dessous. Pour les explications, merci de lire la suite :)

Allez c’est parti !
Bon dans un premier temps, vous constaterez que j’utilise toujours jQuery au lieu de $, en fait j’ai pris l’habitude de systématiquement utiliser le jQuery.noConflict() à force de faire évoluer des applys web ayant tournées sous Scripaculous ou Prototype que je ne peux totalement bannir pour des raisons propres à chacune des apply, (pas envie de me retaper tout le code). Donc pour ceux qui ne le savent pas, jQuery.noConflict() permet une cohabitation parfaite des deux librairies.

Voyons maintenant comment nous allons réaliser notre éditeur de Tag.
Je rappelle ce que nous voulons faire : Créer un module permettant de générer des éléments qui au survol, révéleront une information spécifiée lors de leur sauvegarde.

Voyons le HTML :

<div id="main_container">
	<div style="display:none;" id="hidden_cross_url">tick.png</div>
	<div id="tag_new_product">
		<input type="text" name="product_autosuggest" id="product_autosuggest" />
		<input type="hidden" name="input_tag_x" id="input_tag_x" />
		<input type="hidden" name="input_tag_y" id="input_tag_y" />
		<div id="hidden_validation_product">
			<a id="submit_product_confirm" class="info_span">
				<img src="submit_product.png" alt="" />
				<span>Tagger</span>
			</a>
			<a id="submit_product_cancel" class="info_span">
				<img src="cancel_product.png" alt="" />
				<span>Annuler</span>
			</a>
		</div>
	</div>
        <div id="content_tags"></div>
</div>

Très simple !
div#content_tags aura pour background notre image et div#tag_new_product sera notre “Taggeur”, il se présentera comme un formulaire et stockera les informations suivantes :
- Texte à afficher
- Coordonnées X et Y pour notre Tag
a#submit_product_confirm et a#submit_product_cancel sont ni plus ni moins que des boutons homemade. En fait c’est une image qui révèle, au survol de souris, le contenu dans le lien, grâce au petit bout de javascript suivant :

function load_info_bulles(){
	var public_timeout_hide = null;
	var children = null;
	jQuery('a.info_span span').hide();
	jQuery('a.info_span').die('mousenenter');
	jQuery('a.info_span').die('mouseleave');
	jQuery('a.info_span').live('mouseenter',function(){
			children = jQuery(this).children('span');
			children.show();
		});
	jQuery('a.info_span').live('mouseleave',function(){
			children = jQuery(this).children('span');
			children.hide();
		});
	jQuery('.info_span span').corner('2px');
}

Maintenant je vais expliquer un peu comment fonctionne le générateur de tag avant de détailler les différentes fonctions.

1- On charge les tags déjà présents pour la photo

2- On place un écouteur sur l’évènement Click qui réagit de la manière suivante :

- Il affiche un pointeur à l’emplacement du Click

- Il affiche le formulaire de spécification du texte et y stocke les coordonnées de notre Tag (Auxquelles nous avons préalablement retiré les coordonnées de notre div#content_tags). Ce formulaire possède également un écouter sur les deux liens “Tagger” et “Annuler“.

- Tagger : “Valide” le formulaire, crée un rendu visuel du Tag et le stocke en Base via appel Ajax, puis réinitialise le formulaire.

- Annuler : “Annule” l’action, supprime le pointeur et réinitialise le formulaire.

Je précise que la partie php n’est pas présente ici, néanmoins j’ai préparé les appels Ajax dans les sources (ils sont en commentaire). Voyons maintenant plus en détail les différentes fonctions.

La première fonction que j’appelle au chargement de la page est la suivante :

/*Fonction préparant les événements*/
function make_it_ready(){
	load_tags();
	make_tag(jQuery('div#content_tags'));
	bind_taggeur();
	load_info_bulles();
}

Cette dernière appelle la fonction chargeant les tags déjà présents, “Bind” le conteneur de tag, “Bind” le formulaire Taggeur et prépare mes infos bulles.

Affichage des Tags présents

function load_tags(){
	tag_saved_exemple1_x = 19;
	tag_saved_exemple1_y = 19;
	tag_saved_exemple1_text = "Mon tag d'exemple";

	/*J'applique la position en MARGIN-TOP et non en TOP, sinon l'element n'aura pas la même position en fonction de l'emplacement du conteneur*/
	rendu_tag_exemple = '<a style="position:absolute;margin-top:'+tag_saved_exemple1_x+'px;margin-left:'+tag_saved_exemple1_y+'px;" class="it_is_tagged"><img src="'+jQuery("div#hidden_cross_url").html()+'" alt="" /><span>'+tag_saved_exemple1_text+'</span></a>'
	jQuery('div#content_tags').append(rendu_tag_exemple);
	jQuery('a.it_is_tagged').hover(function(){
		jQuery(this).find('span').show();
	},function(){
		jQuery(this).find('span').hide();
	});
}

Normalement ici vous devez avoir un appel Ajax qui vous renvoie l’ensemble des tags déjà positionnés, mais pour l’exemple, j’ai créé un Tag en dur.
Vous noterez que le Tag est en Absolute et que je le positionne avec Margin-top et Margin-left. Tout simplement parce que si je le positionne avec Top et Left, sa position variera en fonction de la résolution de votre écran.

Écouteur principal

function make_tag(content_cible){
	reset_tagger();
	content_cible.click(function(e){
	/* je vérifie que la cible est bien la zone de tag et non un élement superposé (comme mon taggeur)*/
	if(e.target.id == "content_tags"){
	var public_timeout = null;
	//console.log(e);
	if(jQuery('div#tag_new_product').is(':visible')){

	/*si le taggeur est visible, je dois d'abord le valider ou l'annuler pour mettre un autre tag*/
	jQuery('div#tag_new_product').effect('highlight');

	}else{

	var position_y_choisie=e.pageY-content_cible.position().top-18;
	var position_x_choisie=e.pageX-content_cible.position().left-18;
	console.log(position_x_choisie+";"+position_y_choisie);
	/*Je place ces informations dans mon taggeur*/
	jQuery('input#input_tag_x').val(position_x_choisie);
	jQuery('input#input_tag_y').val(position_y_choisie);
	var cross_tag = "<a id='currently_pointed' style='position:absolute; margin-left:"+position_x_choisie+"px; margin-top:"+position_y_choisie+"px;'><img src='"+jQuery("div#hidden_cross_url").html()+"' alt='Cross' /></a>";
	jQuery('div#content_tags').append(cross_tag);

	/*je place correctement mon taggeur*/
	jQuery("div#tag_new_product").css({
		"margin-top" : 27 + parseInt(position_y_choisie) + "px",
		"margin-left" : 29  + parseInt(position_x_choisie) + "px"
	});

	/*Puis je l'affiche*/
	jQuery('div#tag_new_product').show();

	}
	}
	});
	jQuery('div#content_tags').animate({opacity:0.5},function(){jQuery('div#content_tags').animate({opacity:1});});
}

Ici je récupère la position choisie, je la stocke dans le formulaire et le révèle au bon endroit ainsi qu’un pointeur (mon image Tick.png). Notez que je soustrais au préalable des coordonnées de mon Tag celles de son conteneur. Les chiffres présents sont tout simplement des correctifs pour que ça tombe niquel par rapport à la taille de Tick.png.
Enfin j’affiche mon div#tag_new_product

Écouteur du formulaire

/*Fonction créant le Tag configuré*/
function bind_taggeur(){
	jQuery('a#submit_product_confirm').die('click');
	jQuery('a#submit_product_confirm').live('click',function(){
	/*Ci dessous un exemple d'appel ajax pour sauvegarder votre produit en base*/
	/*
	jQuery.ajax({
		type: "POST",
		url: get_base_url+"fr/slider/index/tagsomething/text/"+jQuery('input#product_autosuggest').val()+"/x/"+jQuery('input#input_tag_x').val()+"/y/"+jQuery('input#input_tag_y').val(),
		success: function(html){
			apply_validation();
			}
		});
	*/

	 apply_validation(jQuery('input#product_autosuggest').val(),jQuery('input#input_tag_x').val(),jQuery('input#input_tag_y').val());
	});
	jQuery('a#submit_product_cancel').die('click');
	jQuery('a#submit_product_cancel').live('click',function(){
		jQuery('div#tag_new_product').hide();
		jQuery('a#currently_pointed').remove();
		reset_tagger();
	});
}

Ici j’ai deux écouteurs, un pour annuler, l’autre pour confirmer la création du Tag. En cas de création du tag j’appelle ma fonction apply_validation() où je passe en paramètres les informations suivantes : Valeur de l’input text, coordonnées X et Y.

Validation du Tag

function apply_validation(text,x,y){
	jQuery('div#tag_new_product').hide();
	reset_tagger();

	jQuery('a#currently_pointed').append('<span>'+text+'</span>');
	jQuery('a#currently_pointed').hover(function(){
		jQuery(this).find('span').show();
	},function(){
		jQuery(this).find('span').hide();
	});
	jQuery('a#currently_pointed').addClass('it_is_tagged');
	jQuery('a#currently_pointed').attr('id','');
	jQuery('div#content_tags').animate({opacity:0.5},function(){jQuery('div#content_tags').animate({opacity:1});});
}

Pas besoin de détailler, c’est très simple.
Normalement cette fonction n’a pas lieu d’être, initialement je ré-appelle ma fonction de chargement des tags déjà présents, mais pour l’exemple je crée un rendu visuel.

Voilà le tutoriel est achevé, j’espère qu’il vous plaira.
J’ai utilisé ce script pour administrer un Slider en Home Page sur un E-Commerce au sein duquel ils voulaient voir figurer sur chacune des images du Slider les prix des différents produits y étant représentés ainsi qu’au survol un lien vers ce dernier.

Ha oui, j’ai remarqué que le “Taggeur” est buggé sous IE, franchement j’avais la méga flemme de corriger ce bug.. Mes excuses aux fous utilisateurs d’internet explorer.

L’heure est au renouveau ! Je viens juste de terminer l’intégration du  nouveau design du site (il y a encore surement quelques bugs éparpillés, je les corrigerai au fur et à mesure des différents retours ^^).

Le temps a passé depuis la fin de nos études respectives et l’entrée dans la vie active ne nous permettait plus de trouver un peu de temps pour venir parfaire le contenu de ce blog, ce qui m’a personnellement toujours un peu attristé.

Désormais je dispose d’un emploi du temps assez fixe qui me permet de reprendre un peu mon activité de rédacteur novice pour à nouveau vous proposer quelques trucs pas bien glorieux :) (Qui par la même me servent également de notes pour des développements futurs).

Vous avez surement remarqué le nouveau design général du site. Bon soyez indulgent, ceci est mon premier design “recherché”, je n’ai pas la prétention d’être designer, mon boulot à moi c’est du dev’. J’aimerai quand même avoir votre avis à son sujet, ce que vous en pensez. Je l’ai intitulé “Nanane Falling Rabbits“, plutôt cool comme nom, non ?

Bon bon, parlons un peu maintenant de ce contenu à venir.. Je travaille depuis quelques temps sous Magento, un “CMS” eCommerce relativement abouti et j’ai été fort peiné de constater que très peu d’informations, d’exemples ou tutoriels circulent sur le Web à ce sujet. J’ai, au cours du développement des 3 sites sur lesquels je travaille actuellement,  noté les différents points sur lesquels j’avais péché niveau connaissance et vous proposerai toute une série de rédactions traitants de ces différents points. Ces dernières iront d’une simple astuce ou découverte personnelle, jusqu’à des tutoriels élaborés.

En dehors de l’arrivée de Magento dans mon travail quotidien, j’utilise toujours autant la librairie javascript jQuery, et ai quelques petits trucs à pondre également, notamment un générateur de tags pour un slider promotionnel (à voir sous peu).

Bon et bien voilà pour cette entrée en matière, j’espère que vous serez satisfait du contenu à venir et vous souhaite, par la même occasion, une excellente année 2011 :)

A fort bientôt.