Tuto compteur de visites shopify sur une fiche produit et date de la dernière vente

Ce tutoriel va simuler un nombre de visiteurs fictifs (entre 90 et 100) sur une fiche produit ainsi qu’une date format minute de la présumée dernière vente entre 5 et 55mn bref un Tuto compteur de visites shopify !

Voici le résultat obtenu en image :

compteur de visites shopify

Début du Tuto compteur de visites shopify – Installation

1. Rendez vous sur votre administration et cliquez sur « Online thème »

2. Cliquez sur le bouton Action puis Edit HTML et CSS

3. Trouvez le dossier sections et cliquez sur le fichier product-template.liquid

4. Trouvez la zone {{ product.description }} et copier/coller le code ci-dessous :

Si vous souhaitez mettre ce code juste en dessous des images de la colonne de gauche vous devez trouvez selon votre thème l’emplacement adéquat… généralement après une zone de ce type:

{% if product.images.size > 1 %}
<ul class= »product-photo-thumbs grid-uniform » id= »productThumbs-{{ section.id }} »>

{% for image in product.images %}
<li class= »grid-item medium-down–one-quarter large–one-quarter »>
<a href= »{{ image.src | img_url: ‘large’ }} » class= »product-photo-thumb product-photo-thumb-{{ section.id }} » data-image-id= »{{ image.id }} »>
<img src= »{{ image.src | img_url: ‘compact’ }} » alt= »{{ image.alt | escape }} »>
</a>
</li>
{% endfor %}

</ul>
{% endif %}

Code à coller juste après

ATTENTION vous devez en aucun cas le coller à l’intérieur des {{ }} mais avant ou après selon votre envie en sachant que le {{ product.description }} est votre éditeur de texte de votre fiche produit !

<div id="gdvisitorv2"><br />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
<style>
p.fake_counter_p {
text-align: center;
font-size: 16px;
margin-top: 20px;
font-weight: 600;
color: #3c3c3c;
}
span.fake_counter_b {
padding: 2px 0px 2px 5px;
background-color: #ff0b0b;
border-radius: 5px;
margin-right: 5px;
margin-left: 5px;
font-size: 22px;
font-weight: 600;
color: #fffcfc;
position: relative;
font-family: Segment7Standard;
}
.fa-eye, #last_sale{color:#ff0000;}.fa-eye:before{font-size:21px;}
</style>
<script>
jQuery(function($) {
// modifier la variable min pour changer le nombre de visiteurs de départ
var min = 25;
var max = min +2;
$('#dynamic_counter').text(min);
min = Math.ceil(min);
max = Math.floor(max);
var min2 = 25;
var max2 = 85;
min2 = Math.ceil(min2);
max2 = Math.floor(max2);
var sale = Math.floor(Math.random() * (28));
var r = Math.floor(Math.random() * (max - min + 1)) + min;
var inc = '0' ;
var mytimeAgo = ['1', '2','1', '-1','-1'];
var randomlytimeAgo='';
var currentmytimeAgo='';
var plus = ['10', '12', '15'];
var randomlytimeAgo='';
var currentmytimeAgo='';
var range='';
setInterval(function(){
randomlytimeAgo = Math.floor(Math.random() * mytimeAgo.length);
currentmytimeAgo = mytimeAgo[randomlytimeAgo];
r = parseInt(r)+parseInt(currentmytimeAgo);
if(r <=10 ){
range = Math.floor(Math.random() * plus.length);
var final = plus[range];
r=r+final;
}
if(r>300){
range = Math.floor(Math.random() * plus.length);
var final = plus[range];
r=r-final;
}
jQuery("#dynamic_counter").html(r);

}, 6000);
jQuery("#last_sale").html(sale);
});
</script>
<p class="fake_counter_p"><i class='fa fa-eye'></i> Il y a actuellement </span><span class="fake_counter_b"> <b id="dynamic_counter"></b> </span><span><strong>visiteurs sur cette page </strong></span><br />Dernière vente il y à <span id="last_sale"></span>mn</p></div>

5. N’oubliez pas de cliquer sur le bouton save en haut à droite pour valider vos modifications !

PS: Suivez scrupuleusement le tutoriel

Ce code étant une création personnelle je décline toute responsabilité quant au problèmes engendrés ou rencontrés tels qu’une incompatibilité de votre thème ou un conflit entre applications externes

Merci de me contacter pour toute question ou demande particulière en cliquant sur Mon Facebook

35 commentaires sur “Tuto compteur de visites shopify sur une fiche produit et date de la dernière vente

  1. sébastien

    Salut geoffrey, je souhaite mettre ce code mais sans la partie « dernière vente il y a … » car sa va être incohérent avec mon compteur qui baisse toute les 10 secondes . Quelle partie supprimé pour n’avoir que le nombre fictif de visiteurs, merci beaucoup ^^

  2. Guillaume

    Hey ! Salut Goeffrey !

    Dis moi je n’arrive pas à trouvé « {{ product.description }} » mon thème est payant et s’appelle Motion.

    Je te donne ce qu’il y a dans product-template.liquid :

    {% include ‘product-template’,
    image_container_width: section.settings.image_size,
    related: section.settings.related_enable,
    section_id: section.id,
    social: section.settings.social_enable,
    history: true,
    zoom: settings.product_zoom_enable,
    breadcrumbs: settings.show_breadcrumbs
    %}

    {% if collection %}
    {% unless hide_back_section %}
    {%- assign grid_item_width =  » -%}
    {%- assign image_size = ‘1000x’ -%}

    {% if collection.next_product %}
    {%- assign grid_item_width = ‘medium-up–one-half’ -%}
    {%- assign image_size = ‘800x’ -%}
    {% endif %}

    {% if collection.image %}
    {%- assign collection_image = collection -%}
    {% else %}
    {%- assign collection_image = collection.products.first -%}
    {% endif %}

    {% if collection.next_product %}

    {{ ‘products.general.next_product’ | t: title: collection.next_product.title }} {% include ‘icon-arrow-right’ %}

    {% endif %}

    {% include ‘icon-arrow-left’ %} {{ ‘products.general.collection_return’ | t: collection: collection.title }}

    {% if collection.next_product %}

    {{ ‘products.general.next_product’ | t: title: collection.next_product.title }} {% include ‘icon-arrow-right’ %}

    {% endif %}

    {% endunless %}
    {% endif %}

    {% schema %}
    {
    « name »: « Product pages »,
    « settings »: [
    {
    « type »: « select »,
    « id »: « image_size »,
    « label »: « Image size »,
    « default »: « medium »,
    « options »: [
    {
    « value »: « small »,
    « label »: « Small »
    },
    {
    « value »: « medium »,
    « label »: « Medium »
    },
    {
    « value »: « large »,
    « label »: « Large »
    }
    ]
    },
    {
    « type »: « checkbox »,
    « id »: « social_enable »,
    « label »: « Enable social sharing »,
    « default »: true
    },
    {
    « type »: « checkbox »,
    « id »: « related_enable »,
    « label »: « Show related products »,
    « default »: true
    },
    {
    « type »: « range »,
    « id »: « related_count »,
    « label »: « Number of related products »,
    « default »: 4,
    « min »: 2,
    « max »: 5,
    « step »: 1
    }
    ]
    }
    {% endschema %}

    Je te remercie par avance !!

    1. dgeo22

      Bonjour,

      Je ne connais pas ce thème mais il semblerait que ca ne soit pas le bon fichier… essaye de le copier/coller à différent endroit afin de voir ou il s’affiche

  3. Clement

    Bonjour,
    Le code fonctionne bien cependant j’ai constaté un problème ou alors moi qui a fait une mauvaise manip mais en modifiant le minimum et maximum de visiteurs ( var min =10, var max=30 / var min2=1, var max2=15 ) Je me retrouve parfois avec écrit 700 ou 900 visiteurs. Moi je veux que sa affiche un nombre de visite plus modeste que 700, plutôt aux alentours de 10 / 30 visiteurs.
    Merci pour votre aide

    1. dgeo22

      Bonsoir, ca peut arriver si tu as aussi mis mon code de compte à rebours de limite d’une promotion
      Dans ce cas c’est plus complexe, faudra me contacter sur Facebook

      1. Emma

        Salut Geoffrey ,j’ai le même soucis que Clément, j’ai un nombre de visites énorme ! jusqu’à 900 personnes… j’ai aussi le compte à rebours de promotion. Comment puis-je te contacter via facebook? Merci beaucoup
        Emma

      1. Le Marginal Magnifique

        Bonsoir et merci pour la réponse. Où est-ce qu’on peut changer ce chiffre d’origine ? Mais même si on le change, je crains que le problème soit le même : si sur toutes les pages les visiteurs tombent sur le même chiffre d’origine avant que celui-ci ne change, ils vont se dire qu’il y a anguille sous roche. Comment faire ? 🙂

  4. Jean-Luc

    Bonjour Geoffrey,
    Merci pour tous ces super tutos 😉
    Est-il possible de diminuer le random visiteurs ? Le nombre de 150 ou 250 me parait trop élevé pour notre site 🙂
    Merci à toi

  5. Alexis

    Bonjour Geoffrey,

    Merci beaucoup pour ce tuto qui fonctionne très bien.

    Par contre, la police de « Il y a actuellement  » et « sur cette page » est différente. je ne sais pas si ce n’est qu’une impression mais est-il possible de changer l’écriture dans le code ?

    Merci beaucoup

    1. Dgeo Dev

      Bonjour, elle prend automatiquement la police de ton thème, au besoin trouve: p.fake_counter_p et mets dans les propriétés : font-family: »nom de la polie voulue »;

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*