index.php

Comment naviguer dans Magento ? Cet article vous aidera à comprendre comment créer des liens vers vos fichiers media, js, skin et autres.

Magento gère les ULR dans les phtml ou les pages CMS grâce à la méthode getBaseUrl() qui se trouve dans la classe store.php (magentoappcodecoreMageCoreModelstore.php). D’autres méthodes alternatives permettent de naviguer tel que getJsUrl() ou getSkinUrl().

URL dans les Phtml

Lien vers la racine de votre site magento

http://www.boutique-magento.com/
Utiliser l’un ou l’autre des liens ci-dessous :

<?php echo Mage::getBaseUrl('web'); ?>
<?php echo $this->;getUrl(); ?>

Lien vers la page index.php de votre site magento

http://www.boutique-magento.com/index.php/

Mage::getBaseUrl (Mage_Core_Model_Store::URL_TYPE_LINK);

Lien vers le dossier JS

http://www.boutique-magento.com/js/
Utiliser l’un ou l’autre des liens ci-dessous :

<?php echo Mage::getBaseUrl ('js');  ?>
<?php echo $this->getJsUrl();?>

(suite…)

{$base_dir}

Url de votre site web, racine du site. Utile et indispensable lorsque vous insérez des liens, je déconseille fortement de mettre des liens en dur directement dans votre code mais plutôt d’utilisez cette variable et toute les autres qui suivent, car le jour où vous migrez d’hébergement ou de nom de domaine, cela pourrait vous causer beaucoup de problèmes.

{$base_dir_ssl}

Idem via le protocol https.

{$content_dir}

Url vers votre dossier racine du site, peut changer en fonction des paramètres SSL. A ne pas confondre avec {$basedir}, cette variable vous donne l’Url complète jusqu’au dossier racine.

{$img_ps_dir}

Url vers le dossier img situé à la racine de votre boutique.

{$img_dir}

Url vers le dossier img de votre thème.

{$css_dir}

Url vers le dossier css de votre thème.
(suite…)

Blueberry est un plugin jQuery expérimental et open source permettant de faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design). Les utilisateurs utilisent de plus en plus souvent des smartphones pour consulter des pages web ; les intégrateurs web ont donc de plus en plus besoin de maquettes flexibles pour les satisfaire. Voici donc un diaporama adapté à cet usage.

Marquage HTML nécessaire pour utiliser Blueberry :

<div class="blueberry">
	<ul class="slides">
		<li><img src="img/slide1.jpg" /></li>
		<li><img src="img/slide2.jpg" /></li>
		<li><img src="img/slide3.jpg" /></li>
		<li><img src="img/slide4.jpg" /></li>
	</ul>
	<!-- Optional, see options below -->
	<ul class="pager">
		<li> </li>
		<li> </li>
		<li> </li>
		<li> </li>
	</ul>
	<!-- Optional, see options below -->
</div>

(suite…)