Brutto Preise über Button auf Netto Preise umstellen

[Nicoj]

Hallo, ich erstelle gerade einen Onlineshop über Shopify. Ich werde meine Artikel an Privatkunden, aber auch an Geschäftskunden verkaufen. Ich habe auf einer Website gesehen, dass man über einen Button auswählen kann, ob die Preise als Netto oder Brutto-Preise angezeigt werden. Hier ein Beispielfoto:

 Jetzt wollte ich fragen, wie ich so einen Button auf meiner Website einfüge.

Ich würde mich über hilfreiche Antworten freuen

[Gabe]

Hey @Nicoj 

Erstmals ein herzliches Willkommen auf der Plattform! 

Und hast du einen Link zu dieser Website wo dieser Slider-Button zu sehen ist, der die Preise mit oder ohne MwSt. anzeigen kann? Diesen würde ich gerne in der Chrome Developer Console untersuchen und schauen mit welchen HTML und Javascript dieser Schieberegler gebaut wurde und funzt. Er scheint somit eine eigen-Anpassung zu sein für ein Shop das im Hybrid Stil sowohl B2C als auch B2B Kunden bedient. 

Möchtest du auch beide Kundentypen mit deinem Shop bedienen? Ganz einfach ist es nicht denn B2B Kunden haben ganz andere Konditionen beim Einkaufen und müssen oft eine Steuer ID im Shop eintragen um steuerfrei oder mit Großhandelspreise im Checkout einkaufen zu können und dabei steuerkonform zu sein. Das kann man mit unseren B2B-Handsfree oder Exemptify Apps machen.

Du als Shopinhaber wirst ebenfalls eine komplexere Steuererklärung an das Steueramt abgeben müssen beim Verkauf an B2C und B2B Kunden im selben Shop. Aber wir haben eine Checkliste für den B2B-Setup hier und eine reihe Apps die dir helfen können das in deinem Shop einzurichten. Die Dual Pricing App beispielsweise zeigt beide Preise an wie in dieser Demo.

In der Demo habe ich jetzt in der Developer Console den HTML untersucht und er ist der folgende:

<div class="price__container"><div class="price__regular">
     <span class="visually-hidden visually-hidden--inline">Regular price</span>
     <span class="price-item price-item--regular" style="text-decoration: none;">
       <span class="dualPrice dp_detail" style="display: block;"><span class="secondPrice" style="color:#000000"><span class="secondPriceValue">$248.33</span> <span class="secondPriceLabel">Tax Excl.</span></span><br><span class="firstPrice" style="color: rgb(0, 0, 0); font-size: 12px;"><span class="firstPriceValue">$298.00</span> <span class="firstPriceLabel">Tax Incl.</span></span></span>
     </span>
   </div>
   <div class="price__sale">
       <span class="visually-hidden visually-hidden--inline">Regular price</span>
       <span>
         <s class="price-item price-item--regular">
         </s>
       </span><span class="visually-hidden visually-hidden--inline">Sale price</span>
     <span class="price-item price-item--sale price-item--last">
       
     </span>
   </div>
   <small class="unit-price caption hidden">
     <span class="visually-hidden">Unit price</span>
     <span class="price-item price-item--last">
       <span></span>
       <span aria-hidden="true">/</span>
       <span class="visually-hidden"> per </span>
       <span>
       </span>
     </span>
   </small>
 </div>

Es DIY in deinem Theme Code einbauen - aber mit einem Programmierer

Wenn du es selber auf deiner Produktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Mit diesem Code könnte man einen rechts-links Schieberegler daraus coden und diesen an der selben Stelle wie in der Demo Page anbringen. Um einen Links-Rechts-Schieberegler zu erstellen, der die Preise je nach Position entweder ohne oder mit Mehrwertsteuer anzeigt, musst du die HTML-Struktur ändern und einige JavaScript-Funktionen wie ein .price-toggle-button JS Class verwenden. Die Schritte:

1. HTML - Ändere die Struktur, um den Slider-Button und separate Container für die beiden Preise unterzubringen.
2. CSS - Füge Stile hinzu, um den Slider-Button visuell darzustellen und sein Verhalten zu steuern.
3. JavaScript - Füge eine Logik hinzu, die das Umschalten des Schiebereglers steuert und die Preisansicht entsprechend ändert.

Schritt 1: HTML

Baue einen HTML Code mit der folgenden Struktur ein:

<div class="price__container">
 <div class="price-toggle-container">
   <div class="price-toggle-button"></div>
 </div>
 <div class="price__regular">
   <div class="vat-excl">
     <span class="price-item price-item--regular">
       <span class="secondPriceValue">$248.33</span> <span class="secondPriceLabel">Tax Excl.</span>
     </span>
   </div>
   <div class="vat-incl">
     <span class="price-item price-item--regular">
       <span class="firstPriceValue">$298.00</span> <span class="firstPriceLabel">Tax Incl.</span>
     </span>
   </div>
 </div>
 <!-- ... rest of your code ... -->
</div>

Schritt 2: CSS

Baue einen CSS Code mit der folgenden Struktur ein:

.price-toggle-container {
 width: 60px;
 height: 30px;
 background: #E0E0E0;
 position: relative;
 border-radius: 15px;
 cursor: pointer;
}

.price-toggle-button {
 width: 28px;
 height: 28px;
 background: #FFF;
 position: absolute;
 top: 1px;
 left: 1px;
 border-radius: 50%;
 transition: all 0.3s;
}

.price-toggle-container.active .price-toggle-button {
 left: calc(100% - 29px);
}

.vat-incl, .vat-excl {
 display: none;
}

.vat-excl.active {
 display: block;
}

.price-toggle-container.active .vat-incl {
 display: block;
}

Schritt 3: JavaScript in einer JS Datei einfügen:

document.addEventListener("DOMContentLoaded", function() {
 const toggleContainer = document.querySelector('.price-toggle-container');
 const vatExcl = document.querySelector('.vat-excl');
 const vatIncl = document.querySelector('.vat-incl');

 toggleContainer.addEventListener('click', function() {
   toggleContainer.classList.toggle('active');
   vatExcl.classList.toggle('active');
   vatIncl.classList.toggle('active');
 });
});

Mit solchen Code kannst du das DIY einbauen durch Klicken auf den Schieberegler zwischen den Preisen ohne und mit Mehrwertsteuer umschalten.

---
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.