FROM CACHE - fr_header
RÉSOLU

Réduction automatique visible sur la page produit

Pardoc
Voyageur
13 1 0

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.

1 SOLUTION APPROUVÉE

Pardoc
Voyageur
13 1 0

Succès.

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é <script type="text/javascript"> </script>

 

à 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...

 

Voir la solution dans l'envoi d'origine

5 RÉPONSES 5

Pardoc
Voyageur
13 1 0

Succès.

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é <script type="text/javascript"> </script>

 

à 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...

 

Dalhia
Visiteur
3 0 0

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

Pardoc
Voyageur
13 1 0

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.

Dalhia
Visiteur
3 0 0

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

violaine
Touriste
10 0 1

Bonjour,

 

Je rencontre le même probleme.

Une solution à partager pour le theme DAWN?

 

Merci