Bonjour à tous,

Je créer une boutique oscommerce.
Dans la liste des produits par catégorie, j'aimerais qu'une fenêtre s'ouvre affichant un zoom du produit + la désignation + le prix.

Ces informations seront piochées dans la base de données.
Ci dessous le type de résultat que j'aimerais atteindre puis le contenu des 2 pages product_listing.php et product_info.php
C'est dans la page product_listing.php que j'aimerais intégrer ce CSS.

Je vais faire ce que je peux pour comprendre par moi même le projet mais je rame grave... Smiley smile
Si quelqu'un peut me passer un coup de pouce...

http://img686.imageshack.us/img686/8024/exemplew.png
Modifié par Heyoan (29 Nov 2009 - 22:05)
Salut,

dans le désordre :

* j'ai supprimé ton code car à moins de connaître osCommerce il est tout simplement incompréhensible. Smiley langue

* j'ai déplacé ton sujet car le CSS seul ne peut pas suffire à régler ton problème.

* je ne sais pas où tu en es de ton avancement mais à ta place je serais plutôt parti sur OsCSS que sur osCommerce.

* il se trouve qu'on m'a demandé de faire exactement la même chose et voilà comment j'ai procédé :

1) dans la page product_listing.php pour chaque produit listé j'ai un lien du type "+ de détails sur ce produit" qui pointe vers product_info.php

2) si le JavaScript est activé je remplace ce lien par un "faux lien" (#data1, #data2, etc.) qui active l'affichage d'une popup via le plugin jQuery fancybox (au départ c'est un élément DIV en display:none).

Bon courage ! Smiley smile
Modifié par Heyoan (29 Nov 2009 - 22:28)
Bonjour Heyoan,

Merci pour la manip' et les info.

Je ne connaissais pas OsCSS.
J'ai été lire des articles sur le sujets. Il y a des avis pour et contre...
Je n'ai pas trop avancé dans mon projet mais je ne me vois pas, au vu de mon peu de connaissances, repartir sur de nouvelles bases...

Concernant jQuery fancybox, j'ai vu d'autres jquery dans cet esprit.
C'est très joli mais ça ne correspond pas à ce que j'attends.
En fait, je voudrais plus simple.

Imaginons sur OSCommerce une série de vignettes, je passe la souris et au passage de la souris, je vois le zoom + le descriptif du produit.
Sans avoir à cliquer ni pour l'ouverture du zoom ni pour sa fermeture...

J'ai commencé à travailler sur une base javascript et ça fonctionne partiellement, très partiellement.
A voir ici:
http://www.oscommerce-fr.info/forum/index.php?showtopic=23540&st=100
Ca passe sous FireFoxe mais c'est pas nickel sous IE7

Voilà le rendu:
upload/18683-effacer.png
Hello,

Oui voici le site: www.gouepita.com
Tu choisis la catégorie "Bagues Coquillage" puis produit "Bagues coquillage avec définition".
Ca fait trois clic...
Tu verras sur l'agrandissement de l'image ce que j'ai mis en place.
J'aimerais que ce popup s'affiche au niveau de la catégorie en onmouseover...
Gros gain de temps.

Je n'ai réussi à le faire qu'en javascript et pas en CSS.
Il faut que je replonge dans mes lectures mais il me semblait que le css était plus sécurisé...

Je suis sur qu'une fois en place, cela sera un contrib qui plaira à beaucoup.
Mais il reste à l'intégrer dans la page liste des produits....

Merci pour ton intérêt.
Modifié par idamarco (30 Nov 2009 - 12:45)
Ben en fait je ne vois pas bien où se situe ton problème : il suffit d'appeler ton script sur le onmouseover des images dans la page Catégories et de fermer la popup sur le onmouseout non ? Smiley hmm
Exact! Smiley smile
Et ça, je ne sais pas faire... Smiley decu

J'ai essayé de remplacer le onclick par onmouseover et ça ne marche pas.
Quand à l'intégrer dans la page liste produit, je ne trouve pas où ...

Edit:
Oups...
En m'y replongeant, je me rends compte que le onclick dont je parle est sur la page produit et non sur la liste.
J'ai vu ça hier à 3 heures de mat...
Sorry

En tout cas, ça révèle bien la charabia que cela represente pour moi! Smiley biggrin
Modifié par idamarco (30 Nov 2009 - 15:25)
Hello,

en fait, le script doit être intégré dans ce bloc probablement, mais je ne sais pas faire...:

 case 'PRODUCT_LIST_IMAGE':
            $lc_align = 'center';
            if (isset($HTTP_GET_VARS['manufacturers_id'])) {
              $lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>';
            } else {
              $lc_text = ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';
            }


Script:
			  
 
<!-- // Modif de popup image //-->
<script language="javascript" type="text/javascript"><!--
 
function popupWindow(url) {
 
 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
 
function popupXL2(of) {
 
var xlContStyle = document.getElementById('xlCont').style
xlContStyle.display='block';
if (of && document.getElementById('xlImg').height > 400) {
 with (xlContStyle) {
  height='400px';
  width=(parseInt(document.getElementById('xlImg').width) + 20) + 'px';
  overflow='auto'
 }
}
}
 
//--></script>
<style type="text/css">
<!--
#xlCont {
display:none;
top:70px;
left:500px;
position:absolute;
background:#B9BAC1;  
border:8px solid #B9BAC1;
z-index:200;
font-size: 10px;
 }
-->
</style>
 
<?php
echo '<a href="javascript:popupXL2(false);">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
<div id="xlCont" style="display:none"><a href="javascript:void(0)" onclick="document.getElementById('xlCont').style.display='none'">
<?php  
echo '<div style="text-align: right;"><img alt="Fermeture" src="/images/perso/bout_ferm.png"></div>';
echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], $width, $height, 'class="infoBox_image" id="xlImg"');
?>
</a>
<?php  echo '<br><div style="text-align: left;">'. $product_info['products_description'].'</div><div style="text-align: right;"><div style="font-size: 14px;">'. $product_info['products_price'].' € </div></div>' ?>
</div>
<?php /* <script language="javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script> */  ?>
<!-- // Fin Modif de popup image //-->
			  
 
idamarco a écrit :
En tout cas, ça révèle bien la charabia que cela represente pour moi! Smiley biggrin

idamarco a écrit :
en fait, le script doit être intégré dans ce bloc probablement, mais je ne sais pas faire...

Euh... ne le prends pas mal si osCommerce c'est du "charabia" pour toi et/ou si tu "ne sais pas faire..." c'est peut-être un peu gonflé/risqué de t'attaquer à un site d'eCommerce ! Smiley rolleyes

A partir du moment où il est question de paiement en ligne et de failles de sécurité potentielles ça n'est pas anodin et il vaudrait mieux être sûr de toi...

Donc en espérant que ce n'est "que" le JavaScript qui te pose problème :

* il semble bien que ce soit ce bloc (j'ai tellement modifié le code de product_listing.php que je n'ai pas le même) et plus précisément la partie dans le else (puisqu'à priori tu ne gères pas les fabricants). Au passage les $HTTP_GET_VARS font vraiment vieillots et il faudrait les remplacer par des $_GET.

* donc via JavaScript (à l'aide d'un addEventListener) il faut appeler ton script popupXL2 sur l'évènement onmouseover de ce lien.
Salut Heyoan,

Pour l'instant, c'est en effet que le javascript qui me pose problème.
Pour le reste, je ne peux pas affirmer que je suis sur de moi.
J'ai consulté les forums oscommerce et ai appliqué les procédures de sécurisation comme indiqué.
J'ai rencontré un pro à qui je vais confié le site une fois réalisé pour qu'il valide le projet (j'ai tracé toutes mes modifs).
C'est tout ce que je peux financer.
J'espère que c'est réaliste...

C'est en effet le code après le else qui est à modifié.
Il faut redéfinir la variable $lc_text en lui passant les info suivantes mais en revoyant la syntaxe...:
edit: ce texte provient du fichier info produit et définie les parametres d'affichage du popup.

<?php 
echo '<a href="javascript:popupXL2(false);">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
<div id="xlCont" style="display:none"><a href="javascript:void(0)" onclick="document.getElementById('xlCont').style.display='none'">
<?php  
echo '<div style="text-align: right;"><img alt="Fermeture" src="/images/perso/bout_ferm.png"></div>';
echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], $width, $height, 'class="infoBox_image" id="xlImg"');
?>
</a>
<?php  echo '<br><div style="text-align: left;">'. $product_info['products_description'].'</div><div style="text-align: right;"><div style="font-size: 14px;">'. $product_info['products_price'].' € </div></div>' ?>
</div>
<?php /* <script language="javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script> */  ?>
<!-- // Fin Modif de popup image //-->

Tu sais le rédiger?

D'autre part, me confirmes tu que cette partie est à mettre dans le header?
<!-- // Modif de popup image //-->
<script language="javascript" type="text/javascript"><!--

function popupWindow(url) {

 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}

function popupXL2(of) {

var xlContStyle = document.getElementById('xlCont').style
xlContStyle.display='block';
if (of && document.getElementById('xlImg').height > 400) {
 with (xlContStyle) {
  height='400px';
  width=(parseInt(document.getElementById('xlImg').width) + 20) + 'px';
  overflow='auto'
 }
}
}

//--></script>
<style type="text/css">
<!--
#xlCont {
display:none;
top:70px;
left:500px;
position:absolute;
background:#B9BAC1;  
border:8px solid #B9BAC1;
z-index:200;
font-size: 10px;
 }
-->
</style>

Modifié par idamarco (01 Dec 2009 - 12:42)
idamarco a écrit :
Tu sais le rédiger?
Ben oui mais le principe de ce forum est d'aider à l'apprentissage : que vas-tu apprendre si je te donne un code tout fait ?

Tu pourrais commencer par lire les 3 articles sur JavaScript de la section Apprendre (notamment Comment bien coder en Javascript qui fournit en supplément de nombreux liens).

idamarco a écrit :
D'autre part, me confirmes tu que cette partie est à mettre dans le header?
Oui pour l'élément STYLE.

Par contre il est préconisé de placer les SCRIPT JavaScript en bas de page.
Comme a dit Oscar Wilde:
"Appuyez vous sur vos principes... Ils finiront bien par céder..." Smiley biggrin

Heyoan, je ne suis pas webmaster.
Une fois ma boutique bouclée je ne développerais plus...
Tu sais, je me tape l'HTML, le PHP, le css, le javascript etc...
Alors je ne suis pas contre un petit coup de pouce.
Si c'est pas trop de travail, ça me ferait gagner un temps que je compte...
Sinon, je m'y mettrai. Smiley cligne
idamarco a écrit :
Comme a dit Oscar Wilde:
"Appuyez vous sur vos principes... Ils finiront bien par céder..." Smiley biggrin
Eh bien merci de sous-entendre que je suis obtus ! Smiley langue

Et pour te prouver que tu as bien raison je continue de penser que ce n'est pas une bonne idée de se lancer dans un site eCommerce en "dilettante" et qu'il faut espérer que tu n'auras pas de mauvaises surprises (même si en l'occurrence le client ne risque pas de se retourner contre toi Smiley smile ).

Quoi qu'il en soit comme ce qui me motive à participer à ce forum est d'aider à apprendre et que tu ne souhaites pas apprendre... et comme en outre je crois que de connaître les bases de JavaScript ne pourrait que t'être bénéfique (non seulement obtus mais pontifiant !) je vais en rester là pour ma part. Smiley cligne
Compris, je vais y mettre le temps...
(violons)
Je vais louper le meilleur moment de l'année pour vendre, c'est à dire Noël mais bon, c'est pas grave...
Je mangerai de patates bouillise au réveillon...
(/violons)
:)
Modifié par idamarco (01 Dec 2009 - 18:03)
Si j'ai bien compris, tu t'es lancé dans le développement d'un site web ecommerce, soit une des catégories de site les plus sensibles:
- sans connaissances ou avec des connaissances limitées en développement web;
- sans connaissances ou avec des connaissances limitées en intégration web.

Cela s'appelle une erreur de stratégie. Si tu n'es pas technicien et n'a pas les ressources pour investir dans un développement de site ecommerce par une agence (à partir de 8k€...), une solution plus adaptée serait de passer par un prestataire qui te propose un système déjà développé, hébergé et maintenu par ses soins, en échange d'un abonnement (mensuel ou annuel), et/ou du paiement d'options pour la personnalisation de la boutique. Pour une petite boutique en ligne c'est le plus raisonnable à l'heure actuelle.

Pour ce type de prestation, Shopify est plutôt réputé mais ce ne sont pas les seuls sur le marché, bien entendu.

PS: en tant qu'utilisateur, à contenu égal, il est probable que je passe plus de temps sur un site Shopify que sur un site osCommerce. L'ergonomie, ça compte.
Modifié par Florent V. (01 Dec 2009 - 19:34)
Salut Florent,

En fait, vous me mettez le doute.
J'ai bcp travaillé sur mon projet, j'ai notamment appliqué les recommandations sécurité.
Ca se trouve mon plus gros problème est de ne pas savoir si tout est bien fait et non pas de ne pas avoir tout bien fait...
Je suis clair? Smiley langue
Au final, j'ai peu modifié le code source d'oscommerce...

J'ai 2 solutions, soit investir pour qu'un pro valide mon projet. J'ai quelqu'un en vu.
Soit en effet utiliser une solution comme celle que vous évoquez et qui serait plus rapide et pas si chère que cela.
En revanche, cela semble être des systèmes fermés.

J'ai fait un petit tour sur le net et en effet Shopify semble une bonne solution.
En revanche, je vois par endroit que c'est gratuit et qu'il y a une retenu de 3% sur les ventes, mais quand je veux m'inscrire ils parlent d'abonnements mensuels...

Sinon, y a t il d'autres prestataire du même niveau?
On parle de kyubi...

Ci dessous, quelques critiques.
J'aimerais bien votre avis la dessus.

Merci pour vos conseils.

Critiques:
Tout d’abord, elle ne contient pas assez d’outils de mesures pour vous aider à prendre des bonnes décisions. L’intégration de Google Analytics est superficielle pour bien comprendre le comportement. Finalement il est impossible de gérer et d’organiser votre base de données clients. Ouch.

Si vous aimez sortir du cadre conventionel d’une boutique en ligne, Shopify ne vous permettra pas les concepts créatifs et fous que vous avez en tête. Il vous sera difficile d’innover dans un cadre aussi inflexible.

Shopify : rien n’a ajouté. J’ai fait un test. Ca semble tres prometteur. De belles competences dans la team internationale jaded Pixel (lire une itw fort interessante), de tres bonne idées… mais c’est en mode ASP. Parfait pour faire une maquette fonctionnelle mais sans aucune garantie pour un site client en production (style : demain ils arrêtent … nous on fait quoi ?)