Réduction automatique visible sur la page produit

Français Discussions Questions et réponses sur des sujets techniques
1

Bonjour,

Je ne parviens pas à afficher les réductions automatiques ailleurs que sur la page panier. Tout semble indiquer que ce n’est pas possible d’ailleurs, mais je dois trouver une solution. C’est de la folie de ne pas pouvoir afficher sa remise supplémentaire sur la fiche du produit directement.

Je parle bien de réductions automatiques, créés à partir de l’onglet Réductions mais pas de promotions produits créés manuellement (product.compare_at_price_max).

Lorsque l’on créé une réduction automatique avec Shopify celle ci peut être visible sur la page de panier grâce à : cart.items

par exemple :

{% for item in cart.items %}
  {{ item.title }} - ({{ item.quantity }} x
  {% if item.original_line_price > item.final_line_price %}
    <s>{{ item.original_price | money }}</s>
  {% endif %}
  {{ item.final_price | money }}) {{ item.final_line_price | money }}
  {% if item.line_level_discount_allocations.size > 0 %}
    Discounts:
    <ul>
    {% for discount_allocation in item.line_level_discount_allocations %}
      <li>{{ discount_allocation.discount_application.title }}
      -{{ discount_allocation.amount | money }}</li>
    {% endfor %}
    </ul>
  {% endif %}
{% endfor %}

Cet extrait de code fournit par la documentation de Shopify permet d’afficher le prix de base, le prix remisé et la différence.

Le problème de cet extrait c’est qu’il consulte les éléments déjà ajoutés au panier. Donc on ne peut pas l’utiliser directement dans le contexte où l’on souhaite afficher une remise sur un produit qui est en dehors du panier.

Donc concrètement j’ai deux questions :

La première, est ce qu’il existe une application de réduction groupé (similaire au système de réduction automatique de Shopify) capable d’afficher les remises supplémentaires sur la fiche produit.

La deuxième, est ce qu’il est envisageable de simuler l’ajout du produit consulté dans le panier afin de récupérer la promotion automatique et de supprimer cette simulation dans la foulée.

entre temps, avec l’extrait{% for item in cart.items %}puis quelque chose comme if product.sku == item.sku pour juste consulté la/les promotions de la page produit sur laquelle on est, on peut afficher nos réductions automatiques sur la page produit.

Ou est ce qu’il existe la possibilité de récupérer via l’API Shopify les réductions automatiques d’une référence (sku) , tout simplement.

Cette fonction est cruciale pour moi, merci pour votre aide.

2

J’ai finalement trouver une solution pour afficher les remises automatiques sur la fiche produit directement, attention ça ne fonctionne pas avec les produits ayants des variantes, mais j’imagine que ce sera faisable. Je vous montre le code utiliser directement dans mon template produit. Si vous avez des questions contactez - moi. Attention, toutefois cela peut peut être poser des problèmes sur votre boutique, la seule chose que je sais c’est que cela a fonctionné pour moi.

{% assign prixTTC = product.price | times: 1.2 %}
{% if product.compare_at_price_max > 0 %}
  {% assign baseTTC = product.compare_at_price | times: 1.2 %}
  {% assign pourcentage = product.price | times: 1000 | divided_by: product.compare_at_price_max %}
  {% assign pourcentageReduction = 1000 | minus: pourcentage | divided_by: 10 %}
  {% assign eurosReduction = baseTTC | minus: prixTTC %}
{% endif %}
// Auto Discount
      let pvfID = {{ product.variants.first.id }},
          priceShopify = {{ product.price }},
          taxes = 1.2,
            totalValueTTC = 0,
            discounts= [],
            discountAllocation = function (type, title, value, valueType, allocationMethod, targetSelection, targetType, totalAllocatedAmount) {
            this.type = type;
            this.title = title;
            this.value = value;
            this.valueType = valueType;
            this.allocationMethod = allocationMethod;
            this.targetSelection = targetSelection;
            this.targetType = targetType;
            this.totalAllocatedAmount = totalAllocatedAmount;
          },
            pvfIDPOST = function() {
            jQuery.post('/cart/add.js', {quantity: 1, id: pvfID})
          },
            pvfIDREMOVE = function(newQty){
            jQuery.post('/cart/change.js', {quantity: newQty, id: pvfID})
          };
        
        // Check Auto Discount
        function checkAutoDiscount(){
          jQuery.getJSON('/cart.js', function(cart) {      
            for(let i = 0; i < cart.items.length; i++){
              if(pvfID === cart.items[i].id){
                if(cart.items[i].variant_options.length >= 1 ){
                  let currentQty = cart.items[i].quantity;
                  if(cart.items[i].line_level_discount_allocations.length > 0){
                    for(let it = 0; it < cart.items[i].line_level_discount_allocations.length; it++){
                      let currentItem = cart.items[i].line_level_discount_allocations[it].discount_application;                        
                      discounts[it] = new discountAllocation(currentItem.type, currentItem.title, currentItem.value, currentItem.value_type, currentItem.allocation_method, currentItem.target_selection, currentItem.target_type, currentItem.total_allocated_amount);                                                
                    }
                    console.log(cart)
                    showDiscount();
                    pvfIDREMOVE(currentQty-1);
                  }else{
                    console.log('automatic discount : no');
                    pvfIDREMOVE(currentQty-1);
                  }
                }
              }
            }
            
          });        
        }
        
        // Show Auto Discount
        function showDiscount(){
          $('.detail-price .price-sale').fadeOut();
          for(let i = 0; i < discounts.length; i++){
            let value = parseInt(discounts[i].value, 10);
            
            // Remise pourcentage
            if(discounts[i].valueType === 'percentage'){
              let valueTTC = (((priceShopify * value) / 10000)*taxes).toFixed(2);
              $('#product_v2_allDiscountBox').append(
                '<div class="product_v3_badge1">'+
                '<i class="demo-icon icon-electro-cart-icon"></i>'+
                ' '+discounts[i].title+' : -'+value+'%'+'  vous économisez : '+valueTTC+'€'+
                '</div>'
              );
              if($(window).width() < 457 ){
                
                  $('.detail-price').append(
                    '<div class="price-sale" style="color: #5bb300!important">'+
                    ((priceShopify / 100) * taxes - valueTTC).toFixed(2)+'€'+
                    '</div>'
                  );

                  // Product Discount
                  if({{product.compare_at_price_max}} != null ){
                    $('.product_v2_boxContent .product-price').append(
                      '<div class="product_v2_reductionValue" style="background-color: rgb(194, 222, 244);">'+
                      '<div class="sale-text">'+
                      'Remise sur le produit : <strong>-'+{{pourcentageReduction}}+'%</strong>'+
                      '</div>'+
                      '</div>'
                    )
                  }

                  // Cart Discount
                  $('.product_v2_boxContent .product-price').append(
                    '<div class="product_v2_reductionValue" style="background-color: rgb(194, 222, 244);">'+
                      '<div class="sale-text">'+
                          'Offre spéciale : <strong>-'+value+'%</strong>'+
                      '</div>'+
                    '</div>'
                  )
                
              }else{
                $('.product_v2_reduction').append(                       
                  '<div class="product_v2_reductionValue">'+
                    '<div class="sale-text" style="background-color: #5bb300">'+
                      '-'+value+'%'+
                    '</div>'+
                  '</div>'
                );
                $('.detail-price').append(
                  '<div class="price-sale" style="color: #5bb300!important">'+
                      ((priceShopify / 100) * taxes - valueTTC).toFixed(2)+'€ TTC'+
                  '</div>'
                );
              }
              totalValueTTC += valueTTC;
              
            // Remise fixe
            }else{
              let valueTTC = (value * taxes).toFixed(2);
              $('#product_v2_allDiscountBox').append(                         
                '<div class="product_v3_badge1">'+
                '<i class="demo-icon icon-electro-cart-icon"></i>'+
                ' '+discounts[i].title+' : -'+valueTTC+'€ TTC'+
                '</div>'
              );
              if($(window).width() < 457 ){
                $('.detail-price').append(
                  '<div class="price-sale" style="color: #5bb300!important">'+
                  ((priceShopify / 100) * taxes - valueTTC).toFixed(2)+'€'+
                  '</div>'
                );
                // Product Discount
                if({{product.compare_at_price_max}} != null ){
                  $('.product_v2_boxContent .product-price').append(
                    '<div class="product_v2_reductionValue" style="background-color: rgb(194, 222, 244);">'+
                      '<div class="sale-text">'+
                      	'Remise sur le produit : <strong>-'+{{pourcentageReduction}}+'%</strong>'+
                      '</div>'+
                    '</div>'
                  )
                }
                // Cart Discount
                $('.product_v2_boxContent .product-price').append(
                  '<div class="product_v2_reductionValue" style="background-color: rgb(194, 222, 244);">'+
                  '<div class="sale-text" >'+
                  	'Offre spéciale : <strong>-'+value * taxes +'€ TTC</strong>'+
                  '</div>'+
                  '</div>'
                )
              }else{
                $('.product_v2_reduction').append(                       
                  '<div class="product_v2_reductionValue">'+
                  '<div class="sale-text" style="background-color: #5bb300">'+
                  '-'+value+'€'+
                  '</div>'+
                  '</div>'
                );
                $('.detail-price').append(
                  '<div class="price-sale" style="color: #5bb300!important">'+
                  ((priceShopify / 100) * taxes - valueTTC).toFixed(2)+'€ TTC'+
                  '</div>'
                );
              }

              totalValueTTC += valueTTC;
            }
            
            // Add style mobile
            if($(window).width() < 457 && {{product.compare_at_price_max}} != null ){
              for (let ite =0; ite < $('.product_v2_reduction').length; ite++){
                $('.detail-price').css('width','75%');
                $('.detail-price').css('margin','auto');
                $('.detail-price').css('flex-flow','row-reverse');
                $('.product_v2_reduction').css('margin','10px 0');
				$('.price-compare').css('flex','1');
                $('.price-compare s').css('margin','0 5px 3px 5px');
                $('.price-compare s').css('font-size','22px');
                $('.detail-price .product_v2_reductionValue').css('display','none');
                $('.price-sale').css('font-size','30px');
                $('.price-sale').css('flex','1');
              }
            }
          }
        }                                       
        
        // Start checkAutoDiscount if variant is not available
		{% unless variant.available %}
          $.when( pvfIDPOST() ).done(setTimeout (function() {        	
            checkAutoDiscount()
          }, 500 ));
        {% endunless %}

à placer en pied de page dans votre balsise du template produit souhaité

à ce propos toute la partie templating est a adapté à votre modèle, pour cacher l’ancien prix le nouveau et faire toute sorte d’autres choses…

3

Bonjour

j’ai exactement le même problème.

Pouvez vous m’indiquer ou coller le code précisément, car je ne maîtrise pas du tout le codage.

merci beaucoup

4

Bonjour,

Ce code est un javascript, une partie de celui ci pourrait vous aider, mais l’autre partie est lié à mon Template, vous ne pourrez jamais l’utiliser en l’état et je ne pourrais pas vous aider.

De plus, il s’agit d’une modification assez lourde que je vous déconseille d’entreprendre sans connaissance approfondie.

A la place je vous conseil plutôt de demander de l’aide à un développeur ou un expert shopify.

5

Merci pour votre réponse ainsi que votre réactivité

6

Bonjour,

Je rencontre le même probleme.

Une solution à partager pour le theme DAWN?

Merci