TutorielsMise en avant des produits WA Market : plugin offert !

Mise en avant des produits WA Market : plugin offert !

Voici le tout premier tutoriel dédié au nouveau logiciel WA Market. Étant encore en version beta, WA Market va, dans les mois à venir beaucoup évoluer. Il se peut donc que ce tutoriel soit amené à évoluer également. Mais pour l’instant, nous vous proposons un plugin vous permettant de mettre certains produits de votre boutique en avant sur l’une de vos pages créées dans WebAcappella Responsive.

 

Introduction

Tout d’abord, voici un aperçu du résultat final : Prévisualiser

Pour se faire nous partons du principe que votre boutique en ligne WA Market est déjà installée et fonctionnelle.

 

Récupération des url’s de page produit

Nous allons commencer par récupérer les url’s des pages produit que nous souhaitons mettre en avant.
Par défaut, les url’s de vos pages produit commencent, après l’adresse de votre site par /controller/ViewDetailsProduct puis vient ensuite un enchainement de caractères spéciaux. L’url d’une page produit pourrait donc ressembler à ceci : https://votresite.com/controller/ViewDetailsProduct?id=1#

Il vous faut donc noter pour chaque page produit que vous souhaitez mettre en avant l’url comme ceci : controller/ViewDetailsProduct?id=1#

 

 

Installation du plugin dans WebAcappella

Copiez le code ci-dessous et collez le dans le champ “Code HTML personnalisé” des propriétés de la page

<div class="demo-2 no-js">
		<link rel="stylesheet" type="text/css" href="plugins/hovercurve/css/component.css" />
		<script src="plugins/hovercurve/js/snap.svg-min.js"></script>
		<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700" rel="stylesheet">

		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
<style>
a {
outline: none;
}
:focus {
-moz-outline-style: none;
}
:-moz-any-link:focus {
outline: none;
}
button:focus,
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  outline: none !important;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

</style>

Si vous le souhaitez, vous pouvez importer une autre police Google Fonts en remplaçant le lien à la ligne 4.

 

Sur votre page, ajoutez un nouvel élément Code HTML et collez le code ci-dessous

<div class="container">
	<!-- Top Navigation -->
		<section id="grid" class="grid clearfix">
				
		<!--Effet 1-->
		<a href="controller/ViewDetailsProduct" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
			<figure>
				<img src="plugins/hovercurve/img/1.jpg" />
				<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
				<figcaption>
					<h2>Cadre A3</h2>
					<p>10.00 €</p>
					<button>En savoir +</button>
				</figcaption>
			</figure>
		</a>
				
		<!--Effet 2-->
		<a href="controller/ViewDetailsProduct" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
			<figure>
				<img src="plugins/hovercurve/img/8.jpg" />
				<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
				<figcaption>
					<h2>Vinyl</h2>
					<p>50.00 €</p>
					<button>En savoir +</button>
				</figcaption>
			</figure>
		</a>
				
		<!--Effet 3-->
		<a href="controller/ViewDetailsProduct" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
			<figure>
				<img src="plugins/hovercurve/img/7.jpg" />
				<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
				<figcaption>
					<h2>Mug à café</h2>
					<p>5.00 €</p>
					<button>En savoir +</button>
				</figcaption>
			</figure>
		</a>
				
		<!--Effet 4-->
		<a href="controller/ViewDetailsProduct" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
			<figure>
				<img src="plugins/hovercurve/img/2.jpg" />
				<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
				<figcaption>
					<h2>Casquette</h2>
					<p>20.00 €</p>
					<button>En savoir +</button>
				</figcaption>
			</figure>
		</a>
				
		<!--Effet 5-->
		<a href="controller/ViewDetailsProduct" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
			<figure>
				<img src="plugins/hovercurve/img/4.jpg" />
				<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
				<figcaption>
					<h2>Tshirt Femme noir</h2>
					<p>10.00€</p>
					<button>En savoir +</button>
				</figcaption>
			</figure>
		</a>
				
		<!--Effet 6-->
		<a href="controller/ViewDetailsProduct" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
			<figure>
				<img src="plugins/hovercurve/img/3.jpg" />
				<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
				<figcaption>
					<h2>Tshirt Femme blanc</h2>
					<p>10.00 €</p>
					<button>En savoir +</button>
				</figcaption>
			</figure>
		</a>
				
		<!--Effet 7-->
		<a href="controller/ViewDetailsProduct" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
			<figure>
				<img src="plugins/hovercurve/img/5.jpg" />
				<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
				<figcaption>
					<h2>Tshirt Homme blanc</h2>
					<p>10.00 €</p>
					<button>En savoir +</button>
				</figcaption>
			</figure>
		</a>
				
		<!--Effet 8-->
		<a href="controller/ViewDetailsProduct" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
			<figure>
				<img src="plugins/hovercurve/img/6.jpg" />
				<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
				<figcaption>
					<h2>Tshirt Homme noir</h2>
					<p>10.00 €</p>
					<button>En savoir +</button>
				</figcaption>
			</figure>
		</a>
	</section>
</div><!-- /container -->
<script>
	(function() {
	
		function init() {
			var speed = 330,
				easing = mina.backout;

			[].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
				var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
					pathConfig = {
						from : path.attr( 'd' ),
						to : el.getAttribute( 'data-path-hover' )
					};

				el.addEventListener( 'mouseenter', function() {
					path.animate( { 'path' : pathConfig.to }, speed, easing );
				} );

				el.addEventListener( 'mouseleave', function() {
					path.animate( { 'path' : pathConfig.from }, speed, easing );
				} );
			} );
		}

		init();

	})();
</script>

Chaque box produit est signalé dans le code HTML par le titre <!–Effet 1–> <!–Effet 2–> etc.

Pour chaque bloque de code il vous faut modifier les informations, à commencer par l’url de la page produit symbolisée ici par controller/ViewDetailsProduct comme à la ligne 6 par exemple

Modifiez ensuite le nom du produit, le prix et même le texte du bouton “en savoir +” si vous le souhaitez.

 

Upload du dossier plugin sur le serveur

Téléchargez le dossier plugins, décompressez l’archive .zip puis uploadez le dossier plugins à la racine de votre site web. Si vous avez déjà un dossier plugins sur votre serveur, uploadez uniquement le contenu du dossier, à savoir le dossier hovercurve.

Dans le dossier hovercurve se trouve un dossier img, remplacez le image présentent par les vôtres.

Ouvrez ensuite le fichier component.css avec un éditeur de code comme sublime Text ou NotePad qui se trouve dans le dossier css pour modifier l’aspect du plugin. Voici ce que vous pouvez personnaliser :

  • Ligne 47 : La police des titres (nom des produits)
  • Ligne 48 : espace entre les lettres
  • Ligne 49 : La graisse de la police
  • Ligne 50 : la taille des titres
  • Ligne 55 : la couleur des titres

 

  • Ligne 60 : La police des sous titres (prix des produits)
  • Ligne 61 : espace entre les lettres
  • Ligne 62 : La graisse de la police
  • Ligne 63 : la taille des sous titres
  • Ligne 64 : la couleur des sous titres

 

  • Ligne 78 : La police des boutons (en savoir +)
  • Ligne 79 : espace entre les lettres
  • Ligne 80 : la taille du texte
  • Ligne 81 : l’épaisseur et la couleur de la bordure du bouton
  • Ligne 90 : la couleur du bouton
  • Ligne 91 : la couleur du texte
  • Ligne 92 : la graisse de la police

 

Voilà, un plugin très sympa qui vous permettra de mettre en avant certains de vos produits sur la page d’accueil de votre site internet.

Dans le même esprit mais en plus pro et personnalisable, vous pouvez également essayer notre plugin Offer Product.

Bisous les neveux.

Catégorie : Tutoriels1 Commentaire

Un commentaire

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Poster commentaire