Panier d'achat site e-commerce

**AProd** · 18/10/2012, 18h33

Bonjour,
Je ne connais pas grand chose en codes html c'est pour cela que je réalise mon site via la plateforme de jimdo. Il est possible via Jimdo d'intégrer des codes html pour adapter ou modifier leurs templates.

J'aurais besoin de votre aide pour corriger un code que j'ai adapté pour mon site e-commerce. Je dispose d'un panier existant (celui de Jimdo) or celui-ci se situe dans la sidebar du bas de mon site sur chacunes des pages.
Le panier n'est donc pas très visible surtout lorsque les pages sont longues.

Je souhaiterais pouvoir déplacer le panier, le disposer dans la sidebar de droite de chacunes des pages et faire en sorte que celui-ci se déplace lorsque la page descend ou monte.

Voici le code que j'ai adapté et qui ne fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fixed Floating Elements</title>
<style>
body {
  color:#616161;
  font-family:"Josefin Sans",Josefin,sans-serif;
  line-height:1.em;
}
 
#cc-sidecart {
  float:left;
  width:188px;
}
 
#cc-sidecart-wrapper {
  position: relative;
}
 
#cc-sidecart-wrapper { /* required to avoid jumping */
  left: 940px;
  position: absolute;
  margin-left: 10px;
  width:280px;
}
 
#cc-sidecart {
  position: absolute;
  top: 0;
  margin-top: 20px;
  margin-bottom 20px
  padding-top: 19px;
}
 
#cc-sidecart ol li:first-child {
  border-top: 0;
}
 
#cc-sidecart.fixed {
  position: fixed;
  top: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#cc-sidecart').offset().top - parseFloat($('#cc-sidecart').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('#cc-sidecart').addClass('fixed');
} else {
// otherwise remove it
$('#cc-sidecart').removeClass('fixed');
}
});
}
}); 
</script>
</head>
<body>
</div>
    <div id="sub_nav">
<div id="cc-sidecart-wrapper"><div id="cc-sidecart">
    </div>
<script type="text/javascript">/* &lt;![CDATA[ */
    jimdoGen002.regModule("sidebar_shoppingcart", {"variant":"default"});
/* ]]&gt; */
</script></div>
  </div>
</body>
</html>

Le panier se situe bien à droite, il est même de la taille de la sidebar mais il reste fixe tout en bas des pages.

Cela fait maintenant plusieurs jours que je réalise des test et des modifications
via firebug mais rien ne fonctionne !

J'espère trouver un peu d'aide ou du moins un peu d'encouragement car tous ces codes finissent par me tourner la tête...
Merci par avance pour votre aide

**AProd** · 19/10/2012, 11h24

Bonjour,

J'ai "presque" réussi à obtenir ce que je souhaite pour mon panier d'achat
J'ai juste un petit souci avec l'emplacement du panier.
Voici l'adresse pour voir le résultat actuel : http://www.arvey-production.fr/produ...s/etalonnages/

Je pense que cela provient des CSS.
Je ne sais malheureusement pas corriger ce petit souci.
Si quelqu'un à une idée...
Les voici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style type="text/css">
/*<![CDATA[*/
 
.body
{
background:url(http://u.jimdo.com/www54/o/layout/lf88a978caace7e23/img/header-bg.png) #525252 0 0 repeat-x;
} 
 
div#container {
    background: none repeat scroll 0 0 #EEEEEE;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
}
 
#cc-sidecart-wrapper {
  position: relative !important;
}
 
#cc-sidecart-wrapper { /* required to avoid jumping */
  left: 930px !important;
  position: fixed !important;
  margin-left: 35px !important;
  width:300px !important;
}
 
#cc-sidecart {
  position: fixed !important;
  top: 0px !important;
  margin-top: 20px !important;
  padding-top: 0px !important;
}
 
#cc-sidecart.fixed {
  position: fixed !important;
  top: 0px !important;
 
}
/*]]>*/
</style>

Merci à tous

Panier d'achat site e-commerce

CSS

Discussions similaires

Partager

Partager